linkmore-design
Version:
🌈 🚀lm组件库。🚀
166 lines (160 loc) • 6.53 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _toArray from "@babel/runtime/helpers/esm/toArray";
import cls from 'classnames';
import isNil from 'lodash/isNil';
import pick from 'lodash/pick';
import React, { useMemo } from 'react';
import IconFont from "../../icon-font";
var TitleRender = function TitleRender(_ref) {
var title = _ref.title,
colon = _ref.colon;
var str = "".concat(title || '').concat(colon ? ':' : '');
return /*#__PURE__*/React.createElement("label", {
className: "filter_item_label"
}, str);
};
var PlaceholderRender = function PlaceholderRender(_ref2) {
var type = _ref2.type,
placeholder = _ref2.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,
optionLabelProp = props.optionLabelProp;
var optionMap = useMemo(function () {
return new Map(options.map(function (option) {
return [option[fieldNames.value], option[optionLabelProp || fieldNames.label]];
}));
}, [options, fieldNames, optionLabelProp]);
/**
* 转换展示的格式([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(_ref3) {
var onChange = _ref3.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(_ref4) {
var type = _ref4.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 LabelContainer = function LabelContainer(props) {
var value = props.value,
onChange = props.onChange,
type = props.type,
open = props.open,
size = props.size;
// 是否存在value
var excitingValue = useMemo(function () {
if (isNil(value)) return false;
if (Array.isArray(value)) return !!value.length;
return true;
}, [value]);
var AsProps = pick(props, ['onMouseEnter', 'onMouseLeave', 'onFocus', 'onClick']);
return /*#__PURE__*/React.createElement("div", _extends({
className: cls('lm_filter_basic_item', size, {
expand: open,
active: excitingValue
})
}, AsProps), /*#__PURE__*/React.createElement(TitleRender, pick(props, ['title', 'colon'])), /*#__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 LabelContainer;