linkmore-design/lib/filter/complex/ComplexItem.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 _Popover = _interopRequireDefault(require("../Popover"));
// 这里的data是filter数组的单独项
const Index = props => {
  const {
    data,
    onChange
  } = props;
  const popoverRef = (0, _react.useRef)(data.field);
  const [useKey, setKey] = (0, _react.useState)(data.field);
  const [useMode, setMode] = (0, _react.useState)(); // 查询关系 and||or
  const [useCheckValue, setCheckValue] = (0, _react.useState)([]); // 选中的数据

  const getChange = ({
    field,
    value,
    mapItem
  }, mode) => {
    const {
      checkValue
    } = mapItem;
    setCheckValue(checkValue);
    setMode(mode);
    onChange?.({
      field,
      value
    }, mode);
  };

  // 删除筛选项
  const onClose = () => {
    setCheckValue([]);
    setKey(Date.now());
    const {
      field,
      type
    } = data;
    onChange?.({
      field,
      value: type === 'checkbox' ? [] : ''
    }, useMode);
  };

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

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

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