react-formal/esm/Field.js

Classy HTML form management for React

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import PropTypes from 'prop-types';
import React, { useMemo } from 'react';
import useField from './useField';
import notify from './utils/notify';
export function useMergedEventHandlers({
  onBlur: onFieldBlur,
  onChange: onFieldChange
}, {
  onBlur,
  onChange
}) {
  return useMemo(() => ({
    onChange: (...args) => {
      notify(onChange, args);
      notify(onFieldChange, args);
    },
    onBlur: (...args) => {
      notify(onBlur, args);
      notify(onFieldBlur, args);
    }
  }), [onFieldBlur, onFieldChange, onBlur, onChange]);
}

/**
 * When Field renders an Element, it injects a few props.
 * In the case none DOM elements it also injects `meta`
 */

/**
 * @alias Field
 * @memberof Form
 */
const _Field = /*#__PURE__*/React.forwardRef((props, ref) => {
  let {
      children,
      type,
      as: asProp,
      injectMeta,
      name,
      mapFromValue,
      mapToValue,
      validates,
      validateOn,
      value,
      noValidate,
      errorClass,
      className,
      onChange,
      onBlur,
      exclusive = false
    } = props,
    rest = _objectWithoutPropertiesLoose(props, ["children", "type", "as", "injectMeta", "name", "mapFromValue", "mapToValue", "validates", "validateOn", "value", "noValidate", "errorClass", "className", "onChange", "onBlur", "exclusive"]);
  const hasRenderProp = typeof children === 'function';
  const [field, meta] = useField({
    name,
    type,
    // XXX: opt out of inferred props for fn children
    as: asProp || hasRenderProp,
    mapFromValue,
    mapToValue,
    validates,
    validateOn,
    exclusive,
    noValidate,
    errorClass,
    className,
    onChange,
    onBlur,
    value
  });
  let fieldProps = field;
  if (ref) fieldProps.ref = ref;
  if (typeof children === 'function') {
    return children(fieldProps, meta);
  }
  let Input = asProp || meta.nativeTagName;
  if (injectMeta != null ? injectMeta : typeof Input !== 'string') {
    fieldProps.meta = meta;
  }
  return /*#__PURE__*/React.createElement(Input, _extends({}, rest, fieldProps, {
    type: meta.nativeType
  }), children);
});
_Field.displayName = 'Field';
_Field.propTypes = {
  name: PropTypes.string.isRequired,
  as: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string]),
  validateOn: PropTypes.oneOfType([PropTypes.shape({
    change: PropTypes.bool,
    blur: PropTypes.bool
  }), PropTypes.oneOf(['change', 'blur']), PropTypes.func]),
  mapFromValue: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.object]),
  mapToValue: PropTypes.func,
  errorClass: PropTypes.string,
  validates: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
  exclusive: PropTypes.bool,
  noValidate: PropTypes.bool,
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
  injectMeta: PropTypes.bool
};
export default _Field;