diff --git a/README.md b/README.md index b5014153..fccd28d5 100644 --- 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 index 60b08a62..3f61f260 100644 --- 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 index cb4d1eab..e2dc0e02 100644 --- a/src/Dialog/Content/Panel.tsx +++ b/src/Dialog/Content/Panel.tsx @@ -112,6 +112,7 @@ const Panel = React.forwardRef((props, ref) => { }, [closable, closeIcon, prefixCls]); const ariaProps = pickAttrs(closableObj, true); + const closeBtnIsDisabled = typeof(closable) === 'object' && closable.disabled; const closerNode = closable ? ( diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx index 61ce71d7..7ffaf667 100644 --- 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 index c79dd88f..cf58155d 100644 --- 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( + + ); + 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(