/
NotificationContainer.tsx
64 lines (55 loc) · 1.69 KB
/
NotificationContainer.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import React, { useEffect, useRef } from 'react';
import { Notification, DefaultProps } from '@mantine/core';
import getAutoClose from './get-auto-close/get-auto-close';
import { NotificationProps } from '../types';
export interface NotificationContainerProps extends DefaultProps {
notification: NotificationProps;
onHide(id: string): void;
autoClose: false | number;
innerRef: React.ForwardedRef<HTMLDivElement>;
}
export default function NotificationContainer({
notification,
autoClose,
onHide,
innerRef,
...others
}: NotificationContainerProps) {
const { autoClose: notificationAutoClose, message, ...notificationProps } = notification;
const autoCloseTimeout = getAutoClose(autoClose, notificationAutoClose);
const hideTimeout = useRef<number>();
const handleHide = () => {
onHide(notification.id);
window.clearTimeout(hideTimeout.current);
};
const cancelDelayedHide = () => {
clearTimeout(hideTimeout.current);
};
const handleDelayedHide = () => {
if (typeof autoCloseTimeout === 'number') {
hideTimeout.current = window.setTimeout(handleHide, autoCloseTimeout);
}
};
useEffect(() => {
if (typeof notification.onOpen === 'function') {
notification.onOpen(notification);
}
}, []);
useEffect(() => {
handleDelayedHide();
return cancelDelayedHide;
}, [autoClose, notification.autoClose]);
return (
<Notification
{...notificationProps}
{...others}
onClose={handleHide}
onMouseEnter={cancelDelayedHide}
onMouseLeave={handleDelayedHide}
ref={innerRef}
>
{message}
</Notification>
);
}
NotificationContainer.displayName = '@mantine/notifications/NotificationContainer';