sbx-form-components

render diferent inputs

Install

npm install --save sbx-form-components

or

yarn add sbx-form-components

Usage

import * as  React from 'react'
import {useState} from 'react'

import Input from 'sbx-form-components/dist'
import "react-datepicker/dist/react-datepicker.css";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faInfoCircle} from "@fortawesome/free-solid-svg-icons";

const options = [
  {label: "CC", value: "cedula ciudadania"},
  {label: "EX", value: "cedula extrangeria"}
];

export default () => {
  const [value, setValue] = useState(null);
  const [error, setError] = useState(false);
  const [startDate, setStartDate] = useState(new Date());
  const [valueSelect, setValueSelect] = useState(null);
  const [valueSmallText, setValueSmallText] = useState("");
  const [valueEmailText, setValueEmailText] = useState("");
  const [valuePassText, setValuePassText] = useState("");
  const [valuePhoneText, setValuePhoneText] = useState("");
  const [valueTimeText, setValueTimeText] = useState("");
  const [valueLargeText, setValueLargeText] = useState("");

  return (
    <div className="col-lg-4 col-md-8 col-12 m-auto">

      <div className="form-group">
        <Input type="TITLE"
               title="title"
               className="text-center"
               description="description"/>
      </div>

      <div className="form-group">
        <Input type="TITLE" label={<div><h3>Custom title</h3></div>}/>
      </div>

      <div className="form-group">
        <Input label="Input identification"
               type="IDENTIFICATION"
               value={value}
               className={error ? "is-invalid" : "is-valid"}
               required
               iconToolTip={<FontAwesomeIcon icon={faInfoCircle}/>}
               infoToolTip="additional info"
               onError={setError}
               labelClassName="css-label"
               errorDescription="data not valid"
               onChange={e => setValue(e.value)} options={options}/>
      </div>

      <div className="form-group">
        <Input required
               label="Input date"
               errorDescription="date not valid"
               type="DATE"
               iconToolTip={<FontAwesomeIcon icon={faInfoCircle}/>}
               infoToolTip="additional info"
               labelClassName="css-label"
               selected={startDate}
               onChange={date => setStartDate(date)}/>
      </div>

      <div className="form-group">
        <Input type="SELECT"
               required
               iconToolTip={<FontAwesomeIcon icon={faInfoCircle}/>}
               infoToolTip="additional info"
               errorDescription="error"
               labelClassName="css-label"
               label="Input select"
               placeholder="here placeholder"
               options={options}
               isMulti
               className="select-is-valid"
               value={valueSelect}
               onChange={e => setValueSelect(e)}/>
      </div>

      <div className="form-group">
        <Input type="SMALL_TEXT"
               required
               onError={e => setError(e)}
               className={error ? "is-invalid" : "is-valid"}
               errorDescription={<p className="text-danger">error</p>}
               iconToolTip={<FontAwesomeIcon icon={faInfoCircle}/>}
               infoToolTip="additional info"
               labelClassName="css-label"
               label="Default input small text"
               placeholder="here placeholder"
               value={valueSmallText}
               onChange={e => setValueSmallText(e.value)}/>
      </div>

      <div className="form-group">
        <Input type="SMALL_TEXT"
               required
               iconToolTip={<FontAwesomeIcon icon={faInfoCircle}/>}
               infoToolTip="additional info"
               errorDescription="error"
               childType="EMAIL"
               labelClassName="css-label"
               label="Input email"
               placeholder="here placeholder"
               value={valueEmailText}
               onChange={e => setValueEmailText(e.value)}/>
      </div>

      <div className="form-group">
        <Input type="SMALL_TEXT"
               required
               iconToolTip={<FontAwesomeIcon icon={faInfoCircle}/>}
               errorDescription="error"
               labelClassName="css-label"
               childType="PASSWORD"
               label="Input password"
               placeholder="here placeholder"
               value={valuePassText}
               onChange={e => setValuePassText(e.value)}/>
      </div>

      <div className="form-group">
        <Input type="SMALL_TEXT"
               required
               iconToolTip={<FontAwesomeIcon icon={faInfoCircle}/>}
               errorDescription="error"
               labelClassName="css-label"
               childType="PHONE"
               label="Input phone"
               placeholder="here placeholder"
               value={valuePhoneText}
               onChange={e => setValuePhoneText(e.value)}/>
      </div>

      <div className="form-group">
        <Input type="SMALL_TEXT"
               required
               iconToolTip={<FontAwesomeIcon icon={faInfoCircle}/>}
               errorDescription="error"
               labelClassName="css-label"
               childType="TIME"
               label="Input time"
               placeholder="here placeholder"
               value={valueTimeText}
               onChange={e => setValueTimeText(e.value)}/>
      </div>

      <div className="form-group">
        <Input type="LARGE_TEXT"
               required
               iconToolTip={<FontAwesomeIcon icon={faInfoCircle}/>}
               className={(error ? " is-invalid " : " is-valid ")}
               labelClassName="css-label"
               label="Input large text"
               placeholder="here placeholder"
               value={valueLargeText}
               onChange={e => setValueLargeText(e.value)}/>
      </div>
    </div>
  )
};

`
.css-label {
  font-family: Aller, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  color: #516176;
}

.form-control {

  font-family: Aller, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 19px;

  color: #516176;
  background: rgba(196, 196, 196, 0.14) !important;
  border-radius: 3px !important;
  border: 1px solid rgba(196, 196, 196, 0.14) !important;
}


.css-custom-select .css-yk16xz-control {
  background: rgba(196, 196, 196, 0.14) !important;
}

.select-is-invalid .css-yk16xz-control {
  border: 2px solid hsla(0, 90%, 70%, 0.38) !important;
  box-shadow: 0 0 0 1px hsla(0, 90%, 70%, 0.41);
  background: rgba(196, 196, 196, 0.14) !important;

}

.select-is-valid .css-yk16xz-control {
  border-color: rgba(196, 196, 196, 0.14) !important;
  background: rgba(196, 196, 196, 0.14) !important;
}

.react-datepicker-wrapper {
  width: 100%;
}

License

MIT © sbx-form-components