From 7d2c23a721ec8576e1fdfa7b9889becdfd8fb61e Mon Sep 17 00:00:00 2001 From: boudima-ext Date: Wed, 3 Jan 2024 17:30:48 +0100 Subject: [PATCH 1/4] allow change close aria-label --- src/Dialog/Content/Panel.tsx | 5 +++-- src/IDialogPropTypes.tsx | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx index 2aa492af..a186d565 100644 --- a/src/Dialog/Content/Panel.tsx +++ b/src/Dialog/Content/Panel.tsx @@ -29,6 +29,7 @@ const Panel = React.forwardRef((props, ref) => { ariaId, footer, closable, + closeLabel, closeIcon, onClose, children, @@ -97,8 +98,8 @@ const Panel = React.forwardRef((props, ref) => { let closer: React.ReactNode; if (closable) { closer = ( - ); } diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx index ac64ac33..f5452fbc 100644 --- a/src/IDialogPropTypes.tsx +++ b/src/IDialogPropTypes.tsx @@ -58,6 +58,7 @@ export type IDialogPropTypes = { wrapProps?: any; getContainer?: GetContainer | false; closeIcon?: ReactNode; + closeLabel?: string; modalRender?: (node: ReactNode) => ReactNode; forceRender?: boolean; // https://github.com/ant-design/ant-design/issues/19771 From 97acd931a1749a8c3fc8894538805f44821c4b91 Mon Sep 17 00:00:00 2001 From: boudima-ext Date: Wed, 3 Jan 2024 18:33:20 +0100 Subject: [PATCH 2/4] fix formatting --- src/Dialog/Content/Panel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx index a186d565..b4a30304 100644 --- a/src/Dialog/Content/Panel.tsx +++ b/src/Dialog/Content/Panel.tsx @@ -29,7 +29,7 @@ const Panel = React.forwardRef((props, ref) => { ariaId, footer, closable, - closeLabel, + closeLabel, closeIcon, onClose, children, From 944a680639a3d7779cef49f8d7536596a43145a6 Mon Sep 17 00:00:00 2001 From: boudima-ext Date: Fri, 5 Jan 2024 15:24:49 +0100 Subject: [PATCH 3/4] closable as object --- src/Dialog/Content/Panel.tsx | 14 +++++++++++--- src/IDialogPropTypes.tsx | 3 +-- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx index b4a30304..3fccb6cb 100644 --- a/src/Dialog/Content/Panel.tsx +++ b/src/Dialog/Content/Panel.tsx @@ -29,7 +29,6 @@ const Panel = React.forwardRef((props, ref) => { ariaId, footer, closable, - closeLabel, closeIcon, onClose, children, @@ -97,9 +96,18 @@ const Panel = React.forwardRef((props, ref) => { let closer: React.ReactNode; if (closable) { + let icon: React.ReactNode, ariaLabel: string, title: string; + if (typeof closable === 'object') { + icon = closable.icon; + ariaLabel = closable.ariaLabel; + title = closable.title; + } else { + icon = closeIcon; + } + closer = ( - ); } diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx index f5452fbc..ba6697e3 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; + closable?: boolean | { icon?: ReactNode, title?: string, ariaLabel?: string }; maskClosable?: boolean; visible?: boolean; destroyOnClose?: boolean; @@ -58,7 +58,6 @@ export type IDialogPropTypes = { wrapProps?: any; getContainer?: GetContainer | false; closeIcon?: ReactNode; - closeLabel?: string; modalRender?: (node: ReactNode) => ReactNode; forceRender?: boolean; // https://github.com/ant-design/ant-design/issues/19771 From 12a6e37f3ab956a3c325f2e5807dff54b9266e15 Mon Sep 17 00:00:00 2001 From: boudima-ext Date: Mon, 8 Jan 2024 09:41:20 +0100 Subject: [PATCH 4/4] test for closable object --- tests/index.spec.tsx | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index 0eed6d5e..dfe431fb 100644 --- a/tests/index.spec.tsx +++ b/tests/index.spec.tsx @@ -37,7 +37,7 @@ describe('dialog', () => { }); it('add rootClassName should render correct', () => { - const spy = jest.spyOn(console, 'error').mockImplementation(() => {}); + const spy = jest.spyOn(console, 'error').mockImplementation(() => { }); const wrapper = mount( { expect(wrapper.find('.rc-dialog-mask').length).toBeTruthy(); }); + it('closable props', () => { + const onClose = jest.fn(); + const wrapper = mount(); + jest.runAllTimers(); + wrapper.update(); + + const btn = wrapper.find('.rc-dialog-close'); + expect(btn.prop("aria-label") === "ariaLabelTest"); + expect(btn.prop("title") === "closableTitle"); + expect(btn.text()).toBe('test'); + btn.simulate('click'); + + jest.runAllTimers(); + wrapper.update(); + expect(onClose).toHaveBeenCalledTimes(1); + }); + it('click close', () => { const onClose = jest.fn(); const wrapper = mount(); @@ -579,7 +596,7 @@ describe('dialog', () => { expect(wrapper.find('.rc-dialog-footer').props().className).toContain('custom-footer'); expect(wrapper.find('.rc-dialog-mask').props().className).toContain('custom-mask'); expect(wrapper.find('.rc-dialog-content').props().className).toContain('custom-content'); - + }); it('should support styles', () => { @@ -612,7 +629,7 @@ describe('dialog', () => { expect(wrapper.find('.rc-dialog-content').props().style.background).toBe('orange'); }); it('should warning', () => { - const spy = jest.spyOn(console, 'error').mockImplementation(() => {}); + const spy = jest.spyOn(console, 'error').mockImplementation(() => { }); const wrapper = mount(