Skip to content

Commit 9e75a09

Browse files
[v1] refactor(design): Filter ResponsiveGroup dynamic compute logic for collapsed (#1438)
* refactor: refactor ResponsiveGroup dynamic compute logic for collapsed * fix: showCount dynamic change
1 parent e8ba971 commit 9e75a09

6 files changed

Lines changed: 430 additions & 394 deletions

File tree

packages/design/src/filter/components/FilterButton.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,7 @@ const FilterButton = forwardRef<FilterButtonRef, FilterButtonProps>(
165165
content={popoverContent}
166166
open={open && !disabled}
167167
onOpenChange={handleOpenChange}
168+
forceRender={_isInWrapComponent}
168169
styles={{
169170
body: {
170171
padding: 0,

packages/design/src/filter/components/FilterWrap.tsx

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,12 +68,40 @@ const FilterWrap: FC<FilterWrapProps> = ({
6868
);
6969
}, [collapsed, contextValue.filterValues]);
7070

71-
const filterValues = useMemo(() => {
71+
const allFilterValues = useMemo(() => {
7272
if (!collapsed) return [];
7373
return contextValue.filterValues || [];
7474
// eslint-disable-next-line react-hooks/exhaustive-deps
7575
}, [collapsed, stableFilterValuesKey]);
7676

77+
// 从 children 中递归提取 label 集合,用于过滤 filterValues 只保留当前折叠项的值
78+
// children 结构可能是 Fragment → Form.Item → Filter.Select,需要递归查找
79+
const childLabelSet = useMemo(() => {
80+
const labels = new Set<ReactNode>();
81+
const extractLabel = (node: ReactNode) => {
82+
if (!isValidElement(node)) return;
83+
const props = node.props as { label?: ReactNode; children?: ReactNode };
84+
if (props.label !== undefined) {
85+
labels.add(props.label);
86+
return;
87+
}
88+
if (props.children) {
89+
if (isValidElement(props.children)) {
90+
extractLabel(props.children);
91+
} else if (Array.isArray(props.children)) {
92+
props.children.forEach(extractLabel);
93+
}
94+
}
95+
};
96+
Children.forEach(children, extractLabel);
97+
return labels;
98+
}, [children]);
99+
100+
const filterValues = useMemo(() => {
101+
if (childLabelSet.size === 0) return allFilterValues;
102+
return allFilterValues.filter(item => childLabelSet.has(item.label));
103+
}, [allFilterValues, childLabelSet]);
104+
77105
// 格式化值用于 Tooltip 显示
78106
const formatValueForTooltip = useCallback(
79107
(value: FilterValue, options?: unknown[], componentName?: FilterComponentName): string => {

0 commit comments

Comments
 (0)