linkmore-design/es/filter/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 { CloseOutlined, DownOutlined, UpOutlined } from '@ant-design/icons';
import { Button, Popover } from "../index";
import React, { forwardRef, useRef, useState } from 'react';
import { Checkbox, DatePicker, Input, Select, Tree } from "./components";
import PopContext from "./popContext";

// 单个组件的下拉框
var Index = /*#__PURE__*/forwardRef(function (props, ref) {
  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 _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    useVisible = _useState2[0],
    setVisible = _useState2[1]; // 控制弹出层显隐
  var _useState3 = useState(),
    _useState4 = _slicedToArray(_useState3, 2),
    useValue = _useState4[0],
    setValue = _useState4[1]; // 选中的值
  var _useState5 = useState(field),
    _useState6 = _slicedToArray(_useState5, 2),
    useKey = _useState6[0],
    setKey = _useState6[1];
  var singleRef = ref || useRef(null);
  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 showLabel = function showLabel() {
    if (toggle) return title;
    if (useValue || typeof useValue === 'number') {
      switch (type) {
        case 'select':
          return data.find(function (v) {
            return v.value === useValue;
          }).label;
        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 title;
  };

  // 选中时触发
  var onChange = function onChange(v, obj, mode) {
    type !== 'checkbox' ? setVisible(false) : '';
    if (toggle) {
      getChange === null || getChange === void 0 ? void 0 : getChange(v);
      return;
    }
    setValue(v);
    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, {
          key: useKey
        });
      case 'select':
        return /*#__PURE__*/React.createElement(Select, {
          key: useKey
        });
      case 'checkbox':
        return /*#__PURE__*/React.createElement(Checkbox, {
          key: useKey,
          ref: singleRef
        });
      case 'tree':
        return /*#__PURE__*/React.createElement(Tree, {
          key: useKey
        });
      case 'date':
        return /*#__PURE__*/React.createElement(DatePicker, {
          key: useKey
        });
      default:
        return /*#__PURE__*/React.createElement(Select, null);
    }
  };

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

  // const clearTag = (value) => {
  //   setKey(Date.now()); // 重新渲染
  //   setDefaultValue(value);
  //   // getChange({ field, value });
  // };

  // React.useImperativeHandle(ref, () => ({
  //   clearTag,
  // }));

  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_active'
  }, showLabel(), " ", showTitle(), showTitle() !== null ? /*#__PURE__*/React.createElement(CloseOutlined, {
    onClick: handleClear
  }) : useVisible ? /*#__PURE__*/React.createElement(UpOutlined, null) : /*#__PURE__*/React.createElement(DownOutlined, null))));
});
export default Index;