linkmore-design
Version:
🌈 🚀lm组件库。🚀
318 lines (300 loc) • 10 kB
JavaScript
"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 _icons = require("@ant-design/icons");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _dropdown = _interopRequireDefault(require("../../dropdown"));
var _iconFont = _interopRequireDefault(require("../../icon-font"));
var _utils = require("../utils");
var _CascaderFilter = _interopRequireDefault(require("./CascaderFilter"));
var _CheckboxFilter = _interopRequireDefault(require("./CheckboxFilter"));
var _DateFilter = _interopRequireDefault(require("./DateFilter"));
var _InputFilter = _interopRequireDefault(require("./InputFilter"));
var _SelectFilter = _interopRequireDefault(require("./SelectFilter"));
// 组件渲染
const FilterControl = ({
instance,
item
}) => {
const {
type
} = item;
const widgets = {
input: /*#__PURE__*/_react.default.createElement(_InputFilter.default, {
instance: instance,
item: item
}),
select: /*#__PURE__*/_react.default.createElement(_SelectFilter.default, {
instance: instance,
item: item
}),
checkbox: /*#__PURE__*/_react.default.createElement(_CheckboxFilter.default, {
instance: instance,
item: item
}),
cascader: /*#__PURE__*/_react.default.createElement(_CascaderFilter.default, {
instance: instance,
item: item
}),
date: /*#__PURE__*/_react.default.createElement(_DateFilter.default, {
instance: instance,
item: item
})
};
return widgets[type] || null;
};
// 提示文字 占位符
// eslint-disable-next-line no-undef
const ItemPlacehodler = /*#__PURE__*/_react.default.memo(({
item,
instance
}) => {
const {
type,
props: itemProps,
dateType,
datetype,
placeholder
} = item;
const {
locale
} = instance;
// 日期显示的处理
if (['date'].includes(type)) {
// 兼容大小写
if (['range', 'rangePicker'].includes(dateType || datetype)) {
const pls = placeholder ?? [locale.rangePickerStartPlaceholder, locale.rangePickerEndPlaceholder];
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, pls?.[0], /*#__PURE__*/_react.default.createElement(_iconFont.default, {
type: "lmweb-swap-right",
style: {
fontSize: 14
}
}), pls?.[1], /*#__PURE__*/_react.default.createElement(_icons.CalendarOutlined, {
style: {
fontSize: 12
}
}));
}
const unit = {
week: locale.week,
month: locale.month,
quarter: locale.quarter,
year: locale.year
};
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholder ?? `${locale.select}${unit[itemProps?.picker] || locale.date}`, /*#__PURE__*/_react.default.createElement(_icons.CalendarOutlined, {
style: {
fontSize: 12
}
}));
}
return /*#__PURE__*/_react.default.createElement("span", null, placeholder || locale?.all);
});
// 根据不同的类型展示文本内容
const ItemLabel = /*#__PURE__*/_react.default.memo(({
instance,
item
}) => {
const {
filterValue
} = instance;
const {
type,
data
} = item;
/*
* 是否返回字符串类型
* return string | type: 'input', 'select', 'checkbox', 'cascader'
* return Jsx | type: 'date'
*/
const isString = (0, _react.useMemo)(() => {
return ['input', 'select', 'checkbox', 'cascader'].includes(type);
}, [type]);
// 存在筛选数据时 ⬇️
const String = (0, _react.useMemo)(() => {
try {
// 级联数据转换平级结构
if (['cascader'].includes(type)) {
const nArr = (0, _utils.getFlatItem)(item, filterValue);
const labels = nArr?.map(v => v[item?.props?.fieldNames?.label || 'label']);
switch (labels.length) {
case 0:
// 数据未查找到时
return filterValue;
case 1:
return labels[0];
case 2:
return `${labels[0]}、${labels[1]}`;
default:
return `${labels[0]}、+${labels.length - 1}...`;
}
}
if (Array.isArray(filterValue)) {
// 日期
if (['date'].includes(type)) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, filterValue[0], /*#__PURE__*/_react.default.createElement(_iconFont.default, {
type: "lmweb-swap-right",
style: {
fontSize: 14,
color: 'var(--text-color)'
}
}), filterValue[1]);
}
// 多选
let labels = data?.filter(v => (0, _utils.toStringIsEqual)(v.value, filterValue, 'includes'))?.map(v => v.label);
if (!labels.length) {
labels = filterValue;
} // 受控模式未查找到显示的内容时展示
switch (labels.length) {
case 1:
return labels[0];
case 2:
return `${labels[0]}、${labels[1]}`;
default:
return `${labels[0]}、+${labels.length - 1}...`;
}
}
// 输入框
if (['input', 'date'].includes(type)) {
return filterValue;
}
// 单选框 受控模式未查找到显示的内容时展示filterValue
const label = data?.find(v => (0, _utils.toStringIsEqual)(v?.value, filterValue))?.label || filterValue;
return label;
} catch (error) {
console.log('报错了!', '报错项:', item, '报错值', filterValue);
return filterValue;
}
}, [type, data, filterValue]);
if (isString) {
return /*#__PURE__*/_react.default.createElement("span", null, String);
}
return String;
});
const FilterItem = /*#__PURE__*/_react.default.memo(({
instance,
item
}) => {
const {
filterValue,
setFilterValue
} = instance;
const {
title,
colon,
clearIconTrigger,
allowClear = true
} = item;
// 是否有筛选值/是否处于筛选状态
const active = (0, _react.useMemo)(() => (0, _utils.getIsHas)(filterValue), [filterValue]);
// 冒号
const showColon = (0, _react.useMemo)(() => colon ?? ':' ? ':' : null, [colon]);
const handleClear = e => {
if (active) {
e.stopPropagation();
setFilterValue((0, _utils.getValueForType)(item.type));
}
};
// Icon展示方式
const Icon = () => {
// 日期类型并且未选中时返回日期自带icon
if (item.type === 'date' && !active) return null;
if (!allowClear) return /*#__PURE__*/_react.default.createElement(_iconFont.default, {
type: "icon-a-jiantoua2xialaxia"
});
// hover时出现清空
if (clearIconTrigger === 'hover') {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
type: "icon-a-shidia0shanchu",
onClick: handleClear,
className: "icon_clear"
}), /*#__PURE__*/_react.default.createElement(_iconFont.default, {
type: "icon-a-jiantoua2xialaxia",
className: "icon_down"
}));
}
// 选中时展示清楚按钮
return /*#__PURE__*/_react.default.createElement(_iconFont.default, {
type: active ? 'icon-a-shidia0shanchu' : 'icon-a-jiantoua2xialaxia',
onClick: handleClear
});
};
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (title || showColon) && /*#__PURE__*/_react.default.createElement("div", {
className: "filter_item_label"
}, title, showColon), /*#__PURE__*/_react.default.createElement("div", {
className: "filter_item_value"
}, active ? /*#__PURE__*/_react.default.createElement(ItemLabel, {
instance: instance,
item: item
}) : /*#__PURE__*/_react.default.createElement(ItemPlacehodler, {
instance: instance,
item: item
})), /*#__PURE__*/_react.default.createElement("div", {
className: "filter_item_icon addon_after"
}, /*#__PURE__*/_react.default.createElement(Icon, null)));
});
/*
* css样式控制
* expand: 展开样式
* active: 选中样式
*/
const DropdownFilter = /*#__PURE__*/_react.default.memo(({
instance,
item
}) => {
const [visible, setVisible] = (0, _react.useState)(false);
const {
filterValue,
size
} = instance;
const {
popupClassName,
className,
style
} = item;
// 是否有筛选值/是否处于筛选状态
const active = (0, _react.useMemo)(() => (0, _utils.getIsHas)(filterValue), [filterValue]);
// 触发查询时关闭下拉框
const setFilterValue = obj => {
instance.setFilterValue(obj);
setVisible(false);
};
const onVisibleChange = v => setVisible(v);
// 重组Instance 加入下拉关闭控制
const resetInstance = {
visible,
setVisible,
...instance,
setFilterValue
};
return /*#__PURE__*/_react.default.createElement(_dropdown.default, {
trigger: ['click'],
visible: resetInstance.visible,
placement: "bottomLeft",
overlay: /*#__PURE__*/_react.default.createElement(FilterControl, {
instance: resetInstance,
item: item
}),
overlayClassName: (0, _classnames.default)(`filter_dropdown_container_${item.type}`, popupClassName),
onVisibleChange: onVisibleChange
// 未开启则需手动控制下拉展示组件的初始化
,
destroyPopupOnHide: true
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)('lm_filter_basic_item', className, size, {
expand: visible,
active
}),
style: style
}, /*#__PURE__*/_react.default.createElement(FilterItem, {
key: item.title,
instance: resetInstance,
item: item
})));
});
var _default = DropdownFilter;
exports.default = _default;