linkmore-design/lib/filter/baseFilter/ToggleFilter.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 _icons = require("@ant-design/icons");
var _Popover = _interopRequireDefault(require("../Popover"));
var _context = _interopRequireDefault(require("../context"));
const ToggleFilter = ({
  useList,
  setList
}) => {
  const {
    state,
    dispatch,
    getChange
  } = (0, _react.useContext)(_context.default);

  // 触发筛选
  const searchEvent = (value, field) => {
    const checkValue = {
      ...state.checkValue,
      [field]: value
    };
    dispatch({
      type: 'changeCheckValue',
      checkValue
    });
    getChange?.(checkValue);
  };

  // 搜索条件展示
  const resetList = value => {
    const fixed = !value.fixed;
    const nValue = useList.map(v => {
      const obj = fixed ? useList.find(o => o.field === v.field) : v;
      if (v.field === value.field) {
        return {
          ...obj,
          fixed
        };
      }
      return v;
    });
    searchEvent(value.type === 'checkbox' ? [] : '', value.field);
    setList(nValue);
  };

  // 置顶
  const handleTop = (e, item) => {
    e.stopPropagation();
    if (!item.fixed) {
      resetList(item);
    } else {
      const nValue = useList.filter(v => v.field !== item.field);
      setList([item, ...nValue]);
    }
  };
  const more = (0, _react.useMemo)(() => {
    return {
      toggle: true,
      // 是否更多筛选
      type: 'select',
      params: {},
      title: '更多筛选',
      field: '',
      data: useList.sort((a, b) => !!b.fixed - !!a.fixed),
      renderItem: (item, i) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, item.title), /*#__PURE__*/_react.default.createElement("div", {
        className: "item_other"
      }, !!i && /*#__PURE__*/_react.default.createElement("span", {
        className: "item_top item_icon",
        onClick: e => handleTop(e, item)
      }, item.fixed ? /*#__PURE__*/_react.default.createElement(_icons.VerticalAlignTopOutlined, null) : /*#__PURE__*/_react.default.createElement(_icons.PushpinOutlined, null)), item.fixed ? /*#__PURE__*/_react.default.createElement("span", {
        className: "item_fixed item_icon"
      }, /*#__PURE__*/_react.default.createElement(_icons.PushpinOutlined, null)) : null))
    };
  }, [useList]);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Popover.default, {
    item: more,
    getChange: resetList
  }));
};
var _default = ToggleFilter;
exports.default = _default;