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

🌈 🚀lm组件库。🚀

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useRef, useState } from 'react';
import { List, Tag } from 'antd';
import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
import Popover from "../Popover";

// 这里的data是filter数组的单独项
var Index = function Index(props) {
  var data = props.data,
    onChange = props.onChange;
  var popoverRef = useRef(data.field);
  var _useState = useState(data.field),
    _useState2 = _slicedToArray(_useState, 2),
    useKey = _useState2[0],
    setKey = _useState2[1];
  var _useState3 = useState(),
    _useState4 = _slicedToArray(_useState3, 2),
    useMode = _useState4[0],
    setMode = _useState4[1]; // 查询关系 and||or
  var _useState5 = useState([]),
    _useState6 = _slicedToArray(_useState5, 2),
    useCheckValue = _useState6[0],
    setCheckValue = _useState6[1]; // 选中的数据

  var getChange = function getChange(_ref, mode) {
    var field = _ref.field,
      value = _ref.value,
      mapItem = _ref.mapItem;
    var checkValue = mapItem.checkValue;
    setCheckValue(checkValue);
    setMode(mode);
    onChange === null || onChange === void 0 ? void 0 : onChange({
      field: field,
      value: value
    }, mode);
  };

  // 删除筛选项
  var onClose = function onClose() {
    setCheckValue([]);
    setKey(Date.now());
    var field = data.field,
      type = data.type;
    onChange === null || onChange === void 0 ? void 0 : onChange({
      field: field,
      value: type === 'checkbox' ? [] : ''
    }, useMode);
  };

  // 删除复选单个筛选项
  var onTagClose = function onTagClose(value) {
    var nValue = useCheckValue.filter(function (v) {
      return v.value !== value;
    });
    setCheckValue(nValue);
    var defaultValue = nValue.map(function (v) {
      return v.value;
    });
    popoverRef.current.clearTag(defaultValue);
  };

  // 显示的标签
  var defaultShow = function defaultShow() {
    if (useCheckValue.length === 0) return null;
    // 数组查找展示文字
    if (data.type === 'checkbox' && useCheckValue.length > 0) {
      return useCheckValue.map(function (v) {
        return /*#__PURE__*/React.createElement(Tag, {
          closable: true,
          key: v.value,
          onClose: function onClose() {
            return onTagClose(v.value);
          }
        }, v.label);
      });
    }
    var single = useCheckValue[0];
    if (data.type === 'select') {
      return /*#__PURE__*/React.createElement(Tag, null, single.label);
    }
    if (data.type === 'tree') {
      return /*#__PURE__*/React.createElement(Tag, null, single.title);
    }
    if (data.type === 'date') {
      if (useCheckValue.length === 2) {
        return /*#__PURE__*/React.createElement(Tag, null, "".concat(useCheckValue[0], " ~ ").concat(useCheckValue[1]));
      }
      return /*#__PURE__*/React.createElement(Tag, null, single);
    }

    // 直接返回 value
    // return <Tag>{useCheckValue}</Tag>;
    return /*#__PURE__*/React.createElement(Tag, null, "Tag");
  };
  return /*#__PURE__*/React.createElement(Popover, {
    ref: popoverRef,
    key: useKey,
    item: data,
    header: true,
    config: {
      overlayStyle: {
        width: 408,
        paddingTop: 0
      }
    },
    getChange: getChange
  }, /*#__PURE__*/React.createElement(List.Item, {
    style: {
      display: data.hidden ? 'none' : 'flex'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "item_label"
  }, data.title, useCheckValue.length > 0 ? useMode === 'and' ? '(且)' : '(或)' : null), /*#__PURE__*/React.createElement("div", {
    className: "item_other"
  }, /*#__PURE__*/React.createElement("div", {
    className: "tag_roup"
  }, defaultShow()), /*#__PURE__*/React.createElement("div", {
    className: "itme_icon"
  }, useCheckValue.length === 0 ? /*#__PURE__*/React.createElement(PlusOutlined, null) : /*#__PURE__*/React.createElement(CloseOutlined, {
    onClick: onClose
  })))));
};
export default Index;