wlan-cloud-ucentral-ui-libs/src/hooks/useFormFields/index.js

import { useState } from 'react';
import { set as lodashSet, get as lodashGet } from 'lodash';

const hasError = (e, field) => {
  if (field.type && field.type === 'int') {
    if (e.target.value.length === 0 || e.target.value === '-') return `This field cannot be empty`;
    if (field.minimum !== undefined && e.target.value < field.minimum)
      return `This field has a minimum value of ${field.minimum}`;
    if (field.maximum !== undefined && e.target.value > field.maximum)
      return `This field has a maximum value of ${field.maximum}`;
  } else if (field.type && field.type === 'string') {
    if (field.minLength && e.target.value.length < field.minLength)
      return `This field has a minimum length of ${field.minLength}`;
    if (field.maxLength && e.target.value.length > field.maxLength)
      return `This field has a maximum length of ${field.maxLength}`;
  }
  return null;
};

export default (initialState) => {
  const [fields, setFields] = useState(initialState);

  return [
    fields,
    (e) => {
      const field = lodashGet(fields, e.target.id);
      if (field.regex === undefined || e.target.value === '' || e.target.value.match(field.regex)) {
        const error = hasError(e, field);
        const newFields = { ...fields };

        lodashSet(newFields, e.target.id, {
          ...field,
          value: e.target.value,
          error: error !== null,
          errorMessage: error ?? undefined,
        });
        setFields({ ...newFields });
      }
    },
    (field, newValues) => {
      const oldField = lodashGet(fields, field);
      const newField = { ...oldField, ...newValues };
      const newFields = { ...fields };
      lodashSet(newFields, field, newField);
      setFields({ ...newFields });
    },
    (formFields, force = false) => {
      if (JSON.stringify(formFields) !== JSON.stringify(fields)) {
        setFields({ ...formFields });
      } else if (force) setFields({ ...formFields });
    },
    (fieldsList) => {
      const newFields = { ...fields };

      fieldsList.forEach((field) => {
        const oldField = lodashGet(newFields, field.id);
        lodashSet(newFields, field.id, { ...oldField, value: field.value });
      });

      setFields({ ...newFields });
    },
  ];
};