mod-arch-shared
Version:
Shared library for modular architecture micro-frontend projects
29 lines • 1.43 kB
JavaScript
import React from 'react';
import { Alert, AlertActionCloseButton, AlertVariant } from '@patternfly/react-core';
import { asEnumMember } from '../utilities/utils';
import { useNotification } from '../hooks/useNotification';
const TOAST_NOTIFICATION_TIMEOUT = 8 * 1000;
const ToastNotification = ({ notification }) => {
const notifications = useNotification();
const [timedOut, setTimedOut] = React.useState(false);
const [mouseOver, setMouseOver] = React.useState(false);
React.useEffect(() => {
const handle = setTimeout(() => {
setTimedOut(true);
}, TOAST_NOTIFICATION_TIMEOUT);
return () => {
clearTimeout(handle);
};
}, [setTimedOut]);
React.useEffect(() => {
if (!notification.hidden && timedOut && !mouseOver) {
notifications.remove(notification.id);
}
}, [mouseOver, notification, timedOut, notifications]);
if (notification.hidden) {
return null;
}
return (React.createElement(Alert, { variant: asEnumMember(notification.status, AlertVariant) ?? undefined, title: notification.title, actionClose: React.createElement(AlertActionCloseButton, { onClose: () => notifications.remove(notification.id) }), onMouseEnter: () => setMouseOver(true), onMouseLeave: () => setMouseOver(false) }, notification.message));
};
export default ToastNotification;
//# sourceMappingURL=ToastNotification.js.map