@dossierhq/design
Version:
The design system for Dossier.
36 lines • 2.02 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useRef, useState } from 'react';
import { NotificationContext } from '../../contexts/NotificationContext.js';
import { toClassName } from '../../utils/ClassNameUtils.js';
const COLOR_CLASSNAMES = {
success: 'is-success',
error: 'is-error',
};
export function NotificationContainer({ children }) {
const notificationId = useRef(1);
const [notifications, setNotifications] = useState([]);
const hideNotification = useCallback((id) => {
setNotifications((prevNotifications) => {
const newNotifications = [...prevNotifications];
const notificationIndex = newNotifications.findIndex((it) => it.id === id);
if (notificationIndex >= 0) {
clearTimeout(newNotifications[notificationIndex].hideHandle);
}
newNotifications.splice(notificationIndex, 1);
return newNotifications;
});
}, []);
const showNotification = useCallback((notification) => {
const id = notificationId.current++;
const hideHandle = setTimeout(() => {
hideNotification(id);
}, 2_000);
setNotifications((prevNotifications) => [
...prevNotifications,
{ id, hideHandle, ...notification },
]);
}, [hideNotification]);
return (_jsxs(NotificationContext.Provider, { value: { showNotification }, children: [_jsx("div", { className: "isolation-isolate", children: children }), notifications.length > 0 ? (_jsx("div", { className: "notification-center isolation-isolate is-max-width-40rem", children: notifications.map((notification) => (_jsxs("div", { className: toClassName('notification is-light', COLOR_CLASSNAMES[notification.color]), children: [_jsx("button", { className: "delete", onClick: () => hideNotification(notification.id) }), notification.message] }, notification.id))) })) : null] }));
}
//# sourceMappingURL=NotificationContainer.js.map