linkmore-design/lib/filter/index.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 _index = require("../../index");
var _icons = require("@ant-design/icons");
var _context = _interopRequireDefault(require("./context"));
var _remember = _interopRequireDefault(require("./remember"));
var _baseFilter = _interopRequireDefault(require("./baseFilter"));
var _ComplexFilter = _interopRequireDefault(require("./complex/ComplexFilter"));
const initialState = {
  // 选中的数据(用于筛选记忆), {field: {...item}, ...}
  checked: {},
  // 抛出的值(用于查询)：对象结构{field: value, ...}
  checkValue: {}
};

/*
  checked: []
  checkValue：{ [field]: value }
*/
const reducer = (state, action) => {
  const {
    checked,
    checkValue
  } = action;
  switch (action.type) {
    case 'changeChecked':
      return {
        ...state,
        checked
      };
    case 'changeCheckValue':
      return {
        ...state,
        checkValue
      };
    default:
      throw new Error();
  }
};
const allList = [{
  id: '1',
  value: 'all',
  label: '全部',
  isEdit: false
}, {
  id: '2',
  value: 's1',
  label: '锦绣2021',
  isEdit: false
}, {
  id: '3',
  value: 's2',
  label: '战略备料',
  isEdit: false
}, {
  id: '4',
  value: 's3',
  label: '无供应商物料',
  isEdit: false
}];

/*
  data: 用来获取/展示最新数据(所有下拉框的数据)
  useList: 用来保留结构(不含动态获取的下拉框数据)
*/
const Index = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  const {
    data,
    getChange,
    rememberList = allList,
    custom,
    remember,
    defaultValue,
    complex
  } = props;
  const [state, dispatch] = (0, _react.useReducer)(reducer, initialState);
  const inputRef = (0, _react.useRef)();

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

  // 高级筛选
  const onSearch = params => {
    getChange?.(params);

    // 清空基础筛选
    dispatch({
      type: 'changeCheckValue',
      checkValue: ''
    });
    inputRef.current.state.value = '';
  };

  // 设置过滤项的值
  const setFilterValue = obj => {
    const checkValue = {
      ...state.checkValue,
      ...obj
    };
    dispatch({
      type: 'changeCheckValue',
      checkValue
    });
  };
  _react.default.useImperativeHandle(ref, () => ({
    setFilterValue
  }));
  return /*#__PURE__*/_react.default.createElement(_context.default.Provider, {
    value: {
      dispatch,
      state,
      ...props
    }
  }, /*#__PURE__*/_react.default.createElement(_index.Space, {
    className: "lm_filter"
  }, remember && /*#__PURE__*/_react.default.createElement(_remember.default, {
    defaultValue: defaultValue,
    type: remember,
    list: rememberList,
    onChange: searchEvent
  }), custom?.(searchEvent), (remember || custom) && /*#__PURE__*/_react.default.createElement("div", {
    className: "line"
  }), /*#__PURE__*/_react.default.createElement(_index.Input, {
    ref: inputRef,
    prefix: /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null),
    placeholder: "\u8BF7\u8F93\u5165",
    onSearch: val => searchEvent(val, 'search')
  }), /*#__PURE__*/_react.default.createElement(_baseFilter.default, null), complex && /*#__PURE__*/_react.default.createElement(_ComplexFilter.default, {
    data: data,
    onSearch: onSearch
  })));
});
var _default = Index;
exports.default = _default;