feat: Add prop to disable close button (#416)

* Add prop to disable close button * renamed prop to `disableCloseBtn` * removed empty line * added 'disable' to closable * readme update --------- Co-authored-by: Alina Andrieieva <Alina_Andrieieva@epam.com>
react-component · May 28, 2024 · f57c03e · f57c03e
1 parent 51b3f67
commit f57c03e
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -64,7 +64,7 @@ ReactDOM.render(
 | maskTransitionName     | String                         |           | mask animation css class name                                                   |         |
 | title                  | String\|React.Element          |           | Title of the dialog                                                             |         |
 | footer                 | React.Element                  |           | footer of the dialog                                                            |         |
-| closable               | Boolean                        | true      | whether show close button                                                       |         |
+| closable               | Boolean \| ({ closeIcon?: React.ReactNode; disabled?: boolean  } & React.AriaAttributes | true   | whether show close button |         |
 | mask                   | Boolean                        | true      | whether show mask                                                               |         |
 | maskClosable           | Boolean                        | true      | whether click mask to close                                                     |         |
 | keyboard               | Boolean                        | true      | whether support press esc to close                                              |         |

diff --git a/assets/index/Dialog.less b/assets/index/Dialog.less
@@ -46,6 +46,10 @@
     opacity: .2;
     text-decoration: none;
 
+    &:disabled {
+      pointer-events: none;
+    }
+
     &-x:after {
       content: '×'
     }

diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx
@@ -112,6 +112,7 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
   }, [closable, closeIcon, prefixCls]);
 
   const ariaProps = pickAttrs(closableObj, true);
+  const closeBtnIsDisabled = typeof(closable) === 'object' && closable.disabled;
 
   const closerNode = closable ? (
     <button
@@ -120,6 +121,7 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
       aria-label="Close"
       {...ariaProps}
       className={`${prefixCls}-close`}
+      disabled={closeBtnIsDisabled}
     >
       {closableObj.closeIcon}
     </button>

diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx
@@ -28,7 +28,7 @@ export type IDialogPropTypes = {
   afterClose?: () => any;
   afterOpenChange?: (open: boolean) => void;
   onClose?: (e: SyntheticEvent) => any;
-  closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);
+  closable?: boolean | ({ closeIcon?: React.ReactNode; disabled?: boolean  } & React.AriaAttributes);
   maskClosable?: boolean;
   visible?: boolean;
   destroyOnClose?: boolean;

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -665,6 +665,36 @@ describe('dialog', () => {
     wrapper.update();
     expect(onClose).toHaveBeenCalledTimes(1);
   });
+
+  it('support disable button in closable', () => {
+    const onClose = jest.fn();
+    const wrapper = mount(
+      <Dialog 
+        closable={{
+          closeIcon:"test",
+          disabled: true,
+        }} 
+        visible 
+        onClose={onClose} 
+      />
+    );
+    jest.runAllTimers();
+    wrapper.update();
+
+    const btn = wrapper.find('.rc-dialog-close');
+    expect(btn.prop('disabled')).toBe(true);
+    btn.simulate('click');
+
+    jest.runAllTimers();
+    wrapper.update();
+    expect(onClose).not.toHaveBeenCalled();
+
+    btn.simulate('keydown', { key: 'Enter' });
+    jest.runAllTimers();
+    wrapper.update();
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
   it('should not display closeIcon when closable is false', () => {
     const onClose = jest.fn();
     const wrapper = mount(