, 120 | }); 121 | }); 122 | 123 | expect(document.querySelector('.bamboo')).toBeTruthy(); 124 | 125 | act(() => { 126 | vi.runAllTimers(); 127 | }); 128 | expect(document.querySelector('.bamboo')).toBeTruthy(); 129 | 130 | // Can be override 131 | act(() => { 132 | instance.open({ 133 | content:

, 134 | duration: 1, 135 | }); 136 | }); 137 | 138 | act(() => { 139 | vi.runAllTimers(); 140 | }); 141 | expect(document.querySelector('.little')).toBeFalsy(); 142 | 143 | // Can be undefined 144 | act(() => { 145 | instance.open({ 146 | content:

, 147 | duration: undefined, 148 | }); 149 | }); 150 | 151 | act(() => { 152 | vi.runAllTimers(); 153 | }); 154 | expect(document.querySelector('.light')).toBeTruthy(); 155 | }); 156 | 157 | it('support renderNotifications', () => { 158 | const Wrapper = ({ children }) => { 159 | return ( 160 | 161 | {children} 162 | 163 | ); 164 | }; 165 | 166 | const renderNotifications = (node: ReactElement) => { 167 | return {node}; 168 | }; 169 | const { instance } = renderDemo({ 170 | renderNotifications, 171 | }); 172 | 173 | act(() => { 174 | instance.open({ 175 | content:

, 176 | style: { color: 'red' }, 177 | className: 'custom-notice', 178 | }); 179 | }); 180 | 181 | expect(document.querySelector('.rc-notification')).toHaveClass('banana'); 182 | expect(document.querySelector('.custom-notice')).toHaveClass('apple'); 183 | }); 184 | }); 185 | -------------------------------------------------------------------------------- /src/Notice.tsx: -------------------------------------------------------------------------------- 1 | import { clsx } from 'clsx'; 2 | import KeyCode from '@rc-component/util/lib/KeyCode'; 3 | import * as React from 'react'; 4 | import type { NoticeConfig } from './interface'; 5 | import pickAttrs from '@rc-component/util/lib/pickAttrs'; 6 | 7 | export interface NoticeProps extends Omit { 8 | prefixCls: string; 9 | className?: string; 10 | style?: React.CSSProperties; 11 | eventKey: React.Key; 12 | 13 | onClick?: React.MouseEventHandler; 14 | onNoticeClose?: (key: React.Key) => void; 15 | hovering?: boolean; 16 | } 17 | 18 | const Notify = React.forwardRef((props, ref) => { 19 | const { 20 | prefixCls, 21 | style, 22 | className, 23 | duration = 4.5, 24 | showProgress, 25 | pauseOnHover = true, 26 | 27 | eventKey, 28 | content, 29 | closable, 30 | props: divProps, 31 | 32 | onClick, 33 | onNoticeClose, 34 | times, 35 | hovering: forcedHovering, 36 | } = props; 37 | const [hovering, setHovering] = React.useState(false); 38 | const [percent, setPercent] = React.useState(0); 39 | const [spentTime, setSpentTime] = React.useState(0); 40 | const mergedHovering = forcedHovering || hovering; 41 | const mergedDuration: number = typeof duration === 'number' ? duration : 0; 42 | const mergedShowProgress = mergedDuration > 0 && showProgress; 43 | 44 | // ======================== Close ========================= 45 | const onInternalClose = () => { 46 | onNoticeClose(eventKey); 47 | }; 48 | 49 | const onCloseKeyDown: React.KeyboardEventHandler = (e) => { 50 | if (e.key === 'Enter' || e.code === 'Enter' || e.keyCode === KeyCode.ENTER) { 51 | onInternalClose(); 52 | } 53 | }; 54 | 55 | // ======================== Effect ======================== 56 | React.useEffect(() => { 57 | if (!mergedHovering && mergedDuration > 0) { 58 | const start = Date.now() - spentTime; 59 | const timeout = setTimeout( 60 | () => { 61 | onInternalClose(); 62 | }, 63 | mergedDuration * 1000 - spentTime, 64 | ); 65 | 66 | return () => { 67 | if (pauseOnHover) { 68 | clearTimeout(timeout); 69 | } 70 | setSpentTime(Date.now() - start); 71 | }; 72 | } 73 | // eslint-disable-next-line react-hooks/exhaustive-deps 74 | }, [mergedDuration, mergedHovering, times]); 75 | 76 | React.useEffect(() => { 77 | if (!mergedHovering && mergedShowProgress && (pauseOnHover || spentTime === 0)) { 78 | const start = performance.now(); 79 | let animationFrame: number; 80 | 81 | const calculate = () => { 82 | cancelAnimationFrame(animationFrame); 83 | animationFrame = requestAnimationFrame((timestamp) => { 84 | const runtime = timestamp + spentTime - start; 85 | const progress = Math.min(runtime / (mergedDuration * 1000), 1); 86 | setPercent(progress * 100); 87 | if (progress < 1) { 88 | calculate(); 89 | } 90 | }); 91 | }; 92 | 93 | calculate(); 94 | 95 | return () => { 96 | if (pauseOnHover) { 97 | cancelAnimationFrame(animationFrame); 98 | } 99 | }; 100 | } 101 | // eslint-disable-next-line react-hooks/exhaustive-deps 102 | }, [mergedDuration, spentTime, mergedHovering, mergedShowProgress, times]); 103 | 104 | // ======================== Closable ======================== 105 | const closableObj = React.useMemo(() => { 106 | if (typeof closable === 'object' && closable !== null) { 107 | return closable; 108 | } 109 | return {}; 110 | }, [closable]); 111 | 112 | const ariaProps = pickAttrs(closableObj, true); 113 | 114 | // ======================== Progress ======================== 115 | const validPercent = 100 - (!percent || percent < 0 ? 0 : percent > 100 ? 100 : percent); 116 | 117 | // ======================== Render ======================== 118 | const noticePrefixCls = `${prefixCls}-notice`; 119 | 120 | return ( 121 |

{ 127 | setHovering(true); 128 | divProps?.onMouseEnter?.(e); 129 | }} 130 | onMouseLeave={(e) => { 131 | setHovering(false); 132 | divProps?.onMouseLeave?.(e); 133 | }} 134 | onClick={onClick} 135 | > 136 | {/* Content */} 137 |

{content}

138 | 139 | {/* Close Icon */} 140 | {closable && ( 141 |

name	type	default	description
prefixCls	String		prefix class name for notification container
style	Object	{'top': 65, left: '50%'}	additional style for notification container.
getContainer	getContainer(): HTMLElement		function returning html node which will act as notification container
maxCount	number		max notices show, drop first notice if exceed limit

name

type

default

description

prefixCls

String

prefix class name for notification container

style

Object

{'top': 65, left: '50%'}

additional style for notification container.

getContainer

getContainer(): HTMLElement

function returning html node which will act as notification container

maxCount

number

max notices show, drop first notice if exceed limit

name	type	default	description
content	React.Element		content of notice
key	String		id of this notice
closable	Boolean \| { closeIcon: ReactNode, onClose: VoidFunction }		whether show close button
onClose	Function		called when notice close
duration	number \| false	4.5	The delay for automatic closing in seconds. Set to 0 or false to not close automatically.
showProgress	boolean	false	show with progress bar for auto-closing notification
pauseOnHover	boolean	true	keep the timer running or not on hover
style	Object	{ right: '50%' }	additional style for single notice node.
closeIcon	ReactNode		specific the close icon.
props	Object		An object that can contain `data-`, `aria-`, or `role` props, to be put on the notification `div`. This currently only allows `data-testid` instead of `data-*` in TypeScript. See https://github.com/microsoft/TypeScript/issues/28960.

name

type

default

description

content

React.Element

content of notice

key

String

id of this notice

closable

Boolean | { closeIcon: ReactNode, onClose: VoidFunction }

whether show close button

onClose

Function

called when notice close

duration

number | false

4.5

The delay for automatic closing in seconds. Set to 0 or false to not close automatically.

showProgress

boolean

false

show with progress bar for auto-closing notification

pauseOnHover

boolean

true

keep the timer running or not on hover

style

Object

{ right: '50%' }

additional style for single notice node.

closeIcon

ReactNode

specific the close icon.

props

Object

An object that can contain data-*, aria-*, or role props, to be put on the notification div. This currently only allows data-testid instead of data-* in TypeScript. See https://github.com/microsoft/TypeScript/issues/28960.