feat(FilePreview): add disabled prop for action (#113)

gravity-ui · Oct 24, 2023 · cf27ccc · cf27ccc
1 parent 90b5b2b
commit cf27ccc
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git a/src/components/FilePreview/FilePreviewAction.tsx b/src/components/FilePreview/FilePreviewAction.tsx
@@ -8,6 +8,7 @@ export interface FilePreviewActionProps {
     icon: IconData;
     title: string;
     href?: string;
+    disabled?: boolean;
     onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
     extraProps?: ButtonHTMLAttributes<HTMLButtonElement> | AnchorHTMLAttributes<HTMLAnchorElement>;
 }
@@ -17,6 +18,7 @@ export function FilePreviewAction({
     icon,
     title,
     href,
+    disabled,
     onClick,
     extraProps,
 }: FilePreviewActionProps) {
@@ -27,6 +29,7 @@ export function FilePreviewAction({
                 view="raised"
                 pin="circle-circle"
                 href={href}
+                disabled={disabled}
                 size="s"
                 extraProps={{'aria-label': title, 'aria-describedby': id, ...extraProps}}
             >

diff --git a/src/components/FilePreview/__tests__/FilePreview.test.tsx b/src/components/FilePreview/__tests__/FilePreview.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 
 import {CircleExclamation} from '@gravity-ui/icons';
 import {render, screen} from '@testing-library/react';
@@ -120,4 +120,52 @@ describe('FilePreview', () => {
         expect(firstActionsClickHandler).toBeCalled();
         expect(secondActionsClickHandler).toBeCalled();
     });
+
+    test("Don't Call disabled action click handler", async () => {
+        const fileName = 'Some file name';
+        const fileType = 'image/png';
+
+        const mockFn = jest.fn();
+
+        const TestCase = () => {
+            const [disabled, setDisabled] = useState(false);
+            const [clicksCount, setClicksCount] = useState(0);
+
+            const actionsClickHandler = () => {
+                mockFn();
+                setClicksCount((prev) => prev + 1);
+
+                if (clicksCount === 4) {
+                    setDisabled(true);
+                }
+            };
+
+            return (
+                <FilePreview
+                    file={{name: fileName, type: fileType} as File}
+                    actions={[
+                        {
+                            disabled,
+                            icon: CircleExclamation,
+                            title: 'some hint',
+                            onClick: actionsClickHandler,
+                        },
+                    ]}
+                />
+            );
+        };
+
+        render(<TestCase />);
+
+        const actionButtons = screen.getAllByRole('button');
+
+        const user = userEvent.setup();
+        for (const actionButton of actionButtons) {
+            for (let i = 0; i < 10; i++) {
+                await user.click(actionButton);
+            }
+        }
+
+        expect(mockFn).toBeCalledTimes(5);
+    });
 });