@dune2/mantine-notifications
Version:
Mantine notifications system
258 lines (255 loc) • 7.79 kB
JavaScript
'use client';
import { jsx } from 'react/jsx-runtime';
import { c } from 'react/compiler-runtime';
import { useRef, useEffect } from 'react';
import { Transition as Transition$1, TransitionGroup } from 'react-transition-group';
import { getDefaultZIndex, createVarsResolver, rem, factory, useProps, useMantineTheme, useStyles, Box, OptionalPortal } from '@mantine/core';
import { useForceUpdate, useReducedMotion, useDidUpdate } from '@mantine/hooks';
import { getNotificationStateStyles } from './get-notification-state-styles.mjs';
import { NotificationContainer } from './NotificationContainer.mjs';
import { notificationsStore, notifications, useNotifications, hideNotification } from './notifications.store.mjs';
import classes from './Notifications.module.css.mjs';
const Transition = Transition$1;
const defaultProps = {
position: "bottom-right",
autoClose: 4e3,
transitionDuration: 250,
containerWidth: 440,
notificationMaxHeight: 200,
limit: 5,
zIndex: getDefaultZIndex("overlay"),
store: notificationsStore,
withinPortal: true
};
const varsResolver = createVarsResolver(
(_, { zIndex, position, containerWidth }) => {
const [vertical, horizontal] = position.split("-");
return {
root: {
"--notifications-z-index": zIndex?.toString(),
"--notifications-top": vertical === "top" ? "var(--mantine-spacing-md)" : void 0,
"--notifications-bottom": vertical === "bottom" ? "var(--mantine-spacing-md)" : void 0,
"--notifications-left": horizontal === "left" ? "var(--mantine-spacing-md)" : horizontal === "center" ? "50%" : void 0,
"--notifications-right": horizontal === "right" ? "var(--mantine-spacing-md)" : void 0,
"--notifications-transform": horizontal === "center" ? "translateX(-50%)" : void 0,
"--notifications-container-width": rem(containerWidth)
}
};
}
);
const NotificationsImpl = (_props, ref) => {
const $ = c(47);
const props = useProps("Notifications", defaultProps, _props);
let store;
let transitionDuration;
let className;
let style;
let classNames;
let styles;
let unstyled;
let vars;
let limit;
let autoClose;
let position;
let notificationMaxHeight;
let others;
let withinPortal;
let portalProps;
if ($[0] !== props) {
const { classNames: t02, className: t12, style: t22, styles: t32, unstyled: t42, vars: t5, position: t62, autoClose: t72, transitionDuration: t82, containerWidth, notificationMaxHeight: t92, limit: t10, zIndex, store: t11, portalProps: t122, withinPortal: t13, ...t14 } = props;
classNames = t02;
className = t12;
style = t22;
styles = t32;
unstyled = t42;
vars = t5;
position = t62;
autoClose = t72;
transitionDuration = t82;
notificationMaxHeight = t92;
limit = t10;
store = t11;
portalProps = t122;
withinPortal = t13;
others = t14;
$[0] = props;
$[1] = store;
$[2] = transitionDuration;
$[3] = className;
$[4] = style;
$[5] = classNames;
$[6] = styles;
$[7] = unstyled;
$[8] = vars;
$[9] = limit;
$[10] = autoClose;
$[11] = position;
$[12] = notificationMaxHeight;
$[13] = others;
$[14] = withinPortal;
$[15] = portalProps;
} else {
store = $[1];
transitionDuration = $[2];
className = $[3];
style = $[4];
classNames = $[5];
styles = $[6];
unstyled = $[7];
vars = $[8];
limit = $[9];
autoClose = $[10];
position = $[11];
notificationMaxHeight = $[12];
others = $[13];
withinPortal = $[14];
portalProps = $[15];
}
const theme = useMantineTheme();
const data = useNotifications(store);
const forceUpdate = useForceUpdate();
const shouldReduceMotion = useReducedMotion();
const refs = useRef({});
const previousLength = useRef(0);
const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;
const duration = reduceMotion ? 1 : transitionDuration;
let t0;
if ($[16] !== props || $[17] !== className || $[18] !== style || $[19] !== classNames || $[20] !== styles || $[21] !== unstyled || $[22] !== vars) {
t0 = { name: "Notifications", classes, props, className, style, classNames, styles, unstyled, vars, varsResolver };
$[16] = props;
$[17] = className;
$[18] = style;
$[19] = classNames;
$[20] = styles;
$[21] = unstyled;
$[22] = vars;
$[23] = t0;
} else {
t0 = $[23];
}
const getStyles = useStyles(
t0
);
let t1;
if ($[24] !== store || $[25] !== limit) {
t1 = () => {
store?.updateState((current) => ({ ...current, limit: limit || 5 }));
};
$[24] = store;
$[25] = limit;
$[26] = t1;
} else {
t1 = $[26];
}
let t2;
if ($[27] !== limit) {
t2 = [limit];
$[27] = limit;
$[28] = t2;
} else {
t2 = $[28];
}
useEffect(t1, t2);
let t3;
if ($[29] !== data.notifications.length || $[30] !== forceUpdate) {
t3 = () => {
if (data.notifications.length > previousLength.current) {
setTimeout(() => forceUpdate(), 0);
}
previousLength.current = data.notifications.length;
};
$[29] = data.notifications.length;
$[30] = forceUpdate;
$[31] = t3;
} else {
t3 = $[31];
}
let t4;
if ($[32] !== data.notifications) {
t4 = [data.notifications];
$[32] = data.notifications;
$[33] = t4;
} else {
t4 = $[33];
}
useDidUpdate(t3, t4);
const items = data.notifications.map(
(t5) => {
const { style: notificationStyle, ...notification } = t5;
return /* @__PURE__ */ jsx(
Transition,
{
timeout: duration,
onEnter: () => refs.current[notification.id].offsetHeight,
nodeRef: { current: refs.current[notification.id] },
children: (state) => /* @__PURE__ */ jsx(
NotificationContainer,
{
ref: (node) => {
refs.current[notification.id] = node;
},
data: notification,
onHide: (id) => hideNotification(id, store),
autoClose,
...getStyles(
"notification",
{ style: { ...getNotificationStateStyles(
{ state, position, transitionDuration: duration, maxHeight: notificationMaxHeight }
), ...notificationStyle } }
)
}
)
},
notification.id
);
}
);
let t6;
if ($[34] !== getStyles) {
t6 = getStyles("root");
$[34] = getStyles;
$[35] = t6;
} else {
t6 = $[35];
}
let t7;
if ($[36] !== items) {
t7 = /* @__PURE__ */ jsx(TransitionGroup, { children: items });
$[36] = items;
$[37] = t7;
} else {
t7 = $[37];
}
let t8;
if ($[38] !== t6 || $[39] !== ref || $[40] !== others || $[41] !== t7) {
t8 = /* @__PURE__ */ jsx(Box, { ...t6, ref, ...others, children: t7 });
$[38] = t6;
$[39] = ref;
$[40] = others;
$[41] = t7;
$[42] = t8;
} else {
t8 = $[42];
}
let t9;
if ($[43] !== withinPortal || $[44] !== portalProps || $[45] !== t8) {
t9 = /* @__PURE__ */ jsx(OptionalPortal, { withinPortal, ...portalProps, children: t8 });
$[43] = withinPortal;
$[44] = portalProps;
$[45] = t8;
$[46] = t9;
} else {
t9 = $[46];
}
return t9;
};
const Notifications = factory(NotificationsImpl);
Notifications.classes = classes;
Notifications.displayName = "@mantine/notifications/Notifications";
Notifications.show = notifications.show;
Notifications.hide = notifications.hide;
Notifications.update = notifications.update;
Notifications.clean = notifications.clean;
Notifications.cleanQueue = notifications.cleanQueue;
Notifications.updateState = notifications.updateState;
export { Notifications };