1- import RcTree from ' rc-tree' ;
2- import { DataNode } from ' rc-tree/lib/interface' ;
3- import React , { useEffect , useState } from ' react' ;
1+ import RcTree from " rc-tree" ;
2+ import { DataNode } from " rc-tree/lib/interface" ;
3+ import React , { useEffect , useState } from " react" ;
44
5- import EllipticLoader from ' ../EllipticLoader' ;
6- import { useWorkbenchDB } from ' ../../contexts/workbenchContext' ;
5+ import EllipticLoader from " ../EllipticLoader" ;
6+ import { PathType , useWorkbenchDB } from " ../../contexts/workbenchContext" ;
77
8- import SwitcherIcon from ' ./SwitcherIcon' ;
8+ import SwitcherIcon from " ./SwitcherIcon" ;
99
10- import ' ./FileTree.css' ;
10+ import " ./FileTree.css" ;
1111
1212const FileTree = ( props : React . HTMLProps < HTMLDivElement > ) => {
1313 const workbenchDB = useWorkbenchDB ( ) ;
14- const { db, initialized, importedSqliteFilePath, updateCurrentPath } = workbenchDB ;
14+ const {
15+ db,
16+ initialized,
17+ importedSqliteFilePath,
18+ currentPath,
19+ currentPathType,
20+ updateCurrentPath,
21+ } = workbenchDB ;
1522
1623 const [ treeData , setTreeData ] = useState < DataNode [ ] | null > ( null ) ;
1724
1825 useEffect ( ( ) => {
19- if ( ! initialized || ! db || ! importedSqliteFilePath )
20- return ;
21-
22- db . sync
23- . then ( ( ) => {
24- db . findAllJSTree ( )
25- . then ( ( treeData ) => {
26- setTreeData ( treeData as unknown as DataNode [ ] ) ;
27- } ) ;
28- } )
26+ if ( ! initialized || ! db || ! importedSqliteFilePath ) return ;
27+
28+ db . sync . then ( ( ) => {
29+ db . findAllJSTree ( ) . then ( ( treeData ) => {
30+ setTreeData ( treeData as unknown as DataNode [ ] ) ;
31+ } ) ;
32+ } ) ;
2933 } , [ importedSqliteFilePath ] ) ;
3034
31- function selectPath ( path : string ) {
32- if ( ! initialized )
33- return ;
35+ function selectPath ( path : string , pathType : PathType ) {
36+ if ( ! initialized ) return ;
3437 // console.log("FileTree: selected path:", path);
35- updateCurrentPath ( path ) ;
38+ updateCurrentPath ( path , pathType ) ;
3639 }
3740
38- if ( ! treeData ) {
41+ // console.log("Current path & type", currentPath, currentPathType);
42+
43+ if ( ! treeData ) {
3944 return (
40- < div className = ' file-tree-loader' >
45+ < div className = " file-tree-loader" >
4146 < div >
4247 Processing File Tree
43- < br />
44- < EllipticLoader
45- radius = { 1 }
46- wrapperClass = "loader"
47- />
48+ < br />
49+ < EllipticLoader radius = { 1 } wrapperClass = "loader" />
4850 </ div >
4951 </ div >
5052 ) ;
@@ -56,26 +58,26 @@ const FileTree = (props: React.HTMLProps<HTMLDivElement>) => {
5658 showLine
5759 treeData = { treeData }
5860 switcherIcon = { SwitcherIcon }
59- onActiveChange = { selectPath }
60- onSelect = { keys => {
61- if ( keys && keys [ 0 ] )
62- selectPath ( keys [ 0 ] . toString ( ) )
61+ onSelect = { ( keys , info ) => {
62+ if ( keys && keys [ 0 ] )
63+ selectPath (
64+ keys [ 0 ] . toString ( ) ,
65+ ( info . node as any ) . dataValues . type
66+ ) ;
6367 } }
64-
65- // For UI testing with dummy data
66- defaultExpandedKeys = { [ '0' , '0-0' , '0-0-0' , '0-0-0-0' ] }
67-
6868 motion = { {
69- motionName : ' node-motion' ,
69+ motionName : " node-motion" ,
7070 motionAppear : false ,
7171 onAppearStart : ( ) => ( { height : 0 } ) ,
72- onAppearActive : ( node : HTMLElement ) => ( { height : node . scrollHeight } ) ,
72+ onAppearActive : ( node : HTMLElement ) => ( {
73+ height : node . scrollHeight ,
74+ } ) ,
7375 onLeaveStart : ( node : HTMLElement ) => ( { height : node . offsetHeight } ) ,
7476 onLeaveActive : ( ) => ( { height : 0 } ) ,
7577 } }
7678 />
7779 </ div >
78- )
79- }
80+ ) ;
81+ } ;
8082
81- export default FileTree
83+ export default FileTree ;
0 commit comments