linkmore-design/lib/filter/edit/editFilter.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 _context = _interopRequireDefault(require("../context"));
const ListItem = props => {
  const InputRef = (0, _react.useRef)(null);
  // eslint-disable-next-line no-unused-vars
  const {
    data,
    onChange,
    onClose
  } = props;
  const [useInputVisible, setInputVisible] = (0, _react.useState)(false);
  const [useCheckValue, setCheckValue] = (0, _react.useState)(data.checkValue); // 选中的数据

  // Tag转输入框
  const showInput = async () => {
    await setInputVisible(true);
    InputRef.current.focus();
  };

  // 输入框失焦&回车事件
  const handleInputConfirm = () => {
    setInputVisible(false);
  };
  const onItemClose = () => {
    onClose?.(data.field);
  };

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

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

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

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

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

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

  // 重置
  const resetClose = () => {
    onClose?.();
    setKeys(Date.now());
    const nValue = Object.values(state.checked);
    setList(nValue);
  };

  // 保存数据
  const onSave = () => {
    onClose?.();
  };

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