rsuite/esm/useFormControl/hooks/useField.js

A suite of react components

'use client';
import get from 'lodash/get';
import set from 'lodash/set';
import { isValidElement, useCallback, useMemo } from 'react';
import { nameToPath } from "../utils/nameToPath.js";
function getErrorMessage(error) {
  if (typeof error === 'string') {
    return error;
  }

  /**
   * When using some components as the field, such as TagInput, and using `ArrayType().of` as the validation rule,
   * the error object won't contain the errorMessage directly. @see https://github.com/rsuite/rsuite/issues/3866
   */
  if (error?.array && error.array?.length > 0) {
    return error.array.find(item => item.hasError)?.errorMessage;
  }
  if (/*#__PURE__*/isValidElement(error)) {
    return error;
  }
  return error?.errorMessage;
}
export function useField(props) {
  const {
    name,
    formValue,
    formError,
    value,
    nestedField,
    errorMessage,
    errorFromContext
  } = props;
  const fieldValue = useMemo(() => {
    if (typeof value !== 'undefined') {
      return value;
    }
    return nestedField ? get(formValue, name) : formValue?.[name];
  }, [formValue, name, nestedField, value]);
  const fieldError = useMemo(() => {
    if (typeof errorMessage !== 'undefined' || !errorFromContext) {
      return errorMessage;
    }
    if (nestedField) {
      return getErrorMessage(get(formError, nameToPath(name)));
    }
    const fieldError = formError?.[name];
    if (typeof fieldError === 'string') {
      return fieldError;
    }
    return getErrorMessage(fieldError);
  }, [errorFromContext, errorMessage, formError, name, nestedField]);
  const setFieldValue = useCallback((fieldName, fieldValue) => {
    if (nestedField) {
      return set({
        ...formValue
      }, fieldName, fieldValue);
    }
    return {
      ...formValue,
      [fieldName]: fieldValue
    };
  }, [formValue, nestedField]);
  return {
    fieldValue,
    fieldError,
    setFieldValue
  };
}