Compound fields

Using fieldsets, we can create independent groups of fields, allowing us to interact with this group of fields almost like a form, or it can be perceived as lenses.

import { bindField, reatomComponent } from '@reatom/react'
import { reatomField, reatomFieldSet, wrap, throwAbort } from '@reatom/core'

const toNumber = (value: string) => {
  const parsed = Number(value)
  return isNaN(parsed) ? throwAbort() : parsed
}

const reatomMinMaxFieldSet = (name: string) => {
  const min = reatomField(0, {
    name: `${name}.min`,
    fromState: (state) => state.toString(),
    toState: toNumber,
    validate: ({ state }) =>
      state > max() ? 'Min must be less than max' : undefined,
    validateOnBlur: true,
  })

  const max = reatomField(100, {
    name: `${name}.max`,
    fromState: (state) => state.toString(),
    toState: toNumber,
    validate: ({ state }) =>
      state <= 0 ? 'Max must be greater than 0' : undefined,
    validateOnBlur: true,
  })

  return reatomFieldSet({ min, max }, name)
}

Now we can interact with these fields as a single unit, calculating focus and validation states for all fields at once, or even resetting the value of each field with a single call to the reset method.

const minMaxFieldSet = reatomMinMaxFieldSet('minMaxFieldSet')

const Fields = reatomComponent(() => (
  <fieldset>
    <input {...bindField(minMaxFieldSet.fields.min)} />
    <input {...bindField(minMaxFieldSet.fields.max)} />
    {minMaxFieldSet.focus().dirty && (
      <button onClick={wrap(() => minMaxFieldSet.reset())}>Reset</button>
    )}
    {minMaxFieldSet.validation().errors && (
      <span>{minMaxFieldSet.validation().errors[0]?.message}</span>
    )}
  </fieldset>
))