@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
36 lines (35 loc) • 2.22 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import classNames from "classnames";
import { VuiButtonSecondary } from "../button/ButtonSecondary";
import { VuiFlexContainer } from "../flex/FlexContainer";
import { VuiFlexItem } from "../flex/FlexItem";
import { VuiSpacer } from "../spacer/Spacer";
import { VuiNotification } from "./Notification";
import { useEffect, useRef } from "react";
import { VuiButtonTertiary } from "../button/ButtonTertiary";
export const VuiNotifications = ({ notifications, onShowAll, onDismiss, onDismissAll, onClose }) => {
const timeoutRef = useRef();
const startTimeout = () => {
clearTimeout(timeoutRef.current);
timeoutRef.current = setTimeout(() => {
onClose();
}, 8000);
return timeoutRef.current;
};
useEffect(() => {
startTimeout();
return () => clearTimeout(timeoutRef.current);
}, [notifications]);
const onMouseEnter = () => {
clearTimeout(timeoutRef.current);
};
const onMouseLeave = () => {
startTimeout();
};
if (!notifications.length)
return null;
const classes = classNames("vuiNotificationList", {
"vuiNotificationList--hasMany": notifications.length > 1
});
return (_jsx("div", Object.assign({ className: classes, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, { children: _jsx("div", Object.assign({ className: "vuiNotificationList__notifications" }, { children: _jsx(VuiNotification, Object.assign({ notification: notifications[notifications.length - 1], onDismiss: onDismiss, notificationsCount: notifications.length }, { children: notifications.length > 1 && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xs" }), _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "spaceBetween" }, { children: [_jsx(VuiFlexItem, { children: _jsx(VuiButtonTertiary, Object.assign({ size: "s", color: "primary", onClick: onDismissAll }, { children: "Dismiss all" })) }), _jsx(VuiFlexItem, { children: _jsx(VuiButtonSecondary, Object.assign({ size: "s", color: "primary", onClick: onShowAll }, { children: "See all" })) })] }))] })) })) })) })));
};