x/onedrive
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add loading state for folder download

Browse source
This commit is contained in:
myl7 2021-11-28 19:42:16 +08:00
parent a35a7a790b
commit 4a7398bf59
No known key found for this signature in database
GPG key ID: 04F1013B67177C88
1 changed files with 18 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
components/FileListing.tsx
View file

@ -166,6 +166,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
const [selected, setSelected] = useState<{ [key: string]: boolean }>({}) const [selected, setSelected] = useState<{ [key: string]: boolean }>({})
const [totalSelected, setTotalSelected] = useState<0 | 1 | 2>(0) const [totalSelected, setTotalSelected] = useState<0 | 1 | 2>(0)
const [totalGenerating, setTotalGenerating] = useState<boolean>(false) const [totalGenerating, setTotalGenerating] = useState<boolean>(false)
const [folderGenerating, setFolderGenerating] = useState<{ [key: string]: boolean }>({})
const router = useRouter() const router = useRouter()
const clipboard = useClipboard() const clipboard = useClipboard()
@ -302,7 +303,8 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
} }
// Folder recursive download // Folder recursive download
const handleFolderDownload = (path: string, name?: string) => () => { const handleFolderDownload = (path: string, id: string, name?: string) => () => {
setFolderGenerating({ ...folderGenerating, [id]: true })
const files = (async function* () { const files = (async function* () {
for await (const { meta: c, path: p, isFolder } of treeList(path)) { for await (const { meta: c, path: p, isFolder } of treeList(path)) {
yield { yield {
@ -313,7 +315,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
} }
} }
})() })()
saveTreeFiles(files, name) saveTreeFiles(files, name).then(() => setFolderGenerating({ ...folderGenerating, [id]: false }))
} }
return ( return (
@ -415,15 +417,20 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
> >
<FontAwesomeIcon icon={['far', 'copy']} /> <FontAwesomeIcon icon={['far', 'copy']} />
</span> </span>
<span {folderGenerating[c.id] ? (
title="Download folder" <Downloading title="Downloading folder, refresh page to cancel" />
className="hover:bg-gray-300 dark:hover:bg-gray-600 p-2 rounded cursor-pointer" ) : (
onClick={() => { <span
handleFolderDownload(`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`, c.name)() title="Download folder"
}} className="hover:bg-gray-300 dark:hover:bg-gray-600 p-2 rounded cursor-pointer"
> onClick={() => {
<FontAwesomeIcon icon={['far', 'arrow-alt-circle-down']} /> const p = `${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`
</span> handleFolderDownload(p, c.id, c.name)()
}}
>
<FontAwesomeIcon icon={['far', 'arrow-alt-circle-down']} />
</span>
)}
</div> </div>
) : ( ) : (
<div className="md:flex dark:text-gray-400 hidden p-1 text-gray-700"> <div className="md:flex dark:text-gray-400 hidden p-1 text-gray-700">