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 = 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)({});
  // 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
  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(namespace, fieldName, initialValue, getError(initialValue));
  }, [initialValueField, fieldName, getError, initialValue, namespace]);
  var handleFocus = (0, _react.useCallback)(function (event) {
    focusField(namespace, fieldName);
    onFocus && onFocus(event);
  }, [fieldName, namespace, 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(namespace, fieldName, value, error, dirtyCheck);
    onChange && onChange(arg1, arg2, arg3, arg4, arg5);
  }, [transformEventToValue, getError, changeField, namespace, fieldName, dirtyCheck, onChange]);
  var handleBlur = (0, _react.useCallback)(function (event) {
    blurField(namespace, fieldName);
    onBlur && onBlur(event);
  }, [fieldName, namespace, onBlur, blurField]);
  return (0, _extends2["default"])({}, otherProps, {
    value: transformValueToInput(value),
    onFocus: handleFocus,
    onChange: handleChange,
    onBlur: handleBlur
  });
};
exports.useConnectField = useConnectField;