linkmore-design
Version:
🌈 🚀lm组件库。🚀
312 lines (294 loc) • 11 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { CalendarOutlined } from '@ant-design/icons';
import cn from 'classnames';
import React, { useMemo, useState } from 'react';
import Dropdown from "../../dropdown";
import IconFont from "../../icon-font";
import { getFlatItem, getIsHas, getValueForType, toStringIsEqual } from "../utils";
import CascaderFilter from "./CascaderFilter";
import CheckboxFilter from "./CheckboxFilter";
import DateFilter from "./DateFilter";
import InputFilter from "./InputFilter";
import SelectFilter from "./SelectFilter";
// 组件渲染
var FilterControl = function FilterControl(_ref) {
var instance = _ref.instance,
item = _ref.item;
var type = item.type;
var widgets = {
input: /*#__PURE__*/React.createElement(InputFilter, {
instance: instance,
item: item
}),
select: /*#__PURE__*/React.createElement(SelectFilter, {
instance: instance,
item: item
}),
checkbox: /*#__PURE__*/React.createElement(CheckboxFilter, {
instance: instance,
item: item
}),
cascader: /*#__PURE__*/React.createElement(CascaderFilter, {
instance: instance,
item: item
}),
date: /*#__PURE__*/React.createElement(DateFilter, {
instance: instance,
item: item
})
};
return widgets[type] || null;
};
// 提示文字 占位符
// eslint-disable-next-line no-undef
var ItemPlacehodler = /*#__PURE__*/React.memo(function (_ref2) {
var item = _ref2.item,
instance = _ref2.instance;
var type = item.type,
itemProps = item.props,
dateType = item.dateType,
datetype = item.datetype,
placeholder = item.placeholder;
var locale = instance.locale;
// 日期显示的处理
if (['date'].includes(type)) {
// 兼容大小写
if (['range', 'rangePicker'].includes(dateType || datetype)) {
var pls = placeholder !== null && placeholder !== void 0 ? placeholder : [locale.rangePickerStartPlaceholder, locale.rangePickerEndPlaceholder];
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
}
}));
}
return /*#__PURE__*/React.createElement("span", null, placeholder || (locale === null || locale === void 0 ? void 0 : locale.all));
});
// 根据不同的类型展示文本内容
var ItemLabel = /*#__PURE__*/React.memo(function (_ref3) {
var instance = _ref3.instance,
item = _ref3.item;
var filterValue = instance.filterValue;
var type = item.type,
data = item.data;
/*
* 是否返回字符串类型
* 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 _data$find;
// 级联数据转换平级结构
if (['cascader'].includes(type)) {
var nArr = getFlatItem(item, filterValue);
var labels = nArr === null || nArr === void 0 ? void 0 : nArr.map(function (v) {
var _item$props, _item$props$fieldName;
return v[(item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : (_item$props$fieldName = _item$props.fieldNames) === null || _item$props$fieldName === void 0 ? void 0 : _item$props$fieldName.label) || 'label'];
});
switch (labels.length) {
case 0:
// 数据未查找到时
return filterValue;
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(filterValue)) {
var _data$filter;
// 日期
if (['date'].includes(type)) {
return /*#__PURE__*/React.createElement(React.Fragment, null, filterValue[0], /*#__PURE__*/React.createElement(IconFont, {
type: "lmweb-swap-right",
style: {
fontSize: 14,
color: 'var(--text-color)'
}
}), filterValue[1]);
}
// 多选
var _labels = data === null || data === void 0 ? void 0 : (_data$filter = data.filter(function (v) {
return toStringIsEqual(v.value, filterValue, 'includes');
})) === null || _data$filter === void 0 ? void 0 : _data$filter.map(function (v) {
return v.label;
});
if (!_labels.length) {
_labels = filterValue;
} // 受控模式未查找到显示的内容时展示
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 filterValue;
}
// 单选框 受控模式未查找到显示的内容时展示filterValue
var label = (data === null || data === void 0 ? void 0 : (_data$find = data.find(function (v) {
return toStringIsEqual(v === null || v === void 0 ? void 0 : v.value, filterValue);
})) === null || _data$find === void 0 ? void 0 : _data$find.label) || filterValue;
return label;
} catch (error) {
console.log('报错了!', '报错项:', item, '报错值', filterValue);
return filterValue;
}
}, [type, data, filterValue]);
if (isString) {
return /*#__PURE__*/React.createElement("span", null, String);
}
return String;
});
var FilterItem = /*#__PURE__*/React.memo(function (_ref4) {
var instance = _ref4.instance,
item = _ref4.item;
var filterValue = instance.filterValue,
setFilterValue = instance.setFilterValue;
var title = item.title,
colon = item.colon,
clearIconTrigger = item.clearIconTrigger,
_item$allowClear = item.allowClear,
allowClear = _item$allowClear === void 0 ? true : _item$allowClear;
// 是否有筛选值/是否处于筛选状态
var active = useMemo(function () {
return getIsHas(filterValue);
}, [filterValue]);
// 冒号
var showColon = useMemo(function () {
return (colon !== null && colon !== void 0 ? colon : ':') ? ':' : null;
}, [colon]);
var handleClear = function handleClear(e) {
if (active) {
e.stopPropagation();
setFilterValue(getValueForType(item.type));
}
};
// Icon展示方式
var Icon = function Icon() {
// 日期类型并且未选中时返回日期自带icon
if (item.type === 'date' && !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(React.Fragment, null, (title || showColon) && /*#__PURE__*/React.createElement("div", {
className: "filter_item_label"
}, title, showColon), /*#__PURE__*/React.createElement("div", {
className: "filter_item_value"
}, active ? /*#__PURE__*/React.createElement(ItemLabel, {
instance: instance,
item: item
}) : /*#__PURE__*/React.createElement(ItemPlacehodler, {
instance: instance,
item: item
})), /*#__PURE__*/React.createElement("div", {
className: "filter_item_icon addon_after"
}, /*#__PURE__*/React.createElement(Icon, null)));
});
/*
* css样式控制
* expand: 展开样式
* active: 选中样式
*/
var DropdownFilter = /*#__PURE__*/React.memo(function (_ref5) {
var instance = _ref5.instance,
item = _ref5.item;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
visible = _useState2[0],
setVisible = _useState2[1];
var filterValue = instance.filterValue,
size = instance.size;
var popupClassName = item.popupClassName,
className = item.className,
style = item.style;
// 是否有筛选值/是否处于筛选状态
var active = useMemo(function () {
return getIsHas(filterValue);
}, [filterValue]);
// 触发查询时关闭下拉框
var setFilterValue = function setFilterValue(obj) {
instance.setFilterValue(obj);
setVisible(false);
};
var onVisibleChange = function onVisibleChange(v) {
return setVisible(v);
};
// 重组Instance 加入下拉关闭控制
var resetInstance = _objectSpread(_objectSpread({
visible: visible,
setVisible: setVisible
}, instance), {}, {
setFilterValue: setFilterValue
});
return /*#__PURE__*/React.createElement(Dropdown, {
trigger: ['click'],
visible: resetInstance.visible,
placement: "bottomLeft",
overlay: /*#__PURE__*/React.createElement(FilterControl, {
instance: resetInstance,
item: item
}),
overlayClassName: cn("filter_dropdown_container_".concat(item.type), popupClassName),
onVisibleChange: onVisibleChange
// 未开启则需手动控制下拉展示组件的初始化
,
destroyPopupOnHide: true
}, /*#__PURE__*/React.createElement("div", {
className: cn('lm_filter_basic_item', className, size, {
expand: visible,
active: active
}),
style: style
}, /*#__PURE__*/React.createElement(FilterItem, {
key: item.title,
instance: resetInstance,
item: item
})));
});
export default DropdownFilter;