linkmore-design
Version:
🌈 🚀lm组件库。🚀
225 lines (224 loc) • 7.9 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { useControllableValue } from 'ahooks';
import React, { memo } from 'react';
import Button from "../../../button";
import Form from "../../../form";
import IconFont from "../../../icon-font";
import Input from "../../../input";
import Modal from "../../../modal";
import Space from "../../../space";
import Switch from "../../../switch";
import { prefix } from "../../constants";
import { MODAL_TYPE_ENUM } from "../../interface";
var Append = function Append(_ref) {
var onCancel = _ref.onCancel,
onSave = _ref.onSave,
form = _ref.form;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
loading = _React$useState2[0],
setLoading = _React$useState2[1];
var onAppendSave = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _values;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
setLoading(true);
_context.prev = 1;
_context.next = 4;
return form.validateFields();
case 4:
_values = _context.sent;
_context.t0 = onSave;
if (!_context.t0) {
_context.next = 9;
break;
}
_context.next = 9;
return onSave(_values);
case 9:
onCancel && onCancel();
_context.next = 15;
break;
case 12:
_context.prev = 12;
_context.t1 = _context["catch"](1);
console.log('Error:保存失败!', _context.t1);
case 15:
_context.prev = 15;
setLoading(false);
return _context.finish(15);
case 18:
case "end":
return _context.stop();
}
}, _callee, null, [[1, 12, 15, 18]]);
}));
return function onAppendSave() {
return _ref2.apply(this, arguments);
};
}();
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefix, "_custom_append")
}, /*#__PURE__*/React.createElement("div", {
className: "custom_append_modal_header"
}, /*#__PURE__*/React.createElement("span", {
className: "custom_append_modal_title"
}, "\u53E6\u5B58\u4E3A\u65B0\u65B9\u6848"), /*#__PURE__*/React.createElement(Button, {
type: "text",
shape: "circle",
icon: /*#__PURE__*/React.createElement(IconFont, {
type: "icon-a-tongyongaRX"
}),
onClick: function onClick() {
return onCancel === null || onCancel === void 0 ? void 0 : onCancel();
}
})), /*#__PURE__*/React.createElement(Form, {
name: "dynamic_form_item",
className: "custom_append_modal_body",
layout: "vertical",
form: form,
initialValues: {
default: true
}
}, /*#__PURE__*/React.createElement(Form.Item, {
name: "label",
label: "\u540D\u79F0",
rules: [{
required: true
}]
}, /*#__PURE__*/React.createElement(Input, {
placeholder: "\u8BF7\u8F93\u5165",
size: "middle"
})), /*#__PURE__*/React.createElement(Form.Item, {
name: "value",
hidden: true
}, /*#__PURE__*/React.createElement(Input, null)), /*#__PURE__*/React.createElement("div", {
className: "form_label"
}, "\u8BBE\u4E3A\u9ED8\u8BA4"), /*#__PURE__*/React.createElement(Form.Item, {
name: "default",
label: "\u8BBE\u4E3A\u9ED8\u8BA4",
valuePropName: "checked",
noStyle: true
}, /*#__PURE__*/React.createElement(Switch, null))), /*#__PURE__*/React.createElement("div", {
className: "custom_append_modal_footer"
}, /*#__PURE__*/React.createElement(Button, {
onClick: function onClick() {
return onCancel(false);
}
}, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
type: "primary",
onClick: onAppendSave,
loading: loading
}, "\u4FDD\u5B58")));
};
var Cover = function Cover(_ref3) {
var onCancel = _ref3.onCancel,
onTypeChange = _ref3.onTypeChange,
onSave = _ref3.onSave;
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
loading = _React$useState4[0],
setLoading = _React$useState4[1];
var onCoverSave = /*#__PURE__*/function () {
var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
setLoading(true);
_context2.prev = 1;
_context2.t0 = onSave;
if (!_context2.t0) {
_context2.next = 6;
break;
}
_context2.next = 6;
return onSave();
case 6:
onCancel && onCancel();
_context2.next = 12;
break;
case 9:
_context2.prev = 9;
_context2.t1 = _context2["catch"](1);
console.log('Error:保存失败!', _context2.t1);
case 12:
_context2.prev = 12;
setLoading(false);
return _context2.finish(12);
case 15:
case "end":
return _context2.stop();
}
}, _callee2, null, [[1, 9, 12, 15]]);
}));
return function onCoverSave() {
return _ref4.apply(this, arguments);
};
}();
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefix, "_custom_save")
}, /*#__PURE__*/React.createElement("div", {
className: "custom_save_modal_title"
}, "\u4FDD\u5B58\u7B5B\u9009\u65B9\u6848"), /*#__PURE__*/React.createElement("div", {
className: "custom_save_modal_content"
}, "\u70B9\u51FB\u4FDD\u5B58\u5C06\u8986\u76D6\u539F\u6765\u7684\u7B5B\u9009\u65B9\u6848\u3002"), /*#__PURE__*/React.createElement("div", {
className: "custom_save_modal_footer"
}, /*#__PURE__*/React.createElement("span", {
className: "footer_link_text",
onClick: function onClick() {
return onTypeChange(MODAL_TYPE_ENUM.APPEND);
}
}, "\u53E6\u5B58\u4E3A\u65B0\u65B9\u6848"), /*#__PURE__*/React.createElement(Space, {
size: 8
}, /*#__PURE__*/React.createElement(Button, {
onClick: function onClick() {
return onCancel(false);
}
}, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
type: "primary",
onClick: onCoverSave,
loading: loading
}, "\u4FDD\u5B58"))));
};
// 覆盖当前筛选方案提示
var SaveConfirm = function SaveConfirm(props) {
var open = props.open,
onCancel = props.onCancel,
onSave = props.onSave,
form = props.form;
var _useControllableValue = useControllableValue(props, {
defaultValue: MODAL_TYPE_ENUM.COVER,
valuePropName: 'type',
trigger: 'onTypeChange'
}),
_useControllableValue2 = _slicedToArray(_useControllableValue, 2),
type = _useControllableValue2[0],
setType = _useControllableValue2[1];
var isRename = type === MODAL_TYPE_ENUM.RENAME;
var isAppend = type === MODAL_TYPE_ENUM.APPEND;
var isCover = type === MODAL_TYPE_ENUM.COVER;
var modalConfig = {
open: open,
closable: false,
size: 'small',
onCancel: onCancel,
footer: false,
bodyStyle: {
padding: 'initial'
}
};
return /*#__PURE__*/React.createElement(Modal, modalConfig, !isCover && /*#__PURE__*/React.createElement(Append, {
onCancel: onCancel,
form: form,
onSave: onSave
}), isCover && /*#__PURE__*/React.createElement(Cover, {
onCancel: onCancel,
onTypeChange: setType,
onSave: onSave
}));
};
export default /*#__PURE__*/memo(SaveConfirm);