linkmore-design/es/complex-filter/controls/GhostText.js

🌈 🚀lm组件库。🚀

import { CalendarOutlined } from '@ant-design/icons';
import { get } from 'lodash';
import React, { memo, useMemo } from 'react';
import IconFont from "../../icon-font";
import { getFlatItem, getIsHas, getValueForType, toStringIsEqual } from "../utils";

// 左侧标题
var ItemTitle = /*#__PURE__*/memo(function (_ref) {
  var title = _ref.title,
    colon = _ref.colon;
  var showColon = useMemo(function () {
    return (colon !== null && colon !== void 0 ? colon : ':') ? ':' : null;
  }, [colon]);
  if (!title && !showColon) return null;
  return /*#__PURE__*/React.createElement("div", {
    className: "filter_item_label"
  }, title, showColon);
});

// 选中时的展现态
var ItemValueText = /*#__PURE__*/memo(function (item) {
  var value = item.value,
    type = item.type,
    options = item.options;

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

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

        // 多选
        var _labels = options === null || options === void 0 ? void 0 : (_options$filter = options.filter(function (v) {
          return toStringIsEqual(v.value, value, 'includes');
        })) === null || _options$filter === void 0 ? void 0 : _options$filter.map(function (v) {
          return v.label;
        });
        if (!_labels.length) {
          _labels = value;
        } // 受控模式未查找到显示的内容时展示
        switch (_labels.length) {
          case 1:
            return _labels[0];
          case 2:
            return "".concat(_labels[0], "\u3001").concat(_labels[1]);
          default:
            return "".concat(_labels[0], "\u3001+").concat(_labels.length - 1, "...");
        }
      }

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

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

// 未选中时的展现态
var ItemValuePlacehodler = /*#__PURE__*/memo(function (props) {
  var type = props.type,
    itemProps = props.componentProps,
    dateType = props.dateType,
    datetype = props.datetype,
    placeholder = props.placeholder,
    locale = props.locale;

  // 日期显示的处理
  if (['date'].includes(type)) {
    // 兼容大小写
    if (['range', 'rangePicker'].includes(dateType || datetype)) {
      var pls = placeholder !== null && placeholder !== void 0 ? placeholder : locale.rangePlaceholder;
      return /*#__PURE__*/React.createElement(React.Fragment, null, pls === null || pls === void 0 ? void 0 : pls[0], /*#__PURE__*/React.createElement(IconFont, {
        type: "lmweb-swap-right",
        style: {
          fontSize: 14
        }
      }), pls === null || pls === void 0 ? void 0 : pls[1], /*#__PURE__*/React.createElement(CalendarOutlined, {
        style: {
          fontSize: 12
        }
      }));
    }
    var unit = {
      week: locale.week,
      month: locale.month,
      quarter: locale.quarter,
      year: locale.year
    };
    return /*#__PURE__*/React.createElement(React.Fragment, null, placeholder !== null && placeholder !== void 0 ? placeholder : "".concat(locale.select).concat(unit[itemProps === null || itemProps === void 0 ? void 0 : itemProps.picker] || locale.date), /*#__PURE__*/React.createElement(CalendarOutlined, {
      style: {
        fontSize: 12
      }
    }));
  }
  if (['range', 'rangePicker'].includes(type)) {
    var _pls = placeholder !== null && placeholder !== void 0 ? placeholder : locale.rangePlaceholder;
    return /*#__PURE__*/React.createElement(React.Fragment, null, _pls === null || _pls === void 0 ? void 0 : _pls[0], /*#__PURE__*/React.createElement(IconFont, {
      type: "lmweb-swap-right",
      style: {
        fontSize: 14
      }
    }), _pls === null || _pls === void 0 ? void 0 : _pls[1], /*#__PURE__*/React.createElement(CalendarOutlined, {
      style: {
        fontSize: 12
      }
    }));
  }
  return /*#__PURE__*/React.createElement("span", null, placeholder || (locale === null || locale === void 0 ? void 0 : locale.all));
});

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

// 内容中尾部ICON
var ItemIcon = /*#__PURE__*/memo(function (_ref2) {
  var value = _ref2.value,
    type = _ref2.type,
    clearIconTrigger = _ref2.clearIconTrigger,
    _ref2$allowClear = _ref2.allowClear,
    allowClear = _ref2$allowClear === void 0 ? true : _ref2$allowClear,
    onChange = _ref2.onChange;
  var active = useMemo(function () {
    return getIsHas(value);
  }, [value]);
  var handleClear = function handleClear(e) {
    if (active) {
      e.stopPropagation();
      onChange(getValueForType(type));
    }
  };

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

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

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

// 展示内容(幽灵态)
var Ghost = function Ghost(props) {
  var title = props.title,
    colon = props.colon;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ItemTitle, {
    title: title,
    colon: colon
  }), /*#__PURE__*/React.createElement(ItemValue, props), /*#__PURE__*/React.createElement(ItemIcon, props));
};
export default /*#__PURE__*/memo(Ghost);