@@ -12,14 +12,7 @@ import ErrorIcon from '@mui/icons-material/Error';
1212import { useTheme } from '@mui/material/styles' ;
1313import { Typography } from '@mui/material' ;
1414import { MythicStyledTooltip } from "./MythicStyledTooltip" ;
15- import Grow from '@mui/material/Grow' ;
16- import Popper from '@mui/material/Popper' ;
17- import MenuItem from '@mui/material/MenuItem' ;
18- import MenuList from '@mui/material/MenuList' ;
19- import ClickAwayListener from '@mui/material/ClickAwayListener' ;
20- import Paper from '@mui/material/Paper' ;
2115import WidgetsIcon from '@mui/icons-material/Widgets' ;
22- import ListSubheader from '@mui/material/ListSubheader' ;
2316
2417const PREFIX = 'FileBrowserVirtualTree' ;
2518
@@ -151,16 +144,15 @@ const VirtualTreeRow = ({
151144 onExpandNode,
152145 onCollapseNode,
153146 onDoubleClickNode,
154- contextMenuOptions ,
147+ onContextMenu ,
155148 tabInfo,
149+ selectedFolderData,
156150 ...ListProps
157151} ) => {
158152 const itemTreeData = ListProps . data [ ListProps . index ] ;
159153 const item = ListProps . treeRootData [ itemTreeData . group ] ?. [ itemTreeData . host ] ?. [ itemTreeData . full_path_text ] || itemTreeData ;
160154 //console.log("item", item, "itemlookup", ListProps.treeRootData[itemTreeData.host]?.[itemTreeData.name])
161- const dropdownAnchorRef = React . useRef ( null ) ;
162155 const theme = useTheme ( ) ;
163-
164156 const handleOnClickButton = ( e ) => {
165157 e . stopPropagation ( ) ;
166158 if ( itemTreeData . isOpen ) {
@@ -173,42 +165,25 @@ const VirtualTreeRow = ({
173165 const handleOnClickRow = ( e ) => {
174166 onSelectNode ( item . id , { ...item , group : itemTreeData . group , host : itemTreeData . host } ) ;
175167 } ;
176- const [ openContextMenu , setOpenContextMenu ] = React . useState ( false ) ;
177-
178- const handleContextClick = useCallback (
179- ( event ) => {
180- event . preventDefault ( ) ;
181- event . stopPropagation ( ) ;
182- if ( item . root ) {
183-
184- } else if ( item . is_group ) {
185-
186- } else {
187- if ( contextMenuOptions && contextMenuOptions . length > 0 ) {
188- setOpenContextMenu ( true ) ;
189- }
168+ const handleContextClick = ( e ) => {
169+ onContextMenu ( { event : e , item, itemTreeData} ) ;
170+ }
171+ const selectedPath = ( ) => {
172+ if ( itemTreeData . group === selectedFolderData . group && itemTreeData . host === selectedFolderData . host ) {
173+ if ( itemTreeData . root ) {
174+ return "selectedCallbackHierarchy" ;
175+ }
176+ if ( selectedFolderData . id === itemTreeData . id ) {
177+ return "selectedCallback" ;
190178 }
191-
192- } ,
193- [ contextMenuOptions ] // eslint-disable-line react-hooks/exhaustive-deps
194- ) ;
195- const handleMenuItemClick = ( event , index , callback_id , callback_display_id ) => {
196- event . preventDefault ( ) ;
197- event . stopPropagation ( ) ;
198- contextMenuOptions [ index ] . click ( { event,
199- node : { ...item , group : itemTreeData . group , host : itemTreeData . host } ,
200- callback_id, callback_display_id
201- } ) ;
202- setOpenContextMenu ( false ) ;
203- } ;
204- const handleClose = ( event ) => {
205- if ( dropdownAnchorRef . current && dropdownAnchorRef . current . contains ( event . target ) ) {
206- return ;
207179 }
208- setOpenContextMenu ( false ) ;
209- } ;
180+ return "" ;
181+ }
210182 return (
211- < div className = { "hoverme" } style = { ListProps . style } onContextMenu = { handleContextClick } ref = { dropdownAnchorRef } onClick = { handleOnClickRow } >
183+ < div className = { `hoverme ${ selectedPath ( ) } }
184+ style = { ListProps . style }
185+ onContextMenu = { handleContextClick }
186+ onClick = { handleOnClickRow } >
212187 < div style = { { display : 'flex' , marginBottom : "1px" , flexGrow : 1 , width : "100%" } } >
213188 { [ ...Array ( itemTreeData . depth ) ] . map ( ( o , i ) => (
214189 < div
@@ -225,54 +200,7 @@ const VirtualTreeRow = ({
225200 style = { { backgroundColor : theme . body , color : theme . text , alignItems : 'center' , display : 'flex' , paddingRight : "10px" , textDecoration : itemTreeData . deleted ? 'line-through' : '' } }
226201
227202 >
228- < Popper open = { openContextMenu } anchorEl = { dropdownAnchorRef . current } role = { undefined } transition style = { { zIndex : 4 } } >
229- { ( { TransitionProps, placement } ) => (
230- < Grow
231- { ...TransitionProps }
232- style = { {
233- transformOrigin : placement === 'bottom' ? 'left top' : 'left bottom' ,
234- } }
235- >
236- < Paper className = { "dropdownMenuColored" } >
237- < ClickAwayListener onClickAway = { handleClose } >
238- < MenuList id = "split-button-menu" style = { { paddingTop : 0 } } >
239- < ListSubheader component = { "li" } className = { "MuiListSubheader-root" } >
240- Act from current Callback: { tabInfo [ "displayID" ] }
241- </ ListSubheader >
242- { contextMenuOptions . map ( ( option , index ) => (
243- < MenuItem
244- key = { option . name + index }
245- onClick = { ( event ) => handleMenuItemClick ( event , index , tabInfo [ "callbackID" ] , tabInfo [ "displayID" ] ) }
246- >
247- { option . name }
248- </ MenuItem >
249- ) ) }
250- {
251- item ?. callback && item ?. [ "callback" ] ?. [ "id" ] !== tabInfo [ "callbackID" ] &&
252- < ListSubheader component = { "li" } className = { "MuiListSubheader-root" } >
253- Act from originating Callback: { item ?. callback ?. [ "display_id" ] || tabInfo [ "displayID" ] }
254- </ ListSubheader >
255- }
256- {
257- item ?. callback && item ?. [ "callback" ] ?. [ "id" ] !== tabInfo [ "callbackID" ] &&
258- contextMenuOptions . map ( ( option , index ) => (
259- < MenuItem
260- key = { option . name + index }
261- onClick = { ( event ) => handleMenuItemClick ( event , index ,
262- item ?. [ "callback" ] ?. [ "id" ] || tabInfo [ "callbackID" ] ,
263- item ?. [ "callback" ] ?. [ "display_id" ] || tabInfo [ "displayID" ] ) }
264- >
265- { option . name }
266- </ MenuItem >
267- ) )
268- }
269203
270- </ MenuList >
271- </ ClickAwayListener >
272- </ Paper >
273- </ Grow >
274- ) }
275- </ Popper >
276204 { itemTreeData . is_group ? (
277205 < WidgetsIcon style = { { marginLeft : "3px" , marginRight : "5px" } } />
278206 ) : itemTreeData . root ? (
@@ -328,8 +256,9 @@ const FileBrowserVirtualTree = ({
328256 onSelectNode,
329257 onExpandNode,
330258 onCollapseNode,
331- contextMenuOptions ,
259+ onContextMenu ,
332260 showDeletedFiles,
261+ selectedFolderData,
333262 tabInfo,
334263} ) => {
335264 const flattenNode = useCallback (
@@ -401,7 +330,6 @@ const FileBrowserVirtualTree = ({
401330 } ,
402331 [ openNodes , showDeletedFiles ] // eslint-disable-line react-hooks/exhaustive-deps
403332 ) ;
404-
405333 const flattenedNodes = useMemo ( ( ) => {
406334 //console.log("in tree", treeRootData, treeAdjMatrix)
407335 // need to return an array
@@ -471,11 +399,12 @@ const FileBrowserVirtualTree = ({
471399 < VirtualTreeRow
472400 { ...ListProps }
473401 tabInfo = { tabInfo }
402+ selectedFolderData = { selectedFolderData }
474403 treeRootData = { treeRootData }
475404 onSelectNode = { onSelectNode }
476405 onExpandNode = { onExpandNode }
477406 onCollapseNode = { onCollapseNode }
478- contextMenuOptions = { contextMenuOptions }
407+ onContextMenu = { onContextMenu }
479408 />
480409 ) }
481410 </ List >
0 commit comments