linkmore-design/es/filter/baseFilter/Popover.js

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState, useContext, useMemo } from 'react';
import { Popover, Button } from 'antd';
import IconFont from "../../IconFont";
import { UpOutlined, DownOutlined } from '@ant-design/icons';
import { Input, Select, Checkbox, Tree, DatePicker } from "../components";
import Context from "../context";
import PopContext from "../popContext";

// 单个组件的下拉框
var Index = function Index(props) {
  var item = props.item,
    content = props.content,
    children = props.children,
    config = props.config,
    getChange = props.getChange;
  var toggle = item.toggle,
    title = item.title,
    type = item.type,
    field = item.field,
    data = item.data;
  var _useContext = useContext(Context),
    state = _useContext.state;
  var checkValue = state.checkValue;
  // 清除筛选多选状态： 暂时的解决方案，后续要更改
  var _useState = useState(field),
    _useState2 = _slicedToArray(_useState, 2),
    useKey = _useState2[0],
    setKey = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    useVisible = _useState4[0],
    setVisible = _useState4[1]; // 控制弹出层显隐

  // 选中的值
  var useValue = useMemo(function () {
    return checkValue[field];
  }, [checkValue]);
  var handleClick = function handleClick(visible) {
    setVisible(visible);
  };

  // 数字
  var showTitle = function showTitle() {
    if (toggle) return null;
    if (!useValue && typeof useValue !== 'number') return null;
    if (Array.isArray(useValue)) {
      if (type === 'date') return true;
      return useValue.length > 0 ? "(".concat(useValue === null || useValue === void 0 ? void 0 : useValue.length, ")") : null;
    }
    return true;
  };

  // 显示值
  var showValue = function showValue() {
    var _data$find, _data$find2;
    var result = showTitle();
    console.log(useValue, 'useValue');
    if (result) {
      if (useValue || typeof useValue === 'number') {
        switch (type) {
          case 'select':
            return ((_data$find = data.find(function (v) {
              return v.value === useValue;
            })) === null || _data$find === void 0 ? void 0 : _data$find.label) || '';
          case 'checkbox':
            return /*#__PURE__*/React.createElement(React.Fragment, null, ((_data$find2 = data.find(function (v) {
              return v.value === useValue[0];
            })) === null || _data$find2 === void 0 ? void 0 : _data$find2.label) || '', (useValue === null || useValue === void 0 ? void 0 : useValue.length) > 1 ? "\u3001+".concat((useValue === null || useValue === void 0 ? void 0 : useValue.length) - 1, "...") : null);
          case 'tree':
            return useValue.title;
          case 'date':
            return Array.isArray(useValue) ? "".concat(useValue[0], " \u81F3 ").concat(useValue[1]) : useValue;
          case 'input':
            return useValue;
          default:
            break;
        }
      }
    }
    return null;
  };

  // 文字
  var showLabel = function showLabel() {
    return "".concat(title, "\uFF1A");
  };

  // 选中时触发
  var onChange = function onChange(v, obj, mode) {
    type !== 'checkbox' ? setVisible(false) : '';
    if (toggle) {
      getChange === null || getChange === void 0 ? void 0 : getChange(v);
      return;
    }
    var params = {
      field: field,
      value: v,
      mapItem: obj
    };
    getChange === null || getChange === void 0 ? void 0 : getChange(params, mode);
  };
  var contentDom = function contentDom() {
    switch (type) {
      case 'input':
        return /*#__PURE__*/React.createElement(Input, null);
      case 'select':
        return /*#__PURE__*/React.createElement(Select, null);
      case 'checkbox':
        return /*#__PURE__*/React.createElement(Checkbox, {
          key: useKey
        });
      case 'tree':
        return /*#__PURE__*/React.createElement(Tree, null);
      case 'date':
        return /*#__PURE__*/React.createElement(DatePicker, null);
      default:
        return /*#__PURE__*/React.createElement(Select, null);
    }
  };

  // 清空筛选项
  var handleClear = function handleClear(e) {
    e === null || e === void 0 ? void 0 : e.stopPropagation();
    if (type === 'checkbox') {
      var nKey = field + Date.now();
      setKey(nKey); // 重新渲染
    }

    var v = type === 'checkbox' ? [] : '';
    onChange(v, _objectSpread({}, item), 'and');
  };
  return /*#__PURE__*/React.createElement(PopContext.Provider, {
    value: _objectSpread(_objectSpread({}, props), {}, {
      onChange: onChange
    })
  }, /*#__PURE__*/React.createElement(Popover, _extends({
    placement: "bottomLeft",
    overlayClassName: "list-popover",
    trigger: "click",
    visible: useVisible,
    onVisibleChange: handleClick,
    content: content ? content(onChange) : contentDom
  }, config), children || /*#__PURE__*/React.createElement(Button, {
    type: "link",
    className: !!showTitle() || useVisible ? 'btn btn_active' : 'btn btn_not_active'
  }, showLabel(), /*#__PURE__*/React.createElement("span", {
    className: "btn_value"
  }, showValue()), showTitle() !== null ? /*#__PURE__*/React.createElement(IconFont, {
    className: "btn_icon_close",
    type: "lmweb-close-circle-fill",
    onClick: handleClear
  }) : useVisible ? /*#__PURE__*/React.createElement("span", {
    className: "label_text"
  }, /*#__PURE__*/React.createElement("span", null, "\u5168\u90E8"), /*#__PURE__*/React.createElement(UpOutlined, null)) : /*#__PURE__*/React.createElement("span", {
    className: "label_text"
  }, /*#__PURE__*/React.createElement("span", null, "\u5168\u90E8"), /*#__PURE__*/React.createElement(DownOutlined, null)))));
};
export default Index;