linkmore-design/es/filter/baseFilter/ToggleFilter.js

🌈 🚀lm组件库。🚀

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import React, { useMemo, useContext } from 'react';
import { PushpinOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
import Popover from "../Popover";
import Context from "../context";
var ToggleFilter = function ToggleFilter(_ref) {
  var useList = _ref.useList,
    setList = _ref.setList;
  var _useContext = useContext(Context),
    state = _useContext.state,
    dispatch = _useContext.dispatch,
    getChange = _useContext.getChange;

  // 触发筛选
  var searchEvent = function searchEvent(value, field) {
    var checkValue = _objectSpread(_objectSpread({}, state.checkValue), {}, _defineProperty({}, field, value));
    dispatch({
      type: 'changeCheckValue',
      checkValue: checkValue
    });
    getChange === null || getChange === void 0 ? void 0 : getChange(checkValue);
  };

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

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