refactor(ui): remove dExpandAll api

BREAKING CHANGE: use `dExpandAll` usually not as expected.
DevCloudFE · Feb 14, 2023 · f51cd58 · f51cd58
1 parent 862effe
commit f51cd58
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 28 deletions.
diff --git a/packages/ui/src/components/tree-select/README.md b/packages/ui/src/components/tree-select/README.md
@@ -19,7 +19,6 @@ interface DTreeSelectProps<V extends DId, T extends DTreeItem<V>> extends React.
   dList: T[];
   dModel?: V | null | V[];
   dExpands?: V[];
-  dExpandAll?: boolean;
   dVisible?: boolean;
   dPlaceholder?: string;
   dSize?: DSize;
@@ -56,8 +55,7 @@ interface DTreeSelectProps<V extends DId, T extends DTreeItem<V>> extends React.
 | dFormControl | Support Forms | - | |
 | dList | data list | - | |
 | dModel | selected, controlled, default `dMultiple ? [] : null` | - | |
-| dExpands | Expand items, controlled, default `dExpandAll ? initExpandAll : []` | - | |
-| dExpandAll | Whether to expand all | `false` | |
+| dExpands | Expand items, controlled, default `[]` | - | |
 | dVisible | Visible, controlled, default `false` | - | |
 | dPlaceholder | set the placeholder text of the selection box | - | |
 | dSize | set the selection box size | - | |

diff --git a/packages/ui/src/components/tree-select/README.zh-CN.md b/packages/ui/src/components/tree-select/README.zh-CN.md
@@ -15,7 +15,6 @@ interface DTreeSelectProps<V extends DId, T extends DTreeItem<V>> extends React.
   dList: T[];
   dModel?: V | null | V[];
   dExpands?: V[];
-  dExpandAll?: boolean;
   dVisible?: boolean;
   dPlaceholder?: string;
   dSize?: DSize;
@@ -52,8 +51,7 @@ interface DTreeSelectProps<V extends DId, T extends DTreeItem<V>> extends React.
 | dFormControl | 支持表单 | - |  |
 | dList | 数据列表 | - |  |
 | dModel | 已选项，受控，默认为 `dMultiple ? [] : null` | - |  |
-| dExpands | 展开项，受控，默认为 `dExpandAll ? initExpandAll : []` | - |  |
-| dExpandAll | 是否展开全部 | `false` |  |
+| dExpands | 展开项，受控，默认为 `[]` | - |  |
 | dVisible | 是否可见，受控，默认为 `false` | - |  |
 | dPlaceholder | 设置选择框占位文本 | - |  |
 | dSize | 设置选择框大小 | - |  |

diff --git a/packages/ui/src/components/tree-select/TreeSelect.tsx b/packages/ui/src/components/tree-select/TreeSelect.tsx
@@ -40,7 +40,6 @@ export interface DTreeSelectProps<V extends DId, T extends DTreeItem<V>> extends
   dList: T[];
   dModel?: V | null | V[];
   dExpands?: V[];
-  dExpandAll?: boolean;
   dVisible?: boolean;
   dPlaceholder?: string;
   dSize?: DSize;
@@ -80,7 +79,6 @@ function TreeSelect<V extends DId, T extends DTreeItem<V>>(
     dList,
     dModel,
     dExpands,
-    dExpandAll = false,
     dVisible,
     dPlaceholder,
     dSize,
@@ -149,20 +147,18 @@ function TreeSelect<V extends DId, T extends DTreeItem<V>>(
       ),
     [dMultiple, dList]
   );
-  const [nodesMap, initExpandAll] = useMemo(() => {
+  const nodesMap = useMemo(() => {
     const nodes = new Map<V, AbstractTreeNode<V, T>>();
-    const expandAllNodes: V[] = [];
     const reduceArr = (arr: AbstractTreeNode<V, T>[]) => {
       for (const item of arr) {
         nodes.set(item.id, item);
         if (item.children) {
-          expandAllNodes.push(item.id);
           reduceArr(item.children);
         }
       }
     };
     reduceArr(renderNodes);
-    return [nodes, expandAllNodes];
+    return nodes;
   }, [renderNodes]);
 
   const formControlInject = useFormControl(dFormControl);
@@ -189,7 +185,7 @@ function TreeSelect<V extends DId, T extends DTreeItem<V>>(
     node.updateStatus(select);
   });
 
-  const [_expandIds, changeExpandIds] = useDValue<V[]>(dExpandAll ? initExpandAll : [], dExpands, (value) => {
+  const [_expandIds, changeExpandIds] = useDValue<V[]>([], dExpands, (value) => {
     if (onExpandsChange) {
       onExpandsChange(
         value,

diff --git a/packages/ui/src/components/tree-select/demos/3.NotOnlyLeaf.md b/packages/ui/src/components/tree-select/demos/3.NotOnlyLeaf.md
@@ -13,6 +13,8 @@ Select non-leaf nodes.
 选择非叶子节点。
 
 ```tsx
+import { useState } from 'react';
+
 import { DTreeSelect } from '@react-devui/ui';
 
 const list = [
@@ -48,14 +50,19 @@ const list = [
   },
 ];
 export default function Demo() {
+  const [expands, setExpands] = useState(['Item 1', 'Item 2', 'Item 3']);
+
   return (
     <DTreeSelect
       style={{ width: 200 }}
       dList={list}
       dPlaceholder="Select non-leaf"
       dSearchable
       dOnlyLeafSelectable={false}
-      dExpandAll
+      dExpands={expands}
+      onExpandsChange={(val) => {
+        setExpands(val);
+      }}
     ></DTreeSelect>
   );
 }

diff --git a/packages/ui/src/components/tree/README.md b/packages/ui/src/components/tree/README.md
@@ -24,7 +24,6 @@ interface DTreeProps<V extends DId, T extends DTreeItem<V>> extends Omit<React.H
   dModel?: V | null | V[];
   dHeight?: number;
   dExpands?: V[];
-  dExpandAll?: boolean;
   dShowLine?: boolean;
   dDisabled?: boolean;
   dMultiple?: boolean;
@@ -43,8 +42,7 @@ interface DTreeProps<V extends DId, T extends DTreeItem<V>> extends Omit<React.H
 | dList | data list | - | |
 | dModel | selected, controlled, default `dMultiple ? [] : null` | - | |
 | dHeight | set list height | - | |
-| dExpands | Expand items, controlled, default `dExpandAll ? initExpandAll : []` | - | |
-| dExpandAll | Whether to expand all | `false` | |
+| dExpands | Expand items, controlled, default `[]` | - | |
 | dShowLine | Whether to show connecting lines | `false` | |
 | dDisabled | Whether to disable | `false` | |
 | dMultiple | Whether it is multiple selection | `false` | |

diff --git a/packages/ui/src/components/tree/README.zh-CN.md b/packages/ui/src/components/tree/README.zh-CN.md
@@ -21,7 +21,6 @@ interface DTreeProps<V extends DId, T extends DTreeItem<V>> extends Omit<React.H
   dModel?: V | null | V[];
   dHeight?: number;
   dExpands?: V[];
-  dExpandAll?: boolean;
   dShowLine?: boolean;
   dDisabled?: boolean;
   dMultiple?: boolean;
@@ -40,8 +39,7 @@ interface DTreeProps<V extends DId, T extends DTreeItem<V>> extends Omit<React.H
 | dList | 数据列表 | - |  |
 | dModel | 已选项，受控，默认为 `dMultiple ? [] : null` | - |  |
 | dHeight | 设置列表高度 | - |  |
-| dExpands | 展开项，受控，默认为 `dExpandAll ? initExpandAll : []` | - |  |
-| dExpandAll | 是否展开全部 | `false` |  |
+| dExpands | 展开项，受控，默认为 `[]` | - |  |
 | dShowLine | 是否显示连接线 | `false` |  |
 | dDisabled | 是否禁用 | `false` |  |
 | dMultiple | 是否为多选 | `false` |  |

diff --git a/packages/ui/src/components/tree/Tree.tsx b/packages/ui/src/components/tree/Tree.tsx
@@ -32,7 +32,6 @@ export interface DTreeProps<V extends DId, T extends DTreeItem<V>> extends Omit<
   dModel?: V | null | V[];
   dHeight?: number;
   dExpands?: V[];
-  dExpandAll?: boolean;
   dShowLine?: boolean;
   dDisabled?: boolean;
   dMultiple?: boolean;
@@ -51,7 +50,6 @@ export function DTree<V extends DId, T extends DTreeItem<V>>(props: DTreeProps<V
     dModel,
     dHeight,
     dExpands,
-    dExpandAll = false,
     dShowLine = false,
     dDisabled = false,
     dMultiple = false,
@@ -96,20 +94,18 @@ export function DTree<V extends DId, T extends DTreeItem<V>>(props: DTreeProps<V
       ),
     [dMultiple, dList]
   );
-  const [nodesMap, initExpandAll] = useMemo(() => {
+  const nodesMap = useMemo(() => {
     const nodes = new Map<V, AbstractTreeNode<V, T>>();
-    const expandAllNodes: V[] = [];
     const reduceArr = (arr: AbstractTreeNode<V, T>[]) => {
       for (const item of arr) {
         nodes.set(item.id, item);
         if (item.children) {
-          expandAllNodes.push(item.id);
           reduceArr(item.children);
         }
       }
     };
     reduceArr(renderNodes);
-    return [nodes, expandAllNodes];
+    return nodes;
   }, [renderNodes]);
 
   const formControlInject = useFormControl(dFormControl);
@@ -136,7 +132,7 @@ export function DTree<V extends DId, T extends DTreeItem<V>>(props: DTreeProps<V
     node.updateStatus(select);
   });
 
-  const [_expandIds, changeExpandIds] = useDValue<V[]>(dExpandAll ? initExpandAll : [], dExpands, (value) => {
+  const [_expandIds, changeExpandIds] = useDValue<V[]>([], dExpands, (value) => {
     if (onExpandsChange) {
       onExpandsChange(
         value,

diff --git a/packages/ui/src/components/tree/demos/2.NotOnlyLeaf.md b/packages/ui/src/components/tree/demos/2.NotOnlyLeaf.md
@@ -13,6 +13,8 @@ Select non-leaf nodes.
 选择非叶子节点。
 
 ```tsx
+import { useState } from 'react';
+
 import { DTree } from '@react-devui/ui';
 
 const list = [
@@ -48,6 +50,17 @@ const list = [
   },
 ];
 export default function Demo() {
-  return <DTree dList={list} dOnlyLeafSelectable={false} dExpandAll />;
+  const [expands, setExpands] = useState(['Item 1', 'Item 2', 'Item 3']);
+
+  return (
+    <DTree
+      dList={list}
+      dOnlyLeafSelectable={false}
+      dExpands={expands}
+      onExpandsChange={(val) => {
+        setExpands(val);
+      }}
+    />
+  );
 }
 ```