removed react-virtualized-auto-sizer module as it's not compatible with react 18, and we can fairly manage without it
Massimo Melina committed
Aug 4, 2022 at 22:08 UTC
63ea6b83c93c778ca7f7a967ad95ef592c5876a5
2 files changed
+46
-40
admin/package.json
-1
@@ -22,7 +22,6 @@
22
"react": "^17.0.2",
23
"react-dom": "^17.0.2",
24
"react-router-dom": "^6.2.1",
25
- "react-virtualized-auto-sizer": "^1.0.6",
25
"react-window": "^1.8.6",
26
"tssrp6a": "^3.0.0",
27
"valtio": "^1.2.9",
admin/src/FilePicker.ts
+46
-39
@@ -19,7 +19,6 @@ import { ArrowUpward, VerticalAlignTop } from '@mui/icons-material'
19
import { StringField } from '@hfs/mui-grid-form'
20
import { FileIcon, FolderIcon } from './VfsTree'
21
import { FixedSizeList } from 'react-window'
22
-import AutoSizer from "react-virtualized-auto-sizer"
22
23
export interface DirEntry { n:string, s?:number, m?:string, c?:string, k?:'d' }
24
@@ -57,6 +56,7 @@ export default function FilePicker({ onSelect, multiple=true, files=true, folder
56
return (v:string) => re.test(v)
57
}, [filter])
58
59
+ const [listHeight, setListHeight] = useState(0)
60
const filteredList = useMemo(() => list.filter(it => filterMatch(it.n)), [list,filterMatch])
61
if (loading)
62
return spinner()
@@ -96,45 +96,52 @@ export default function FilePicker({ onSelect, multiple=true, files=true, folder
96
),
97
error ? h(Alert, { severity: 'error' }, err2msg(error))
98
: h(Fragment, {},
99
- h(Box, { sx: { flex: 1 } },
100
- !list.length ? h(Center, { flex: 1, mt: '4em' }, "No elements in this folder") : h(AutoSizer, {
101
- children: size =>
102
- h(FixedSizeList, {
103
- ...size, itemSize: 46, itemCount: filteredList.length, overscanCount: 5,
104
- children({ index, style }) {
105
- const it: DirEntry = filteredList[index]
106
- const isFolder = it.k === 'd'
107
- return h(MenuItem, {
108
- style: { ...style, padding: 0 },
109
- key: it.n,
110
- onClick() {
111
- if (isFolder)
112
- setCwd(cwdDelimiter + it.n)
113
- else
114
- onSelect([cwdDelimiter + it.n])
115
- }
99
+ h(Box, {
100
+ ref(x?: HTMLElement){
101
+ if (!x) return
102
+ const h = x?.clientHeight - 1
103
+ if (h - listHeight > 1)
104
+ setListHeight(h)
105
+ },
106
+ sx: { flex: 1, display: 'flex', flexDirection: 'column' }
107
+ },
108
+ !list.length ? h(Center, { flex: 1, mt: '4em' }, "No elements in this folder")
109
+ : h(FixedSizeList, {
110
+ width: '100%', height: listHeight,
111
+ itemSize: 46, itemCount: filteredList.length, overscanCount: 5,
112
+ children({ index, style }) {
113
+ const it: DirEntry = filteredList[index]
114
+ const isFolder = it.k === 'd'
115
+ return h(MenuItem, {
116
+ style: { ...style, padding: 0 },
117
+ key: it.n,
118
+ onClick() {
119
+ if (isFolder)
120
+ setCwd(cwdDelimiter + it.n)
121
+ else
122
+ onSelect([cwdDelimiter + it.n])
123
+ }
124
+ },
125
+ multiple && h(Checkbox, {
126
+ checked: sel.includes(it.n),
127
+ disabled: !folders && isFolder,
128
+ onClick(ev) {
129
+ const id = it.n
130
+ const removed = sel.filter(x => x !== id)
131
+ setSel(removed.length < sel.length ? removed : [...sel, id])
132
+ ev.stopPropagation()
133
},
117
- multiple && h(Checkbox, {
118
- checked: sel.includes(it.n),
119
- disabled: !folders && isFolder,
120
- onClick(ev) {
121
- const id = it.n
122
- const removed = sel.filter(x => x !== id)
123
- setSel(removed.length < sel.length ? removed : [...sel, id])
124
- ev.stopPropagation()
125
- },
126
- }),
127
- h(ListItemIcon, {}, h(it.k ? FolderIcon : FileIcon)),
128
- h(ListItemText, { sx: { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } }, it.n),
129
- !isFolder && it.s !== undefined && h(Typography, {
130
- variant: 'body2',
131
- color: 'text.secondary',
132
- ml: 4
133
- }, formatBytes(it.s))
134
- )
135
- }
136
- })
137
- }),
134
+ }),
135
+ h(ListItemIcon, {}, h(it.k ? FolderIcon : FileIcon)),
136
+ h(ListItemText, { sx: { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } }, it.n),
137
+ !isFolder && it.s !== undefined && h(Typography, {
138
+ variant: 'body2',
139
+ color: 'text.secondary',
140
+ ml: 4
141
+ }, formatBytes(it.s))
142
+ )
143
+ }
144
+ })
145
),
146
h(Box, { display:'flex', gap: 1 },
147
(multiple || folders || !files) && h(Button, {