linkmore-design/es/filter/index.js

🌈 🚀lm组件库。🚀

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import React, { useRef, useReducer, forwardRef } from 'react';
import { Space, Input } from "../../index";
import { SearchOutlined } from '@ant-design/icons';
import Context from "./context";
import Remember from "./remember";
import BaseFilter from "./baseFilter";
import ComplexFilter from "./complex/ComplexFilter";
var initialState = {
  // 选中的数据(用于筛选记忆), {field: {...item}, ...}
  checked: {},
  // 抛出的值(用于查询)：对象结构{field: value, ...}
  checkValue: {}
};

/*
  checked: []
  checkValue：{ [field]: value }
*/
var reducer = function reducer(state, action) {
  var checked = action.checked,
    checkValue = action.checkValue;
  switch (action.type) {
    case 'changeChecked':
      return _objectSpread(_objectSpread({}, state), {}, {
        checked: checked
      });
    case 'changeCheckValue':
      return _objectSpread(_objectSpread({}, state), {}, {
        checkValue: checkValue
      });
    default:
      throw new Error();
  }
};
var 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: 用来保留结构(不含动态获取的下拉框数据)
*/
var Index = /*#__PURE__*/forwardRef(function (props, ref) {
  var data = props.data,
    getChange = props.getChange,
    _props$rememberList = props.rememberList,
    rememberList = _props$rememberList === void 0 ? allList : _props$rememberList,
    custom = props.custom,
    remember = props.remember,
    defaultValue = props.defaultValue,
    complex = props.complex;
  var _useReducer = useReducer(reducer, initialState),
    _useReducer2 = _slicedToArray(_useReducer, 2),
    state = _useReducer2[0],
    dispatch = _useReducer2[1];
  var inputRef = useRef();

  // 输入框输入筛选
  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 onSearch = function onSearch(params) {
    getChange === null || getChange === void 0 ? void 0 : getChange(params);

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

  // 设置过滤项的值
  var setFilterValue = function setFilterValue(obj) {
    var checkValue = _objectSpread(_objectSpread({}, state.checkValue), obj);
    dispatch({
      type: 'changeCheckValue',
      checkValue: checkValue
    });
  };
  React.useImperativeHandle(ref, function () {
    return {
      setFilterValue: setFilterValue
    };
  });
  return /*#__PURE__*/React.createElement(Context.Provider, {
    value: _objectSpread({
      dispatch: dispatch,
      state: state
    }, props)
  }, /*#__PURE__*/React.createElement(Space, {
    className: "lm_filter"
  }, remember && /*#__PURE__*/React.createElement(Remember, {
    defaultValue: defaultValue,
    type: remember,
    list: rememberList,
    onChange: searchEvent
  }), custom === null || custom === void 0 ? void 0 : custom(searchEvent), (remember || custom) && /*#__PURE__*/React.createElement("div", {
    className: "line"
  }), /*#__PURE__*/React.createElement(Input, {
    ref: inputRef,
    prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
    placeholder: "\u8BF7\u8F93\u5165",
    onSearch: function onSearch(val) {
      return searchEvent(val, 'search');
    }
  }), /*#__PURE__*/React.createElement(BaseFilter, null), complex && /*#__PURE__*/React.createElement(ComplexFilter, {
    data: data,
    onSearch: onSearch
  })));
});
export default Index;