Skip to content

Commit f51cd58

Browse files
xiejay97xiejay97
committed
refactor(ui): remove dExpandAll api
BREAKING CHANGE: use `dExpandAll` usually not as expected.
1 parent 862effe commit f51cd58

8 files changed

Lines changed: 32 additions & 28 deletions

File tree

‎packages/ui/src/components/tree-select/README.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ interface DTreeSelectProps<V extends DId, T extends DTreeItem<V>> extends React.
1919
dList: T[];
2020
dModel?: V | null | V[];
2121
dExpands?: V[];
22-
dExpandAll?: boolean;
2322
dVisible?: boolean;
2423
dPlaceholder?: string;
2524
dSize?: DSize;
@@ -56,8 +55,7 @@ interface DTreeSelectProps<V extends DId, T extends DTreeItem<V>> extends React.
5655
| dFormControl | Support Forms | - | |
5756
| dList | data list | - | |
5857
| dModel | selected, controlled, default `dMultiple ? [] : null` | - | |
59-
| dExpands | Expand items, controlled, default `dExpandAll ? initExpandAll : []` | - | |
60-
| dExpandAll | Whether to expand all | `false` | |
58+
| dExpands | Expand items, controlled, default `[]` | - | |
6159
| dVisible | Visible, controlled, default `false` | - | |
6260
| dPlaceholder | set the placeholder text of the selection box | - | |
6361
| dSize | set the selection box size | - | |

‎packages/ui/src/components/tree-select/README.zh-CN.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ interface DTreeSelectProps<V extends DId, T extends DTreeItem<V>> extends React.
1515
dList: T[];
1616
dModel?: V | null | V[];
1717
dExpands?: V[];
18-
dExpandAll?: boolean;
1918
dVisible?: boolean;
2019
dPlaceholder?: string;
2120
dSize?: DSize;
@@ -52,8 +51,7 @@ interface DTreeSelectProps<V extends DId, T extends DTreeItem<V>> extends React.
5251
| dFormControl | 支持表单 | - | |
5352
| dList | 数据列表 | - | |
5453
| dModel | 已选项，受控，默认为 `dMultiple ? [] : null` | - | |
55-
| dExpands | 展开项，受控，默认为 `dExpandAll ? initExpandAll : []` | - | |
56-
| dExpandAll | 是否展开全部 | `false` | |
54+
| dExpands | 展开项，受控，默认为 `[]` | - | |
5755
| dVisible | 是否可见，受控，默认为 `false` | - | |
5856
| dPlaceholder | 设置选择框占位文本 | - | |
5957
| dSize | 设置选择框大小 | - | |

‎packages/ui/src/components/tree-select/TreeSelect.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ export interface DTreeSelectProps<V extends DId, T extends DTreeItem<V>> extends
4040
dList: T[];
4141
dModel?: V | null | V[];
4242
dExpands?: V[];
43-
dExpandAll?: boolean;
4443
dVisible?: boolean;
4544
dPlaceholder?: string;
4645
dSize?: DSize;
@@ -80,7 +79,6 @@ function TreeSelect<V extends DId, T extends DTreeItem<V>>(
8079
dList,
8180
dModel,
8281
dExpands,
83-
dExpandAll = false,
8482
dVisible,
8583
dPlaceholder,
8684
dSize,
@@ -149,20 +147,18 @@ function TreeSelect<V extends DId, T extends DTreeItem<V>>(
149147
),
150148
[dMultiple, dList]
151149
);
152-
const [nodesMap, initExpandAll] = useMemo(() => {
150+
const nodesMap = useMemo(() => {
153151
const nodes = new Map<V, AbstractTreeNode<V, T>>();
154-
const expandAllNodes: V[] = [];
155152
const reduceArr = (arr: AbstractTreeNode<V, T>[]) => {
156153
for (const item of arr) {
157154
nodes.set(item.id, item);
158155
if (item.children) {
159-
expandAllNodes.push(item.id);
160156
reduceArr(item.children);
161157
}
162158
}
163159
};
164160
reduceArr(renderNodes);
165-
return [nodes, expandAllNodes];
161+
return nodes;
166162
}, [renderNodes]);
167163

168164
const formControlInject = useFormControl(dFormControl);
@@ -189,7 +185,7 @@ function TreeSelect<V extends DId, T extends DTreeItem<V>>(
189185
node.updateStatus(select);
190186
});
191187

192-
const [_expandIds, changeExpandIds] = useDValue<V[]>(dExpandAll ? initExpandAll : [], dExpands, (value) => {
188+
const [_expandIds, changeExpandIds] = useDValue<V[]>([], dExpands, (value) => {
193189
if (onExpandsChange) {
194190
onExpandsChange(
195191
value,

‎packages/ui/src/components/tree-select/demos/3.NotOnlyLeaf.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ Select non-leaf nodes.
1313
选择非叶子节点。
1414

1515
```tsx
16+
import { useState } from 'react';
17+
1618
import { DTreeSelect } from '@react-devui/ui';
1719

1820
const list = [
@@ -48,14 +50,19 @@ const list = [
4850
},
4951
];
5052
export default function Demo() {
53+
const [expands, setExpands] = useState(['Item 1', 'Item 2', 'Item 3']);
54+
5155
return (
5256
<DTreeSelect
5357
style={{ width: 200 }}
5458
dList={list}
5559
dPlaceholder="Select non-leaf"
5660
dSearchable
5761
dOnlyLeafSelectable={false}
58-
dExpandAll
62+
dExpands={expands}
63+
onExpandsChange={(val) => {
64+
setExpands(val);
65+
}}
5966
></DTreeSelect>
6067
);
6168
}

‎packages/ui/src/components/tree/README.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ interface DTreeProps<V extends DId, T extends DTreeItem<V>> extends Omit<React.H
2424
dModel?: V | null | V[];
2525
dHeight?: number;
2626
dExpands?: V[];
27-
dExpandAll?: boolean;
2827
dShowLine?: boolean;
2928
dDisabled?: boolean;
3029
dMultiple?: boolean;
@@ -43,8 +42,7 @@ interface DTreeProps<V extends DId, T extends DTreeItem<V>> extends Omit<React.H
4342
| dList | data list | - | |
4443
| dModel | selected, controlled, default `dMultiple ? [] : null` | - | |
4544
| dHeight | set list height | - | |
46-
| dExpands | Expand items, controlled, default `dExpandAll ? initExpandAll : []` | - | |
47-
| dExpandAll | Whether to expand all | `false` | |
45+
| dExpands | Expand items, controlled, default `[]` | - | |
4846
| dShowLine | Whether to show connecting lines | `false` | |
4947
| dDisabled | Whether to disable | `false` | |
5048
| dMultiple | Whether it is multiple selection | `false` | |

‎packages/ui/src/components/tree/README.zh-CN.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ interface DTreeProps<V extends DId, T extends DTreeItem<V>> extends Omit<React.H
2121
dModel?: V | null | V[];
2222
dHeight?: number;
2323
dExpands?: V[];
24-
dExpandAll?: boolean;
2524
dShowLine?: boolean;
2625
dDisabled?: boolean;
2726
dMultiple?: boolean;
@@ -40,8 +39,7 @@ interface DTreeProps<V extends DId, T extends DTreeItem<V>> extends Omit<React.H
4039
| dList | 数据列表 | - | |
4140
| dModel | 已选项，受控，默认为 `dMultiple ? [] : null` | - | |
4241
| dHeight | 设置列表高度 | - | |
43-
| dExpands | 展开项，受控，默认为 `dExpandAll ? initExpandAll : []` | - | |
44-
| dExpandAll | 是否展开全部 | `false` | |
42+
| dExpands | 展开项，受控，默认为 `[]` | - | |
4543
| dShowLine | 是否显示连接线 | `false` | |
4644
| dDisabled | 是否禁用 | `false` | |
4745
| dMultiple | 是否为多选 | `false` | |

‎packages/ui/src/components/tree/Tree.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ export interface DTreeProps<V extends DId, T extends DTreeItem<V>> extends Omit<
3232
dModel?: V | null | V[];
3333
dHeight?: number;
3434
dExpands?: V[];
35-
dExpandAll?: boolean;
3635
dShowLine?: boolean;
3736
dDisabled?: boolean;
3837
dMultiple?: boolean;
@@ -51,7 +50,6 @@ export function DTree<V extends DId, T extends DTreeItem<V>>(props: DTreeProps<V
5150
dModel,
5251
dHeight,
5352
dExpands,
54-
dExpandAll = false,
5553
dShowLine = false,
5654
dDisabled = false,
5755
dMultiple = false,
@@ -96,20 +94,18 @@ export function DTree<V extends DId, T extends DTreeItem<V>>(props: DTreeProps<V
9694
),
9795
[dMultiple, dList]
9896
);
99-
const [nodesMap, initExpandAll] = useMemo(() => {
97+
const nodesMap = useMemo(() => {
10098
const nodes = new Map<V, AbstractTreeNode<V, T>>();
101-
const expandAllNodes: V[] = [];
10299
const reduceArr = (arr: AbstractTreeNode<V, T>[]) => {
103100
for (const item of arr) {
104101
nodes.set(item.id, item);
105102
if (item.children) {
106-
expandAllNodes.push(item.id);
107103
reduceArr(item.children);
108104
}
109105
}
110106
};
111107
reduceArr(renderNodes);
112-
return [nodes, expandAllNodes];
108+
return nodes;
113109
}, [renderNodes]);
114110

115111
const formControlInject = useFormControl(dFormControl);
@@ -136,7 +132,7 @@ export function DTree<V extends DId, T extends DTreeItem<V>>(props: DTreeProps<V
136132
node.updateStatus(select);
137133
});
138134

139-
const [_expandIds, changeExpandIds] = useDValue<V[]>(dExpandAll ? initExpandAll : [], dExpands, (value) => {
135+
const [_expandIds, changeExpandIds] = useDValue<V[]>([], dExpands, (value) => {
140136
if (onExpandsChange) {
141137
onExpandsChange(
142138
value,

‎packages/ui/src/components/tree/demos/2.NotOnlyLeaf.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ Select non-leaf nodes.
1313
选择非叶子节点。
1414

1515
```tsx
16+
import { useState } from 'react';
17+
1618
import { DTree } from '@react-devui/ui';
1719

1820
const list = [
@@ -48,6 +50,17 @@ const list = [
4850
},
4951
];
5052
export default function Demo() {
51-
return <DTree dList={list} dOnlyLeafSelectable={false} dExpandAll />;
53+
const [expands, setExpands] = useState(['Item 1', 'Item 2', 'Item 3']);
54+
55+
return (
56+
<DTree
57+
dList={list}
58+
dOnlyLeafSelectable={false}
59+
dExpands={expands}
60+
onExpandsChange={(val) => {
61+
setExpands(val);
62+
}}
63+
/>
64+
);
5265
}
5366
```

0 commit comments

Comments
 (0)