fix: use activeKey to control highlighting (#724) (#742)

DTStack · May 25, 2022 · 52d79b0 · 52d79b0
1 parent 22f310f
commit 52d79b0
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/components/tree/index.tsx b/src/components/tree/index.tsx
@@ -1,4 +1,10 @@
-import React, { useState, useRef, useCallback, useLayoutEffect } from 'react';
+import React, {
+    useState,
+    useRef,
+    useCallback,
+    useLayoutEffect,
+    useEffect,
+} from 'react';
 import { Icon } from 'mo/components/icon';
 import { debounce } from 'lodash';
 import { classNames } from 'mo/common/className';
@@ -56,6 +62,7 @@ export interface ITreeProps {
     className?: string;
     draggable?: boolean;
     expandKeys?: UniqueId[];
+    activeKey?: UniqueId;
     onExpand?: (expandedKeys: React.Key[], node: ITreeNodeItemProps) => void;
     onSelect?: (node: ITreeNodeItemProps, isUpdate?) => void;
     onTreeClick?: () => void;
@@ -77,6 +84,7 @@ const TreeView = ({
     data = [],
     draggable = false,
     expandKeys: controlExpandKeys,
+    activeKey: controlActiveKey,
     onExpand,
     onDropTree,
     onRightClick,
@@ -434,6 +442,10 @@ const TreeView = ({
         }
     }, [data]);
 
+    useEffect(() => {
+        controlActiveKey && setActiveKey(controlActiveKey.toString());
+    }, [controlActiveKey]);
+
     return (
         <div
             role="tree"

diff --git a/src/workbench/sidebar/explore/folderTree.tsx b/src/workbench/sidebar/explore/folderTree.tsx
@@ -82,7 +82,12 @@ const FolderTree: React.FunctionComponent<IFolderTreeProps> = (props) => {
         ...restProps
     } = props;
 
-    const { data = [], folderPanelContextMenu = [], expandKeys } = folderTree;
+    const {
+        data = [],
+        folderPanelContextMenu = [],
+        expandKeys,
+        current,
+    } = folderTree;
 
     const handleAddRootFolder = () => {
         createTreeNode?.('RootFolder');
@@ -228,6 +233,7 @@ const FolderTree: React.FunctionComponent<IFolderTreeProps> = (props) => {
             <div data-content={panel.id} style={{ height: '100%' }}>
                 <Tree
                     // root folder do not render
+                    activeKey={current?.id}
                     expandKeys={expandKeys}
                     data={data[0]?.children || []}
                     className={classNames(