@mantine/notifications
Version:
Mantine notifications system
156 lines (155 loc) • 6.13 kB
JavaScript
"use client";
import { hideNotification, notifications, notificationsStore, useNotifications } from "./notifications.store.mjs";
import { getGroupedNotifications, positions } from "./get-grouped-notifications/get-grouped-notifications.mjs";
import { getNotificationStateStyles } from "./get-notification-state-styles.mjs";
import { NotificationContainer } from "./NotificationContainer.mjs";
import Notifications_module_default from "./Notifications.module.mjs";
import { useDidUpdate, useForceUpdate, useReducedMotion } from "@mantine/hooks";
import { useCallback, useEffect, useRef, useState } from "react";
import { Transition, TransitionGroup } from "react-transition-group";
import { Box, OptionalPortal, RemoveScroll, createVarsResolver, factory, getDefaultZIndex, rem, useMantineTheme, useProps, useStyles } from "@mantine/core";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/notifications/src/Notifications.tsx
const Transition$1 = Transition;
const defaultProps = {
position: "bottom-right",
autoClose: 4e3,
transitionDuration: 250,
allowDragDismiss: true,
allowScrollDismiss: true,
containerWidth: 440,
notificationMaxHeight: 200,
limit: 5,
zIndex: getDefaultZIndex("overlay"),
store: notificationsStore,
withinPortal: true,
pauseResetOnHover: "all"
};
const varsResolver = createVarsResolver((_, { zIndex, containerWidth }) => ({ root: {
"--notifications-z-index": zIndex?.toString(),
"--notifications-container-width": rem(containerWidth)
} }));
const Notifications = factory((_props) => {
const props = useProps("Notifications", defaultProps, _props);
const { classNames, className, style, styles, unstyled, vars, attributes, position, autoClose, transitionDuration, allowDragDismiss, allowScrollDismiss, containerWidth, notificationMaxHeight, limit, zIndex, store, portalProps, withinPortal, pauseResetOnHover, ...others } = props;
const theme = useMantineTheme();
const data = useNotifications(store);
const forceUpdate = useForceUpdate();
const shouldReduceMotion = useReducedMotion();
const refs = useRef({});
const previousLength = useRef(0);
const [hoveredCount, setHoveredCount] = useState(0);
const handleHoverStart = useCallback(() => setHoveredCount((c) => c + 1), []);
const handleHoverEnd = useCallback(() => setHoveredCount((c) => Math.max(0, c - 1)), []);
const duration = (theme.respectReducedMotion ? shouldReduceMotion : false) ? 1 : transitionDuration;
const getStyles = useStyles({
name: "Notifications",
classes: Notifications_module_default,
props,
className,
style,
classNames,
styles,
unstyled,
attributes,
vars,
varsResolver
});
useEffect(() => {
store?.updateState((current) => ({
...current,
limit: limit || 5,
defaultPosition: position
}));
}, [limit, position]);
useDidUpdate(() => {
if (data.notifications.length > previousLength.current) setTimeout(() => forceUpdate(), 0);
previousLength.current = data.notifications.length;
}, [data.notifications]);
const grouped = getGroupedNotifications(data.notifications, position);
const groupedComponents = positions.reduce((acc, pos) => {
acc[pos] = grouped[pos].map(({ style: notificationStyle, ...notification }) => /* @__PURE__ */ jsx(Transition$1, {
timeout: duration,
onEnter: () => refs.current[notification.id].offsetHeight,
nodeRef: { current: refs.current[notification.id] },
children: (state) => /* @__PURE__ */ jsx(NotificationContainer, {
ref: (node) => {
if (node) refs.current[notification.id] = node;
},
data: notification,
onHide: (id) => hideNotification(id, store),
autoClose,
transitionDuration: duration,
allowDragDismiss,
allowScrollDismiss,
paused: pauseResetOnHover === "all" ? hoveredCount > 0 : false,
onHoverStart: handleHoverStart,
onHoverEnd: handleHoverEnd,
...getStyles("notification", { style: {
...getNotificationStateStyles({
state,
position: pos,
transitionDuration: duration,
maxHeight: notificationMaxHeight
}),
...notificationStyle
} })
})
}, notification.id));
return acc;
}, {});
return /* @__PURE__ */ jsxs(OptionalPortal, {
withinPortal,
...portalProps,
children: [
/* @__PURE__ */ jsx(Box, {
...getStyles("root"),
"data-position": "top-center",
...others,
children: /* @__PURE__ */ jsx(TransitionGroup, { children: groupedComponents["top-center"] })
}),
/* @__PURE__ */ jsx(Box, {
...getStyles("root"),
"data-position": "top-left",
...others,
children: /* @__PURE__ */ jsx(TransitionGroup, { children: groupedComponents["top-left"] })
}),
/* @__PURE__ */ jsx(Box, {
...getStyles("root", { className: RemoveScroll.classNames.fullWidth }),
"data-position": "top-right",
...others,
children: /* @__PURE__ */ jsx(TransitionGroup, { children: groupedComponents["top-right"] })
}),
/* @__PURE__ */ jsx(Box, {
...getStyles("root", { className: RemoveScroll.classNames.fullWidth }),
"data-position": "bottom-right",
...others,
children: /* @__PURE__ */ jsx(TransitionGroup, { children: groupedComponents["bottom-right"] })
}),
/* @__PURE__ */ jsx(Box, {
...getStyles("root"),
"data-position": "bottom-left",
...others,
children: /* @__PURE__ */ jsx(TransitionGroup, { children: groupedComponents["bottom-left"] })
}),
/* @__PURE__ */ jsx(Box, {
...getStyles("root"),
"data-position": "bottom-center",
...others,
children: /* @__PURE__ */ jsx(TransitionGroup, { children: groupedComponents["bottom-center"] })
})
]
});
});
Notifications.classes = Notifications_module_default;
Notifications.varsResolver = varsResolver;
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;
//#endregion
export { Notifications };
//# sourceMappingURL=Notifications.mjs.map