linkmore-design/lib/form/ErrorList.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ErrorList;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classnames = _interopRequireDefault(require("classnames"));
var _rcMotion = _interopRequireWildcard(require("rc-motion"));
var React = _interopRequireWildcard(require("react"));
var _configProvider = require("../config-provider");
var _motion = _interopRequireDefault(require("../_util/motion"));
var _context = require("./context");
var _useDebounce = _interopRequireDefault(require("./hooks/useDebounce"));
const EMPTY_LIST = [];
function toErrorEntity(error, errorStatus, prefix, index = 0) {
  return {
    key: typeof error === 'string' ? error : `${prefix}-${index}`,
    error,
    errorStatus
  };
}
function ErrorList({
  help,
  helpStatus,
  errors = EMPTY_LIST,
  warnings = EMPTY_LIST,
  className: rootClassName,
  fieldId,
  onVisibleChanged
}) {
  const {
    prefixCls
  } = React.useContext(_context.FormItemPrefixContext);
  const {
    getPrefixCls
  } = React.useContext(_configProvider.ConfigContext);
  const baseClassName = `${prefixCls}-item-explain`;
  const rootPrefixCls = getPrefixCls();

  // We have to debounce here again since somewhere use ErrorList directly still need no shaking
  // ref: https://github.com/ant-design/ant-design/issues/36336
  const debounceErrors = (0, _useDebounce.default)(errors);
  const debounceWarnings = (0, _useDebounce.default)(warnings);
  const fullKeyList = React.useMemo(() => {
    if (help !== undefined && help !== null) {
      return [toErrorEntity(help, helpStatus, 'help')];
    }
    return [...debounceErrors.map((error, index) => toErrorEntity(error, 'error', 'error', index)), ...debounceWarnings.map((warning, index) => toErrorEntity(warning, 'warning', 'warning', index))];
  }, [help, helpStatus, debounceErrors, debounceWarnings]);
  const helpProps = {};
  if (fieldId) {
    helpProps.id = `${fieldId}_help`;
  }
  return /*#__PURE__*/React.createElement(_rcMotion.default, {
    motionDeadline: _motion.default.motionDeadline,
    motionName: `${rootPrefixCls}-show-help`,
    visible: !!fullKeyList.length,
    onVisibleChanged: onVisibleChanged
  }, holderProps => {
    const {
      className: holderClassName,
      style: holderStyle
    } = holderProps;
    return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, helpProps, {
      className: (0, _classnames.default)(baseClassName, holderClassName, rootClassName),
      style: holderStyle,
      role: "alert"
    }), /*#__PURE__*/React.createElement(_rcMotion.CSSMotionList, (0, _extends2.default)({
      keys: fullKeyList
    }, _motion.default, {
      motionName: `${rootPrefixCls}-show-help-item`,
      component: false
    }), itemProps => {
      const {
        key,
        error,
        errorStatus,
        className: itemClassName,
        style: itemStyle
      } = itemProps;
      return /*#__PURE__*/React.createElement("div", {
        key: key,
        className: (0, _classnames.default)(itemClassName, {
          [`${baseClassName}-${errorStatus}`]: errorStatus
        }),
        style: itemStyle
      }, error);
    }));
  });
}