From 8c17573e81ee6192e5061ce841b16c6b97ef0268 Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Mon, 24 Jul 2023 12:38:14 +0800
Subject: [PATCH] Update fileselectblob enhanced

Make layout consistent with enhanced fileselectblob components
---
 .../src/components/FileSelectBox/index.tsx    | 70 +++++++++----------
 .../src/pages/categories/blob/index.tsx       | 13 +++-
 2 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/categories/blob/react/src/components/FileSelectBox/index.tsx b/categories/blob/react/src/components/FileSelectBox/index.tsx
index 2d4ad3f..c6ec584 100644
--- a/categories/blob/react/src/components/FileSelectBox/index.tsx
+++ b/categories/blob/react/src/components/FileSelectBox/index.tsx
@@ -359,53 +359,49 @@ export const FileSelectBox = React.forwardRef<FileSelectBoxDerivedElement, FileS
       && (
         <React.Fragment key={lastUpdated}>
           <div className="sm:absolute top-0 left-0 w-full h-full pointer-events-none pb-12 box-border overflow-hidden pt-8">
-            <div
-              className="pointer-events-auto w-full h-full px-4 pb-4 box-border"
-            >
-              {multiple
-              && (
-                <div className="w-full h-full overflow-auto">
-                  <div className="w-full grid gap-2 grid-cols-3">
-                    {Array.from(fileList ?? []).map((file) => (
-                      <div
-                        key={file.name}
-                        data-testid="selectedFileItem"
-                        className="w-full p-2 aspect-square rounded overflow-hidden relative before:absolute before:content-[''] before:bg-current before:top-0 before:left-0 before:w-full before:h-full before:opacity-10"
-                      >
-                        <FilePreviewComponent
-                          file={file}
-                          enhanced={clientSide}
-                          disabled={disabled}
-                          mini
-                        />
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-              {!multiple
-              && Array.from(fileList ?? []).map((file) => (
-                <div
-                  key={file.name}
-                  className="w-full h-full"
-                >
-                  <div
-                    data-testid="selectedFileItem"
-                    className="h-full w-full p-4 box-border rounded overflow-hidden relative before:absolute before:content-[''] before:bg-current before:top-0 before:left-0 before:w-full before:h-full before:opacity-10"
-                  >
+            {multiple
+            && (
+              <div className="pointer-events-auto w-full h-full overflow-auto px-4 box-border">
+                <div className="w-full grid gap-2 grid-cols-3">
+                  {Array.from(fileList ?? []).map((file) => (
                     <div
-                      className="w-full h-full relative"
+                      key={file.name}
+                      data-testid="selectedFileItem"
+                      className="w-full p-2 aspect-square rounded overflow-hidden relative before:absolute before:content-[''] before:bg-current before:top-0 before:left-0 before:w-full before:h-full before:opacity-10"
                     >
                       <FilePreviewComponent
                         file={file}
                         enhanced={clientSide}
                         disabled={disabled}
+                        mini
                       />
                     </div>
+                  ))}
+                </div>
+              </div>
+            )}
+            {!multiple
+            && Array.from(fileList ?? []).map((file) => (
+              <div
+                key={file.name}
+                className="pointer-events-auto w-full h-full px-4 box-border"
+              >
+                <div
+                  data-testid="selectedFileItem"
+                  className="h-full w-full p-4 box-border rounded overflow-hidden relative before:absolute before:content-[''] before:bg-current before:top-0 before:left-0 before:w-full before:h-full before:opacity-10"
+                >
+                  <div
+                    className="w-full h-full relative"
+                  >
+                    <FilePreviewComponent
+                      file={file}
+                      enhanced={clientSide}
+                      disabled={disabled}
+                    />
                   </div>
                 </div>
-              ))}
-            </div>
+              </div>
+            ))}
           </div>
           <div className="absolute bottom-0 left-0 w-full text-center h-12 box-border flex">
             <div className="w-0 flex-auto flex flex-col items-center justify-center h-full">
diff --git a/showcases/web-kitchensink-reactnext/src/pages/categories/blob/index.tsx b/showcases/web-kitchensink-reactnext/src/pages/categories/blob/index.tsx
index c4cd673..96ccf9c 100644
--- a/showcases/web-kitchensink-reactnext/src/pages/categories/blob/index.tsx
+++ b/showcases/web-kitchensink-reactnext/src/pages/categories/blob/index.tsx
@@ -13,7 +13,16 @@ const BlobPage: NextPage = () => {
             name="file"
             border
             placeholder="Select a file"
-            previewComponent={() => null}
+            onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.files)}}
+          />
+        </Subsection>
+        <Subsection title="Default Multiple">
+          <TesseractBlob.FileSelectBox
+            label="File"
+            name="file"
+            border
+            multiple
+            placeholder="Select a file"
             onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.files)}}
           />
         </Subsection>
@@ -30,7 +39,7 @@ const BlobPage: NextPage = () => {
             onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.files)}}
           />
         </Subsection>
-        <Subsection title="Multiple">
+        <Subsection title="Enhanced Multiple">
           <TesseractBlob.FileSelectBox
             label="File"
             name="file"