From 8d7b790be80245e3eab4a952d57c5ccb3ad11c0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Thu, 20 Mar 2025 10:42:38 +0800 Subject: [PATCH 1/8] =?UTF-8?q?=E5=85=B3=E9=97=AD=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BB=8Ea=E6=A0=87=E7=AD=BE=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E4=B8=BAbutton=E5=B9=B6=E8=B0=83=E6=95=B4=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E5=92=8C=E4=B9=8B=E5=89=8Da=E6=A0=87=E7=AD=BE?= =?UTF-8?q?=E4=B8=80=E8=87=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/index.less | 6 ++++-- src/Notice.tsx | 7 ++++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/assets/index.less b/assets/index.less index 5fbbf71..d1c1804 100644 --- a/assets/index.less +++ b/assets/index.less @@ -79,6 +79,8 @@ cursor: pointer; opacity: 0.2; filter: alpha(opacity=20); + border: 0; + background-color: #fff; &-x:after { content: '×'; @@ -238,7 +240,7 @@ } &::after { - content: ""; + content: ''; position: absolute; left: 0; right: 0; @@ -247,7 +249,7 @@ height: calc(100% + 32px); background: transparent; pointer-events: auto; - color: rgb(0,0,0); + color: rgb(0, 0, 0); } } } diff --git a/src/Notice.tsx b/src/Notice.tsx index 38a9b9c..d2b7b7f 100644 --- a/src/Notice.tsx +++ b/src/Notice.tsx @@ -46,7 +46,7 @@ const Notify = React.forwardRef = (e) => { + const onCloseKeyDown: React.KeyboardEventHandler = (e) => { if (e.key === 'Enter' || e.code === 'Enter' || e.keyCode === KeyCode.ENTER) { onInternalClose(); } @@ -143,8 +143,9 @@ const Notify = React.forwardRef {closableObj.closeIcon} - + )} {/* Progress Bar */} From 13f50c86f4b2f6f0866351bab8ceb1ffae2d6231 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Thu, 20 Mar 2025 10:48:55 +0800 Subject: [PATCH 2/8] =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E5=8C=96=E6=81=A2?= =?UTF-8?q?=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/index.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/index.less b/assets/index.less index d1c1804..2ac0cc8 100644 --- a/assets/index.less +++ b/assets/index.less @@ -240,7 +240,7 @@ } &::after { - content: ''; + content: ""; position: absolute; left: 0; right: 0; @@ -249,7 +249,7 @@ height: calc(100% + 32px); background: transparent; pointer-events: auto; - color: rgb(0, 0, 0); + color: rgb(0,0,0); } } } From cef134009f68a47ebfc22799102f588bad7ffd3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Thu, 20 Mar 2025 10:51:23 +0800 Subject: [PATCH 3/8] =?UTF-8?q?=E6=97=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Notice.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Notice.tsx b/src/Notice.tsx index d2b7b7f..f69a578 100644 --- a/src/Notice.tsx +++ b/src/Notice.tsx @@ -145,7 +145,6 @@ const Notify = React.forwardRef Date: Thu, 20 Mar 2025 14:20:35 +0800 Subject: [PATCH 4/8] =?UTF-8?q?=E5=85=B3=E9=97=ADbutton=E5=88=A0=E9=99=A4t?= =?UTF-8?q?abIndex=3D{0}?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Notice.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Notice.tsx b/src/Notice.tsx index f69a578..a876a4c 100644 --- a/src/Notice.tsx +++ b/src/Notice.tsx @@ -144,7 +144,6 @@ const Notify = React.forwardRef Date: Thu, 20 Mar 2025 15:18:07 +0800 Subject: [PATCH 5/8] =?UTF-8?q?=E8=A1=A5=E5=85=85=E5=8D=95=E6=B5=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/index.test.tsx | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/tests/index.test.tsx b/tests/index.test.tsx index 472b1da..cff874a 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -892,4 +892,32 @@ describe('Notification.Basic', () => { expect(document.querySelectorAll('.rc-notification-notice').length).toBe(1); }); }); + it('notification close node ', () => { + const Demo = () => { + const [duration, setDuration] = React.useState(null); + const [api, holder] = useNotification({ duration }); + return ( +
+ + {holder} +
+ ); + }; + const { getByTestId } = render(); + fireEvent.click(getByTestId('show-notification')); + expect(document.querySelector('button.rc-notification-notice-close')).toHaveAttribute( + 'aria-label', + 'xxx', + ); + }); }); From ca469b11f11c1b43710a93d2b25757a07206eee3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Thu, 20 Mar 2025 16:27:14 +0800 Subject: [PATCH 6/8] =?UTF-8?q?=E5=88=A0=E9=99=A4closeIcon=EF=BC=8Cicon?= =?UTF-8?q?=E4=BB=8Eclosable=E4=B8=AD=E5=8F=96=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Notice.tsx | 8 ++------ src/hooks/useNotification.tsx | 2 +- src/interface.ts | 2 +- tests/index.test.tsx | 14 +++++++------- 4 files changed, 11 insertions(+), 15 deletions(-) diff --git a/src/Notice.tsx b/src/Notice.tsx index a876a4c..60af48b 100644 --- a/src/Notice.tsx +++ b/src/Notice.tsx @@ -27,7 +27,6 @@ const Notify = React.forwardRef - {closableObj.closeIcon} + {closableObj?.closeIcon || 'x'} )} diff --git a/src/hooks/useNotification.tsx b/src/hooks/useNotification.tsx index 52f0e8d..c64f94f 100644 --- a/src/hooks/useNotification.tsx +++ b/src/hooks/useNotification.tsx @@ -14,7 +14,7 @@ export interface NotificationConfig { /** Customize container. It will repeat call which means you should return same container element. */ getContainer?: () => HTMLElement | ShadowRoot; motion?: CSSMotionProps | ((placement: Placement) => CSSMotionProps); - closeIcon?: React.ReactNode; + closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes); maxCount?: number; duration?: number; diff --git a/src/interface.ts b/src/interface.ts index 52ccbe0..ce36f2e 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -9,7 +9,7 @@ export interface NoticeConfig { duration?: number | null; showProgress?: boolean; pauseOnHover?: boolean; - closeIcon?: React.ReactNode; + closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes); className?: string; style?: React.CSSProperties; diff --git a/tests/index.test.tsx b/tests/index.test.tsx index cff874a..c3e6b50 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -52,14 +52,14 @@ describe('Notification.Basic', () => { }); it('works with custom close icon', () => { - const { instance } = renderDemo({ - closeIcon: test-close-icon, - }); + const { instance } = renderDemo(); act(() => { instance.open({ content:

1

, - closable: true, + closable: { + closeIcon: test-close-icon, + }, duration: 0, }); }); @@ -894,10 +894,10 @@ describe('Notification.Basic', () => { }); it('notification close node ', () => { const Demo = () => { - const [duration, setDuration] = React.useState(null); + const [duration] = React.useState(null); const [api, holder] = useNotification({ duration }); return ( -
+ <> {holder} -
+ ); }; const { getByTestId } = render(); From 6ee12409ad780e9dcba5dede79d902efaeb4bda1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Thu, 20 Mar 2025 16:40:31 +0800 Subject: [PATCH 7/8] =?UTF-8?q?=E5=8D=95=E6=B5=8B=E9=85=8D=E7=BD=AEduratio?= =?UTF-8?q?n=3D0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/index.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/index.test.tsx b/tests/index.test.tsx index c3e6b50..3fb2e60 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -894,7 +894,7 @@ describe('Notification.Basic', () => { }); it('notification close node ', () => { const Demo = () => { - const [duration] = React.useState(null); + const [duration] = React.useState(0); const [api, holder] = useNotification({ duration }); return ( <> From 8e5038cf018f03147ea282cf833c40663baa142b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Fri, 21 Mar 2025 09:34:33 +0800 Subject: [PATCH 8/8] =?UTF-8?q?=E4=BF=AE=E6=94=B9closableObj=3F.closeIcon?= =?UTF-8?q?=E4=B8=BA=3F=3F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Notice.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Notice.tsx b/src/Notice.tsx index 60af48b..5cf4180 100644 --- a/src/Notice.tsx +++ b/src/Notice.tsx @@ -150,7 +150,7 @@ const Notify = React.forwardRef - {closableObj?.closeIcon || 'x'} + {closableObj.closeIcon ?? 'x'} )}