Fork file uploader from basui (#5344)

uber · Jul 1, 2024 · 18f01ef · 18f01ef
1 parent b6a0cbd
commit 18f01ef
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 51 deletions.
diff --git a/documentation-site/cheat-sheet.jsx b/documentation-site/cheat-sheet.jsx
@@ -1444,7 +1444,7 @@ const outlines = [
         lineStart: 11,
         children: [
           { name: "$afterFileDrop", lineStart: 12 },
-          { name: "$isDisabled", lineStart: 13 },
+          { name: "$disabled", lineStart: 13 },
           { name: "$isDragActive", lineStart: 14 },
           { name: "$isDragAccept", lineStart: 15 },
           { name: "$isDragReject", lineStart: 16 },
@@ -1478,59 +1478,54 @@ const outlines = [
     definitions: [
       {
         name: "StyleProps",
-        lineStart: 11,
+        lineStart: 15,
         children: [
-          { name: "$afterFileDrop", lineStart: 12 },
-          { name: "$alt", lineStart: 13 },
-          { name: "$color", lineStart: 14 },
-          { name: "$disabled", lineStart: 15 },
-          { name: "$isDragActive", lineStart: 16 },
-          { name: "$isDragAccept", lineStart: 17 },
-          { name: "$isDragReject", lineStart: 18 },
-          { name: "$isFocused", lineStart: 19 },
-          { name: "$src", lineStart: 20 },
+          { name: "$alt", lineStart: 16 },
+          { name: "$color", lineStart: 17 },
+          { name: "$fileCount", lineStart: 18 },
+          { name: "$src", lineStart: 19 },
         ],
       },
       {
         name: "FileUploaderBetaOverrides",
-        lineStart: 23,
+        lineStart: 22,
         children: [
-          { name: "AlertIcon", lineStart: 24 },
-          { name: "CircleCheckFilledIcon", lineStart: 25 },
-          { name: "FileRow", lineStart: 26 },
-          { name: "FileRowColumn", lineStart: 27 },
-          { name: "FileRowContent", lineStart: 28 },
-          { name: "FileRowFileName", lineStart: 29 },
-          { name: "FileRowText", lineStart: 30 },
-          { name: "FileRowUploadMessage", lineStart: 31 },
-          { name: "FileRowUploadText", lineStart: 32 },
-          { name: "FileRows", lineStart: 33 },
-          { name: "Hint", lineStart: 34 },
-          { name: "ImagePreviewThumbnail", lineStart: 35 },
-          { name: "ItemPreviewContainer", lineStart: 36 },
-          { name: "Label", lineStart: 37 },
-          { name: "PaperclipFilledIcon", lineStart: 38 },
-          { name: "ParentRoot", lineStart: 39 },
-          { name: "TrashCanFilledIcon", lineStart: 40 },
-          { name: "TrashCanFilledIconContainer", lineStart: 41 },
-        ],
-      },
-      { name: "FileRow", lineStart: 44, children: [
-        { name: "errorMessage", lineStart: 45 },
-        { name: "file", lineStart: 46 },
-        { name: "fileInfo", lineStart: 49 },
-        { name: "imagePreviewThumbnail", lineStart: 50 },
-        { name: "status", lineStart: 52 },
+          { name: "AlertIcon", lineStart: 23 },
+          { name: "CircleCheckFilledIcon", lineStart: 24 },
+          { name: "FileRow", lineStart: 25 },
+          { name: "FileRowColumn", lineStart: 26 },
+          { name: "FileRowContent", lineStart: 27 },
+          { name: "FileRowFileName", lineStart: 28 },
+          { name: "FileRowText", lineStart: 29 },
+          { name: "FileRowUploadMessage", lineStart: 30 },
+          { name: "FileRowUploadText", lineStart: 31 },
+          { name: "FileRows", lineStart: 32 },
+          { name: "Hint", lineStart: 33 },
+          { name: "ImagePreviewThumbnail", lineStart: 34 },
+          { name: "ItemPreviewContainer", lineStart: 35 },
+          { name: "Label", lineStart: 36 },
+          { name: "PaperclipFilledIcon", lineStart: 37 },
+          { name: "ParentRoot", lineStart: 38 },
+          { name: "TrashCanFilledIcon", lineStart: 39 },
+          { name: "TrashCanFilledIconContainer", lineStart: 40 },
+        ],
+      },
+      { name: "FileRow", lineStart: 43, children: [
+        { name: "errorMessage", lineStart: 44 },
+        { name: "file", lineStart: 45 },
+        { name: "fileInfo", lineStart: 48 },
+        { name: "imagePreviewThumbnail", lineStart: 49 },
+        { name: "status", lineStart: 51 },
       ] },
-      { name: "FileUploaderBetaProps", lineStart: 55, children: [
-        { name: "fileRows", lineStart: 59 },
-        { name: "hint", lineStart: 60 },
-        { name: "itemPreview", lineStart: 61 },
-        { name: "label", lineStart: 62 },
-        { name: "maxFiles", lineStart: 63 },
-        { name: "overrides", lineStart: 64 },
-        { name: "processFileOnDrop", lineStart: 66 },
-        { name: "setFileRows", lineStart: 67 },
+      { name: "FileUploaderBetaProps", lineStart: 54, children: [
+        { name: "fileRows", lineStart: 58 },
+        { name: "hint", lineStart: 59 },
+        { name: "itemPreview", lineStart: 60 },
+        { name: "label", lineStart: 61 },
+        { name: "maxFiles", lineStart: 62 },
+        { name: "overrides", lineStart: 63 },
+        { name: "processFileOnDrop", lineStart: 65 },
+        { name: "setFileRows", lineStart: 66 },
       ] },
     ],
   },

diff --git a/src/file-uploader/__tests__/file-uploader.test.tsx b/src/file-uploader/__tests__/file-uploader.test.tsx
@@ -6,13 +6,15 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import {
+  act,
   render,
   getByRole,
   getByTestId,
   getByText,
-  queryByRole,
   queryByTestId,
   queryAllByRole,
+  fireEvent,
+  waitFor,
 } from '@testing-library/react';
 
 import { FileUploader } from '..';
@@ -112,6 +114,30 @@ describe('FileUploader', () => {
     getByText(container, message);
   });
 
+  it('calls onRetry if errorMessage provided and retry button is clicked', async () => {
+    const message = 'error!';
+    const onRetry = jest.fn();
+    const { container } = render(<FileUploader errorMessage={message} onRetry={onRetry} />);
+    await act(() => {
+      fireEvent.click(getByText(container, 'Retry Upload'));
+    });
+    await waitFor(() => {
+      expect(onRetry).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('calls onCancel if progressMessage provided and cancel button clicked', async () => {
+    const message = 'progress!';
+    const onCancel = jest.fn();
+    const { container } = render(<FileUploader progressMessage={message} onCancel={onCancel} />);
+    await act(() => {
+      fireEvent.click(getByText(container, 'Cancel'));
+    });
+    await waitFor(() => {
+      expect(onCancel).toHaveBeenCalledTimes(1);
+    });
+  });
+
   it('renders accept attribute as a string when inputted as an array', () => {
     const { container } = render(<FileUploader accept={['test-1', 'test-2']} />);
     expect(container.querySelector('input')?.getAttribute('accept')).toBe('test-1,test-2');

diff --git a/src/file-uploader/types.ts b/src/file-uploader/types.ts
@@ -10,14 +10,11 @@ import type { Override } from '../helpers/overrides';
 
 export type StyleProps = {
   $afterFileDrop: boolean;
-  $alt: string;
-  $color: string;
   $disabled: boolean;
   $isDragActive: boolean;
   $isDragAccept: boolean;
   $isDragReject: boolean;
   $isFocused: boolean;
-  $src: string;
 };
 
 export type FileUploaderOverrides = {