From f09a8533ae150fb077c9991805cf6a077925bcf1 Mon Sep 17 00:00:00 2001
From: Timm Fitschen <t.fitschen@indiscale.com>
Date: Tue, 5 Sep 2023 13:51:17 +0200
Subject: [PATCH] FIX: ActionButtonItem.disabled not working #28

---
 .../DropzoneButtons/DropzoneButtons.tsx       | 11 +++++++--
 tests/Dropone.test.tsx                        | 24 +++++++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/Dropzone/components/DropzoneButtons/DropzoneButtons.tsx b/src/Dropzone/components/DropzoneButtons/DropzoneButtons.tsx
index ff71abc..3183970 100644
--- a/src/Dropzone/components/DropzoneButtons/DropzoneButtons.tsx
+++ b/src/Dropzone/components/DropzoneButtons/DropzoneButtons.tsx
@@ -79,8 +79,15 @@ const DropzoneButtons: React.FC<DropzoneButtonsProps> = (
 
 
         (actionButtonProps: ActionButtonItem, index: number) => {
-          const { children, label, resetStyles, className, style, onClick } =
-            actionButtonProps;
+          const {
+            disabled,
+            children,
+            label,
+            resetStyles,
+            className,
+            style,
+            onClick,
+          } = actionButtonProps;
           return (
             <MaterialButton
               key={index}
diff --git a/tests/Dropone.test.tsx b/tests/Dropone.test.tsx
index 7b8c72a..e0e2143 100644
--- a/tests/Dropone.test.tsx
+++ b/tests/Dropone.test.tsx
@@ -8,3 +8,27 @@ test("Validate label text must be 'Drop yor files here...'", () => {
   render(<Dropzone> Drop yor files here...</Dropzone>);
   expect(screen.getByText("Drop yor files here...")).toBeInTheDocument();
 });
+
+describe("Dropzone actionButtons", () => {
+  test.each([
+    [{ uploadButton: { onClick: console.log } }, false],
+    [{ uploadButton: { onClick: console.log, disabled: false } }, false],
+    [{ uploadButton: { onClick: console.log, disabled: true } }, true],
+    [{ deleteButton: { onClick: console.log } }, false],
+    [{ deleteButton: { onClick: console.log, disabled: false } }, false],
+    [{ deleteButton: { onClick: console.log, disabled: true } }, true],
+
+    // abortButton and cleanButton need more interaction
+  ])("disabled %s -> %s", (config, expected) => {
+    const { container } = render(
+      <Dropzone actionButtons={{ position: "after", ...config }} />,
+    );
+    expect(
+      (
+        container.querySelector(
+          ".files-ui-buttons-container button",
+        ) as HTMLInputElement
+      ).disabled,
+    ).toBe(expected);
+  });
+});