@octopusdeploy/design-system-components
Version:
The design systems component library.
65 lines (64 loc) • 3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.InlineSnackbar = InlineSnackbar;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const material_1 = require("@mui/material");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = require("react");
function InlineSnackbar({ variant, show, autoHideDuration, content, onClose }) {
const [autoHideTimeout, setAutoHideTimeout] = (0, react_1.useState)(undefined);
(0, react_1.useEffect)(() => {
if (autoHideTimeout)
clearTimeout(autoHideTimeout);
if (show && autoHideDuration && onClose) {
setAutoHideTimeout(setTimeout(() => onClose(), autoHideDuration));
}
return () => {
clearTimeout(autoHideTimeout);
};
// Excludes autoHideTimeout to prevent endless looping updates
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [autoHideDuration, onClose, show]);
const formattedContent = ((0, jsx_runtime_1.jsxs)("div", { className: styles.content, children: [(0, jsx_runtime_1.jsx)("span", { className: styles.icon, children: icon(variant) }), (0, jsx_runtime_1.jsx)("span", { className: styles.text, children: content })] }));
return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { in: show, children: (0, jsx_runtime_1.jsx)("div", { className: styles.snackbar(variant), children: typeof content === "string" ? formattedContent : content }) }));
}
const icon = (variant) => {
switch (variant) {
case "neutral":
return (0, jsx_runtime_1.jsx)(design_system_icons_1.InfoCircleIcon, { size: 20 });
case "success":
return (0, jsx_runtime_1.jsx)(design_system_icons_1.CheckCircleIcon, { size: 20 });
}
};
const backgroundColor = (variant) => {
switch (variant) {
case "neutral":
return design_system_tokens_1.themeTokens.color.background.inverse.neutral;
case "success":
return design_system_tokens_1.themeTokens.color.background.inverse.success;
}
};
const styles = {
snackbar: (variant) => (0, css_1.css)({
backgroundColor: backgroundColor(variant),
padding: `${design_system_tokens_1.space[8]} ${design_system_tokens_1.space[16]}`,
borderRadius: design_system_tokens_1.borderRadius.small,
}),
content: (0, css_1.css)({
display: "flex",
alignItems: "center",
}),
icon: (0, css_1.css)({
paddingRight: design_system_tokens_1.space[6],
color: design_system_tokens_1.themeTokens.color.icon.inverse.primary,
display: "flex",
justifyContent: "center",
alignItems: "center",
}),
text: (0, css_1.css)({
font: design_system_tokens_1.text.body.bold.medium,
color: design_system_tokens_1.themeTokens.color.icon.inverse.primary,
}),
};