admin/fs: smarter rendering of nested items
Massimo Melina committed
Apr 17, 2023 at 14:16 UTC
332817e739e06fd74d292e92ca639d9d7f75bfd7
1 file changed
+12
-10
admin/src/VfsTree.ts
+12
-10
@@ -47,12 +47,10 @@ export default function VfsTree({ id2node }:{ id2node: Map<string, VfsNode> }) {
47
}
48
49
function recur(node: Readonly<VfsNode>): ReactElement {
50
- let { id, name, source, isRoot } = node
50
+ let { id, name, isRoot } = node
51
if (!id)
52
debugger
53
const folder = node.type === 'folder'
54
- if (folder && !isWindowsDrive(source) && source === name) // we need a way to show that the name we are displaying is a source in this ambiguous case, so we add a redundant ./
55
- source = './' + source
54
return h(TreeItem, {
55
ref(el: any) { // workaround to permit drag&drop with mui5's tree
56
el?.addEventListener('focusin', (e: any) => e.stopImmediatePropagation())
@@ -102,13 +100,17 @@ export default function VfsTree({ id2node }:{ id2node: Map<string, VfsNode> }) {
100
node.size === -1 && iconTooltip(HighlightOff, "Source not found")
101
),
102
),
105
- isRoot ? "Home"
106
- // special rendering if the whole source is not too long, and the name was not customized
107
- : source?.length! < 45 && source?.endsWith(name) ? h('span', {},
108
- h('span', { style: { opacity: .4 } }, source.slice(0,-name.length)),
109
- h('span', {}, source.slice(-name.length)),
110
- )
111
- : h(Box, { lineHeight: '1.2em' }, name)
103
+ isRoot ? "Home" : (() => { // special rendering if the whole source is not too long, and the name was not customized
104
+ const ps = node.parent?.source
105
+ const { source } = node
106
+ const rel = ps && source?.startsWith(ps) ? '.' + source.slice(ps.length) : source
107
+ return !rel || !source?.endsWith(name) || rel.length > 45
108
+ ? h(Box, { lineHeight: '1.2em' }, name)
109
+ : h('span', {},
110
+ h('span', { style: { opacity: .4 } }, rel.slice(0,-name.length)),
111
+ rel.slice(-name.length),
112
+ )
113
+ })()
114
),
115
key: name,
116
collapseIcon: h(ExpandMore, {