linkmore-design/es/filter/edit/editFilter.js

🌈 🚀lm组件库。🚀

import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useState, useRef, useEffect, useContext } from 'react';
import { Button, Drawer, Input, List, Space, Radio, Tag } from 'antd';
import { SearchOutlined, CloseOutlined, PlusOutlined } from '@ant-design/icons';
import Context from "../context";
var ListItem = function ListItem(props) {
  var InputRef = useRef(null);
  // eslint-disable-next-line no-unused-vars
  var data = props.data,
    onChange = props.onChange,
    onClose = props.onClose;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    useInputVisible = _useState2[0],
    setInputVisible = _useState2[1];
  var _useState3 = useState(data.checkValue),
    _useState4 = _slicedToArray(_useState3, 2),
    useCheckValue = _useState4[0],
    setCheckValue = _useState4[1]; // 选中的数据

  // Tag转输入框
  var showInput = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return setInputVisible(true);
          case 2:
            InputRef.current.focus();
          case 3:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function showInput() {
      return _ref.apply(this, arguments);
    };
  }();

  // 输入框失焦&回车事件
  var handleInputConfirm = function handleInputConfirm() {
    setInputVisible(false);
  };
  var onItemClose = function onItemClose() {
    onClose === null || onClose === void 0 ? void 0 : onClose(data.field);
  };

  // 删除Tag
  var onTagClose = function onTagClose(tag) {
    var nValue = useCheckValue.filter(function (v) {
      return v.value !== tag;
    });
    setCheckValue(nValue);
  };

  // Tags显示
  var tagElem = function tagElem() {
    return /*#__PURE__*/React.createElement(React.Fragment, null, useCheckValue.map(function (v) {
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tag, {
        key: v.value,
        closable: true,
        onClose: function onClose() {
          return onTagClose(v.value);
        }
      }, v.label));
    }), useInputVisible ? /*#__PURE__*/React.createElement(Input, {
      ref: InputRef,
      type: "text",
      size: "small",
      className: "tag-input",
      onBlur: handleInputConfirm,
      onPressEnter: handleInputConfirm
    }) : /*#__PURE__*/React.createElement(Tag, {
      className: "site-tag-plus",
      onClick: showInput
    }, /*#__PURE__*/React.createElement(PlusOutlined, null), " \u65B0\u589E"));
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(List.Item, {
    key: data.field
  }, /*#__PURE__*/React.createElement("div", {
    className: "item_box"
  }, /*#__PURE__*/React.createElement("div", {
    className: "item_label"
  }, /*#__PURE__*/React.createElement("div", null, data.title, "\uFF08\u4E14\uFF09"), /*#__PURE__*/React.createElement(CloseOutlined, {
    onClick: onItemClose
  })), /*#__PURE__*/React.createElement("div", {
    className: "item_tags"
  }, tagElem()))));
};
var Index = function Index(props) {
  var _useContext = useContext(Context),
    state = _useContext.state;
  var visible = props.visible,
    onClose = props.onClose;
  var inputRef = useRef();
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    useDefault = _useState6[0],
    setDefault = _useState6[1];
  var _useState7 = useState(),
    _useState8 = _slicedToArray(_useState7, 2),
    useList = _useState8[0],
    setList = _useState8[1];
  var _useState9 = useState('editFilter'),
    _useState10 = _slicedToArray(_useState9, 2),
    useKeys = _useState10[0],
    setKeys = _useState10[1];

  // 设为默认事件
  var onRadioChange = function onRadioChange(e) {
    var v = e.target.value;
    setDefault(v);
  };

  // 新增筛选项
  var addEvent = function addEvent() {
    console.log('新增筛选项！');
  };

  // 单个筛选项筛选值变化
  var getChange = function getChange(e) {
    console.log('getChange', e);
  };

  // 删除单个筛选项
  var listItemOnClose = function listItemOnClose(field) {
    var nValue = useList.filter(function (v) {
      return v.field !== field;
    });
    setList(nValue);
  };

  // 重置
  var resetClose = function resetClose() {
    onClose === null || onClose === void 0 ? void 0 : onClose();
    setKeys(Date.now());
    var nValue = Object.values(state.checked);
    setList(nValue);
  };

  // 保存数据
  var onSave = function onSave() {
    onClose === null || onClose === void 0 ? void 0 : onClose();
  };

  // 初始化从state中获取数据
  useEffect(function () {
    var nValue = Object.values(state.checked);
    setList(nValue);
  }, [state.checked]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Drawer, {
    title: "\u521B\u5EFA\u6211\u7684\u7B5B\u9009",
    width: 440,
    placement: "right",
    onClose: resetClose,
    visible: visible,
    key: useKeys,
    extra: /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
      onClick: resetClose
    }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
      type: "primary",
      onClick: onSave
    }, "\u786E\u8BA4")),
    className: "edit_filter"
  }, /*#__PURE__*/React.createElement("div", {
    className: "edit_filter_title"
  }, /*#__PURE__*/React.createElement(Space, {
    direction: "vertical",
    size: 16
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "title_lable"
  }, /*#__PURE__*/React.createElement("span", {
    className: "required"
  }, "*"), " \u540D\u79F0"), /*#__PURE__*/React.createElement(Input, {
    ref: inputRef,
    prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
    placeholder: "\u8BF7\u8F93\u5165",
    size: "middle"
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "title_lable"
  }, "\u8BBE\u4E3A\u9ED8\u8BA4"), /*#__PURE__*/React.createElement(Radio.Group, {
    onChange: onRadioChange,
    value: useDefault
  }, /*#__PURE__*/React.createElement(Radio, {
    value: true
  }, "\u662F"), /*#__PURE__*/React.createElement(Radio, {
    value: false
  }, "\u5426"))))), /*#__PURE__*/React.createElement("div", {
    className: "edit_filter_body"
  }, /*#__PURE__*/React.createElement(List, {
    itemLayout: "vertical",
    dataSource: useList,
    rowKey: function rowKey(item) {
      return item.field;
    },
    renderItem: function renderItem(item) {
      return /*#__PURE__*/React.createElement(ListItem, {
        data: item,
        onChange: getChange,
        onClose: listItemOnClose
      });
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "edit_filter_footer"
  }, /*#__PURE__*/React.createElement(Button, {
    type: "dashed",
    block: true,
    onClick: addEvent,
    size: "middle"
  }, "\u65B0\u589E\u7B5B\u9009\u9879")))));
};
export default Index;