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

Just Another React UI Framework

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
require('clsx');
var splitFieldProps = require('../utils/splitFieldProps.js');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(
          n,
          k,
          d.get
            ? d
            : {
                enumerable: true,
                get: function () {
                  return e[k];
                },
              }
        );
      }
    });
  }
  n['default'] = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/ _interopNamespace(React);

function useField(props, innerRef) {
  var _a = tslib.__read(splitFieldProps(props), 2),
    fieldProps = _a[0],
    rest = _a[1];
  // ----
  // Init the Field Ref
  // ----
  var fieldRef = React__namespace.useRef(null);
  // ----
  // Class Management
  // ----
  var addClassesToField = React__namespace.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__namespace.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__namespace.useCallback(
    function () {
      removeClassesFromField('focused');
    },
    [removeClassesFromField]
  );
  var setFieldChanged = React__namespace.useCallback(
    function () {
      addClassesToField('dirty');
    },
    [addClassesToField]
  );
  var setFieldClicked = React__namespace.useCallback(
    function () {
      addClassesToField('touched');
    },
    [addClassesToField]
  );
  var setFieldFocused = React__namespace.useCallback(
    function () {
      addClassesToField('touched', 'focused');
    },
    [addClassesToField]
  );
  var resetField = React__namespace.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,
  };
}

exports.useField = useField;