From 6adb54b67e35f12f4f5be334ee1b0d5b4fadabc1 Mon Sep 17 00:00:00 2001
From: damonyoung <damonyoungcc@gmail.com>
Date: Sat, 2 Mar 2024 23:14:42 +0800
Subject: [PATCH 1/2] fix: notice bar close and not propagate

---
 src/components/notice-bar/notice-bar.tsx         |  3 ++-
 .../notice-bar/tests/notice-bar.test.tsx         | 16 ++++++++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/notice-bar/notice-bar.tsx b/src/components/notice-bar/notice-bar.tsx
index 655cb462cd..c7afaf69b6 100644
--- a/src/components/notice-bar/notice-bar.tsx
+++ b/src/components/notice-bar/notice-bar.tsx
@@ -144,7 +144,8 @@ export const NoticeBar = memo<NoticeBarProps>(p => {
           {props.closeable && (
             <div
               className={`${classPrefix}-close`}
-              onClick={() => {
+              onClick={e => {
+                e.stopPropagation()
                 setVisible(false)
                 props.onClose?.()
               }}
diff --git a/src/components/notice-bar/tests/notice-bar.test.tsx b/src/components/notice-bar/tests/notice-bar.test.tsx
index 66490b704a..621cd5791d 100644
--- a/src/components/notice-bar/tests/notice-bar.test.tsx
+++ b/src/components/notice-bar/tests/notice-bar.test.tsx
@@ -23,10 +23,17 @@ describe('NoticeBar', () => {
     expect(renderer2.getByTestId('alert')).toHaveClass(`${classPrefix}-alert`)
   })
 
-  test('can be close', async () => {
-    const fn = jest.fn()
+  test('can be close and not propagate', async () => {
+    const onClose = jest.fn()
+    const onClick = jest.fn()
     const { getByTestId } = render(
-      <NoticeBar content='notice' closeable data-testid='notice' onClose={fn} />
+      <NoticeBar
+        content='notice'
+        closeable
+        data-testid='notice'
+        onClose={onClose}
+        onClick={onClick}
+      />
     )
 
     const el = getByTestId('notice')
@@ -35,7 +42,8 @@ describe('NoticeBar', () => {
 
     fireEvent.click(iconEl)
     expect(el).not.toBeInTheDocument()
-    expect(fn).toBeCalled()
+    expect(onClose).toBeCalled()
+    expect(onClick).not.toBeCalled()
   })
 
   test('`icon` prop', async () => {

From a0b66b3988a6395f8716f2e23ea08b209ebb39e0 Mon Sep 17 00:00:00 2001
From: damonyoung <damonyoungcc@gmail.com>
Date: Sun, 3 Mar 2024 00:39:10 +0800
Subject: [PATCH 2/2] fix: onClose onClick props event

---
 src/components/notice-bar/index.en.md               | 4 ++--
 src/components/notice-bar/index.zh.md               | 4 ++--
 src/components/notice-bar/notice-bar.tsx            | 7 +++----
 src/components/notice-bar/tests/notice-bar.test.tsx | 5 ++++-
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/notice-bar/index.en.md b/src/components/notice-bar/index.en.md
index ab0c30fa87..ce8db458a9 100644
--- a/src/components/notice-bar/index.en.md
+++ b/src/components/notice-bar/index.en.md
@@ -22,8 +22,8 @@ It is applicable to the notification of information in the current page, which i
 | delay | Delay to start scrolling, unit `ms` | `number` | `2000` |
 | extra | Additional operating area, displayed to the left of the close button | `React.ReactNode` | - |
 | icon | Radio icon on the left | `React.ReactNode` | `<SoundOutline />` |
-| onClose | Callback when closed | `() => void` | - |
-| onClick | Click event | `() => void` | - |
+| onClose | Callback when closed | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
+| onClick | Click event | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | speed | Scroll speed, unit `px/s` | `number` | `50` |
 | wrap | Whether to display multiple lines | `boolean` | `false` |
 
diff --git a/src/components/notice-bar/index.zh.md b/src/components/notice-bar/index.zh.md
index 65f5d0a240..485f59d15b 100644
--- a/src/components/notice-bar/index.zh.md
+++ b/src/components/notice-bar/index.zh.md
@@ -22,8 +22,8 @@
 | delay | 开始滚动的延迟，单位 `ms` | `number` | `2000` |
 | extra | 额外操作区域，显示在关闭按钮左侧 | `React.ReactNode` | - |
 | icon | 左侧广播图标 | `React.ReactNode` | `<SoundOutline />` |
-| onClose | 关闭时的回调 | `() => void` | - |
-| onClick | 点击事件 | `() => void` | - |
+| onClose | 关闭时的回调 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
+| onClick | 点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
 | speed | 滚动速度，单位 `px/s` | `number` | `50` |
 | wrap | 是否多行展示 | `boolean` | `false` |
 
diff --git a/src/components/notice-bar/notice-bar.tsx b/src/components/notice-bar/notice-bar.tsx
index c7afaf69b6..02d54fbe8d 100644
--- a/src/components/notice-bar/notice-bar.tsx
+++ b/src/components/notice-bar/notice-bar.tsx
@@ -22,9 +22,9 @@ export type NoticeBarProps = {
   /** Whether it can be closed */
   closeable?: boolean
   /** Callback when closed */
-  onClose?: () => void
+  onClose?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
   /** Event when click */
-  onClick?: () => void
+  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
   /** Additional operating area, displayed to the left of the close button */
   extra?: ReactNode
   /** Radio icon on the left */
@@ -145,9 +145,8 @@ export const NoticeBar = memo<NoticeBarProps>(p => {
             <div
               className={`${classPrefix}-close`}
               onClick={e => {
-                e.stopPropagation()
                 setVisible(false)
-                props.onClose?.()
+                props.onClose?.(e)
               }}
             >
               <CloseOutline className={`${classPrefix}-close-icon`} />
diff --git a/src/components/notice-bar/tests/notice-bar.test.tsx b/src/components/notice-bar/tests/notice-bar.test.tsx
index 621cd5791d..980e842518 100644
--- a/src/components/notice-bar/tests/notice-bar.test.tsx
+++ b/src/components/notice-bar/tests/notice-bar.test.tsx
@@ -31,7 +31,10 @@ describe('NoticeBar', () => {
         content='notice'
         closeable
         data-testid='notice'
-        onClose={onClose}
+        onClose={e => {
+          e.stopPropagation()
+          onClose()
+        }}
         onClick={onClick}
       />
     )