fix: [Tree] Module change in NodeList that completes animation

packages/semi-ui/tree/interface.ts

@@ -138,8 +138,7 @@ export type TransitionNodes<T> = Array<T | Array<T>>;
 export interface NodeListState {
     transitionNodes: TransitionNodes<FlattenNode>;
     cachedMotionKeys?: Set<string>;
-    cachedData?: FlattenNode[];
-    isOpen?: boolean
+    cachedData?: FlattenNode[]
 }
 
 export interface ScrollData {

packages/semi-ui/tree/nodeCollapsible.tsx

@@ -0,0 +1,33 @@
+import React, { useState, useEffect, ReactNode } from 'react';
+import Collapsible from '../collapsible';
+
+interface NodeCollapsibleProps {
+    key?: string;
+    open?: boolean;
+    motion?: boolean;
+    duration?: number;
+    onMotionEnd?: () => void;
+    children?: ReactNode
+}
+
+function NodeCollapsible(props: NodeCollapsibleProps) {
+    const { open, children, ...rest } = props;
+    const [isOpen, setIsOpen] = useState(props.open);
+
+    useEffect(() => {
+        // Why do we need to change isOPen value in setTimeout？
+        // Because when NodeCollapsible ComponentDidMount, the domHeight in Collapsible has not been given
+        setTimeout(() => {
+            setIsOpen(!props.open);
+        }, 0);
+    }, []);
+    
+    return (<Collapsible
+        {...rest}
+        isOpen={isOpen}
+    >
+        {children}
+    </Collapsible>);
+}
+
+export default NodeCollapsible;

packages/semi-ui/tree/nodeList.tsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { isEqual } from 'lodash';
 import TreeContext from './treeContext';
 import { FlattenNode, NodeListProps, NodeListState, TransitionNodes } from './interface';
-import Collapsible from '../collapsible';
+import NodeCollapsible from './nodeCollapsible';
 
 const getTreeNodeKey = (treeNode: FlattenNode) => {
     const { data } = treeNode;
@@ -17,7 +17,6 @@ export default class NodeList extends PureComponent<NodeListProps, NodeListState
         super(props);
         this.state = {
             transitionNodes: [],
-            isOpen: false
         };
     }
 
@@ -46,13 +45,11 @@ export default class NodeList extends PureComponent<NodeListProps, NodeListState
             }
         });
         transitionNodes.splice(rangeStart, 0, transitionRange);
-        const isOpen = motionType === 'hide';
         newState = {
             transitionNodes,
             cachedData: flattenNodes,
             cachedMotionKeys: motionKeys,
-            cachedMotionType: motionType,
-            isOpen
+            cachedMotionType: motionType
         };
         return newState;
     }
@@ -62,18 +59,9 @@ export default class NodeList extends PureComponent<NodeListProps, NodeListState
         this.setState({ transitionNodes: [] });
     };
 
-    collapsibleRefCb = () => {
-        const { motionType } = this.props;
-        !isEqual(this.state.isOpen, motionType === 'show') && setTimeout(()=>{
-            this.setState({
-                isOpen: motionType === 'show',
-            });
-        }, 0);  
-    }
-
     render() {
         const { flattenNodes, motionType, searchTargetIsDeep, renderTreeNode } = this.props;
-        const { transitionNodes, isOpen } = this.state;
+        const { transitionNodes } = this.state;
         const mapData = transitionNodes.length && !searchTargetIsDeep ? transitionNodes : flattenNodes;
         const options = mapData.map(treeNode => {
             const isMotionNode = Array.isArray(treeNode);
@@ -83,16 +71,15 @@ export default class NodeList extends PureComponent<NodeListProps, NodeListState
             if (isMotionNode && (treeNode as FlattenNode[]).length) {
                 const nodeKey = getTreeNodeKey(treeNode[0]);
                 return (
-                    <Collapsible
+                    <NodeCollapsible
+                        open={motionType === 'hide'}
                         duration={200}
-                        ref={this.collapsibleRefCb}
-                        isOpen={isOpen}
                         motion={Boolean(motionType)}
                         key={`motion-${nodeKey}`}
                         onMotionEnd={this.onMotionEnd}
                     >
                         {treeNode.map(node => renderTreeNode(node))}
-                    </Collapsible>
+                    </NodeCollapsible>
                 );
             }
             return renderTreeNode(treeNode as FlattenNode);