fix(Tree): 修复autoExpandParent参数失效,无法展开父节点 #532 (#541)

* fix(Form): 修复ref获取不到表单方法 * fix(Form):使用useLayoutEffect替换useEffect绑定绑定ForwardedRef * refactor:(Form) 修改Ref类型定义 * fix(Form): 修复无法重置(initialValue)表单问题 * fix(Form): 类型导出错误 * feat(search-select):增加多选功能 * fix(form):增加设置表单值方法 * feat(form):增加必传表单项标注 #534 * fix(search-select):增加Tag依赖 * fix(form):增加获取异常信息方法 * fix(form):修复afterSubmit回调失效问题 * fix(search-select):缺失依赖 * refactor(search-select):重命名类型名称 * style(search-select): 多选select样式 * style(search-select): 多选select下拉弹层样式 * fix(Table):data不支持对象内包含布尔类型 #517 * style(search-select):规范样式命名 * style(SearchSelect): 规范命名 * ifx(SearchSelect): 增加value受控支持,多选模式下为数组 * fix(SearchSelect): 修复defaultValue支持 * fix(Tree):修复autoExpandParent参数时效,无法展开父节点
uiwjs · Feb 17, 2022 · d41a9e9 · d41a9e9
1 parent 3644b9c
commit d41a9e9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/packages/react-tree/README.md b/packages/react-tree/README.md
@@ -92,19 +92,21 @@ const Demo = () => (
       <Col fixed>
         <Card title="单选">
           <Tree
+            defaultExpandAll={true}
             data={data}
             onExpand={(key, expanded, data, node) => {
-              console.log(key, expanded, data, node);
+              console.log('onExpand',key, expanded, data, node);
             }}
             onSelected={(key, selected, item, evn) => {
-              console.log(key, selected, item, evn);
+              console.log('onSelected',key, selected, item, evn);
             }}
           />
         </Card>
       </Col>
       <Col fixed>
         <Card title="多选，子节点不受控">
           <Tree
+          autoExpandParent={true}
             data={data}
             multiple
             onExpand={(key, expanded, data, node) => {
@@ -282,7 +284,7 @@ ReactDOM.render(<Demo />, _mount_);
 
 通过设置 `checkStrictly` 父节点受子节点控制，设置 `multiple` 为多选，设置 `isSelected` 取消选中效果，也可以使用 [`TreeChecked`](#/components/tree-checked) 组件。
 
-<!--rehype:bgWhite=true&codeSandbox=true&codePen=true--> 
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
 ```jsx
 import ReactDOM from 'react-dom';
 import { Tree, Card, Row, Col } from 'uiw';

diff --git a/packages/react-tree/src/index.tsx b/packages/react-tree/src/index.tsx
@@ -69,11 +69,17 @@ const isContained = (a: any[], b: any[]) => {
   return true;
 };
 
-export const getChildKeys = (childs: TreeData[] = [], result: TreeData['key'][] = []): TreeData['key'][] => {
+export const getChildKeys = (
+  childs: TreeData[] = [],
+  result: TreeData['key'][] = [],
+  depth?: number,
+): TreeData['key'][] => {
   childs.forEach((item) => {
     result.push(item.key as string | number);
+    if (typeof depth === 'number' && !(depth - 1)) return;
+
     if (item.children && item.children.length > 0) {
-      result = result.concat(getChildKeys(item.children));
+      result = result.concat(getChildKeys(item.children, undefined, depth ? depth - 1 : undefined));
     }
   });
   return result;
@@ -128,7 +134,7 @@ export default function Tree(props: TreeProps) {
     onSelected = noop,
 
     className,
-    autoExpandParent,
+    autoExpandParent = true,
     renderTitle,
     ...elementProps
   } = props;
@@ -140,10 +146,13 @@ export default function Tree(props: TreeProps) {
   // useEffect(() => setCurSelectedKeys(selectedKeys), [selectedKeys]);
 
   useEffect(() => {
-    const arrOpenKeys = getChildKeys(data);
+    let arrOpenKeys: TreeData['key'][] = [];
     if (defaultExpandAll) {
-      setCurOpenKeys(arrOpenKeys);
+      arrOpenKeys = getChildKeys(data);
+    } else if (autoExpandParent) {
+      arrOpenKeys = getChildKeys(data, undefined, 1);
     }
+    setCurOpenKeys(arrOpenKeys);
   }, []);
 
   const cls = [className, prefixCls, showLine ? `${prefixCls}-line` : null].filter(Boolean).join(' ').trim();