ux: admin/fs: button to select current folder in file picker
Massimo Melina committed
May 13, 2022 at 20:05 UTC
9765b998c38e9940efe81eac9aa8636dc07fb3e5
2 files changed
+11
-7
admin/src/FileField.ts
+1
@@ -28,6 +28,7 @@ export default function FileField({ value, onChange, ...props }: FieldProps<stri
28
function Content() {
29
return h(FilePicker, {
30
multiple: false,
31
+ folders: false,
32
from: value,
33
async onSelect(sel) {
34
let one = sel?.[0]
admin/src/FilePicker.ts
+10
-7
@@ -27,8 +27,9 @@ interface FilePickerProps {
27
onSelect:(v:string[])=>void
28
multiple?: boolean
29
from?: string
30
+ folders?: boolean
31
}
31
-export default function FilePicker({ onSelect, multiple=true, from }: FilePickerProps) {
32
+export default function FilePicker({ onSelect, multiple=true, folders=true, from }: FilePickerProps) {
33
const passedDir = useMemo(() => from && dirname(from), [from])
34
const [cwd, setCwd] = useState(from && passedDir || '')
35
const [ready, setReady] = useState(false)
@@ -89,11 +90,12 @@ export default function FilePicker({ onSelect, multiple=true, from }: FilePicker
90
...size, itemSize: 46, itemCount: filteredList.length, overscanCount: 5,
91
children({ index, style }) {
92
const it: DirEntry = filteredList[index]
93
+ const isFolder = it.k === 'd'
94
return h(MenuItem, {
95
style,
96
key: it.n,
97
onClick() {
96
- if (it.k === 'd')
98
+ if (isFolder)
99
setCwd(cwdPostfixed + it.n)
100
else
101
onSelect([cwdPostfixed + it.n])
@@ -101,6 +103,7 @@ export default function FilePicker({ onSelect, multiple=true, from }: FilePicker
103
},
104
multiple && h(Checkbox, {
105
checked: sel.includes(it.n),
106
+ disabled: !folders && isFolder,
107
onClick(ev) {
108
const id = it.n
109
const removed = sel.filter(x => x !== id)
@@ -110,7 +113,7 @@ export default function FilePicker({ onSelect, multiple=true, from }: FilePicker
113
}),
114
h(ListItemIcon, {}, h(it.k ? FolderIcon : FileIcon)),
115
h(ListItemText, { sx: { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } }, it.n),
113
- it.k !== 'd' && it.s !== undefined && h(Typography, {
116
+ !isFolder && it.s !== undefined && h(Typography, {
117
variant: 'body2',
118
color: 'text.secondary',
119
ml: 4
@@ -121,14 +124,14 @@ export default function FilePicker({ onSelect, multiple=true, from }: FilePicker
124
}),
125
),
126
h(Box, { display:'flex', gap: 1 },
124
- multiple && h(Button, {
127
+ (multiple || folders) && h(Button, {
128
variant: 'contained',
126
- disabled: !sel.length,
129
+ disabled: !folders && !sel.length,
130
sx: { minWidth: 'max-content' },
131
onClick() {
129
- onSelect(sel.map(x => cwdPostfixed + x))
132
+ onSelect(sel.length ? sel.map(x => cwdPostfixed + x) : [cwd])
133
}
131
- }, `Select (${sel.length})`),
134
+ }, sel.length || !folders ? `Select (${sel.length})` : `Select this folder`),
135
h(TextField, {
136
value: filter,
137
label: `Filter results (${filteredList.length}${filteredList.length < list.length ? '/'+list.length : ''})`,