@appbuckets/react-ui/esm/hooks/useField.js

Just Another React UI Framework

import { __read } from 'tslib';
import * as React from 'react';
import 'clsx';
import splitFieldProps from '../utils/splitFieldProps.js';

function useField(props, innerRef) {
  var _a = __read(splitFieldProps(props), 2),
    fieldProps = _a[0],
    rest = _a[1];
  // ----
  // Init the Field Ref
  // ----
  var fieldRef = React.useRef(null);
  // ----
  // Class Management
  // ----
  var addClassesToField = React.useCallback(
    function () {
      var classesToAdd = [];
      for (var _i = 0; _i < arguments.length; _i++) {
        classesToAdd[_i] = arguments[_i];
      }
      classesToAdd.forEach(function (cx) {
        if (fieldRef.current) {
          fieldRef.current.classList.add(cx);
        }
        if (
          innerRef === null || innerRef === void 0 ? void 0 : innerRef.current
        ) {
          innerRef === null || innerRef === void 0
            ? void 0
            : innerRef.current.classList.add(cx);
        }
      });
    },
    [innerRef]
  );
  var removeClassesFromField = React.useCallback(
    function () {
      var classesToRemove = [];
      for (var _i = 0; _i < arguments.length; _i++) {
        classesToRemove[_i] = arguments[_i];
      }
      classesToRemove.forEach(function (cx) {
        if (fieldRef.current) {
          fieldRef.current.classList.remove(cx);
        }
        if (
          innerRef === null || innerRef === void 0 ? void 0 : innerRef.current
        ) {
          innerRef === null || innerRef === void 0
            ? void 0
            : innerRef.current.classList.remove(cx);
        }
      });
    },
    [innerRef]
  );
  // ----
  // Handlers
  // ----
  var setFieldBlurred = React.useCallback(
    function () {
      removeClassesFromField('focused');
    },
    [removeClassesFromField]
  );
  var setFieldChanged = React.useCallback(
    function () {
      addClassesToField('dirty');
    },
    [addClassesToField]
  );
  var setFieldClicked = React.useCallback(
    function () {
      addClassesToField('touched');
    },
    [addClassesToField]
  );
  var setFieldFocused = React.useCallback(
    function () {
      addClassesToField('touched', 'focused');
    },
    [addClassesToField]
  );
  var resetField = React.useCallback(
    function () {
      removeClassesFromField('focused', 'dirty', 'touched');
    },
    [removeClassesFromField]
  );
  // ----
  // Return tools
  // ----
  return {
    addClassesToField: addClassesToField,
    fieldProps: fieldProps,
    fieldRef: fieldRef,
    removeClassesFromField: removeClassesFromField,
    rest: rest,
    setFieldBlurred: setFieldBlurred,
    setFieldChanged: setFieldChanged,
    setFieldClicked: setFieldClicked,
    setFieldFocused: setFieldFocused,
    resetField: resetField,
  };
}

export { useField };