@appbuckets/react-ui-forms/utils/createHookedField.js

An utilities package to manage and create Form using AppBuckets ReactUI

'use strict';

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

var _tslib = require('../_virtual/_tslib.js');
var React = require('react');
var getValue = require('get-value');
var reactUiCore = require('@appbuckets/react-ui-core');
var reactHookForm = require('react-hook-form');
var HookedForm_context = require('../context/HookedForm.context.js');

function _interopDefaultLegacy(e) {
  return e && typeof e === 'object' && 'default' in e ? e : { default: e };
}

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);
var getValue__default = /*#__PURE__*/ _interopDefaultLegacy(getValue);

/* --------
 * HookedForm Field Wrapper
 * -------- */
function createHookedField(options) {
  // ----
  // Deconstruct Options
  // ----
  var Component = options.Component,
    defaultProps = options.defaultProps,
    displayName = options.displayName,
    formatValue = options.formatValue,
    overrideProps = options.overrideProps,
    parseValue = options.parseValue,
    globalValidationRules = options.validation;
  // ----
  // Component Definition
  // ----
  var HookedField = React__namespace.forwardRef(function (receivedProps, ref) {
    var _a;
    var props = _tslib.__assign(
      _tslib.__assign({}, receivedProps),
      overrideProps
    );
    /** Get render props, merging with overrideProps */
    var name = props.name,
      _b = props.getErrorOnSubmitted,
      localGetErrorOnSubmitted = _b === void 0 ? true : _b,
      _c = props.getErrorOnTouched,
      localGetErrorOnTouched = _c === void 0 ? false : _c,
      userDefinedBlurHandler = props.onBlur,
      userDefinedChangeHandler = props.onChange,
      localValidationRules = props.validation,
      componentRestProps = _tslib.__rest(props, [
        'name',
        'getErrorOnSubmitted',
        'getErrorOnTouched',
        'onBlur',
        'onChange',
        'validation',
      ]);
    // ----
    // Get Controller
    // ----
    var _d = HookedForm_context.useHookedFormContext(),
      control = _d.control,
      defaultValues = _d.defaultValues,
      triggerFieldChanged = _d.triggerFieldChanged;
    var _e = reactHookForm.useController({
        name: name,
        control: control,
        rules: _tslib.__assign(
          _tslib.__assign({}, globalValidationRules),
          localValidationRules
        ),
      }),
      _f = _e.field,
      fieldRef = _f.ref,
      hookFormBlurHandler = _f.onBlur,
      hookFormChangeHandler = _f.onChange,
      value = _f.value,
      formState = _e.formState,
      fieldState = _e.fieldState;
    // ----
    // Assert on Component Mount that a default value exists
    // ----
    reactUiCore.useEnhancedEffect(
      function () {
        /** If default value has not been declared, abort */
        if (typeof defaultValues !== 'object' || defaultValues === null) {
          return;
        }
        /** Check default value for field */
        if (process.env.NODE_ENV !== 'production') {
          var defaultValue = getValue__default['default'](defaultValues, name);
          if (defaultValue === undefined) {
            global.console.warn(
              'Pay Attention : Default value for field ' +
                "'".concat(
                  name,
                  "' has not been set, it is resolved to undefined."
                )
            );
          }
        }
      },
      // This hooks must be run only once
      // eslint-disable-next-line react-hooks/exhaustive-deps
      []
    );
    // ----
    // Build Field Meta
    // ----
    var showError =
      (localGetErrorOnTouched && fieldState.isTouched) ||
      (localGetErrorOnSubmitted && formState.submitCount > 0);
    var hasError = (showError && fieldState.invalid) || props.danger;
    // Field state data must passed directly
    // because are plain getter and cannot be
    // enumerated, spread won't work here
    var meta = {
      invalid: fieldState.invalid,
      isTouched: fieldState.isTouched,
      isDirty: fieldState.isDirty,
      error: fieldState.error,
      appearance: {
        appearance: !hasError ? props.appearance : undefined,
        danger: hasError,
        info: !hasError && props.info,
        primary: !hasError && props.primary,
        secondary: !hasError && props.secondary,
        success: !hasError && props.success,
        warning: !hasError && props.warning,
      },
      isSubmitting: !!formState.isSubmitting,
      message:
        (hasError &&
          ((_a = fieldState.error) === null || _a === void 0
            ? void 0
            : _a.message)) ||
        props.message ||
        props.hint,
    };
    // ----
    // Handlers
    // ----
    var handleRef = reactUiCore.useForkRef(ref, fieldRef);
    var handleBlur = function () {
      var args = [];
      for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
      }
      /** Invoke the userDefined Blur handler */
      if (typeof userDefinedBlurHandler === 'function') {
        userDefinedBlurHandler.apply(
          void 0,
          _tslib.__spreadArray([], _tslib.__read(args), false)
        );
      }
      /** Invoke the hook-form onBlur handler */
      hookFormBlurHandler();
    };
    var handleChange = function (e, componentProps) {
      /** If a value parser exists, use it */
      var referenceValue =
        typeof parseValue === 'function'
          ? parseValue({
              event: e,
              props: componentProps,
              name: name,
              meta: meta,
            })
          : e;
      /** Invoke the userDefined Change handler */
      if (typeof userDefinedChangeHandler === 'function') {
        userDefinedChangeHandler(e, componentProps);
      }
      /** Invoke the hook-form onChange handler */
      hookFormChangeHandler(referenceValue);
    };
    // ----
    // Reformat field value, if a formatter exists
    // ----
    var formattedValue =
      typeof formatValue === 'function' ? formatValue(value, props) : value;
    // ----
    // Register an effect to trigger field change every time formatted value changed
    // ----
    React__namespace.useEffect(
      function () {
        triggerFieldChanged(name, formattedValue);
      },
      [formattedValue, name, triggerFieldChanged]
    );
    // ----
    // Component Render
    // ----
    return React__namespace.createElement(Component, {
      innerRef: handleRef,
      meta: meta,
      formState: formState,
      rest: _tslib.__assign(_tslib.__assign({}, componentRestProps), {
        onBlur: handleBlur,
        onChange: handleChange,
        value: formattedValue,
        name: name,
      }),
    });
  });
  // ----
  // Apply Defaults and DisplayName
  // ----
  HookedField.displayName = displayName || 'HookedField';
  HookedField.defaultProps = defaultProps;
  return HookedField;
}

exports.createHookedField = createHookedField;