linkmore-design/es/filter/complex/ComplexFilter.js

🌈 🚀lm组件库。🚀

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from 'react';
import { Button, Drawer, Input, List, Space } from 'antd';
import { DownOutlined, SearchOutlined } from '@ant-design/icons';
import ComplexItem from "./ComplexItem";
var Index = function Index(props) {
  var inputRef = React.useRef();
  var data = props.data,
    onSearch = props.onSearch;
  var _useState = useState('complex'),
    _useState2 = _slicedToArray(_useState, 2),
    useKey = _useState2[0],
    setKey = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    useVisible = _useState4[0],
    setVisible = _useState4[1];
  var _useState5 = useState(data),
    _useState6 = _slicedToArray(_useState5, 2),
    useData = _useState6[0],
    setData = _useState6[1];
  var _useState7 = useState({}),
    _useState8 = _slicedToArray(_useState7, 2),
    useCheckValue = _useState8[0],
    setCheckValue = _useState8[1]; // 选中的数据

  var onPressEnter = function onPressEnter(e) {
    var value = e.target.value;
    if (value.trim()) {
      var nValue = data.map(function (v) {
        var hidden = v.title.indexOf(value) < 0;
        return _objectSpread(_objectSpread({}, v), {}, {
          hidden: hidden
        });
      });
      setData(nValue);
    } else {
      setData(data);
    }
  };
  var getChange = function getChange(_ref) {
    var field = _ref.field,
      value = _ref.value;
    var nValue = _objectSpread(_objectSpread({}, useCheckValue), {}, _defineProperty({}, field, value));
    setCheckValue(nValue);
  };
  var onSearchEvent = function onSearchEvent() {
    onSearch(useCheckValue);
    setVisible(false);
  };
  var resetEvent = function resetEvent() {
    setKey(Date.now());
    setCheckValue({});
    setData(data);
    onSearch('');
    inputRef.current.state.value = '';
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
    type: "link",
    onClick: function onClick() {
      return setVisible(true);
    }
  }, "\u9AD8\u7EA7\u7B5B\u9009", /*#__PURE__*/React.createElement(DownOutlined, null)), /*#__PURE__*/React.createElement(Drawer, {
    title: "\u9AD8\u7EA7\u7B5B\u9009",
    width: 440,
    placement: "right",
    onClose: function onClose() {
      return setVisible(false);
    },
    visible: useVisible,
    extra: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
      onClick: resetEvent
    }, "\u91CD\u7F6E"), /*#__PURE__*/React.createElement(Button, {
      type: "primary",
      onClick: onSearchEvent
    }, "\u67E5\u8BE2"))),
    className: "complex_filter"
  }, /*#__PURE__*/React.createElement(Input, {
    ref: inputRef,
    prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
    placeholder: "\u8BF7\u8F93\u5165",
    size: "middle",
    onPressEnter: onPressEnter
  }), /*#__PURE__*/React.createElement(List, {
    key: useKey,
    itemLayout: "horizontal",
    dataSource: useData,
    renderItem: function renderItem(item) {
      return /*#__PURE__*/React.createElement(ComplexItem, {
        key: item.field,
        data: item,
        onChange: getChange
        // style={{ display: item.show ? 'block' : 'none' }}
      });
    }
  })));
};

export default Index;