@cainiaofe/cn-ui-m
Version:
147 lines (146 loc) • 6.96 kB
JavaScript
import * as React from 'react';
// 从children中找出快捷筛选的项
export var useSplitFilter = function (filter) {
var _a = React.useState([null, null, null, null]), result = _a[0], setResult = _a[1];
React.useEffect(function () {
if (!filter) {
setResult([null, null, null, null]);
return;
}
var normalFilterChild = [];
var searchChild = [];
var quickFilterChild = [];
var quickNoWrapFilterChild = [];
filter.forEach(function (child) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
if (React.isValidElement(child)) {
var childProps = (child.props || {});
var isQuickFilter = childProps.quick || ((_a = childProps.mobileProps) === null || _a === void 0 ? void 0 : _a.quick);
// 黑名单模式，解决不支持快捷筛选的组件配置quick后不显示的问题
if (isQuickFilter) {
if ([
'CnInput',
'CnSwitch',
'CnInputTextArea',
'CnNumberPicker',
].includes((_c = (_b = child.props.children) === null || _b === void 0 ? void 0 : _b.type) === null || _c === void 0 ? void 0 : _c.displayName)) {
normalFilterChild.push(child);
return;
}
if (((_e = (_d = child.props.children) === null || _d === void 0 ? void 0 : _d.type) === null || _e === void 0 ? void 0 : _e.displayName) === 'CnSelector') {
quickNoWrapFilterChild.push(cnSelectorQuickItemRender(child));
}
else if (((_g = (_f = child.props.children) === null || _f === void 0 ? void 0 : _f.type) === null || _g === void 0 ? void 0 : _g.displayName) === 'CnCheckboxGroup') {
quickNoWrapFilterChild.push(cnCheckboxGroupQuickItemRender(child));
}
else if (((_j = (_h = child.props.children) === null || _h === void 0 ? void 0 : _h.type) === null || _j === void 0 ? void 0 : _j.displayName) === 'CnRadioGroup') {
quickNoWrapFilterChild.push(cnRadioGroupQuickItemRender(child));
}
else if ([
'CnDatePicker',
'CnDatePickerPro',
'CnMonthPickerPro',
'CnYearPickerPro',
'CnWeekPickerPro',
].includes((_l = (_k = child.props.children) === null || _k === void 0 ? void 0 : _k.type) === null || _l === void 0 ? void 0 : _l.displayName)) {
quickFilterChild.push(cnDatePickerQuickItemRender(child));
}
else if (['CnRangeDatePickerPro', 'CnDateRangePickerPro'].includes((_o = (_m = child.props.children) === null || _m === void 0 ? void 0 : _m.type) === null || _o === void 0 ? void 0 : _o.displayName)) {
quickFilterChild.push(cnDateRangePickerQuickItemRender(child));
}
else {
quickFilterChild.push(cnSelectQuickItemRender(child));
}
}
else if (((_q = (_p = child.props.children) === null || _p === void 0 ? void 0 : _p.type) === null || _q === void 0 ? void 0 : _q.displayName) === 'CnSearch') {
searchChild.push(cnSelectorQuickItemRender(child));
}
else {
normalFilterChild.push(child);
}
}
});
setResult([
quickFilterChild.map(function (item, i) {
var _a;
return (React.createElement("div", { key: "".concat(Date.now() + i), className: "cn-ui-m-filter-quick-filter-wrapper" },
React.createElement("div", { className: "cn-ui-m-filter-quick-filter", style: (_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a.style }, item)));
}),
quickNoWrapFilterChild,
normalFilterChild,
searchChild.map(function (item, i) { return (React.createElement("div", { key: "".concat(Date.now() + i), className: "cn-ui-m-filter-search" }, item)); }),
]);
}, [filter.length]);
return result;
};
var cnSelectQuickItemRender = function (child) {
// CnSelect 实例
var itemChildren = child.props.children;
// const newSelectField = React.useMemo(() => {
return React.cloneElement(child, {
name: child.props.name,
decorator: [],
children: React.cloneElement(itemChildren, {
placeholder: child.props.label || child.props.title,
insideFilter: true,
}),
});
// }, [child, itemChildren]); // 依赖项
// return newSelectField;
};
var cnSelectorQuickItemRender = function (child) {
var itemChildren = child.props.children;
return React.cloneElement(child, {
name: child.props.name,
decorator: [],
children: React.cloneElement(itemChildren, {
cnBoxProps: { wrap: false },
}),
});
};
var cnCheckboxGroupQuickItemRender = function (child) {
var itemChildren = child.props.children;
return React.cloneElement(child, {
name: child.props.name,
decorator: [],
children: React.cloneElement(itemChildren, {
shape: 'tag',
direction: 'hoz',
}),
});
};
var cnRadioGroupQuickItemRender = function (child) {
var _a, _b, _c;
var itemChildren = child.props.children;
return React.cloneElement(child, {
name: child.props.name,
decorator: [],
children: React.cloneElement(itemChildren, {
shape: ((_c = (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.props) === null || _c === void 0 ? void 0 : _c.shape) || 'tag',
direction: 'hoz',
className: 'cn-ui-m-filter-quick-filter-radio-group--max-width',
}),
});
};
var cnDatePickerQuickItemRender = function (child) {
var itemChildren = child.props.children;
return React.cloneElement(child, {
name: child.props.name,
decorator: [],
children: React.cloneElement(itemChildren, {
placeholder: child.props.label || child.props.title,
insideFilter: true,
}),
});
};
var cnDateRangePickerQuickItemRender = function (child) {
var itemChildren = child.props.children;
return React.cloneElement(child, {
name: child.props.name,
decorator: [],
children: React.cloneElement(itemChildren, {
placeholder: child.props.label || child.props.title,
insideFilter: true,
}),
});
};