linkmore-design/lib/complex-filter/controls/GhostText.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 _icons = require("@ant-design/icons");
var _lodash = require("lodash");
var _react = _interopRequireWildcard(require("react"));
var _iconFont = _interopRequireDefault(require("../../icon-font"));
var _utils = require("../utils");
// 左侧标题
const ItemTitle = /*#__PURE__*/(0, _react.memo)(({
  title,
  colon
}) => {
  const showColon = (0, _react.useMemo)(() => colon ?? ':' ? ':' : null, [colon]);
  if (!title && !showColon) return null;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_item_label"
  }, title, showColon);
});

// 选中时的展现态
const ItemValueText = /*#__PURE__*/(0, _react.memo)(item => {
  const {
    value,
    type,
    options
  } = item;

  /*
   * 是否返回字符串类型
   * return string | type:  'input', 'select', 'checkbox', 'cascader'
   * return Jsx | type: 'date'
   */
  const isString = (0, _react.useMemo)(() => {
    return ['input', 'select', 'checkbox', 'cascader'].includes(type);
  }, [type]);

  // 存在筛选数据时 ⬇️
  const String = (0, _react.useMemo)(() => {
    try {
      // 级联数据转换平级结构
      if (['cascader'].includes(type)) {
        const nArr = (0, _utils.getFlatItem)(item, value);
        const labels = nArr?.map(v => v[(0, _lodash.get)(item, 'componentProps.fieldNames.label', 'label')]);
        switch (labels.length) {
          case 0:
            // 数据未查找到时
            return value;
          case 1:
            return labels[0];
          case 2:
            return `${labels[0]}、${labels[1]}`;
          default:
            return `${labels[0]}、+${labels.length - 1}...`;
        }
      }
      if (Array.isArray(value)) {
        // 日期
        if (['date', 'range'].includes(type)) {
          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value[0], /*#__PURE__*/_react.default.createElement(_iconFont.default, {
            type: "lm-icon-swap-right",
            style: {
              fontSize: 14,
              color: 'var(--text-color)'
            }
          }), value[1]);
        }
        if (['numberRange', 'numberrange'].includes(type)) {
          const optionLabel = options?.find(v => v.value === value?.[2])?.label || '';
          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value[0], "~", value[1], optionLabel);
        }

        // 多选
        let labels = options?.filter(v => (0, _utils.toStringIsEqual)(v.value, value, 'includes'))?.map(v => v.label);
        if (!labels.length) {
          labels = value;
        } // 受控模式未查找到显示的内容时展示
        switch (labels.length) {
          case 1:
            return labels[0];
          case 2:
            return `${labels[0]}、${labels[1]}`;
          default:
            return `${labels[0]}、+${labels.length - 1}...`;
        }
      }

      // 输入框
      if (['input', 'date'].includes(type)) {
        return value;
      }

      // 单选框 受控模式未查找到显示的内容时展示value
      const label = options?.find(v => (0, _utils.toStringIsEqual)(v?.value, value))?.label || value;
      return label;
    } catch (error) {
      console.log('报错了!', '报错项:', item, '报错值', value);
      return value;
    }
  }, [type, options, value]);
  if (isString) {
    return /*#__PURE__*/_react.default.createElement("span", null, String);
  }
  return String;
});

// 未选中时的展现态
const ItemValuePlacehodler = /*#__PURE__*/(0, _react.memo)(props => {
  const {
    type,
    componentProps: itemProps,
    dateType,
    datetype,
    placeholder,
    locale
  } = props;

  // 日期显示的处理
  if (['date'].includes(type)) {
    // 兼容大小写
    if (['range', 'rangePicker'].includes(dateType || datetype)) {
      const pls = placeholder ?? locale.rangePlaceholder;
      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, pls?.[0], /*#__PURE__*/_react.default.createElement(_iconFont.default, {
        type: "lm-icon-swap-right",
        style: {
          fontSize: 14
        }
      }), pls?.[1], /*#__PURE__*/_react.default.createElement(_icons.CalendarOutlined, {
        style: {
          fontSize: 12
        }
      }));
    }
    const unit = {
      week: locale.week,
      month: locale.month,
      quarter: locale.quarter,
      year: locale.year
    };
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholder ?? `${locale.select}${unit[itemProps?.picker] || locale.date}`, /*#__PURE__*/_react.default.createElement(_icons.CalendarOutlined, {
      style: {
        fontSize: 12
      }
    }));
  }
  if (['range', 'rangePicker'].includes(type)) {
    const pls = placeholder ?? locale.rangePlaceholder;
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, pls?.[0], /*#__PURE__*/_react.default.createElement(_iconFont.default, {
      type: "lm-icon-swap-right",
      style: {
        fontSize: 14
      }
    }), pls?.[1], /*#__PURE__*/_react.default.createElement(_icons.CalendarOutlined, {
      style: {
        fontSize: 12
      }
    }));
  }
  return /*#__PURE__*/_react.default.createElement("span", null, placeholder || locale?.all);
});

// 右侧内容
const ItemValue = /*#__PURE__*/(0, _react.memo)(props => {
  const {
    value
  } = props;
  // 是否有筛选值/是否处于筛选状态
  const active = (0, _react.useMemo)(() => (0, _utils.getIsHas)(value), [value]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_item_value"
  }, active ? /*#__PURE__*/_react.default.createElement(ItemValueText, props) : /*#__PURE__*/_react.default.createElement(ItemValuePlacehodler, props));
});

// 内容中尾部ICON
const ItemIcon = /*#__PURE__*/(0, _react.memo)(({
  value,
  type,
  clearIconTrigger,
  allowClear = true,
  onChange
}) => {
  const active = (0, _react.useMemo)(() => (0, _utils.getIsHas)(value), [value]);
  const handleClear = e => {
    if (active) {
      e.stopPropagation();
      onChange((0, _utils.getValueForType)(type));
    }
  };

  // Icon展示方式: 下拉还是清除
  const Icon = () => {
    const isData = type === 'date';
    // 日期类型并且未选中时返回日期自带icon
    if (isData && !active) return null;
    if (!allowClear) return /*#__PURE__*/_react.default.createElement(_iconFont.default, {
      type: "lm-icon-a-jiantoua2xialaxia"
    });

    // hover时出现清空
    if (clearIconTrigger === 'hover') {
      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
        type: "lm-icon-a-shidia0shanchu",
        onClick: handleClear,
        className: "icon_clear"
      }), /*#__PURE__*/_react.default.createElement(_iconFont.default, {
        type: "lm-icon-a-jiantoua2xialaxia",
        className: "icon_down"
      }));
    }

    // 选中时展示清除按钮
    return /*#__PURE__*/_react.default.createElement(_iconFont.default, {
      type: active ? 'lm-icon-a-shidia0shanchu' : 'lm-icon-a-jiantoua2xialaxia',
      onClick: handleClear
    });
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_item_icon addon_after"
  }, /*#__PURE__*/_react.default.createElement(Icon, null));
});

// 展示内容(幽灵态)
const Ghost = props => {
  const {
    title,
    colon
  } = props;
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ItemTitle, {
    title: title,
    colon: colon
  }), /*#__PURE__*/_react.default.createElement(ItemValue, props), /*#__PURE__*/_react.default.createElement(ItemIcon, props));
};
var _default = /*#__PURE__*/(0, _react.memo)(Ghost);
exports.default = _default;