From e47745c29d60122a1dffbf8265fd8759ba1ed940 Mon Sep 17 00:00:00 2001
From: spencerwooo <spencer.woo@outlook.com>
Date: Thu, 16 Dec 2021 12:49:22 +0800
Subject: [PATCH] show button disabled when none of the files are selected

---
 components/FileListing.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/components/FileListing.tsx b/components/FileListing.tsx
index 4a86a49..59c10a7 100644
--- a/components/FileListing.tsx
+++ b/components/FileListing.tsx
@@ -270,7 +270,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
         el.remove()
       } else if (files.length > 1) {
         setTotalGenerating(true)
-        const toastId = toast.loading('Downloading selected files. Refresh to cancle, this may take some time...')
+        const toastId = toast.loading('Downloading selected files. Refresh to cancel, this may take some time...')
         downloadMultipleFiles(files, folder)
           .then(() => {
             setTotalGenerating(false)
@@ -318,16 +318,15 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
                     />
                   </svg>
                 </span>
-              ) : totalSelected ? (
-                <span
+              ) : (
+                <button
                   title="Download selected files"
-                  className="hover:bg-gray-300 dark:hover:bg-gray-600 p-2 rounded cursor-pointer"
+                  className="hover:bg-gray-300 dark:hover:bg-gray-600 p-2 rounded cursor-pointer disabled:text-gray-400 disabled:dark:text-gray-600 disabled:hover:bg-white disabled:hover:dark:bg-gray-900"
+                  disabled={totalSelected === 0}
                   onClick={handleSelectedDownload}
                 >
                   <FontAwesomeIcon icon={['far', 'arrow-alt-circle-down']} />
-                </span>
-              ) : (
-                ''
+                </button>
               )}
             </div>
           </div>