diff --git a/assets/index.less b/assets/index.less index 5fbbf71..2ac0cc8 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: '×'; diff --git a/src/Notice.tsx b/src/Notice.tsx index 38a9b9c..5cf4180 100644 --- a/src/Notice.tsx +++ b/src/Notice.tsx @@ -27,7 +27,6 @@ const Notify = React.forwardRef = (e) => { + const onCloseKeyDown: React.KeyboardEventHandler = (e) => { if (e.key === 'Enter' || e.code === 'Enter' || e.keyCode === KeyCode.ENTER) { onInternalClose(); } @@ -106,11 +105,8 @@ const Notify = React.forwardRef - {closableObj.closeIcon} - + {closableObj.closeIcon ?? 'x'} + )} {/* Progress Bar */} 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 472b1da..3fb2e60 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, }); }); @@ -892,4 +892,32 @@ describe('Notification.Basic', () => { expect(document.querySelectorAll('.rc-notification-notice').length).toBe(1); }); }); + it('notification close node ', () => { + const Demo = () => { + const [duration] = React.useState(0); + 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', + ); + }); });