1- import React , { memo , useEffect , useMemo , useState } from 'react' ;
1+ import React , { memo , useEffect , useMemo , useState , forwardRef , createContext , useContext } from 'react' ;
22import styles from './index.less' ;
33import classnames from 'classnames' ;
44import Iconfont from '@/components/Iconfont' ;
55import { Tooltip , Dropdown } from 'antd' ;
66import { ITreeNode } from '@/typings' ;
7- import { OperationColumn , TreeNodeType , databaseMap } from '@/constants' ;
7+ import { TreeNodeType , databaseMap } from '@/constants' ;
88import { treeConfig , switchIcon , ITreeConfigItem } from './treeConfig' ;
99import { useCommonStore } from '@/store/common' ;
1010import LoadingGracile from '@/components/Loading/LoadingGracile' ;
1111import { setFocusId , useTreeStore } from './treeStore' ;
1212import { useGetRightClickMenu } from './hooks/useGetRightClickMenu' ;
1313import MenuLabel from '@/components/MenuLabel' ;
14+ import LoadingContent from '@/components/Loading/LoadingContent'
1415
1516interface IProps {
1617 className ?: string ;
1718 initialData : ITreeNode [ ] | null ;
19+ searchValue : string ;
20+ ref : any ;
1821}
1922
2023interface TreeNodeIProps {
2124 data : ITreeNode ;
2225 level : number ;
26+ setShowParentNode ?: ( value : boolean ) => void ;
2327}
2428
25- const Tree = memo ( ( props : IProps ) => {
26- const { className, initialData } = props ;
29+ interface IContext {
30+ searchValue ?: string ;
31+ }
32+
33+ export const Context = createContext < IContext > ( { } as any ) ;
34+
35+ const Tree = ( props : IProps , ref : any ) => {
36+ const { className, initialData, searchValue } = props ;
2737 const [ treeData , setTreeData ] = useState < ITreeNode [ ] | null > ( null ) ;
2838
2939 useEffect ( ( ) => {
@@ -36,18 +46,45 @@ const Tree = memo((props: IProps) => {
3646 } ) ;
3747 } , [ treeData ] ) ;
3848
39- return < div className = { classnames ( className , styles . treeBox ) } > { treeNodes } </ div > ;
40- } ) ;
49+ return (
50+ < Context . Provider value = { { searchValue } } >
51+ < LoadingContent isLoading = { ! treeData } ref = { ref } className = { classnames ( className , styles . treeBox ) } >
52+ { treeNodes }
53+ </ LoadingContent >
54+ </ Context . Provider >
55+ ) ;
56+ } ;
4157
4258const TreeNode = memo ( ( props : TreeNodeIProps ) => {
43- const { data : initData , level } = props ;
59+ const { data : initData , level, setShowParentNode : _setShowParentNode } = props ;
4460 const [ isLoading , setIsLoading ] = useState ( false ) ;
4561 const indentArr = new Array ( level ) . fill ( 'indent' ) ;
4662 const [ treeNodeData , setTreeNodeData ] = useState < ITreeNode > ( {
4763 ...initData ,
4864 } ) ;
65+ const { searchValue } = useContext ( Context ) ;
4966 const isFocus = useTreeStore ( ( state ) => state . focusId ) === treeNodeData . uuid ;
5067
68+ const showTreeNode = useMemo ( ( ) => {
69+ const reg = new RegExp ( searchValue || '' , 'i' ) ;
70+ return reg . test ( treeNodeData . name || '' ) ;
71+ } , [ searchValue ] ) ;
72+
73+ // 如果showTreeNode为true，那么他的父节点也要展示
74+ const [ showParentNode , setShowParentNode ] = useState < boolean > ( false ) ;
75+
76+ useEffect ( ( ) => {
77+ if ( showTreeNode ) {
78+ _setShowParentNode ?.( true ) ;
79+ }
80+ } , [ showTreeNode ] ) ;
81+
82+ useEffect ( ( ) => {
83+ if ( showParentNode ) {
84+ _setShowParentNode ?.( true ) ;
85+ }
86+ } , [ showParentNode ] ) ;
87+
5188 // 加载数据
5289 function loadData ( _props ?: { refresh : boolean } ) {
5390 const treeNodeConfig : ITreeConfigItem = treeConfig [ treeNodeData . pretendNodeType || treeNodeData . treeNodeType ] ;
@@ -118,24 +155,6 @@ const TreeNode = memo((props: TreeNodeIProps) => {
118155 }
119156 } ;
120157
121- // function nodeDoubleClick() {
122- // if (
123- // data.treeNodeType === TreeNodeType.TABLE ||
124- // data.treeNodeType === TreeNodeType.FUNCTION ||
125- // data.treeNodeType === TreeNodeType.TRIGGER ||
126- // data.treeNodeType === TreeNodeType.VIEW ||
127- // data.treeNodeType === TreeNodeType.PROCEDURE
128- // ) {
129- // dispatch({
130- // type: 'workspace/setDoubleClickTreeNodeData',
131- // payload: data,
132- // });
133- // }
134- // else {
135- // handleClick(data);
136- // }
137- // }
138-
139158 // 点击节点
140159 const handelClickTreeNode = ( ) => {
141160 useCommonStore . setState ( {
@@ -144,17 +163,15 @@ const TreeNode = memo((props: TreeNodeIProps) => {
144163 setFocusId ( treeNodeData . uuid || '' ) ;
145164 } ;
146165
147- //
166+ //
148167 const handelDoubleClickTreeNode = ( ) => {
149- if ( treeNodeData . treeNodeType === TreeNodeType . TABLE ) {
150- rightClickMenu . find ( ( item ) => item . type === OperationColumn . OpenTable ) ?. onClick ( ) ;
151- }
152- }
168+ rightClickMenu . find ( ( item ) => item . doubleClickTrigger ) ?. onClick ( ) ;
169+ } ;
153170
154171 // 递归渲染
155172 const treeNodes = useMemo ( ( ) => {
156173 return treeNodeData . children ?. map ( ( item : any , index : number ) => {
157- return < TreeNode key = { item . name + index } level = { level + 1 } data = { item } /> ;
174+ return < TreeNode setShowParentNode = { setShowParentNode } key = { item . name + index } level = { level + 1 } data = { item } /> ;
158175 } ) ;
159176 } , [ treeNodeData ] ) ;
160177
@@ -234,10 +251,10 @@ const TreeNode = memo((props: TreeNodeIProps) => {
234251
235252 return (
236253 < >
237- { treeNodeDom }
254+ { ( showTreeNode || showParentNode ) && treeNodeDom }
238255 { treeNodes }
239256 </ >
240257 ) ;
241258} ) ;
242259
243- export default Tree ;
260+ export default memo ( forwardRef ( Tree ) ) ;
0 commit comments