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

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _form = _interopRequireDefault(require("../../../form"));
var _input = _interopRequireDefault(require("../../../input"));
var _modal = _interopRequireDefault(require("../../../modal"));
var _switch = _interopRequireDefault(require("../../../switch"));
const SaveModal = ({
  instance
}) => {
  const {
    state,
    dispatch,
    locale,
    customOptions,
    onSave,
    getFilterFormat
  } = instance;
  const {
    customSaveModal
  } = state;
  const [loading, setLoading] = _react.default.useState(false);
  const [form] = _form.default.useForm();

  // 是否重命名
  const isRename = !!customSaveModal.label;
  const onClose = () => {
    dispatch({
      type: 'changeCustomSaveModal',
      customSaveModal: {
        visible: false
      }
    });
  };
  const handleSave = async () => {
    setLoading(true);
    try {
      const values = await form.validateFields();
      const resultList = customOptions.reduce((pre, cur) => {
        const isDefault = values.default ? false : cur.default;
        const isEditing = cur.value === values.value;
        const obj = isEditing ? {
          ...cur,
          ...values
        } : {
          ...cur,
          default: isDefault
        };
        pre.push(obj);
        return pre;
      }, []);
      if (isRename) {
        const resetValues = {
          ...customSaveModal,
          ...values
        };
        await onSave(resetValues, resultList, 'rename');
      } else {
        const resetValues = {
          ...getFilterFormat(),
          ...values
        };
        const customSelectValue = await onSave(resetValues, [...resultList, resetValues], 'add');

        // 保存后选择
        const resetValue = customSelectValue || resetValues.value;
        dispatch({
          type: 'changeCustomFilter',
          customFilter: {
            ...resetValues,
            value: resetValue
          }
        });
        dispatch({
          type: 'changeCustomSelectValue',
          customSelectValue: resetValue
        });
      }
      onClose();
      setLoading(false);
    } catch (error) {
      console.log('Error:保存失败!');
      setLoading(false);
    }
  };
  const modalConfig = {
    title: isRename ? locale.edit : locale.saveScheme,
    open: customSaveModal?.visible,
    size: 'small',
    confirmLoading: loading,
    destroyOnClose: true,
    wrapClassName: 'custom_save_modal',
    onOk: () => {
      handleSave();
    },
    onCancel: onClose
  };
  (0, _react.useEffect)(() => {
    if (customSaveModal?.visible) {
      form.setFieldsValue({
        ...customSaveModal
      });
    }
  }, [customSaveModal?.visible]);
  return /*#__PURE__*/_react.default.createElement(_modal.default, modalConfig, /*#__PURE__*/_react.default.createElement(_form.default, {
    name: "dynamic_form_item",
    layout: "vertical",
    form: form
    // component={false}
    ,
    initialValues: {
      default: true
    }
  }, /*#__PURE__*/_react.default.createElement(_form.default.Item, {
    name: "label",
    label: locale.customInputLabel,
    rules: [{
      required: true,
      message: locale.customInputMessage
    }]
  }, /*#__PURE__*/_react.default.createElement(_input.default, {
    placeholder: locale.placeholder,
    size: "middle"
  })), /*#__PURE__*/_react.default.createElement(_form.default.Item, {
    name: "value",
    hidden: true
  }, /*#__PURE__*/_react.default.createElement(_input.default, null)), /*#__PURE__*/_react.default.createElement("div", {
    className: "form_label"
  }, locale.customDefault), /*#__PURE__*/_react.default.createElement(_form.default.Item, {
    name: "default",
    label: locale.customDefault,
    valuePropName: "checked",
    noStyle: true
  }, /*#__PURE__*/_react.default.createElement(_switch.default, null))));
};
var _default = SaveModal;
exports.default = _default;