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

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classnames = _interopRequireDefault(require("classnames"));
var _lodash = require("lodash");
var _react = _interopRequireWildcard(require("react"));
var _button = _interopRequireDefault(require("../../../button"));
var _dropdown = _interopRequireDefault(require("../../../dropdown"));
var _iconFont = _interopRequireDefault(require("../../../icon-font"));
var _menu = _interopRequireDefault(require("../../../menu"));
var _modal = _interopRequireDefault(require("../../../modal"));
var _PopDropDown = _interopRequireDefault(require("../../controls/PopDropDown"));
var _widgets = require("../../widgets");
var _SaveModal = _interopRequireDefault(require("./SaveModal"));
// 自定义筛选下拉框每一项的Render
const ItemBody = ({
  item,
  instance,
  menuClick
}) => {
  const {
    locale
  } = instance;
  const menuItems = [{
    label: locale.rename,
    key: 'rename'
  }, {
    label: item.default ? locale.cancelDefault : locale.customDefault,
    key: 'default'
  }, {
    label: locale.delete,
    key: 'delete'
  }];
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_item_content"
  }, item.label, item.default && `「${locale.default}」`), /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_item_operate",
    onClick: e => e.stopPropagation()
  }, item.value && /*#__PURE__*/_react.default.createElement("div", {
    className: "icon_hover"
  }, /*#__PURE__*/_react.default.createElement(_dropdown.default, {
    placement: "bottomLeft",
    trigger: ['click'],
    overlay: /*#__PURE__*/_react.default.createElement(_menu.default, {
      items: menuItems,
      onClick: menuClick
    })
  }, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: "icon-a-tongyonga2gengduo"
  })))));
};

// 自定义筛选下拉框Render
const OverlayRender = /*#__PURE__*/_react.default.memo(props => {
  const {
    instance,
    setVisible
  } = props;
  const {
    state,
    dispatch,
    customOptions,
    onQuery,
    onSave,
    locale
  } = instance;
  const {
    customSelectValue
  } = state;
  const handleChange = (e, item) => {
    onQuery({
      type: 'custom',
      customFilter: item
    });
    setVisible(false);
  };
  const menuClick = ({
    key
  }, item) => {
    if (key === 'delete') {
      _modal.default.confirm({
        title: locale.deleteScheme,
        content: /*#__PURE__*/_react.default.createElement("span", {
          style: {
            color: '#7E84A3',
            fontSize: 12
          }
        }, locale.deleteSchemeTip),
        okText: locale.delete,
        onOk: async close => {
          const resultList = customOptions.filter(v => v?.value !== item?.value);
          await onSave(item, resultList, 'delete');
          close();
        }
      });
    }
    if (key === 'default') {
      const resultList = customOptions.map(v => ({
        ...v,
        default: v?.value === item?.value ? !v.default : false
      }));
      const checked = resultList.find(v => v?.value === item?.value);
      onSave({
        ...item,
        default: checked ? checked?.default : true
      }, resultList, 'default');
      setVisible(false);
    }
    if (key === 'rename') {
      setVisible(false);
      dispatch({
        type: 'changeCustomSaveModal',
        customSaveModal: {
          ...item,
          visible: true
        }
      });
    }
  };
  const ItemRender = ({
    item,
    ...resetProps
  }) => {
    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, resetProps, {
      className: (0, _classnames.default)('filter_item', {
        checked: item.value === customSelectValue
      }),
      onClick: e => handleChange(e, item)
    }), /*#__PURE__*/_react.default.createElement(ItemBody, (0, _extends2.default)({
      item: item
    }, props, {
      menuClick: menuProps => menuClick(menuProps, item)
    })));
  };
  return /*#__PURE__*/_react.default.createElement(_widgets.SelectRender, {
    value: customSelectValue,
    options: customOptions,
    itemRender: ItemRender
  });
});

// 覆盖当前筛选方案提示
const SaveConfirm = ({
  instance,
  open,
  onCancel
}) => {
  const {
    state,
    dispatch,
    onSave,
    getFilterFormat,
    customOptions,
    locale
  } = instance;
  const handleClose = () => onCancel(false);
  const handleSave = () => {
    onCancel(false);
    const item = {
      ...state.customFilter,
      data: getFilterFormat()?.data || []
    };
    const resultList = customOptions.map(v => v?.value === item?.value ? item : v);
    dispatch({
      type: 'changeCustomFilter',
      customFilter: item
    });
    onSave(item, resultList, 'cover');
  };
  const handleSaveNew = () => {
    dispatch({
      type: 'changeCustomSaveModal',
      customSaveModal: {
        value: Date.now(),
        label: '',
        visible: true
      }
    });
    onCancel(false);
  };
  const modalConfig = {
    open,
    closable: false,
    size: 'small',
    wrapClassName: 'custom_save_confirm',
    footer: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
      className: "footer_link_text",
      onClick: handleSaveNew
    }, locale.saveScheme), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_button.default, {
      onClick: handleClose
    }, locale.cancel), /*#__PURE__*/_react.default.createElement(_button.default, {
      type: "primary",
      onClick: handleSave
    }, locale.saveText)))
  };
  return /*#__PURE__*/_react.default.createElement(_modal.default, modalConfig, /*#__PURE__*/_react.default.createElement("div", {
    className: "custom_save_modal_title"
  }, locale.saveModalTitle), /*#__PURE__*/_react.default.createElement("div", {
    className: "custom_save_modal_content"
  }, locale.saveModalContent));
};

// 自定义筛选保存按钮
const CustomAddon = ({
  instance
}) => {
  const {
    state: {
      customFilter = {},
      customSelectValue
    },
    dispatch,
    getHasFilter,
    getFilterFormat
  } = instance;
  const [confirmOpen, setConfirmOpen] = (0, _react.useState)(false);

  // 自定义筛选是否触发变动
  const isChange = !!(0, _react.useMemo)(() => {
    const currentFilterData = getFilterFormat()?.data || [];
    return customFilter?.value && !(0, _lodash.isEqual)(customFilter.data, currentFilterData);
  }, [customFilter.value, getFilterFormat()]);

  // 打开提示Confirm
  const handleClick = () => {
    if (!getHasFilter()) return;
    if (!customSelectValue) {
      dispatch({
        type: 'changeCustomSaveModal',
        customSaveModal: {
          label: '',
          value: Date.now(),
          visible: true
        }
      });
      return;
    }
    setConfirmOpen(true);

    // if (isChange) {
    //   setConfirmOpen(true)
    // } else {
    //   dispatch({ type: 'changeCustomSaveModal', customSaveModal: { label: '', value: Date.now(), visible: true } })
    // }
  };

  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.default, {
    icon: /*#__PURE__*/_react.default.createElement(_iconFont.default, {
      type: "icon-chucun"
    }),
    className: (0, _classnames.default)('lm_filter_custom_addon', isChange && 'addon_highlight'),
    onClick: handleClick
  }), /*#__PURE__*/_react.default.createElement(SaveConfirm, {
    instance: instance,
    open: confirmOpen,
    onCancel: () => setConfirmOpen(false)
  }));
};

// 自定义筛选界面展示内容
const CustomSelect = ({
  instance
}) => {
  const {
    state,
    size,
    customOptions,
    enableUnLimitedPlaceholder,
    locale
  } = instance;
  const {
    customSelectValue
  } = state;
  const [visible, setVisible] = (0, _react.useState)(false);

  // 下拉数据
  const filterOptions = (0, _react.useMemo)(() => {
    const hasPlaceholderObj = enableUnLimitedPlaceholder && !customOptions.some(v => v.field === 'all');
    return hasPlaceholderObj ? [{
      field: 'all',
      label: locale.unlimited,
      value: '',
      data: []
    }, ...customOptions] : customOptions;
  }, [enableUnLimitedPlaceholder, customOptions]);

  // 默认展示
  const defaultValue = _react.default.useMemo(() => {
    const fatalObj = enableUnLimitedPlaceholder ? {
      field: 'all',
      label: locale.unlimited,
      value: '',
      data: []
    } : {};
    return filterOptions.find(v => v.value === customSelectValue) || fatalObj;
  }, [filterOptions, customSelectValue]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_filter_custom_select_wrapper"
  }, /*#__PURE__*/_react.default.createElement(_PopDropDown.default, {
    overlayClassName: "filter_dropdown_container_custom",
    dropdownRender: () => /*#__PURE__*/_react.default.createElement(OverlayRender, {
      instance: {
        ...instance,
        customOptions: filterOptions
      },
      setVisible: setVisible
    }),
    open: visible,
    onOpenChange: v => setVisible(v)
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('lm_filter_custom_select', {
      expand: visible,
      small: size === 'small'
    })
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_filter_custom_select_label"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: (0, _classnames.default)({
      placeholder: !defaultValue.value
    })
  }, defaultValue.label)), /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_filter_custom_select_icon addon_after"
  }, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: "icon-a-jiantoua2xialaxia"
  })))), /*#__PURE__*/_react.default.createElement(CustomAddon, {
    instance: instance
  }), /*#__PURE__*/_react.default.createElement(_SaveModal.default, {
    instance: instance
  }));
};
var _default = CustomSelect;
exports.default = _default;