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

🌈 🚀lm组件库。🚀

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
var _excluded = ["item"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
import cn from 'classnames';
import { isEqual } from 'lodash';
import React, { useMemo, useState } from 'react';
import Button from "../../../button";
import Dropdown from "../../../dropdown";
import IconFont from "../../../icon-font";
import Menu from "../../../menu";
import Modal from "../../../modal";
import PopDropDown from "../../controls/PopDropDown";
import { SelectRender } from "../../widgets";
import SaveModal from "./SaveModal";

// 自定义筛选下拉框每一项的Render
var ItemBody = function ItemBody(_ref) {
  var item = _ref.item,
    instance = _ref.instance,
    menuClick = _ref.menuClick;
  var locale = instance.locale;
  var menuItems = [{
    label: locale.rename,
    key: 'rename'
  }, {
    label: item.default ? locale.cancelDefault : locale.customDefault,
    key: 'default'
  }, {
    label: locale.delete,
    key: 'delete'
  }];
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "filter_item_content"
  }, item.label, item.default && "\u300C".concat(locale.default, "\u300D")), /*#__PURE__*/React.createElement("div", {
    className: "filter_item_operate",
    onClick: function onClick(e) {
      return e.stopPropagation();
    }
  }, item.value && /*#__PURE__*/React.createElement("div", {
    className: "icon_hover"
  }, /*#__PURE__*/React.createElement(Dropdown, {
    placement: "bottomLeft",
    trigger: ['click'],
    overlay: /*#__PURE__*/React.createElement(Menu, {
      items: menuItems,
      onClick: menuClick
    })
  }, /*#__PURE__*/React.createElement(IconFont, {
    type: "icon-a-tongyonga2gengduo"
  })))));
};

// 自定义筛选下拉框Render
var OverlayRender = /*#__PURE__*/React.memo(function (props) {
  var instance = props.instance,
    setVisible = props.setVisible;
  var state = instance.state,
    dispatch = instance.dispatch,
    customOptions = instance.customOptions,
    onQuery = instance.onQuery,
    onSave = instance.onSave,
    locale = instance.locale;
  var customSelectValue = state.customSelectValue;
  var handleChange = function handleChange(e, item) {
    onQuery({
      type: 'custom',
      customFilter: item
    });
    setVisible(false);
  };
  var _menuClick = function menuClick(_ref2, item) {
    var key = _ref2.key;
    if (key === 'delete') {
      Modal.confirm({
        title: locale.deleteScheme,
        content: /*#__PURE__*/React.createElement("span", {
          style: {
            color: '#7E84A3',
            fontSize: 12
          }
        }, locale.deleteSchemeTip),
        okText: locale.delete,
        onOk: function () {
          var _onOk = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(close) {
            var resultList;
            return _regeneratorRuntime.wrap(function _callee$(_context) {
              while (1) switch (_context.prev = _context.next) {
                case 0:
                  resultList = customOptions.filter(function (v) {
                    return (v === null || v === void 0 ? void 0 : v.value) !== (item === null || item === void 0 ? void 0 : item.value);
                  });
                  _context.next = 3;
                  return onSave(item, resultList, 'delete');
                case 3:
                  close();
                case 4:
                case "end":
                  return _context.stop();
              }
            }, _callee);
          }));
          function onOk(_x) {
            return _onOk.apply(this, arguments);
          }
          return onOk;
        }()
      });
    }
    if (key === 'default') {
      var resultList = customOptions.map(function (v) {
        return _objectSpread(_objectSpread({}, v), {}, {
          default: (v === null || v === void 0 ? void 0 : v.value) === (item === null || item === void 0 ? void 0 : item.value) ? !v.default : false
        });
      });
      var checked = resultList.find(function (v) {
        return (v === null || v === void 0 ? void 0 : v.value) === (item === null || item === void 0 ? void 0 : item.value);
      });
      onSave(_objectSpread(_objectSpread({}, item), {}, {
        default: checked ? checked === null || checked === void 0 ? void 0 : checked.default : true
      }), resultList, 'default');
      setVisible(false);
    }
    if (key === 'rename') {
      setVisible(false);
      dispatch({
        type: 'changeCustomSaveModal',
        customSaveModal: _objectSpread(_objectSpread({}, item), {}, {
          visible: true
        })
      });
    }
  };
  var ItemRender = function ItemRender(_ref3) {
    var item = _ref3.item,
      resetProps = _objectWithoutProperties(_ref3, _excluded);
    return /*#__PURE__*/React.createElement("div", _extends({}, resetProps, {
      className: cn('filter_item', {
        checked: item.value === customSelectValue
      }),
      onClick: function onClick(e) {
        return handleChange(e, item);
      }
    }), /*#__PURE__*/React.createElement(ItemBody, _extends({
      item: item
    }, props, {
      menuClick: function menuClick(menuProps) {
        return _menuClick(menuProps, item);
      }
    })));
  };
  return /*#__PURE__*/React.createElement(SelectRender, {
    value: customSelectValue,
    options: customOptions,
    itemRender: ItemRender
  });
});

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

// 自定义筛选保存按钮
var CustomAddon = function CustomAddon(_ref5) {
  var instance = _ref5.instance;
  var _instance$state = instance.state,
    _instance$state$custo = _instance$state.customFilter,
    customFilter = _instance$state$custo === void 0 ? {} : _instance$state$custo,
    customSelectValue = _instance$state.customSelectValue,
    dispatch = instance.dispatch,
    getHasFilter = instance.getHasFilter,
    getFilterFormat = instance.getFilterFormat;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    confirmOpen = _useState2[0],
    setConfirmOpen = _useState2[1];

  // 自定义筛选是否触发变动
  var isChange = !!useMemo(function () {
    var _getFilterFormat2;
    var currentFilterData = ((_getFilterFormat2 = getFilterFormat()) === null || _getFilterFormat2 === void 0 ? void 0 : _getFilterFormat2.data) || [];
    return (customFilter === null || customFilter === void 0 ? void 0 : customFilter.value) && !isEqual(customFilter.data, currentFilterData);
  }, [customFilter.value, getFilterFormat()]);

  // 打开提示Confirm
  var handleClick = function 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
    icon: /*#__PURE__*/React.createElement(IconFont, {
      type: "icon-chucun"
    }),
    className: cn('lm_filter_custom_addon', isChange && 'addon_highlight'),
    onClick: handleClick
  }), /*#__PURE__*/React.createElement(SaveConfirm, {
    instance: instance,
    open: confirmOpen,
    onCancel: function onCancel() {
      return setConfirmOpen(false);
    }
  }));
};

// 自定义筛选界面展示内容
var CustomSelect = function CustomSelect(_ref6) {
  var instance = _ref6.instance;
  var state = instance.state,
    size = instance.size,
    customOptions = instance.customOptions,
    enableUnLimitedPlaceholder = instance.enableUnLimitedPlaceholder,
    locale = instance.locale;
  var customSelectValue = state.customSelectValue;
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    visible = _useState4[0],
    setVisible = _useState4[1];

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

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