Add prop to disable close button

react-component · Apr 24, 2024 · 18884a1 · 18884a1
1 parent 852caad
commit 18884a1
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -65,6 +65,7 @@ ReactDOM.render(
 | title                  | String\|React.Element          |           | Title of the dialog                                                             |         |
 | footer                 | React.Element                  |           | footer of the dialog                                                            |         |
 | closable               | Boolean                        | true      | whether show close button                                                       |         |
+| closeBtnIsDisabled     | Boolean                        | false     | whether close button is disabled                                                |         |
 | 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
@@ -32,6 +32,7 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
     footer,
     closable,
     closeIcon,
+    closeBtnIsDisabled,
     onClose,
     children,
     bodyStyle,
@@ -113,7 +114,14 @@ const Panel = React.forwardRef<ContentRef, PanelProps>((props, ref) => {
   let closer: React.ReactNode;
   if (closable) {
     closer = (
-      <button type="button" onClick={onClose} aria-label="Close" {...ariaProps} className={`${prefixCls}-close`}>
+      <button
+        type="button"
+        onClick={onClose}
+        aria-label="Close"
+        {...ariaProps}
+        className={`${prefixCls}-close`}
+        disabled={closeBtnIsDisabled}
+      >
         {closableObj.closeIcon}
       </button>
     );

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

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -102,6 +102,26 @@ describe('dialog', () => {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
+  it('closeBtnIsDisabled', () => {
+    const onClose = jest.fn();
+    const wrapper = mount(<Dialog onClose={onClose} visible closeBtnIsDisabled />);
+    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();
+  });
+
   describe('destroyOnClose', () => {
     it('default is false', () => {
       const wrapper = mount(