fix: notice bar close and not propagate

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` |
 

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` |
 

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 */
@@ -144,9 +144,9 @@ export const NoticeBar = memo<NoticeBarProps>(p => {
           {props.closeable && (
             <div
               className={`${classPrefix}-close`}
-              onClick={() => {
+              onClick={e => {
                 setVisible(false)
-                props.onClose?.()
+                props.onClose?.(e)
               }}
             >
               <CloseOutline className={`${classPrefix}-close-icon`} />

src/components/notice-bar/tests/notice-bar.test.tsx

@@ -23,10 +23,20 @@ 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={e => {
+          e.stopPropagation()
+          onClose()
+        }}
+        onClick={onClick}
+      />
     )
 
     const el = getByTestId('notice')
@@ -35,7 +45,8 @@ describe('NoticeBar', () => {
 
     fireEvent.click(iconEl)
     expect(el).not.toBeInTheDocument()
-    expect(fn).toBeCalled()
+    expect(onClose).toBeCalled()
+    expect(onClick).not.toBeCalled()
   })
 
   test('`icon` prop', async () => {