braid-design-system
Version:
Themeable design system for the SEEK Group
68 lines (67 loc) • 2.58 kB
JavaScript
;
const jsxRuntime = require("react/jsx-runtime");
const isMobile = require("is-mobile");
const react = require("react");
const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
const lib_components_useToast_Toast_cjs = require("./Toast.cjs");
const lib_components_useToast_useFlipList_cjs = require("./useFlipList.cjs");
const lib_components_useToast_Toaster_css_cjs = require("./Toaster.css.cjs");
const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const isMobile__default = /* @__PURE__ */ _interopDefaultCompat(isMobile);
const StaticToaster = (props) => /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { width: "full", className: lib_components_useToast_Toaster_css_cjs.toaster, ...props });
const Toaster = ({ toasts, removeToast }) => {
const [expanded, setExpanded] = react.useState(false);
const { itemRef, remove } = lib_components_useToast_useFlipList_cjs.useFlipList(expanded);
const isMobileDevice = react.useRef(isMobile__default.default()).current;
const expandHandler = () => setExpanded(true);
const collapseHandler = () => setExpanded(false);
const onClose = react.useCallback(
(dedupeKey, toastKey) => {
remove(toastKey, () => {
removeToast(dedupeKey);
});
},
[remove, removeToast]
);
react.useEffect(() => {
if (toasts.length <= 1) {
setExpanded(false);
}
}, [toasts.length]);
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
isMobileDevice && expanded && toasts.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.Box,
{
position: "fixed",
inset: 0,
zIndex: "notification",
onClick: () => setExpanded(false)
}
),
/* @__PURE__ */ jsxRuntime.jsx(
StaticToaster,
{
position: "fixed",
zIndex: "notification",
onMouseEnter: !isMobileDevice ? expandHandler : void 0,
onMouseLeave: !isMobileDevice ? collapseHandler : void 0,
onFocus: expandHandler,
onBlur: collapseHandler,
onClick: () => setExpanded(!expanded),
pointerEvents: toasts.length === 0 ? "none" : void 0,
children: toasts.map(({ toastKey, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
lib_components_useToast_Toast_cjs.Toast,
{
ref: itemRef(toastKey),
toastKey,
onClose,
expanded,
...rest
},
toastKey
))
}
)
] });
};
exports.Toaster = Toaster;