linkmore-design/lib/filter/complex/ComplexFilter.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 _antd = require("antd");
var _icons = require("@ant-design/icons");
var _ComplexItem = _interopRequireDefault(require("./ComplexItem"));
const Index = props => {
  const inputRef = _react.default.useRef();
  const {
    data,
    onSearch
  } = props;
  const [useKey, setKey] = (0, _react.useState)('complex');
  const [useVisible, setVisible] = (0, _react.useState)(false);
  const [useData, setData] = (0, _react.useState)(data);
  const [useCheckValue, setCheckValue] = (0, _react.useState)({}); // 选中的数据

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