admin/fs: double-click to expand folders
Massimo Melina committed
Jan 12, 2025 at 17:23 UTC
998b74ad5d9100acfdbbe4d65810530ff3ce26a9
1 file changed
+10
-15
admin/src/VfsTree.ts
+10
-15
@@ -1,7 +1,7 @@
1
// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
import { state, useSnapState } from './state'
4
-import { createElement as h, ReactElement, useCallback, useEffect, useRef, useState } from 'react'
4
+import { createElement as h, ReactElement, useCallback, useEffect, useRef, useState, MouseEvent } from 'react'
5
import { TreeItem, TreeView } from '@mui/x-tree-view'
6
import {
7
ChevronRight, ExpandMore, TheaterComedy, Folder, Home, Link, InsertDriveFileOutlined, Lock,
@@ -34,6 +34,7 @@ export default function VfsTree({ id2node, statusApi }:{ id2node: Map<string, Vf
34
el?.addEventListener('focusin', (e: any) => e.stopImmediatePropagation())
35
ref.current = el
36
},
37
+ onDoubleClick: toggle,
38
label:
39
h(Box, {
40
draggable: !isRoot,
@@ -88,20 +89,8 @@ export default function VfsTree({ id2node, statusApi }:{ id2node: Map<string, Vf
89
)
90
})()
91
),
91
- collapseIcon: h(ExpandMore, {
92
- onClick(ev) {
93
- setExpanded(was => was?.filter(x => x !== id) )
94
- ev.preventDefault()
95
- ev.stopPropagation()
96
- }
97
- }),
98
- expandIcon: h(ChevronRight, {
99
- onClick(ev) {
100
- setExpanded(was => [...was!, id] )
101
- ev.preventDefault()
102
- ev.stopPropagation()
103
- }
104
- }),
92
+ collapseIcon: h(ExpandMore, { onClick: toggle }),
93
+ expandIcon: h(ChevronRight, { onClick: toggle }),
94
nodeId: id
95
}, isRoot && !node.children?.length ? h(TreeItem, { nodeId: '?', label: h('i', {}, "nothing here") })
96
: node.children?.map(x => h(Branch, { key: x.id, node: x })) )
@@ -109,6 +98,12 @@ export default function VfsTree({ id2node, statusApi }:{ id2node: Map<string, Vf
98
function isRestricted(who: Who | undefined) {
99
return who !== undefined && who !== true
100
}
101
+
102
+ function toggle(ev: MouseEvent<any>){
103
+ setExpanded(was => was?.includes(id) ? was.filter(x => x !== id) : [...was!, id])
104
+ ev.preventDefault()
105
+ ev.stopPropagation()
106
+ }
107
}, [setExpanded])
108
const ref = useRef<HTMLUListElement>(null)
109
const [expandAll, toggleBtn] = useToggleButton("Collapse all", "Expand all", exp => ({ icon: exp ? UnfoldLess : UnfoldMore, sx: { rotate: exp ? 0 : '180deg' } }))