sbx-ui-input-library
render diferent inputs
Install
npm install --save sbx-ui-input-libraryor
yarn add sbx-ui-input-libraryUsage
import * as React from 'react';
import {useEffect, useState} from 'react';
import 'react-dates/lib/css/_datepicker.css';
import {
CheckboxComponent,
CurrencyComponent,
DateComponent,
DateRangeComponent,
DocumentComponent,
EmailComponent,
FormGroupComponent,
LabelComponent,
LargeTextComponent,
MultiFileComponent,
MultiSelectComponent,
NumberComponent,
PasswordComponent,
PhoneComponent,
RadioButtonComponent,
SelectComponent,
SingleFileComponent,
SmallTextComponent,
TableComponent,
TimeComponent
} from "sbx-ui-input-library";
import "sbx-ui-input-library/index.css";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faEdit, faInfoCircle, faTrash} from "@fortawesome/free-solid-svg-icons";
import {FormGroup} from "reactstrap";
const options = [
{label: "CC", value: "cedula ciudadania"},
{label: "EX", value: "cedula extrangeria"}
];
const fields = [
// {
// sub_type: "TIME",
// single_value: true,
// field_type: "SMALL_TEXT",
// id: 1,
// name: "time",
// required: true,
// label: "Time label"
// },
{
sub_type: 'CURRENCY',
single_value: true,
field_type: 'SMALL_TEXT',
id: 2,
name: "currency",
required: true,
label: "Currency label"
},
{
sub_type: 'TOGGLE',
single_value: true,
field_type: 'OPTIONS',
id: 80,
name: "toggle",
options,
required: true,
label: "toggle label"
},
// {
// sub_type: 'DOCUMENT',
// single_value: true,
// field_type: "SMALL_TEXT",
// id: 3,
// required: true,
// name: "document",
// label: "Document label"
// },
// {
// field_type: 'DATE',
// single_value: true,
// id: 14,
// required: true,
// name: "date",
// label: "Date label"
// },
// {
// field_type: 'DATE_RANGE',
// single_value: true,
// id: 19,
// required: true,
// name: "date",
// label: "Date range label"
// },
// {
// sub_type: 'NUMBER',
// field_type: "SMALL_TEXT",
// single_value: true,
// id: 4,
// required: true,
// name: "number",
// label: "Number label"
// },
// {
// sub_type: 'PASSWORD',
// field_type: "SMALL_TEXT",
// id: 5,
// required: true,
// single_value: true,
// name: "password",
// label: "Password label"
// },
// {
// sub_type: 'EMAIL',
// field_type: 'SMALL_TEXT',
// single_value: true,
// id: 6,
// required: true,
// name: "email",
// label: "Email label"
// },
{
sub_type: 'PHONE',
field_type: 'SMALL_TEXT',
single_value: true,
id: 7,
required: true,
name: "phone",
label: "Phone label"
},
// {
// sub_type: 'SELECT',
// field_type: 'OPTIONS',
// id: 8,
// required: true,
// name: "multi_select",
// single_value: false,
// options,
// label: "Multi select label"
// },
// {
// sub_type: 'SELECT',
// field_type: 'OPTIONS',
// id: 9,
// required: true,
// name: "select",
// single_value: true,
// options,
// label: "Select label"
// },
// {
// field_type: "SMALL_TEXT",
// id: 10,
// required: true,
// single_value: true,
// name: "small_text",
// label: "small text label"
// },
// {
// field_type: 'LARGE_TEXT',
// id: 11,
// required: true,
// single_value: true,
// name: "large_text",
// label: "Large text label"
// },
// {
// field_type: 'FILE',
// single_value: true,
// id: 12,
// required: true,
// name: "file",
// label: "File label"
// },
// {
// field_type: 'FILE',
// single_value: false,
// id: 13,
// required: true,
// name: "multi_file",
// label: "Multi file label"
// },
]
export default () => {
const [showALl] = useState(false);
const [valueCurrency, setValueCurrency] = useState("");
const [valueDate, setValueDate] = useState(new Date());
const [valueDocument, setValueDocument] = useState("");
const [valueEmail, setValueEmail] = useState("");
const [valueLargeText, setValueLargeText] = useState("");
const [valueMultiFile, setValueMultiFile] = useState(null);
const [valueMultiSelect, setValueMultiSelect] = useState(null);
const [valueNumber, setValueNumber] = useState(0);
const [valuePassword, setValuePassword] = useState('');
const [valuePhone, setValuePhone] = useState("");
const [valueSelect, setValueSelect] = useState(null);
const [valueSingleFile, setValueSingleFile] = useState(null);
const [valueSmallText, setValueSmallText] = useState("");
const [valueTime, setValueTime] = useState("");
const [tableValues, setTableValues] = useState({});
const [valueRange, setValueRange] = useState({start: new Date(), end: null});
const [valueContainer, setValueContainer] = useState({});
const [checkboxValue, setCheckboxValue] = useState(null);
const [radioValue, setRadioValue] = useState(null);
useEffect(() => console.log("result => ", radioValue), [radioValue]);
return (
<form onSubmit={e => {
e.preventDefault();
}}>
<div className="container pt-5">
{showALl && <div className="col-lg-5 col-md-8 col-12 m-auto">
<div className="form-group">
<LabelComponent>Range component label</LabelComponent>
<DateRangeComponent
value={valueRange}
required
onChange={date => setValueRange(date)}
/>
</div>
<FormGroup>
<LabelComponent>Label checkbox</LabelComponent>
<CheckboxComponent required
id={1}
value={checkboxValue}
options={options}
onChange={setCheckboxValue}
/>
</FormGroup>
<FormGroup>
<LabelComponent>Label checkbox</LabelComponent>
<RadioButtonComponent required
id={2}
value={radioValue}
options={options}
onChange={setRadioValue}
/>
</FormGroup>
<div className="form-group">
<LabelComponent inputId="date_input">Date Input</LabelComponent>
<DateComponent required
value={valueDate}
onChange={date => setValueDate(date)}/>
</div>
<div className="form-group">
<FormGroupComponent
fields={fields}
count={4}
value={valueContainer}
onChange={setValueContainer}
/>
</div>
<div className="form-group">
<LabelComponent>Table component label</LabelComponent>
<TableComponent value={tableValues}
subType=""
iconDelete={<FontAwesomeIcon icon={faTrash}/>}
iconEdit={<FontAwesomeIcon icon={faEdit}/>}
format_rules_definition={{columns: ["toggle", "phone"]}}
onChange={setTableValues}
fields={fields}/>
</div>
<div className="form-group">
<LabelComponent inputId="small_text_currency">Currency Input</LabelComponent>
<CurrencyComponent id="small_text_currency"
name="small_text_currency"
value={valueCurrency}
placeholder="here placeholder currency"
onChange={value => setValueCurrency(value)}/>
</div>
<div className="form-group">
<LabelComponent inputId="small_text_document">Document Input</LabelComponent>
<DocumentComponent id="small_text_document"
name="small_text_document"
value={valueDocument}
placeholder="here placeholder document"
onChange={value => setValueDocument(value)}/>
</div>
<div className="form-group">
<LabelComponent inputId="small_text_email">Email Input</LabelComponent>
<EmailComponent id="small_text_email"
name="small_text_email"
value={valueEmail}
placeholder="here placeholder email"
onChange={value => setValueEmail(value)}/>
</div>
<div className="form-group">
<LabelComponent inputId="large_text_default">Large Text Input</LabelComponent>
<LargeTextComponent id="large_text_default"
name="large_text_default"
value={valueLargeText}
placeholder="here placeholder large text"
onChange={value => setValueLargeText(value)}/>
</div>
<div className="form-group">
<LabelComponent inputId="multi_file">Multi File Input</LabelComponent>
<MultiFileComponent value={valueMultiFile}
onChange={setValueMultiFile}
onDropRejected={() => {
}}/>
</div>
<div className="form-group">
<LabelComponent inputId="multi_select_input">Multi Select Input</LabelComponent>
<MultiSelectComponent id="multi_select_input" name="multi_select_input"
options={options}
value={valueMultiSelect}
placeholder="here placeholder multi select"
onChange={e => setValueMultiSelect(e)}/>
</div>
<div className="form-group">
<LabelComponent inputId="number_input">Number Input</LabelComponent>
<NumberComponent id="number_input"
name="number_input"
value={valueNumber}
placeholder="here placeholder number"
onChange={value => setValueNumber(value)}/>
</div>
<div className="form-group">
<LabelComponent inputId="small_text_password"
iconToolTip={<FontAwesomeIcon icon={faInfoCircle}/>}
className="css-label">
Password Input
</LabelComponent>
<PasswordComponent id="small_text_password"
name="small_text_password"
value={valuePassword}
placeholder="here placeholder password"
onChange={value => setValuePassword(value)}/>
</div>
<div className="form-group">
<LabelComponent inputId="small_text_phone">Phone Input</LabelComponent>
<PhoneComponent id="small_text_phone"
name="small_text_phone"
value={valuePhone}
placeholder="here placeholder phone"
onChange={value => setValuePhone(value)}/>
</div>
<div className="form-group">
<LabelComponent inputId="select_input">Select Input</LabelComponent>
<SelectComponent id="select_input" name="select_input"
options={options}
required
value={valueSelect}
placeholder="here placeholder select"
onChange={e => setValueSelect(e)}/>
</div>
<div className="form-group">
<LabelComponent inputId="file_default">Single File Input</LabelComponent>
<SingleFileComponent value={valueSingleFile}
onChange={setValueSingleFile}
onDropRejected={() => {
}}/>
</div>
<div className="form-group">
<LabelComponent inputId="small_text_default">Small Text Input</LabelComponent>
<SmallTextComponent id="small_text_default"
name="small_text_default"
required
value={valueSmallText}
placeholder="here placeholder default"
onChange={value => setValueSmallText(value)}/>
</div>
<div className="form-group">
<LabelComponent inputId="small_text_time">Time Input</LabelComponent>
<TimeComponent id="small_text_time"
name="small_text_time"
value={valueTime}
placeholder="here placeholder time"
onChange={value => setValueTime(value)}/>
</div>
</div>}
{!showALl && (
<div className="form-group">
<LabelComponent inputId="small_text_time">Time Input</LabelComponent>
<TimeComponent id="small_text_time"
name="small_text_time"
value={valueTime}
required
placeholder="here placeholder time"
onChange={value => setValueTime(value)}/>
</div>
)}
<button className="btn-primary btn btn-block">Validar formulario</button>
</div>
</form>
)
};License
MIT © sbx-ui-input-library