@comparaonline/ui-form-fields-next
v3.51.0
Published
## Installation
Downloads
113
Maintainers
Keywords
Readme
@comparaonline/ui-form-fields-next
Installation
yarn add @comparaonline/ui-form-fields-next
Usage
TextField
import { TextField } from '@comparaonline/ui-form-fields-next';
<TextField
label="Text Field Demo"
name="text-field-demo"
placeholder="Demo placeholder"
/>
The only required prop is name
, all the other can be any of the MUI's Text Field props.
RadioGroupField
import { RadioGroupField } from '@comparaonline/ui-form-fields-next';
<RadioGroupField
name="radioGroupDemo"
validate={validateWith(required)}
errorMessage="Error"
helperText="Radio button family"
renderLabel={<span>Demo with emoji 🇨🇱</span>}
options={[
{ label: 'Masculino', value: '99' },
{ label: 'Feminino', value: '100' }
]}
/>
CheckboxField
import { CheckboxField } from '@comparaonline/ui-form-fields-next';
Boolean List
<CheckboxField
name="feature"
validate={validateList}
errorMessage="Error validating the Check List"
helperText="Boolean approach"
renderLabel={<span>Checkbox Field List ✅</span>}
options={[
{ name: 'feature.a', label: 'A' },
{ name: 'feature.b', label: 'B' },
{ name: 'feature.c', label: 'C' },
{ name: 'feature.d', label: 'D' }
]}
/>
This will create a value like this
{
"feature": {
"a": true,
"d": true
}
}
Values Array
<CheckboxField
name="feature"
validate={validateList}
errorMessage="Error validating the Check List"
helperText="Boolean approach"
renderLabel={<span>Checkbox Field List ✅</span>}
options={[
{ name: 'feature', label: 'A', value: 'A' },
{ name: 'feature', label: 'B', value: 'B' },
{ name: 'feature', label: 'C', value: 'C' },
{ name: 'feature', label: 'D', value: 'D' }
]}
/>
This will create a value like this
{
"feature": [
"D",
"B"
]
}
Input Listener
The input listener actually renders a Field
component from react-final-form with the same input name that the field that we want to change and uses the onChange
function to update its value.
import { Form } from 'react-final-form';
import { TextField } from '@comparaonline/ui-form-fields-next';
import { InputListener } from '@comparaonline/ui-input-listener';
const onSubmit = () => undefined;
<Form onSubmit={onSubmit}>
{({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<TextField
name="inputA"
label="Placa"
/>
<TextField
name="inputB"
label="Placa"
/>
<InputListener field="inputA" when={value => value === 'foo'} set="inputB" to={new Promise(resolve => resolve('new value'))} />
</form>}
</Form>;