linkmore-design/lib/filter/baseFilter/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 _react = _interopRequireWildcard(require("react"));
var _antd = require("antd");
var _IconFont = _interopRequireDefault(require("../../IconFont"));
var _icons = require("@ant-design/icons");
var _components = require("../components");
var _context = _interopRequireDefault(require("../context"));
var _popContext = _interopRequireDefault(require("../popContext"));
// 单个组件的下拉框
const Index = props => {
  const {
    item,
    content,
    children,
    config,
    getChange
  } = props;
  const {
    toggle,
    title,
    type,
    field,
    data
  } = item;
  const {
    state
  } = (0, _react.useContext)(_context.default);
  const {
    checkValue
  } = state;
  // 清除筛选多选状态： 暂时的解决方案，后续要更改
  const [useKey, setKey] = (0, _react.useState)(field);
  const [useVisible, setVisible] = (0, _react.useState)(false); // 控制弹出层显隐

  // 选中的值
  const useValue = (0, _react.useMemo)(() => {
    return checkValue[field];
  }, [checkValue]);
  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 showValue = () => {
    const result = showTitle();
    console.log(useValue, 'useValue');
    if (result) {
      if (useValue || typeof useValue === 'number') {
        switch (type) {
          case 'select':
            return data.find(v => v.value === useValue)?.label || '';
          case 'checkbox':
            return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, data.find(v => v.value === useValue[0])?.label || '', useValue?.length > 1 ? `、+${useValue?.length - 1}...` : null);
          case 'tree':
            return useValue.title;
          case 'date':
            return Array.isArray(useValue) ? `${useValue[0]} 至 ${useValue[1]}` : useValue;
          case 'input':
            return useValue;
          default:
            break;
        }
      }
    }
    return null;
  };

  // 文字
  const showLabel = () => {
    return `${title}：`;
  };

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

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

    const v = type === 'checkbox' ? [] : '';
    onChange(v, {
      ...item
    }, 'and');
  };
  return /*#__PURE__*/_react.default.createElement(_popContext.default.Provider, {
    value: {
      ...props,
      onChange
    }
  }, /*#__PURE__*/_react.default.createElement(_antd.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(_antd.Button, {
    type: "link",
    className: !!showTitle() || useVisible ? 'btn btn_active' : 'btn btn_not_active'
  }, showLabel(), /*#__PURE__*/_react.default.createElement("span", {
    className: "btn_value"
  }, showValue()), showTitle() !== null ? /*#__PURE__*/_react.default.createElement(_IconFont.default, {
    className: "btn_icon_close",
    type: "lmweb-close-circle-fill",
    onClick: handleClear
  }) : useVisible ? /*#__PURE__*/_react.default.createElement("span", {
    className: "label_text"
  }, /*#__PURE__*/_react.default.createElement("span", null, "\u5168\u90E8"), /*#__PURE__*/_react.default.createElement(_icons.UpOutlined, null)) : /*#__PURE__*/_react.default.createElement("span", {
    className: "label_text"
  }, /*#__PURE__*/_react.default.createElement("span", null, "\u5168\u90E8"), /*#__PURE__*/_react.default.createElement(_icons.DownOutlined, null)))));
};
var _default = Index;
exports.default = _default;