@aliretail/react-materials-components
Version:
238 lines (189 loc) • 8.29 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.errorReducer = exports.ErrorModalDisplay = exports.ErrorModal = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var React = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _next = require("@formily/next");
var _core = require("@formily/core");
var _Modal = _interopRequireDefault(require("./Modal"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var lang = 'ZH_CN';
var isCN = ['ZH_CN', 'ZH-CN'].includes(lang && lang.toUpperCase());
var ErrorModalDisplay = /*#__PURE__*/function (_React$Component) {
(0, _inheritsLoose2["default"])(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 = (0, _classnames["default"])((_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["default"], {
type: "ic_error",
size: "small"
}), /*#__PURE__*/React.createElement("span", null, isCN ? '表单报错信息' : 'Errors'), /*#__PURE__*/React.createElement(_icon["default"], {
type: isCollapsed ? 'ic_chevron_up' : 'ic_chevron_down',
size: "small",
onClick: this.toggleCollapse
}), /*#__PURE__*/React.createElement(_icon["default"], {
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);
exports.ErrorModalDisplay = ErrorModalDisplay;
var errorReducer = function errorReducer(state, action, form) {
var initialState = (0, _extends2["default"])({
// 初始值
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 === _core.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 === _core.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;
};
exports.errorReducer = errorReducer;
var ErrorModal = /*#__PURE__*/function (_React$Component2) {
(0, _inheritsLoose2["default"])(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(_next.FormSpy, {
selector: [_core.LifeCycleTypes.ON_FORM_SUBMIT_END, _core.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["default"], 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);
exports.ErrorModal = ErrorModal;