@sitecore/sc-contenthub-blok
Version:
A UI library for [Sitecore Content Hub](https://doc.sitecore.com/ch/).
32 lines • 2.27 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { css } from "@emotion/css";
import { CircularProgress } from "@mui/material";
import { useEffect, useState, } from "react";
import { BlokIcon } from "../BlokIcon/BlokIcon";
import { BlokIconButton } from "../BlokIconButton/BlokIconButton";
import { Alert, AlertTitle } from "../CoreComponents";
const classes = {
actionsWrapper: css({ display: "flex", alignItems: "center" }),
spinner: css({ width: "22px !important", height: "22px !important" }),
};
export const alertIconMap = {
error: "m-icon-alert-circle",
info: "m-icon-information",
warning: "m-icon-alert",
success: "m-icon-check-circle",
neutral: "m-icon-information",
ai: "m-icon-creation",
};
export const BlokAlert = ({ dismissible, onClose, alertTitle, children, severity = "info", isCollapsed = false, isCollapsible = false, closeMessage = "Close", toggleMessage = "Toggle", noIcon = false, loading = false, iconName, action, }) => {
const [isCollapsedState, setIsCollapsedState] = useState(isCollapsed);
const infoIcon = _jsx(BlokIcon, { icon: iconName ?? alertIconMap[severity] });
let iconToShow = noIcon ? false : infoIcon;
if (loading) {
iconToShow = _jsx(CircularProgress, { className: classes.spinner });
}
useEffect(() => {
setIsCollapsedState(isCollapsed);
}, [isCollapsed]);
return (_jsxs(Alert, { severity: severity, action: _jsxs("div", { className: classes.actionsWrapper, children: [action, !!onClose && dismissible && (_jsx(BlokIconButton, { size: "small", id: "dismiss-info-box", onClick: onClose, "aria-label": closeMessage, children: _jsx(BlokIcon, { icon: "close" }) })), isCollapsible && (_jsx(BlokIconButton, { id: "toggle-info-box", size: "small", onClick: () => setIsCollapsedState((prevState) => !prevState), "aria-label": toggleMessage, children: _jsx(BlokIcon, { icon: isCollapsedState ? "m-icon-chevron-down" : "m-icon-chevron-up" }) }))] }), icon: iconToShow, className: isCollapsedState ? "MuiAlert-collapsed" : "", children: [alertTitle && _jsx(AlertTitle, { children: alertTitle }), !isCollapsedState && (_jsx("div", { className: "MuiAlert-inner-content", children: children }))] }));
};
//# sourceMappingURL=BlokAlert.js.map