fix: disable click event when action is disabled (#745)

* fix: disable click event when action is disabled (#725) * test: added EditorAction disable use cases
DTStack · May 24, 2022 · ad0310d · ad0310d
1 parent 7fd02ab
commit ad0310d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/src/workbench/editor/__tests__/action.test.tsx b/src/workbench/editor/__tests__/action.test.tsx
@@ -5,6 +5,7 @@ import { expectFnCalled } from '@test/utils';
 import '@testing-library/jest-dom';
 
 import EditorAction from '../action';
+import { groupActionItemDisabledClassName } from '../base';
 
 const current: IEditorActionsProps = {
     id: '1',
@@ -71,4 +72,32 @@ describe('The Editor Component', () => {
         expect(container.querySelector(`.codicon-warning`)).toBeInTheDocument();
         expect(container.querySelectorAll(`.codicon-warning`)!.length).toBe(8);
     });
+
+    test('The EditorAction item disabled', () => {
+        const mockAction: IEditorActionsProps[] = Array(8)
+            .fill(1)
+            .map((_, index) => ({
+                id: index.toString(),
+                place: 'outer',
+                icon: 'warning',
+            }));
+        mockAction[0].disabled = true;
+        const mockCallback = jest.fn();
+
+        const { container } = render(
+            <EditorAction
+                isActiveGroup={true}
+                actions={mockAction}
+                onClickActions={jest.fn()}
+            />
+        );
+
+        const liDom = container.querySelector(
+            `.${groupActionItemDisabledClassName}`
+        );
+
+        expect(liDom).not.toBeNull();
+        liDom && fireEvent.click(liDom);
+        expect(mockCallback).not.toBeCalled();
+    });
 });
diff --git a/src/workbench/editor/action.tsx b/src/workbench/editor/action.tsx
@@ -82,7 +82,9 @@ function EditorAction(props: IEditorActionProps & IEditorController) {
                 outer.map((action) => (
                     <Tooltip key={action.id} overlay={action.title}>
                         <div
-                            onClick={() => handleActionsClick(action)}
+                            onClick={() =>
+                                !action.disabled && handleActionsClick(action)
+                            }
                             className={classNames(
                                 groupActionsItemClassName,
                                 action.disabled &&