Nine Pounds of Mayonnaise

    @comparaonline/ui-form-fields-next
    TypeScript icon, indicating that this package has built-in type declarations

    3.8.3 • Public • Published

    @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>;

    Keywords

    none

    Install

    npm i @comparaonline/ui-form-fields-next

    DownloadsWeekly Downloads

    227

    Version

    3.8.3

    License

    none

    Unpacked Size

    556 kB

    Total Files

    110

    Last publish

    Collaborators

    • pfariaz
    • ricardo.sosa
    • gnza
    • suarezcumare
    • fverag
    • comparaonline-dev
    • comparaonlineprivate
    • matotias
    • javierlara1989
    • smurua
    • eseceve
    • pablocompara