react-bfm/lib/use-connect-field.js

A basic field / form manager for React using hooks

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
exports.__esModule = true;
exports.useConnectField = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = require("react");
var _context = require("./context");
var _helpers = require("./helpers");
var _hooks = require("./field/hooks");
var _excluded = ["validator", "dirtyCheck", "transformValueToInput", "transformEventToValue", "onChange", "onFocus", "onBlur"],
  _excluded2 = ["namespace", "fieldName", "initialValue"];
var useConnectField = exports.useConnectField = function useConnectField(props) {
  var _useContext = (0, _react.useContext)(_context.BFMHooksContext),
    blurField = _useContext.blurField,
    changeField = _useContext.changeField,
    initialValueField = _useContext.initialValueField,
    focusField = _useContext.focusField,
    initField = _useContext.initField,
    removeField = _useContext.removeField;
  var validator = props.validator,
    dirtyCheck = props.dirtyCheck,
    _props$transformValue = props.transformValueToInput,
    transformValueToInput = _props$transformValue === void 0 ? _helpers.defaultValueToInput : _props$transformValue,
    transformEventToValue = props.transformEventToValue,
    onChange = props.onChange,
    onFocus = props.onFocus,
    onBlur = props.onBlur,
    staticProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
  // For storing static props see bellow.
  var propsRef = (0, _react.useRef)(staticProps);
  // Hook specific props.
  var namespace = staticProps.namespace,
    fieldName = staticProps.fieldName,
    initialValue = staticProps.initialValue,
    otherProps = (0, _objectWithoutPropertiesLoose2["default"])(staticProps, _excluded2);
  // Throw an error if namespace and/or fieldName changes after first rendering, because it's not supported
  // Dynamically changing these values can result in strange side effects. It's better to render a new component.
  var namesRef = (0, _react.useRef)({
    namespace: namespace,
    fieldName: fieldName
  });
  (0, _react.useEffect)(function () {
    if (namesRef.current.namespace !== namespace || namesRef.current.fieldName !== fieldName) {
      throw new Error('Changing the namespace and/or fieldName of an already rendered component is not supported.');
    }
  }, [namespace, fieldName]);
  // Store static props for use in the validator callback.
  // This way you can (re-)use for example: required, minlength, maxlength, etc. in the validator
  // eslint-disable-next-line react-hooks/refs -- Intentional: avoid recreating getError on every render
  propsRef.current = staticProps;
  var getError = (0, _react.useCallback)(function (_value) {
    return validator && validator(_value, propsRef.current);
  }, [validator]);
  var value = (0, _hooks.useFieldValue)(namespace, fieldName);
  (0, _react.useEffect)(function () {
    // init field on mount
    initField(namespace, fieldName, initialValue, getError(initialValue));
    // remove field on unmount
    return function () {
      removeField(namespace, fieldName);
    };
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
  // update initialValue on change, see `initialValueField` function for more info
  (0, _react.useEffect)(function () {
    initialValueField(namesRef.current.namespace, namesRef.current.fieldName, initialValue, getError(initialValue));
  }, [initialValueField, getError, initialValue]);
  var handleFocus = (0, _react.useCallback)(function (event) {
    focusField(namesRef.current.namespace, namesRef.current.fieldName);
    if (onFocus) {
      onFocus(event);
    }
  }, [onFocus, focusField]);
  var handleChange = (0, _react.useCallback)(function (arg1, arg2, arg3, arg4, arg5) {
    var value = transformEventToValue ? transformEventToValue(arg1, arg2, arg3, arg4, arg5) : (0, _helpers.defaultEventToValue)(arg1);
    var error = getError(value);
    changeField(namesRef.current.namespace, namesRef.current.fieldName, value, error, dirtyCheck);
    if (onChange) {
      onChange(arg1, arg2, arg3, arg4, arg5);
    }
  }, [transformEventToValue, getError, changeField, dirtyCheck, onChange]);
  var handleBlur = (0, _react.useCallback)(function (event) {
    blurField(namesRef.current.namespace, namesRef.current.fieldName);
    if (onBlur) {
      onBlur(event);
    }
  }, [onBlur, blurField]);
  return (0, _extends2["default"])({}, otherProps, {
    value: transformValueToInput(value),
    onFocus: handleFocus,
    onChange: handleChange,
    onBlur: handleBlur
  });
};