@aliretail/react-materials-components/es/FormComponents/errorModal/index.js

B 端物料组件库

import _extends from "@babel/runtime/helpers/extends";
import _Icon from "@alifd/next/es/icon";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import * as React from 'react';
import cx from 'classnames';
import { FormSpy } from '@formily/next';
import { LifeCycleTypes } from '@formily/core';
import Modal from "./Modal";
var lang = 'ZH_CN';
var isCN = ['ZH_CN', 'ZH-CN'].includes(lang && lang.toUpperCase());
export var ErrorModalDisplay = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(ErrorModalDisplay, _React$Component);

  function ErrorModalDisplay(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;

    _this.toggleCollapse = function () {
      var isCollapsed = _this.state.isCollapsed;

      _this.setState({
        isCollapsed: !isCollapsed
      });
    };

    _this.dumpToRef = function (elementId) {
      var _container;

      var _this$props = _this.props,
          onJump = _this$props.onJump,
          id = _this$props.id;
      var container = document;

      if (id) {
        container = document.getElementById(id);
      }

      var ele = (_container = container) === null || _container === void 0 ? void 0 : _container.querySelector("#" + CSS.escape(elementId));

      if (ele) {
        ele.scrollIntoView({
          behavior: 'smooth',
          block: 'center'
        });
        onJump && onJump(elementId, ele);
      }
    };

    _this.hideModal = function () {
      _this.errorModalRef.current.style.visibility = 'hidden';
    };

    _this.state = {
      isCollapsed: false
    };
    _this.errorModalRef = /*#__PURE__*/React.createRef();
    return _this;
  }

  var _proto = ErrorModalDisplay.prototype;

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (prevProps.type !== this.props.type && this.props.type === 'onFormSubmitEnd') {
      this.errorModalRef.current.style.visibility = 'initial';
    }
  };

  _proto.render = function render() {
    var _cx,
        _this2 = this;

    var _this$props2 = this.props,
        className = _this$props2.className,
        style = _this$props2.style,
        errors = _this$props2.errors;
    var isCollapsed = this.state.isCollapsed;
    var locationText = isCN ? '定位到此处' : 'Location';
    var classes = cx((_cx = {
      'aliretail-form-modal': true
    }, _cx[className] = !!className, _cx));
    return /*#__PURE__*/React.createElement("div", {
      className: classes,
      style: style,
      ref: this.errorModalRef
    }, /*#__PURE__*/React.createElement("div", {
      className: "aliretail-form-modal-header"
    }, /*#__PURE__*/React.createElement(_Icon, {
      type: "ic_error",
      size: "small"
    }), /*#__PURE__*/React.createElement("span", null, isCN ? '表单报错信息' : 'Errors'), /*#__PURE__*/React.createElement(_Icon, {
      type: isCollapsed ? 'ic_chevron_up' : 'ic_chevron_down',
      size: "small",
      onClick: this.toggleCollapse
    }), /*#__PURE__*/React.createElement(_Icon, {
      type: "ic_close",
      size: "s",
      onClick: this.hideModal
    })), /*#__PURE__*/React.createElement("div", {
      id: "aliretail-form-modal-item-wrapper",
      className: "aliretail-form-modal-item-wrapper",
      style: {
        display: isCollapsed ? 'none' : 'block'
      }
    }, errors.map(function (errorItem, itemIndex) {
      return /*#__PURE__*/React.createElement("div", {
        className: "aliretail-form-modal-item",
        key: "errorItem-" + itemIndex
      }, /*#__PURE__*/React.createElement("div", {
        className: "infos"
      }, /*#__PURE__*/React.createElement("div", {
        className: "label"
      }, errorItem.title), errorItem.messages.map(function (messageItem, idx) {
        return /*#__PURE__*/React.createElement("div", {
          className: "error-text",
          key: "msg-" + idx
        }, messageItem);
      })), /*#__PURE__*/React.createElement("div", {
        className: "loc",
        onClick: function onClick() {
          return _this2.dumpToRef(errorItem.path);
        }
      }, /*#__PURE__*/React.createElement("span", null, locationText)));
    })));
  };

  return ErrorModalDisplay;
}(React.Component);
export var errorReducer = function errorReducer(state, action, form) {
  var initialState = _extends({
    // 初始值
    visible: false,
    errors: []
  }, state);

  var getFormatError = function getFormatError(errorItem) {
    var formItem = form.getFieldState(errorItem.name);
    return {
      name: errorItem.name,
      path: errorItem.path,
      messages: errorItem.messages,
      title: formItem.props.title
    };
  };

  if (action.type === LifeCycleTypes.ON_FORM_SUBMIT_END) {
    initialState.visible = true;
    var formatErrors = [];
    var errors = action.payload.errors;
    errors.forEach(function (errorItem) {
      var newError = getFormatError(errorItem);
      formatErrors.push(newError);
    });
    initialState.errors = formatErrors;
  }

  if (action.type === LifeCycleTypes.ON_FIELD_VALIDATE_END) {
    var _form$getFormState = form.getFormState(),
        _errors = _form$getFormState.errors;

    var _formatErrors = [];

    _errors.forEach(function (errorItem) {
      var newError = getFormatError(errorItem);

      _formatErrors.push(newError);
    });

    initialState.errors = _formatErrors;
  }

  return initialState;
};
export var ErrorModal = /*#__PURE__*/function (_React$Component2) {
  _inheritsLoose(ErrorModal, _React$Component2);

  function ErrorModal() {
    return _React$Component2.apply(this, arguments) || this;
  }

  var _proto2 = ErrorModal.prototype;

  _proto2.render = function render() {
    var _this$props3 = this.props,
        onJump = _this$props3.onJump,
        className = _this$props3.className,
        style = _this$props3.style;
    return /*#__PURE__*/React.createElement(FormSpy, {
      selector: [LifeCycleTypes.ON_FORM_SUBMIT_END, LifeCycleTypes.ON_FIELD_VALIDATE_END],
      reducer: errorReducer
    }, function (_ref) {
      var state = _ref.state,
          type = _ref.type;

      if (state.visible && state.errors.length > 0) {
        return /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement(ErrorModalDisplay, {
          className: className,
          style: style,
          type: type,
          errors: state.errors || [],
          onJump: onJump
        }));
      }

      return /*#__PURE__*/React.createElement("div", null);
    });
  };

  return ErrorModal;
}(React.Component);