linkmore-design/es/advanced-filter/controls/WrapperRender.js

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _toArray from "@babel/runtime/helpers/esm/toArray";
import cls from 'classnames';
import pick from 'lodash/pick';
import React, { useMemo } from 'react';
import IconFont from "../../icon-font";
var PlaceholderRender = function PlaceholderRender(_ref) {
  var type = _ref.type,
    placeholder = _ref.placeholder;
  if (['dateRange', 'range'].includes(type) && Array.isArray(placeholder)) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, placeholder[0], /*#__PURE__*/React.createElement(IconFont, {
      type: "lmweb-swap-right",
      style: {
        fontSize: 14
      }
    }), placeholder[1]);
  }
  return /*#__PURE__*/React.createElement("span", null, placeholder);
};

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

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

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

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

    // 优化处理, 仅处理前两项
    if (isCheckedMultiple) {
      var _firstTwoLabels = _firstTwoValue.map(matchLabel);
      var _others = value.slice(2);
      var _str = transformText(_firstTwoLabels.concat(_others));
      return /*#__PURE__*/React.createElement("span", null, _str);
    }
    var _str2 = transformText([matchLabel(value)]);
    return /*#__PURE__*/React.createElement("span", null, _str2);
  }
  if (['numberRange'].includes(type) && Array.isArray(value)) {
    var unitLabel = optionMap.has(value[2]) ? optionMap.get(value[2]) : value[2];
    return /*#__PURE__*/React.createElement(React.Fragment, null, value[0], " ~ ", value[1], unitLabel);
  }
  return /*#__PURE__*/React.createElement("span", null, value);
};
var ClearRender = function ClearRender(_ref2) {
  var onChange = _ref2.onChange;
  return /*#__PURE__*/React.createElement(IconFont, {
    type: "icon-a-shidia0shanchu",
    className: "filter_item_icon",
    onClick: function onClick(e) {
      e.stopPropagation();
      onChange();
    }
  });
};
var SuffixRender = function SuffixRender(_ref3) {
  var type = _ref3.type;
  if (['date', 'range', 'dateRange'].includes(type)) {
    return /*#__PURE__*/React.createElement(IconFont, {
      className: "filter_item_icon",
      type: "icon-a-tongyongaGrili"
    });
  }
  return /*#__PURE__*/React.createElement(IconFont, {
    className: "filter_item_icon addon_after",
    type: "icon-a-jiantoua2xialaxia"
  });
};
var WrapperRender = function WrapperRender(props) {
  var value = props.value,
    onChange = props.onChange,
    type = props.type,
    open = props.open;

  // 是否存在value
  var excitingValue = useMemo(function () {
    var flag = true;
    Array.isArray(value) ? flag = !!value.length : value !== null && value !== void 0 ? value : flag = false;
    return flag;
  }, [value]);
  var AsProps = pick(props, ['onMouseEnter', 'onMouseLeave', 'onFocus', 'onClick']);
  return /*#__PURE__*/React.createElement("div", _extends({
    className: cls('lm_filter_basic_item', {
      expand: open,
      active: excitingValue
    })
  }, AsProps), /*#__PURE__*/React.createElement("div", {
    className: "filter_item_value"
  }, excitingValue ? /*#__PURE__*/React.createElement(ValueRender, pick(props, ['type', 'value', 'options', 'fieldNames'])) : /*#__PURE__*/React.createElement(PlaceholderRender, pick(props, ['type', 'placeholder']))), excitingValue ? /*#__PURE__*/React.createElement(ClearRender, {
    onChange: onChange
  }) : /*#__PURE__*/React.createElement(SuffixRender, {
    type: type
  }));
};
export default WrapperRender;