linkmore-design/es/complex-filter/components/Custom/SaveModal.js

🌈 🚀lm组件库。🚀

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useEffect } from 'react';
import Form from "../../../form";
import Input from "../../../input";
import Modal from "../../../modal";
import Switch from "../../../switch";
var SaveModal = function SaveModal(_ref) {
  var instance = _ref.instance;
  var state = instance.state,
    dispatch = instance.dispatch,
    locale = instance.locale,
    customOptions = instance.customOptions,
    onSave = instance.onSave,
    getFilterFormat = instance.getFilterFormat;
  var customSaveModal = state.customSaveModal;
  var _React$useState = React.useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    loading = _React$useState2[0],
    setLoading = _React$useState2[1];
  var _Form$useForm = Form.useForm(),
    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
    form = _Form$useForm2[0];

  // 是否重命名
  var isRename = !!customSaveModal.label;
  var onClose = function onClose() {
    dispatch({
      type: 'changeCustomSaveModal',
      customSaveModal: {
        visible: false
      }
    });
  };
  var handleSave = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var values, resultList, resetValues, _resetValues, customSelectValue, resetValue;
      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;
            resultList = customOptions.reduce(function (pre, cur) {
              var isDefault = values.default ? false : cur.default;
              var isEditing = cur.value === values.value;
              var obj = isEditing ? _objectSpread(_objectSpread({}, cur), values) : _objectSpread(_objectSpread({}, cur), {}, {
                default: isDefault
              });
              pre.push(obj);
              return pre;
            }, []);
            if (!isRename) {
              _context.next = 12;
              break;
            }
            resetValues = _objectSpread(_objectSpread({}, customSaveModal), values);
            _context.next = 10;
            return onSave(resetValues, resultList, 'rename');
          case 10:
            _context.next = 19;
            break;
          case 12:
            _resetValues = _objectSpread(_objectSpread({}, getFilterFormat()), values);
            _context.next = 15;
            return onSave(_resetValues, [].concat(_toConsumableArray(resultList), [_resetValues]), 'add');
          case 15:
            customSelectValue = _context.sent;
            // 保存后选择
            resetValue = customSelectValue || _resetValues.value;
            dispatch({
              type: 'changeCustomFilter',
              customFilter: _objectSpread(_objectSpread({}, _resetValues), {}, {
                value: resetValue
              })
            });
            dispatch({
              type: 'changeCustomSelectValue',
              customSelectValue: resetValue
            });
          case 19:
            onClose();
            setLoading(false);
            _context.next = 27;
            break;
          case 23:
            _context.prev = 23;
            _context.t0 = _context["catch"](1);
            console.log('Error:保存失败!');
            setLoading(false);
          case 27:
          case "end":
            return _context.stop();
        }
      }, _callee, null, [[1, 23]]);
    }));
    return function handleSave() {
      return _ref2.apply(this, arguments);
    };
  }();
  var modalConfig = {
    title: isRename ? locale.edit : locale.saveScheme,
    open: customSaveModal === null || customSaveModal === void 0 ? void 0 : customSaveModal.visible,
    size: 'small',
    confirmLoading: loading,
    destroyOnClose: true,
    wrapClassName: 'custom_save_modal',
    onOk: function onOk() {
      handleSave();
    },
    onCancel: onClose
  };
  useEffect(function () {
    if (customSaveModal !== null && customSaveModal !== void 0 && customSaveModal.visible) {
      form.setFieldsValue(_objectSpread({}, customSaveModal));
    }
  }, [customSaveModal === null || customSaveModal === void 0 ? void 0 : customSaveModal.visible]);
  return /*#__PURE__*/React.createElement(Modal, modalConfig, /*#__PURE__*/React.createElement(Form, {
    name: "dynamic_form_item",
    layout: "vertical",
    form: form
    // component={false}
    ,
    initialValues: {
      default: true
    }
  }, /*#__PURE__*/React.createElement(Form.Item, {
    name: "label",
    label: locale.customInputLabel,
    rules: [{
      required: true,
      message: locale.customInputMessage
    }]
  }, /*#__PURE__*/React.createElement(Input, {
    placeholder: locale.placeholder,
    size: "middle"
  })), /*#__PURE__*/React.createElement(Form.Item, {
    name: "value",
    hidden: true
  }, /*#__PURE__*/React.createElement(Input, null)), /*#__PURE__*/React.createElement("div", {
    className: "form_label"
  }, locale.customDefault), /*#__PURE__*/React.createElement(Form.Item, {
    name: "default",
    label: locale.customDefault,
    valuePropName: "checked",
    noStyle: true
  }, /*#__PURE__*/React.createElement(Switch, null))));
};
export default SaveModal;