react-forms-state v1.0.18

react-forms-state

Made with create-react-library

Install

npm install --save react-forms-state

Usage

import {
  Checkbox,
  FormControl,
  FormControlLabel,
  FormHelperText,
  InputLabel,
  MenuItem,
  Select,
  TextField
} from '@material-ui/core'
import { valueDef } from '@recare/core/model/utils/form'
import RSButton from 'ds/components/RSButton'
import { VerticalLayout } from 'ds/materials/layouts'
import { useState } from 'react'
import {
  convertModelDefinition,
  Form,
  FormElement,
  FormWatcher,
  validateModel
} from 'react-forms-state'

export function FormExample() {
  const [submittedValues, setSubmittedValues] = useState()
  const formInputValue = { name: 'Bobby', email: null }
  const modelDefinition = convertModelDefinition({
    ...valueDef('name', {
      defaultValue: formInputValue.name,
      fieldRequired: true
    }),
    ...valueDef('email', {
      defaultValue: formInputValue.name,
      fieldRequired: true
    })
  })
  function handleSubmit(value: any) {
    setSubmittedValues(value)
  }

  return (
    <VerticalLayout width='400px'>
      <VerticalLayout style={{ margin: '0.5em 0' }}>
        <p>Submitted values:</p>
        {JSON.stringify(submittedValues, null, 4)}
      </VerticalLayout>
      <div>
        <hr />
      </div>
      <Form
        validate={validateModel(modelDefinition)}
        onSubmit={handleSubmit}
        formInputValue={formInputValue}
      >
        {({ onChange }) => (
          <>
            <div>
              <FormElement elementName={'name'} onChange={onChange}>
                {({ value, onChange, validation }) => {
                  const isError = typeof validation?.infos === 'string'
                  return (
                    <TextField
                      error={isError}
                      fullWidth
                      helperText={isError ? validation.infos : ''}
                      label='Name'
                      margin='dense'
                      name={'name'}
                      onChange={(e) => onChange(e.target.value)}
                      value={value ?? ''}
                      variant='outlined'
                    />
                  )
                }}
              </FormElement>
            </div>
            <div>
              <FormWatcher watchPath='name'>
                {() => (
                  <FormElement elementName={'email'} onChange={onChange}>
                    {({ value, onChange, validation }) => {
                      const isError = typeof validation?.infos === 'string'
                      return (
                        <TextField
                          error={isError}
                          fullWidth
                          helperText={isError ? validation.infos : ''}
                          label='E-mail'
                          margin='dense'
                          name={'email'}
                          onChange={(e) => onChange(e.target.value)}
                          value={value ?? ''}
                          variant='outlined'
                        />
                      )
                    }}
                  </FormElement>
                )}
              </FormWatcher>
            </div>
            <div style={{ margin: '0.5em 0' }}>
              <RSButton
                type='raised'
                buttonType='submit'
                loading='na'
                color='primary'
                style={{ margin: 0 }}
              >
                Submit
              </RSButton>
            </div>
          </>
        )}
      </Form>
    </VerticalLayout>
  )
}

export function FormExample2() {
  const [submittedValues, setSubmittedValues] = useState()
  const formInputValue = { newsletter: true, fruit: null, cities: null }
  const modelDefinition = convertModelDefinition({
    ...valueDef('newsletter', {
      defaultValue: formInputValue.newsletter,
      fieldRequired: true
    }),
    ...valueDef('fruit', {
      defaultValue: formInputValue.fruit,
      fieldRequired: true
    }),
    ...valueDef('cities', {
      defaultValue: formInputValue.cities,
      fieldRequired: true
    })
  })
  function handleSubmit(value: any) {
    setSubmittedValues(value)
  }
  return (
    <VerticalLayout width='400px'>
      <div>{JSON.stringify(submittedValues, null, 4)}</div>
      <Form
        validate={validateModel(modelDefinition)}
        onSubmit={handleSubmit}
        formInputValue={formInputValue}
      >
        {({ onChange }) => (
          <>
            <div style={{ margin: '0.5em 0' }}>
              <FormElement elementName={'newsletter'} onChange={onChange}>
                {({ value, onChange }) => (
                  <FormControlLabel
                    label='Newsletter'
                    control={
                      <Checkbox
                        onChange={(e) => onChange(e.target.checked)}
                        checked={!!value}
                        name='newsletter'
                      />
                    }
                  />
                )}
              </FormElement>
            </div>
            <div style={{ margin: '0.5em 0' }}>
              <FormElement elementName='fruit' onChange={onChange}>
                {({ value, onChange, validation }) => {
                  const isError = typeof validation?.infos === 'string'
                  return (
                    <FormControl fullWidth variant='outlined' error={isError}>
                      <InputLabel id='demo-simple-select-label'>
                        Fruit
                      </InputLabel>
                      <Select
                        error={isError}
                        fullWidth
                        id='demo-simple-select'
                        label='Fruit'
                        labelId='demo-simple-select-label'
                        onChange={(e) => onChange(e.target.value)}
                        value={value}
                        variant='outlined'
                      >
                        <MenuItem value={'banana'}>Banana</MenuItem>
                        <MenuItem value={'apple'}>Apple</MenuItem>
                        <MenuItem value={'strawberry'}>Strawbery</MenuItem>
                      </Select>
                      <FormHelperText>
                        {isError ? validation.infos : ''}
                      </FormHelperText>
                    </FormControl>
                  )
                }}
              </FormElement>
            </div>
            <div style={{ margin: '0.5em 0' }}>
              <FormElement elementName='cities' onChange={onChange}>
                {({ value, onChange, validation }) => {
                  const isError = typeof validation?.infos === 'string'
                  return (
                    <FormControl fullWidth variant='outlined' error={isError}>
                      <InputLabel id='demo-simple-select-label2'>
                        Cities
                      </InputLabel>
                      <Select
                        error={isError}
                        fullWidth
                        id='demo-simple-select2'
                        label='Cities'
                        labelId='demo-simple-select-label2'
                        onChange={(e) => onChange(e.target.value)}
                        value={value ?? []}
                        variant='outlined'
                        multiple
                      >
                        <MenuItem value={1}>Berlin</MenuItem>
                        <MenuItem value={2}>Paris</MenuItem>
                        <MenuItem value={3}>Milan</MenuItem>
                      </Select>
                      <FormHelperText>
                        {isError ? validation.infos : ''}
                      </FormHelperText>
                    </FormControl>
                  )
                }}
              </FormElement>
            </div>
            <div style={{ margin: '0.5em 0' }}>
              <RSButton
                type='raised'
                buttonType='submit'
                loading='na'
                color='primary'
                style={{ margin: 0 }}
              >
                Submit
              </RSButton>
            </div>
          </>
        )}
      </Form>
    </VerticalLayout>
  )
}

License

MIT © kimskovhusandersen