synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
151 lines (150 loc) • 4.34 kB
JavaScript
import { jsx as e, jsxs as p, Fragment as y } from "react/jsx-runtime";
import { spreadSx as v } from "../../theme/spreadSx.js";
import { Alert as C, Stack as u, Box as A, AlertTitle as k, Snackbar as S, Tooltip as B, Button as D } from "@mui/material";
import { useEffect as F } from "react";
import './FullWidthAlert.css';/* empty css */
function T(r) {
return r === "danger" ? "error" : r;
}
function x(r) {
const { config: t, variant: l } = r;
return t && ("onClick" in t || "href" in t) ? /* @__PURE__ */ e(B, { title: t.tooltipText ?? "", enterNextDelay: 300, children: /* @__PURE__ */ e(
"span",
{
"data-tip-disable": !1,
children: /* @__PURE__ */ e(
D,
{
variant: l,
sx: {
width: { xs: "100%", md: "initial" }
},
color: "primary",
disabled: t.isDisabled,
onClick: (i) => {
"onClick" in t ? (i.preventDefault(), t.onClick(i)) : "href" in t && (i.preventDefault(), window.open(t.href, "_blank", "noopener"));
},
children: t.text
}
)
}
) }) : null;
}
function M(r) {
const {
title: t,
description: l,
primaryButtonConfig: i,
secondaryButtonConfig: a,
tertiaryButtonConfig: s,
show: d = !0,
onClose: o,
autoCloseAfterDelayInSeconds: c,
variant: h = "info",
isGlobal: f = !0,
icon: g,
sx: w,
globalAlertSx: b
} = r;
F(() => {
let n;
return o && c && (n = setTimeout(o, c * 1e3)), () => {
n && clearTimeout(n);
};
}, [o, c]);
const m = /* @__PURE__ */ e(
C,
{
severity: T(h),
sx: v(
{
width: "100%",
my: "10px",
".MuiAlert-message": {
flexGrow: 1
},
".MuiAlert-icon": {
display: { xs: "none", sm: "flex" }
}
},
w
),
className: "FullWidthAlert",
onClose: o,
icon: g,
children: /* @__PURE__ */ p(
u,
{
direction: { xs: "column", sm: "row" },
spacing: { xs: 1, sm: 2 },
sx: {
alignItems: { xs: "start", sm: "center" },
gap: { xs: "8px", sm: "initial" },
display: "flex",
justifyContent: "space-between"
},
children: [
/* @__PURE__ */ p(A, { children: [
t && /* @__PURE__ */ e(k, { children: t }),
/* @__PURE__ */ e("span", { className: "FullWidthAlertDescription", children: l })
] }),
(i || a || s) && /* @__PURE__ */ p(
u,
{
spacing: { xs: 1, lg: 2 },
direction: { xs: "row", sm: "column", lg: "row" },
sx: (n) => ({
alignItems: "center",
display: "flex",
flexShrink: 0,
gap: { xs: "8px", sm: "initial" },
flexWrap: { xs: "wrap", sm: "nowrap" },
width: { xs: "100%", sm: "initial" },
[n.breakpoints.down("sm")]: {
"& > *": {
flexGrow: 1
}
}
}),
children: [
s && /* @__PURE__ */ e(x, { config: s, variant: "text" }),
a && /* @__PURE__ */ e(x, { config: a, variant: "text" }),
i && /* @__PURE__ */ e(
x,
{
config: i,
variant: "contained"
}
)
]
}
)
]
}
)
}
);
return /* @__PURE__ */ e(y, { children: f ? /* @__PURE__ */ e(
S,
{
open: d,
className: f ? "FullWidthAlertGlobal" : void 0,
sx: {
width: "96%",
filter: "drop-shadow(0px 8px 8px rgba(0, 0, 0, 0.05)) drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.05)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.05))",
...b
},
anchorOrigin: { vertical: "bottom", horizontal: "center" },
slotProps: {
transition: {
appear: !1
}
},
children: m
}
) : d && m });
}
export {
M as default
};
//# sourceMappingURL=FullWidthAlert.js.map