linkmore-design/lib/advanced-filter/controls/WrapperRender.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 _classnames = _interopRequireDefault(require("classnames"));
var _pick = _interopRequireDefault(require("lodash/pick"));
var _react = _interopRequireWildcard(require("react"));
var _iconFont = _interopRequireDefault(require("../../icon-font"));
const PlaceholderRender = ({
  type,
  placeholder
}) => {
  if (['dateRange', 'range'].includes(type) && Array.isArray(placeholder)) {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholder[0], /*#__PURE__*/_react.default.createElement(_iconFont.default, {
      type: "lm-icon-swap-right",
      style: {
        fontSize: 14
      }
    }), placeholder[1]);
  }
  return /*#__PURE__*/_react.default.createElement("span", null, placeholder);
};

// 格式化显示内容(同时判定value与type, 防止value与type不匹配时的显示问题)
const ValueRender = props => {
  const {
    value,
    type,
    options,
    fieldNames
  } = props;
  const optionMap = (0, _react.useMemo)(() => new Map(options.map(option => [option[fieldNames.value], option[fieldNames.label]])), [options, fieldNames]);

  /**
   * 转换展示的格式([string, string, any...]) => 'string' | 'string、string' | 'string、+n'
   *  @description 对于传入的数组仅前两项存在的话必须是字符串类型, 其余项不做类型要求
   */
  const transformText = labels => {
    const [first, ...others] = labels;
    const resetLabels = [first].concat(others.length > 1 ? `+${others.length}...` : others);
    return resetLabels.join('、');
  };
  if (['select'].includes(type)) {
    const label = optionMap.has(value) ? optionMap.get(value) : value;
    return /*#__PURE__*/_react.default.createElement("span", null, label);
  }

  // 日期的展示处理
  if (['dateRange', 'range'].includes(type) && Array.isArray(value)) {
    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 (['checkbox'].includes(type) && Array.isArray(value)) {
    // 优化处理, 仅处理前两项
    const firstTwoValue = value.slice(0, 2);
    const firstTwoLabels = firstTwoValue.map(item => optionMap.has(item) ? optionMap.get(item) : item);
    const others = value.slice(2);
    const str = transformText(firstTwoLabels.concat(others));
    return /*#__PURE__*/_react.default.createElement("span", null, str);
  }

  // value: string[] | Array<string[]>
  if (['cascader'].includes(type) && Array.isArray(value)) {
    const firstTwoValue = value.slice(0, 2);
    const isCheckedMultiple = firstTwoValue.every(Array.isArray);
    const matchLabel = (checkedKeys = []) => {
      let checkedLabel;
      checkedKeys.reduce((pre, cur, index, array) => {
        const option = pre.find(v => v[fieldNames.value] === cur) || {};
        if (index + 1 === array.length) {
          checkedLabel = option[fieldNames.label] || cur;
        }
        return option[fieldNames.children];
      }, options);
      return checkedLabel;
    };

    // 优化处理, 仅处理前两项
    if (isCheckedMultiple) {
      const firstTwoLabels = firstTwoValue.map(matchLabel);
      const others = value.slice(2);
      const str = transformText(firstTwoLabels.concat(others));
      return /*#__PURE__*/_react.default.createElement("span", null, str);
    }
    const str = transformText([matchLabel(value)]);
    return /*#__PURE__*/_react.default.createElement("span", null, str);
  }
  if (['numberRange'].includes(type) && Array.isArray(value)) {
    const unitLabel = optionMap.has(value[2]) ? optionMap.get(value[2]) : value[2];
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value[0], " ~ ", value[1], unitLabel);
  }
  return /*#__PURE__*/_react.default.createElement("span", null, value);
};
const ClearRender = ({
  onChange
}) => {
  return /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: "lm-icon-a-shidia0shanchu",
    className: "filter_item_icon",
    onClick: e => {
      e.stopPropagation();
      onChange();
    }
  });
};
const SuffixRender = ({
  type
}) => {
  if (['date', 'range', 'dateRange'].includes(type)) {
    return /*#__PURE__*/_react.default.createElement(_iconFont.default, {
      className: "filter_item_icon",
      type: "lm-icon-a-tongyongaGrili"
    });
  }
  return /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    className: "filter_item_icon addon_after",
    type: "lm-icon-a-jiantoua2xialaxia"
  });
};
const WrapperRender = props => {
  const {
    value,
    onChange,
    type,
    open
  } = props;

  // 是否存在value
  const excitingValue = (0, _react.useMemo)(() => {
    let flag = true;
    Array.isArray(value) ? flag = !!value.length : value ?? (flag = false);
    return flag;
  }, [value]);
  const AsProps = (0, _pick.default)(props, ['onMouseEnter', 'onMouseLeave', 'onFocus', 'onClick']);
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    className: (0, _classnames.default)('lm_filter_basic_item', {
      expand: open,
      active: excitingValue
    })
  }, AsProps), /*#__PURE__*/_react.default.createElement("div", {
    className: "filter_item_value"
  }, excitingValue ? /*#__PURE__*/_react.default.createElement(ValueRender, (0, _pick.default)(props, ['type', 'value', 'options', 'fieldNames'])) : /*#__PURE__*/_react.default.createElement(PlaceholderRender, (0, _pick.default)(props, ['type', 'placeholder']))), excitingValue ? /*#__PURE__*/_react.default.createElement(ClearRender, {
    onChange: onChange
  }) : /*#__PURE__*/_react.default.createElement(SuffixRender, {
    type: type
  }));
};
var _default = WrapperRender;
exports.default = _default;