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