react-jsonschema-form-validation/dist/FieldError/FieldError.js

Simple form validation using JSON Schema and AJV

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import classnames from 'classnames';
import memoize from 'memoize-one';
import React, { PureComponent } from 'react';
import { withFormContext } from '../Form/Context';
import getErrorMessage from './getErrorMessage';

var FieldError =
/*#__PURE__*/
function (_PureComponent) {
  _inherits(FieldError, _PureComponent);

  function FieldError() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, FieldError);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(FieldError)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _this.memoGetClassnames = memoize(function (className, isSubmitted, isTouched) {
      return classnames('Jfv_FieldError', className, {
        isSubmitted: isSubmitted,
        isTouched: isTouched
      });
    });
    _this.memoGetFieldErrorMessage = memoize(function (error, formErrorMessages, fieldErrorMessages) {
      var errorMessages = _objectSpread({}, formErrorMessages, {}, fieldErrorMessages);

      return getErrorMessage(error, errorMessages);
    });

    _this.getClassnames = function (form) {
      var _this$props = _this.props,
          className = _this$props.className,
          name = _this$props.name;
      var isFieldTouched = form.isFieldTouched,
          isSubmitted = form.isSubmitted;
      return _this.memoGetClassnames(className, isSubmitted, isFieldTouched(name));
    };

    _this.getFieldErrorMessage = function (error, form) {
      var fieldErrorMessages = _this.props.errorMessages;
      var formErrorMessages = form.errorMessages;
      return _this.memoGetFieldErrorMessage(error, formErrorMessages, fieldErrorMessages);
    };

    return _this;
  }

  _createClass(FieldError, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props2 = this.props,
          children = _this$props2.children,
          className = _this$props2.className,
          Component = _this$props2.component,
          errorMessages = _this$props2.errorMessages,
          name = _this$props2.name,
          props = _objectWithoutProperties(_this$props2, ["children", "className", "component", "errorMessages", "name"]);

      return withFormContext(function (form) {
        var fieldErrors = form.getFieldErrors(name);
        if (!fieldErrors.length) return null;
        return React.createElement(Component, Object.assign({
          className: _this2.getClassnames(form)
        }, props), children || _this2.getFieldErrorMessage(fieldErrors[0], form));
      });
    }
  }]);

  return FieldError;
}(PureComponent);

FieldError.defaultProps = {
  children: null,
  component: 'div',
  errorMessages: null,
  className: ''
};
export default FieldError;