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` | `` | -| onClose | Callback when closed | `() => void` | - | -| onClick | Click event | `() => void` | - | +| onClose | Callback when closed | `(event: React.MouseEvent) => void` | - | +| onClick | Click event | `(event: React.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` | `` | -| onClose | 关闭时的回调 | `() => void` | - | -| onClick | 点击事件 | `() => void` | - | +| onClose | 关闭时的回调 | `(event: React.MouseEvent) => void` | - | +| onClick | 点击事件 | `(event: React.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 655cb462cd..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) => void /** Event when click */ - onClick?: () => void + onClick?: (event: React.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(p => { {props.closeable && (
{ + onClick={e => { setVisible(false) - props.onClose?.() + props.onClose?.(e) }} > diff --git a/src/components/notice-bar/tests/notice-bar.test.tsx b/src/components/notice-bar/tests/notice-bar.test.tsx index 66490b704a..980e842518 100644 --- a/src/components/notice-bar/tests/notice-bar.test.tsx +++ b/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( - + { + 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 () => {