@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
44 lines (43 loc) • 3.48 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from "classnames";
import { toast as sonnerToast } from "sonner";
import { BiCheck, BiError, BiInfoCircle, BiSolidHand, BiX } from "react-icons/bi";
import { VuiText } from "../typography/Text";
import { VuiTextColor } from "../typography/TextColor";
import { VuiFlexContainer } from "../flex/FlexContainer";
import { VuiFlexItem } from "../flex/FlexItem";
import { VuiIconButton } from "../button/IconButton";
import { VuiIcon } from "../icon/Icon";
import { VuiSpacer } from "../spacer/Spacer";
import { VuiCopyButton } from "../copyButton/CopyButton";
import { VuiCode } from "../code/Code";
import { VuiLink } from "../link/Link";
export const addNotification = (props) => {
return sonnerToast.custom((id) => (_jsx(VuiNotification, Object.assign({ onDismiss: () => {
sonnerToast.dismiss(id);
} }, props))), { duration: 10000 });
};
export const VuiNotification = ({ color, message, onDismiss, children, hasCopyButton, code, link }) => {
const classes = classNames("vuiNotification", `vuiNotification--${color}`);
let icon;
switch (color) {
case "primary":
icon = (_jsx(VuiIcon, Object.assign({ color: "primary" }, { children: _jsx(BiInfoCircle, {}) })));
break;
case "success":
icon = (_jsx(VuiIcon, Object.assign({ color: "success" }, { children: _jsx(BiCheck, {}) })));
break;
case "warning":
icon = (_jsx(VuiIcon, Object.assign({ color: "warning" }, { children: _jsx(BiError, {}) })));
break;
case "danger":
icon = (_jsx(VuiIcon, Object.assign({ color: "danger" }, { children: _jsx(BiSolidHand, {}) })));
break;
default:
icon = null;
}
const copyValue = code ? `${message}\n\n${code.content}` : message;
// data-awareness="notification" enables notifications to be closed when a drawer is open,
// without triggering the drawer to close.
return (_jsx("div", Object.assign({ className: classes, "data-testid": `notification-${color}`, "data-awareness": "notification" }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "xs" }, { children: [icon, _jsxs("div", { children: [_jsx(VuiText, Object.assign({ preserveWhiteSpace: true }, { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: message })) })), code && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiCode, Object.assign({ language: code.language }, { children: code.content }))] })), hasCopyButton && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiCopyButton, { value: copyValue, size: "s", label: "Copy notification" })] })), children && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), children] })), link && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiLink, Object.assign({}, link))] }))] })] })) })), _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIconButton, { "aria-label": "Dismiss message", size: "xs", color: "neutral", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), onClick: () => onDismiss(), "data-testid": `dismissNotificationButton-${color}` }) }))] })) })));
};