Function FormField

pkg/webui/components/form/field/index.js:74–228

  names.length > 1 ? setValues(values => merge({}, values, value)) : setFieldValue(name, value)

const FormField = props => {
  const {
    className,
    component: Component,
    decode,
    description,
    descriptionValues,
    disabled: inputDisabled,
    encode,
    fieldWidth,
    name,
    readOnly,
    required,
    title,
    titleChildren,
    tooltip,
    tooltipId,
    warning,
    validate,
    valueSetter,
    onChange,
    onBlur,
    showTitle,
  } = props

  const {
    disabled: formDisabled,
    validateOnBlur,
    setFieldValue,
    setFieldTouched,
    setValues,
    values,
    errors: formErrors,
    registerField,
    unregisterField,
    touched: formTouched,
  } = useFormContext()

  // Generate streamlined `names` variable to handle both composite and simple fields.
  const names = useMemo(() => name.split(','), [name])
  const isCompositeField = names.length > 1

  // Extract field state.
  const errors = compact(at(formErrors, names))
  const touched = at(formTouched, names).some(Boolean)
  const encodedValue = useMemo(
    () => (isCompositeField ? pick(values, names) : get(values, name)),
    [isCompositeField, name, names, values],
  )

  // Register field(s) in formiks internal field registry.
  useEffect(() => {
    for (const name of names) {
      registerField(name, { validate })
    }
    return () => {
      for (const name of names) {
        unregisterField(name)