linkmore-design/lib/filter/Popover.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _icons = require("@ant-design/icons");
var _index = require("../index");
var _react = _interopRequireWildcard(require("react"));
var _components = require("./components");
var _popContext = _interopRequireDefault(require("./popContext"));
// 单个组件的下拉框
const Index = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  const {
    item,
    content,
    children,
    config,
    getChange
  } = props;
  const {
    toggle,
    title,
    type,
    field,
    data
  } = item;
  const [useVisible, setVisible] = (0, _react.useState)(false); // 控制弹出层显隐
  const [useValue, setValue] = (0, _react.useState)(); // 选中的值
  const [useKey, setKey] = (0, _react.useState)(field);
  const singleRef = ref || (0, _react.useRef)(null);
  const handleClick = visible => {
    setVisible(visible);
  };

  // 数字
  const 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 ? `(${useValue?.length})` : null;
    }
    return true;
  };

  // 文字
  const showLabel = () => {
    if (toggle) return title;
    if (useValue || typeof useValue === 'number') {
      switch (type) {
        case 'select':
          return data.find(v => v.value === useValue).label;
        case 'tree':
          return useValue.title;
        case 'date':
          return Array.isArray(useValue) ? `${useValue[0]} 至 ${useValue[1]}` : useValue;
        case 'input':
          return useValue;
        default:
          break;
      }
    }
    return title;
  };

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

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

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

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

  return /*#__PURE__*/_react.default.createElement(_popContext.default.Provider, {
    value: {
      ...props,
      onChange
    }
  }, /*#__PURE__*/_react.default.createElement(_index.Popover, (0, _extends2.default)({
    placement: "bottomLeft",
    overlayClassName: "list-popover",
    trigger: "click",
    visible: useVisible,
    onVisibleChange: handleClick,
    content: content ? content(onChange) : contentDom
  }, config), children || /*#__PURE__*/_react.default.createElement(_index.Button, {
    type: "link",
    className: (!!showTitle() || useVisible) && 'btn_active'
  }, showLabel(), " ", showTitle(), showTitle() !== null ? /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, {
    onClick: handleClear
  }) : useVisible ? /*#__PURE__*/_react.default.createElement(_icons.UpOutlined, null) : /*#__PURE__*/_react.default.createElement(_icons.DownOutlined, null))));
});
var _default = Index;
exports.default = _default;