@mantine/notifications 6.0.13 → 7.0.0-alpha.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/{NotificationContainer/NotificationContainer.js → NotificationContainer.js} +37 -44
- package/cjs/NotificationContainer.js.map +1 -0
- package/cjs/Notifications.js +179 -0
- package/cjs/Notifications.js.map +1 -0
- package/cjs/Notifications.module.css.js +8 -0
- package/cjs/Notifications.module.css.js.map +1 -0
- package/cjs/{NotificationContainer/get-auto-close → get-auto-close}/get-auto-close.js +1 -1
- package/cjs/get-auto-close/get-auto-close.js.map +1 -0
- package/cjs/{Notifications/get-notification-state-styles/get-notification-state-styles.js → get-notification-state-styles.js} +3 -3
- package/cjs/get-notification-state-styles.js.map +1 -0
- package/cjs/index.css +15 -0
- package/cjs/index.js +13 -8
- package/cjs/index.js.map +1 -1
- package/cjs/notifications.store.js +107 -0
- package/cjs/notifications.store.js.map +1 -0
- package/esm/NotificationContainer.js +75 -0
- package/esm/NotificationContainer.js.map +1 -0
- package/esm/Notifications.js +171 -0
- package/esm/Notifications.js.map +1 -0
- package/esm/Notifications.module.css.js +4 -0
- package/esm/Notifications.module.css.js.map +1 -0
- package/esm/{NotificationContainer/get-auto-close → get-auto-close}/get-auto-close.js +1 -1
- package/esm/get-auto-close/get-auto-close.js.map +1 -0
- package/esm/{Notifications/get-notification-state-styles/get-notification-state-styles.js → get-notification-state-styles.js} +3 -3
- package/esm/get-notification-state-styles.js.map +1 -0
- package/esm/index.css +15 -0
- package/esm/index.js +3 -2
- package/esm/index.js.map +1 -1
- package/esm/notifications.store.js +94 -0
- package/esm/notifications.store.js.map +1 -0
- package/lib/NotificationContainer.d.ts +11 -0
- package/lib/NotificationContainer.d.ts.map +1 -0
- package/lib/Notifications.d.ts +61 -0
- package/lib/Notifications.d.ts.map +1 -0
- package/lib/get-auto-close/get-auto-close.d.ts +2 -0
- package/lib/get-auto-close/get-auto-close.d.ts.map +1 -0
- package/lib/get-notification-state-styles.d.ts +12 -0
- package/lib/get-notification-state-styles.d.ts.map +1 -0
- package/lib/index.d.ts +4 -4
- package/lib/index.d.ts.map +1 -1
- package/lib/notifications.store.d.ts +41 -0
- package/lib/notifications.store.d.ts.map +1 -0
- package/package.json +16 -10
- package/cjs/NotificationContainer/NotificationContainer.js.map +0 -1
- package/cjs/NotificationContainer/get-auto-close/get-auto-close.js.map +0 -1
- package/cjs/Notifications/Notifications.js +0 -152
- package/cjs/Notifications/Notifications.js.map +0 -1
- package/cjs/Notifications/Notifications.styles.js +0 -22
- package/cjs/Notifications/Notifications.styles.js.map +0 -1
- package/cjs/Notifications/get-notification-state-styles/get-notification-state-styles.js.map +0 -1
- package/cjs/Notifications/get-position-styles/get-position-styles.js +0 -16
- package/cjs/Notifications/get-position-styles/get-position-styles.js.map +0 -1
- package/cjs/Notifications/use-notifications-state/use-notifications-state.js +0 -70
- package/cjs/Notifications/use-notifications-state/use-notifications-state.js.map +0 -1
- package/cjs/events.js +0 -29
- package/cjs/events.js.map +0 -1
- package/esm/NotificationContainer/NotificationContainer.js +0 -82
- package/esm/NotificationContainer/NotificationContainer.js.map +0 -1
- package/esm/NotificationContainer/get-auto-close/get-auto-close.js.map +0 -1
- package/esm/Notifications/Notifications.js +0 -144
- package/esm/Notifications/Notifications.js.map +0 -1
- package/esm/Notifications/Notifications.styles.js +0 -18
- package/esm/Notifications/Notifications.styles.js.map +0 -1
- package/esm/Notifications/get-notification-state-styles/get-notification-state-styles.js.map +0 -1
- package/esm/Notifications/get-position-styles/get-position-styles.js +0 -12
- package/esm/Notifications/get-position-styles/get-position-styles.js.map +0 -1
- package/esm/Notifications/use-notifications-state/use-notifications-state.js +0 -66
- package/esm/Notifications/use-notifications-state/use-notifications-state.js.map +0 -1
- package/esm/events.js +0 -18
- package/esm/events.js.map +0 -1
- package/lib/NotificationContainer/NotificationContainer.d.ts +0 -15
- package/lib/NotificationContainer/NotificationContainer.d.ts.map +0 -1
- package/lib/NotificationContainer/get-auto-close/get-auto-close.d.ts +0 -2
- package/lib/NotificationContainer/get-auto-close/get-auto-close.d.ts.map +0 -1
- package/lib/Notifications/Notifications.d.ts +0 -25
- package/lib/Notifications/Notifications.d.ts.map +0 -1
- package/lib/Notifications/Notifications.styles.d.ts +0 -14
- package/lib/Notifications/Notifications.styles.d.ts.map +0 -1
- package/lib/Notifications/get-notification-state-styles/get-notification-state-styles.d.ts +0 -12
- package/lib/Notifications/get-notification-state-styles/get-notification-state-styles.d.ts.map +0 -1
- package/lib/Notifications/get-position-styles/get-position-styles.d.ts +0 -4
- package/lib/Notifications/get-position-styles/get-position-styles.d.ts.map +0 -1
- package/lib/Notifications/use-notifications-state/use-notifications-state.d.ts +0 -13
- package/lib/Notifications/use-notifications-state/use-notifications-state.d.ts.map +0 -1
- package/lib/events.d.ts +0 -20
- package/lib/events.d.ts.map +0 -1
- package/lib/types.d.ts +0 -15
- package/lib/types.d.ts.map +0 -1
|
@@ -41,50 +41,43 @@ var __objRest = (source, exclude) => {
|
|
|
41
41
|
}
|
|
42
42
|
return target;
|
|
43
43
|
};
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
autoClose,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
return /* @__PURE__ */ React__default.createElement(core.Notification, __spreadProps(__spreadValues(__spreadValues({}, notificationProps), others), {
|
|
81
|
-
onClose: handleHide,
|
|
82
|
-
onMouseEnter: cancelDelayedHide,
|
|
83
|
-
onMouseLeave: handleDelayedHide,
|
|
84
|
-
ref: innerRef
|
|
85
|
-
}), message);
|
|
86
|
-
}
|
|
44
|
+
const NotificationContainer = React.forwardRef(
|
|
45
|
+
(_a, ref) => {
|
|
46
|
+
var _b = _a, { data, onHide, autoClose } = _b, others = __objRest(_b, ["data", "onHide", "autoClose"]);
|
|
47
|
+
const _a2 = data, { autoClose: _autoClose, message } = _a2, notificationProps = __objRest(_a2, ["autoClose", "message"]);
|
|
48
|
+
const autoCloseDuration = getAutoClose.getAutoClose(autoClose, data.autoClose);
|
|
49
|
+
const autoCloseTimeout = React.useRef();
|
|
50
|
+
const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout.current);
|
|
51
|
+
const handleHide = () => {
|
|
52
|
+
onHide(data.id);
|
|
53
|
+
cancelAutoClose();
|
|
54
|
+
};
|
|
55
|
+
const handleAutoClose = () => {
|
|
56
|
+
if (typeof autoCloseDuration === "number") {
|
|
57
|
+
autoCloseTimeout.current = window.setTimeout(handleHide, autoCloseDuration);
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
React.useEffect(() => {
|
|
61
|
+
var _a3;
|
|
62
|
+
(_a3 = data.onOpen) == null ? void 0 : _a3.call(data, data);
|
|
63
|
+
}, []);
|
|
64
|
+
React.useEffect(() => {
|
|
65
|
+
handleAutoClose();
|
|
66
|
+
return cancelAutoClose;
|
|
67
|
+
}, [autoCloseDuration]);
|
|
68
|
+
return /* @__PURE__ */ React__default.createElement(
|
|
69
|
+
core.Notification,
|
|
70
|
+
__spreadProps(__spreadValues(__spreadValues({}, others), notificationProps), {
|
|
71
|
+
onClose: handleHide,
|
|
72
|
+
ref,
|
|
73
|
+
onMouseEnter: cancelAutoClose,
|
|
74
|
+
onMouseLeave: handleAutoClose
|
|
75
|
+
}),
|
|
76
|
+
message
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
);
|
|
87
80
|
NotificationContainer.displayName = "@mantine/notifications/NotificationContainer";
|
|
88
81
|
|
|
89
|
-
exports.
|
|
82
|
+
exports.NotificationContainer = NotificationContainer;
|
|
90
83
|
//# sourceMappingURL=NotificationContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NotificationContainer.js","sources":["../src/NotificationContainer.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useEffect } from 'react';\nimport { Notification, NotificationProps } from '@mantine/core';\nimport { NotificationData } from './notifications.store';\nimport { getAutoClose } from './get-auto-close/get-auto-close';\n\ninterface NotificationContainerProps extends NotificationProps {\n data: NotificationData;\n onHide(id: string): void;\n autoClose: number | false;\n}\n\nexport const NotificationContainer = forwardRef<HTMLDivElement, NotificationContainerProps>(\n ({ data, onHide, autoClose, ...others }, ref) => {\n const { autoClose: _autoClose, message, ...notificationProps } = data;\n const autoCloseDuration = getAutoClose(autoClose, data.autoClose);\n const autoCloseTimeout = useRef<number>();\n\n const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout.current);\n\n const handleHide = () => {\n onHide(data.id!);\n cancelAutoClose();\n };\n\n const handleAutoClose = () => {\n if (typeof autoCloseDuration === 'number') {\n autoCloseTimeout.current = window.setTimeout(handleHide, autoCloseDuration);\n }\n };\n\n useEffect(() => {\n data.onOpen?.(data);\n }, []);\n\n useEffect(() => {\n handleAutoClose();\n return cancelAutoClose;\n }, [autoCloseDuration]);\n\n return (\n <Notification\n {...others}\n {...notificationProps}\n onClose={handleHide}\n ref={ref}\n onMouseEnter={cancelAutoClose}\n onMouseLeave={handleAutoClose}\n >\n {message}\n </Notification>\n );\n }\n);\n\nNotificationContainer.displayName = '@mantine/notifications/NotificationContainer';\n"],"names":["forwardRef","getAutoClose","useRef","useEffect","React","Notification"],"mappings":"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"}
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var reactTransitionGroup = require('react-transition-group');
|
|
7
|
+
var hooks = require('@mantine/hooks');
|
|
8
|
+
var core = require('@mantine/core');
|
|
9
|
+
var notifications_store = require('./notifications.store.js');
|
|
10
|
+
var NotificationContainer = require('./NotificationContainer.js');
|
|
11
|
+
var getNotificationStateStyles = require('./get-notification-state-styles.js');
|
|
12
|
+
var Notifications_module = require('./Notifications.module.css.js');
|
|
13
|
+
|
|
14
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
|
|
15
|
+
|
|
16
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
17
|
+
|
|
18
|
+
var __defProp = Object.defineProperty;
|
|
19
|
+
var __defProps = Object.defineProperties;
|
|
20
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
21
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
22
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
23
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
24
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
25
|
+
var __spreadValues = (a, b) => {
|
|
26
|
+
for (var prop in b || (b = {}))
|
|
27
|
+
if (__hasOwnProp.call(b, prop))
|
|
28
|
+
__defNormalProp(a, prop, b[prop]);
|
|
29
|
+
if (__getOwnPropSymbols)
|
|
30
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
31
|
+
if (__propIsEnum.call(b, prop))
|
|
32
|
+
__defNormalProp(a, prop, b[prop]);
|
|
33
|
+
}
|
|
34
|
+
return a;
|
|
35
|
+
};
|
|
36
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
37
|
+
var __objRest = (source, exclude) => {
|
|
38
|
+
var target = {};
|
|
39
|
+
for (var prop in source)
|
|
40
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
41
|
+
target[prop] = source[prop];
|
|
42
|
+
if (source != null && __getOwnPropSymbols)
|
|
43
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
44
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
45
|
+
target[prop] = source[prop];
|
|
46
|
+
}
|
|
47
|
+
return target;
|
|
48
|
+
};
|
|
49
|
+
const Transition = reactTransitionGroup.Transition;
|
|
50
|
+
const defaultProps = {
|
|
51
|
+
position: "bottom-right",
|
|
52
|
+
autoClose: 4e3,
|
|
53
|
+
transitionDuration: 250,
|
|
54
|
+
containerWidth: 440,
|
|
55
|
+
notificationMaxHeight: 200,
|
|
56
|
+
limit: 5,
|
|
57
|
+
zIndex: core.getDefaultZIndex("overlay"),
|
|
58
|
+
store: notifications_store.notificationsStore,
|
|
59
|
+
withinPortal: true
|
|
60
|
+
};
|
|
61
|
+
const varsResolver = core.createVarsResolver(
|
|
62
|
+
(_, { zIndex, position, containerWidth }) => {
|
|
63
|
+
const [vertical, horizontal] = position.split("-");
|
|
64
|
+
return {
|
|
65
|
+
root: {
|
|
66
|
+
"--notifications-z-index": zIndex == null ? void 0 : zIndex.toString(),
|
|
67
|
+
"--notifications-top": vertical === "top" ? "var(--mantine-spacing-md)" : void 0,
|
|
68
|
+
"--notifications-bottom": vertical === "bottom" ? "var(--mantine-spacing-md)" : void 0,
|
|
69
|
+
"--notifications-left": horizontal === "left" ? "var(--mantine-spacing-md)" : horizontal === "center" ? "50%" : void 0,
|
|
70
|
+
"--notifications-right": horizontal === "right" ? "var(--mantine-spacing-md)" : void 0,
|
|
71
|
+
"--notifications-transform": horizontal === "center" ? "translateX(-50%)" : void 0,
|
|
72
|
+
"--notifications-container-width": core.rem(containerWidth)
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
);
|
|
77
|
+
const Notifications = core.factory((_props, ref) => {
|
|
78
|
+
const props = core.useProps("Notifications", defaultProps, _props);
|
|
79
|
+
const _a = props, {
|
|
80
|
+
classNames,
|
|
81
|
+
className,
|
|
82
|
+
style,
|
|
83
|
+
styles,
|
|
84
|
+
unstyled,
|
|
85
|
+
vars,
|
|
86
|
+
position,
|
|
87
|
+
autoClose,
|
|
88
|
+
transitionDuration,
|
|
89
|
+
containerWidth,
|
|
90
|
+
notificationMaxHeight,
|
|
91
|
+
limit,
|
|
92
|
+
zIndex,
|
|
93
|
+
store,
|
|
94
|
+
portalProps,
|
|
95
|
+
withinPortal
|
|
96
|
+
} = _a, others = __objRest(_a, [
|
|
97
|
+
"classNames",
|
|
98
|
+
"className",
|
|
99
|
+
"style",
|
|
100
|
+
"styles",
|
|
101
|
+
"unstyled",
|
|
102
|
+
"vars",
|
|
103
|
+
"position",
|
|
104
|
+
"autoClose",
|
|
105
|
+
"transitionDuration",
|
|
106
|
+
"containerWidth",
|
|
107
|
+
"notificationMaxHeight",
|
|
108
|
+
"limit",
|
|
109
|
+
"zIndex",
|
|
110
|
+
"store",
|
|
111
|
+
"portalProps",
|
|
112
|
+
"withinPortal"
|
|
113
|
+
]);
|
|
114
|
+
const theme = core.useMantineTheme();
|
|
115
|
+
const data = notifications_store.useNotifications(store);
|
|
116
|
+
const forceUpdate = hooks.useForceUpdate();
|
|
117
|
+
const shouldReduceMotion = hooks.useReducedMotion();
|
|
118
|
+
const refs = React.useRef({});
|
|
119
|
+
const previousLength = React.useRef(0);
|
|
120
|
+
const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;
|
|
121
|
+
const duration = reduceMotion ? 1 : transitionDuration;
|
|
122
|
+
const getStyles = core.useStyles({
|
|
123
|
+
name: "Notifications",
|
|
124
|
+
classes: Notifications_module['default'],
|
|
125
|
+
props,
|
|
126
|
+
className,
|
|
127
|
+
style,
|
|
128
|
+
classNames,
|
|
129
|
+
styles,
|
|
130
|
+
unstyled,
|
|
131
|
+
vars,
|
|
132
|
+
varsResolver
|
|
133
|
+
});
|
|
134
|
+
hooks.useDidUpdate(() => {
|
|
135
|
+
if (data.notifications.length > previousLength.current) {
|
|
136
|
+
setTimeout(() => forceUpdate(), 0);
|
|
137
|
+
}
|
|
138
|
+
previousLength.current = data.notifications.length;
|
|
139
|
+
}, [notifications_store.notifications]);
|
|
140
|
+
const items = data.notifications.map((notification) => /* @__PURE__ */ React__default.createElement(
|
|
141
|
+
Transition,
|
|
142
|
+
{
|
|
143
|
+
key: notification.id,
|
|
144
|
+
timeout: duration,
|
|
145
|
+
onEnter: () => refs.current[notification.id].offsetHeight,
|
|
146
|
+
nodeRef: { current: refs.current[notification.id] }
|
|
147
|
+
},
|
|
148
|
+
(state) => /* @__PURE__ */ React__default.createElement(
|
|
149
|
+
NotificationContainer.NotificationContainer,
|
|
150
|
+
__spreadProps(__spreadValues({}, getStyles("notification", {
|
|
151
|
+
style: getNotificationStateStyles.getNotificationStateStyles({
|
|
152
|
+
state,
|
|
153
|
+
position,
|
|
154
|
+
transitionDuration: duration,
|
|
155
|
+
maxHeight: notificationMaxHeight
|
|
156
|
+
})
|
|
157
|
+
})), {
|
|
158
|
+
ref: (node) => {
|
|
159
|
+
refs.current[notification.id] = node;
|
|
160
|
+
},
|
|
161
|
+
data: notification,
|
|
162
|
+
onHide: (id) => notifications_store.hideNotification(id, store),
|
|
163
|
+
autoClose
|
|
164
|
+
})
|
|
165
|
+
)
|
|
166
|
+
));
|
|
167
|
+
return /* @__PURE__ */ React__default.createElement(core.OptionalPortal, __spreadValues({ withinPortal }, portalProps), /* @__PURE__ */ React__default.createElement(core.Box, __spreadValues(__spreadProps(__spreadValues({}, getStyles("root")), { ref }), others), /* @__PURE__ */ React__default.createElement(reactTransitionGroup.TransitionGroup, null, items)));
|
|
168
|
+
});
|
|
169
|
+
Notifications.classes = Notifications_module['default'];
|
|
170
|
+
Notifications.displayName = "@mantine/notifications/Notifications";
|
|
171
|
+
Notifications.show = notifications_store.notifications.show;
|
|
172
|
+
Notifications.hide = notifications_store.notifications.hide;
|
|
173
|
+
Notifications.update = notifications_store.notifications.update;
|
|
174
|
+
Notifications.clean = notifications_store.notifications.clean;
|
|
175
|
+
Notifications.cleanQueue = notifications_store.notifications.cleanQueue;
|
|
176
|
+
Notifications.updateState = notifications_store.notifications.updateState;
|
|
177
|
+
|
|
178
|
+
exports.Notifications = Notifications;
|
|
179
|
+
//# sourceMappingURL=Notifications.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Notifications.js","sources":["../src/Notifications.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport {\n Transition as _Transition,\n TransitionGroup,\n TransitionStatus,\n} from 'react-transition-group';\nimport { useForceUpdate, useDidUpdate, useReducedMotion } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n StylesApiProps,\n factory,\n ElementProps,\n useProps,\n useStyles,\n createVarsResolver,\n Factory,\n PortalProps,\n getDefaultZIndex,\n useMantineTheme,\n OptionalPortal,\n rem,\n} from '@mantine/core';\nimport {\n useNotifications,\n NotificationsStore,\n notificationsStore,\n hideNotification,\n notifications,\n} from './notifications.store';\nimport { NotificationContainer } from './NotificationContainer';\nimport { getNotificationStateStyles } from './get-notification-state-styles';\nimport classes from './Notifications.module.css';\n\nconst Transition: any = _Transition;\n\nexport type NotificationsStylesNames = 'root' | 'notification';\nexport type NotificationsVariant = string;\nexport type NotificationsCssVariables = {\n root:\n | '--notifications-z-index'\n | '--notifications-top'\n | '--notifications-right'\n | '--notifications-left'\n | '--notifications-left'\n | '--notifications-transform'\n | '--notifications-container-width';\n};\n\nexport interface NotificationsProps\n extends BoxProps,\n StylesApiProps<NotificationsFactory>,\n ElementProps<'div'> {\n /** Notifications position, `'bottom-right'` by default */\n position?:\n | 'top-left'\n | 'top-right'\n | 'top-center'\n | 'bottom-left'\n | 'bottom-right'\n | 'bottom-center';\n\n /** Auto close timeout for all notifications in ms, `false` to disable auto close, can be overwritten for individual notifications in `notifications.show` function, `4000` by defualt */\n autoClose?: number | false;\n\n /** Notification transition duration in ms, `250` by default */\n transitionDuration?: number;\n\n /** Notification width, cannot exceed 100%, `440` by default */\n containerWidth?: number | string;\n\n /** Notification `max-height`, used for transitions, `200` by default */\n notificationMaxHeight?: number | string;\n\n /** Maximum number of notifications displayed at a time, other new notifications will be added to queue, `5` by default */\n limit?: number;\n\n /** Notifications container z-index, `400` by default */\n zIndex?: React.CSSProperties['zIndex'];\n\n /** Props passed down to the `Portal` component */\n portalProps?: Omit<PortalProps, 'children'>;\n\n /** Store for notifications state, can be used to create multiple instances of notifications system in your application */\n store?: NotificationsStore;\n\n /** Determines whether notifications container should be rendered inside `Portal`, `true` by default */\n withinPortal?: boolean;\n}\n\nexport type NotificationsFactory = Factory<{\n props: NotificationsProps;\n ref: HTMLDivElement;\n stylesNames: NotificationsStylesNames;\n vars: NotificationsCssVariables;\n variant: NotificationsVariant;\n staticComponents: {\n show: typeof notifications.show;\n hide: typeof notifications.hide;\n update: typeof notifications.update;\n clean: typeof notifications.clean;\n cleanQueue: typeof notifications.cleanQueue;\n updateState: typeof notifications.updateState;\n };\n}>;\n\nconst defaultProps: Partial<NotificationsProps> = {\n position: 'bottom-right',\n autoClose: 4000,\n transitionDuration: 250,\n containerWidth: 440,\n notificationMaxHeight: 200,\n limit: 5,\n zIndex: getDefaultZIndex('overlay'),\n store: notificationsStore,\n withinPortal: true,\n};\n\nconst varsResolver = createVarsResolver<NotificationsFactory>(\n (_, { zIndex, position, containerWidth }) => {\n const [vertical, horizontal] = position!.split('-');\n\n return {\n root: {\n '--notifications-z-index': zIndex?.toString(),\n '--notifications-top': vertical === 'top' ? 'var(--mantine-spacing-md)' : undefined,\n '--notifications-bottom': vertical === 'bottom' ? 'var(--mantine-spacing-md)' : undefined,\n '--notifications-left':\n horizontal === 'left'\n ? 'var(--mantine-spacing-md)'\n : horizontal === 'center'\n ? '50%'\n : undefined,\n '--notifications-right': horizontal === 'right' ? 'var(--mantine-spacing-md)' : undefined,\n '--notifications-transform': horizontal === 'center' ? 'translateX(-50%)' : undefined,\n '--notifications-container-width': rem(containerWidth),\n },\n };\n }\n);\n\nexport const Notifications = factory<NotificationsFactory>((_props, ref) => {\n const props = useProps('Notifications', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n position,\n autoClose,\n transitionDuration,\n containerWidth,\n notificationMaxHeight,\n limit,\n zIndex,\n store,\n portalProps,\n withinPortal,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const data = useNotifications(store);\n const forceUpdate = useForceUpdate();\n const shouldReduceMotion = useReducedMotion();\n const refs = useRef<Record<string, HTMLDivElement>>({});\n const previousLength = useRef<number>(0);\n\n const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n const duration = reduceMotion ? 1 : transitionDuration;\n\n const getStyles = useStyles<NotificationsFactory>({\n name: 'Notifications',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\n });\n\n useDidUpdate(() => {\n if (data.notifications.length > previousLength.current) {\n setTimeout(() => forceUpdate(), 0);\n }\n previousLength.current = data.notifications.length;\n }, [notifications]);\n\n const items = data.notifications.map((notification) => (\n <Transition\n key={notification.id}\n timeout={duration}\n onEnter={() => refs.current[notification.id!].offsetHeight}\n nodeRef={{ current: refs.current[notification.id!] }}\n >\n {(state: TransitionStatus) => (\n <NotificationContainer\n {...getStyles('notification', {\n style: getNotificationStateStyles({\n state,\n position,\n transitionDuration: duration!,\n maxHeight: notificationMaxHeight!,\n }),\n })}\n ref={(node) => {\n refs.current[notification.id!] = node!;\n }}\n data={notification}\n onHide={(id) => hideNotification(id, store)}\n autoClose={autoClose!}\n />\n )}\n </Transition>\n ));\n\n return (\n <OptionalPortal withinPortal={withinPortal} {...portalProps}>\n <Box {...getStyles('root')} ref={ref} {...others}>\n <TransitionGroup>{items}</TransitionGroup>\n </Box>\n </OptionalPortal>\n );\n});\n\nNotifications.classes = classes;\nNotifications.displayName = '@mantine/notifications/Notifications';\nNotifications.show = notifications.show;\nNotifications.hide = notifications.hide;\nNotifications.update = notifications.update;\nNotifications.clean = notifications.clean;\nNotifications.cleanQueue = notifications.cleanQueue;\nNotifications.updateState = notifications.updateState;\n"],"names":["_Transition","getDefaultZIndex","notificationsStore","createVarsResolver","rem","factory","useProps","useMantineTheme","useNotifications","useForceUpdate","useReducedMotion","useRef","useStyles","classes","useDidUpdate","notifications","React","NotificationContainer","getNotificationStateStyles","hideNotification","OptionalPortal","Box","TransitionGroup"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Notifications.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-auto-close.js","sources":["../../src/get-auto-close/get-auto-close.ts"],"sourcesContent":["export function getAutoClose(\n autoClose: boolean | number | undefined,\n notificationAutoClose: boolean | number | undefined\n) {\n if (typeof notificationAutoClose === 'number') {\n return notificationAutoClose;\n }\n\n if (notificationAutoClose === false || autoClose === false) {\n return false;\n }\n\n return autoClose;\n}\n"],"names":[],"mappings":";;;;AAAO,SAAS,YAAY,CAAC,SAAS,EAAE,qBAAqB,EAAE;AAC/D,EAAE,IAAI,OAAO,qBAAqB,KAAK,QAAQ,EAAE;AACjD,IAAI,OAAO,qBAAqB,CAAC;AACjC,GAAG;AACH,EAAE,IAAI,qBAAqB,KAAK,KAAK,IAAI,SAAS,KAAK,KAAK,EAAE;AAC9D,IAAI,OAAO,KAAK,CAAC;AACjB,GAAG;AACH,EAAE,OAAO,SAAS,CAAC;AACnB;;;;"}
|
|
@@ -33,10 +33,10 @@ const noTransform = {
|
|
|
33
33
|
function getNotificationStateStyles({
|
|
34
34
|
state,
|
|
35
35
|
maxHeight,
|
|
36
|
-
|
|
36
|
+
position,
|
|
37
37
|
transitionDuration
|
|
38
38
|
}) {
|
|
39
|
-
const [vertical, horizontal] =
|
|
39
|
+
const [vertical, horizontal] = position.split("-");
|
|
40
40
|
const property = horizontal === "center" ? `${vertical}-center` : horizontal;
|
|
41
41
|
const commonStyles = {
|
|
42
42
|
opacity: 0,
|
|
@@ -64,5 +64,5 @@ function getNotificationStateStyles({
|
|
|
64
64
|
return __spreadValues(__spreadValues({}, commonStyles), transitionStyles[state]);
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
exports.
|
|
67
|
+
exports.getNotificationStateStyles = getNotificationStateStyles;
|
|
68
68
|
//# sourceMappingURL=get-notification-state-styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-notification-state-styles.js","sources":["../src/get-notification-state-styles.ts"],"sourcesContent":["import { TransitionStatus } from 'react-transition-group';\nimport type { NotificationsProps } from './Notifications';\n\ninterface NotificationStateStylesProps {\n state: TransitionStatus;\n maxHeight: number | string;\n position: NotificationsProps['position'];\n transitionDuration: number;\n}\n\nconst transforms = {\n left: 'translateX(-100%)',\n right: 'translateX(100%)',\n 'top-center': 'translateY(-100%)',\n 'bottom-center': 'translateY(100%)',\n};\n\nconst noTransform = {\n left: 'translateX(0)',\n right: 'translateX(0)',\n 'top-center': 'translateY(0)',\n 'bottom-center': 'translateY(0)',\n};\n\nexport function getNotificationStateStyles({\n state,\n maxHeight,\n position,\n transitionDuration,\n}: NotificationStateStylesProps): React.CSSProperties {\n const [vertical, horizontal] = position!.split('-');\n const property = (\n horizontal === 'center' ? `${vertical}-center` : horizontal\n ) as keyof typeof transforms;\n\n const commonStyles: React.CSSProperties = {\n opacity: 0,\n maxHeight,\n transform: transforms[property],\n transitionDuration: `${transitionDuration}ms, ${transitionDuration}ms, ${transitionDuration}ms`,\n transitionTimingFunction: 'cubic-bezier(.51,.3,0,1.21), cubic-bezier(.51,.3,0,1.21), linear',\n transitionProperty: 'opacity, transform, max-height',\n };\n\n const inState: React.CSSProperties = {\n opacity: 1,\n transform: noTransform[property],\n };\n\n const outState: React.CSSProperties = {\n opacity: 0,\n maxHeight: 0,\n transform: transforms[property],\n };\n\n const transitionStyles = {\n entering: inState,\n entered: inState,\n exiting: outState,\n exited: outState,\n };\n\n return { ...commonStyles, ...transitionStyles[state as keyof typeof transitionStyles] };\n}\n"],"names":[],"mappings":"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"}
|
package/cjs/index.css
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
.mantine-AvnBpXo {
|
|
2
|
+
width: calc(100% - var(--mantine-spacing-md) * 2);
|
|
3
|
+
position: fixed;
|
|
4
|
+
z-index: var(--notifications-z-index);
|
|
5
|
+
top: var(--notifications-top);
|
|
6
|
+
left: var(--notifications-left);
|
|
7
|
+
right: var(--notifications-right);
|
|
8
|
+
bottom: var(--notifications-bottom);
|
|
9
|
+
transform: var(--notifications-transform);
|
|
10
|
+
max-width: var(--notifications-container-width);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.mantine-V8o1rqk + .mantine-V8o1rqk {
|
|
14
|
+
margin-top: var(--mantine-spacing-md);
|
|
15
|
+
}
|
package/cjs/index.js
CHANGED
|
@@ -1,17 +1,22 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
'use strict';
|
|
2
3
|
|
|
3
4
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
5
|
|
|
5
|
-
var
|
|
6
|
-
var
|
|
6
|
+
var notifications_store = require('./notifications.store.js');
|
|
7
|
+
var Notifications = require('./Notifications.js');
|
|
7
8
|
|
|
8
9
|
|
|
9
10
|
|
|
11
|
+
exports.cleanNotifications = notifications_store.cleanNotifications;
|
|
12
|
+
exports.cleanNotificationsQueue = notifications_store.cleanNotificationsQueue;
|
|
13
|
+
exports.createNotificationsStore = notifications_store.createNotificationsStore;
|
|
14
|
+
exports.hideNotification = notifications_store.hideNotification;
|
|
15
|
+
exports.notifications = notifications_store.notifications;
|
|
16
|
+
exports.notificationsStore = notifications_store.notificationsStore;
|
|
17
|
+
exports.showNotification = notifications_store.showNotification;
|
|
18
|
+
exports.updateNotification = notifications_store.updateNotification;
|
|
19
|
+
exports.updateNotificationsState = notifications_store.updateNotificationsState;
|
|
20
|
+
exports.useNotifications = notifications_store.useNotifications;
|
|
10
21
|
exports.Notifications = Notifications.Notifications;
|
|
11
|
-
exports.cleanNotifications = events.cleanNotifications;
|
|
12
|
-
exports.cleanNotificationsQueue = events.cleanNotificationsQueue;
|
|
13
|
-
exports.hideNotification = events.hideNotification;
|
|
14
|
-
exports.notifications = events.notifications;
|
|
15
|
-
exports.showNotification = events.showNotification;
|
|
16
|
-
exports.updateNotification = events.updateNotification;
|
|
17
22
|
//# sourceMappingURL=index.js.map
|
package/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var hooks = require('@mantine/hooks');
|
|
6
|
+
var store = require('@mantine/store');
|
|
7
|
+
|
|
8
|
+
var __defProp = Object.defineProperty;
|
|
9
|
+
var __defProps = Object.defineProperties;
|
|
10
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
11
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
12
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
13
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
14
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
15
|
+
var __spreadValues = (a, b) => {
|
|
16
|
+
for (var prop in b || (b = {}))
|
|
17
|
+
if (__hasOwnProp.call(b, prop))
|
|
18
|
+
__defNormalProp(a, prop, b[prop]);
|
|
19
|
+
if (__getOwnPropSymbols)
|
|
20
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
21
|
+
if (__propIsEnum.call(b, prop))
|
|
22
|
+
__defNormalProp(a, prop, b[prop]);
|
|
23
|
+
}
|
|
24
|
+
return a;
|
|
25
|
+
};
|
|
26
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
27
|
+
const createNotificationsStore = () => store.createStore({
|
|
28
|
+
notifications: [],
|
|
29
|
+
queue: [],
|
|
30
|
+
limit: 5
|
|
31
|
+
});
|
|
32
|
+
const notificationsStore = createNotificationsStore();
|
|
33
|
+
const useNotifications = (store$1 = notificationsStore) => store.useStore(store$1);
|
|
34
|
+
function updateNotificationsState(store, update) {
|
|
35
|
+
const state = store.getState();
|
|
36
|
+
const notifications2 = update([...state.notifications, ...state.queue]);
|
|
37
|
+
store.setState({
|
|
38
|
+
notifications: notifications2.slice(0, state.limit),
|
|
39
|
+
queue: notifications2.slice(state.limit),
|
|
40
|
+
limit: state.limit
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
function showNotification(notification, store = notificationsStore) {
|
|
44
|
+
const id = notification.id || hooks.randomId();
|
|
45
|
+
updateNotificationsState(store, (notifications2) => {
|
|
46
|
+
if (notification.id && notifications2.some((n) => n.id === notification.id)) {
|
|
47
|
+
return notifications2;
|
|
48
|
+
}
|
|
49
|
+
return [...notifications2, __spreadProps(__spreadValues({}, notification), { id })];
|
|
50
|
+
});
|
|
51
|
+
return id;
|
|
52
|
+
}
|
|
53
|
+
function hideNotification(id, store = notificationsStore) {
|
|
54
|
+
updateNotificationsState(
|
|
55
|
+
store,
|
|
56
|
+
(notifications2) => notifications2.filter((notification) => {
|
|
57
|
+
var _a;
|
|
58
|
+
if (notification.id === id) {
|
|
59
|
+
(_a = notification.onClose) == null ? void 0 : _a.call(notification, notification);
|
|
60
|
+
return false;
|
|
61
|
+
}
|
|
62
|
+
return true;
|
|
63
|
+
})
|
|
64
|
+
);
|
|
65
|
+
return id;
|
|
66
|
+
}
|
|
67
|
+
function updateNotification(notification, store = notificationsStore) {
|
|
68
|
+
updateNotificationsState(
|
|
69
|
+
store,
|
|
70
|
+
(notifications2) => notifications2.map((item) => {
|
|
71
|
+
if (item.id === notification.id) {
|
|
72
|
+
return __spreadValues(__spreadValues({}, item), notification);
|
|
73
|
+
}
|
|
74
|
+
return item;
|
|
75
|
+
})
|
|
76
|
+
);
|
|
77
|
+
return notification.id;
|
|
78
|
+
}
|
|
79
|
+
function cleanNotifications(store = notificationsStore) {
|
|
80
|
+
updateNotificationsState(store, () => []);
|
|
81
|
+
}
|
|
82
|
+
function cleanNotificationsQueue(store = notificationsStore) {
|
|
83
|
+
updateNotificationsState(
|
|
84
|
+
store,
|
|
85
|
+
(notifications2) => notifications2.slice(0, store.getState().limit)
|
|
86
|
+
);
|
|
87
|
+
}
|
|
88
|
+
const notifications = {
|
|
89
|
+
show: showNotification,
|
|
90
|
+
hide: hideNotification,
|
|
91
|
+
update: updateNotification,
|
|
92
|
+
clean: cleanNotifications,
|
|
93
|
+
cleanQueue: cleanNotificationsQueue,
|
|
94
|
+
updateState: updateNotificationsState
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
exports.cleanNotifications = cleanNotifications;
|
|
98
|
+
exports.cleanNotificationsQueue = cleanNotificationsQueue;
|
|
99
|
+
exports.createNotificationsStore = createNotificationsStore;
|
|
100
|
+
exports.hideNotification = hideNotification;
|
|
101
|
+
exports.notifications = notifications;
|
|
102
|
+
exports.notificationsStore = notificationsStore;
|
|
103
|
+
exports.showNotification = showNotification;
|
|
104
|
+
exports.updateNotification = updateNotification;
|
|
105
|
+
exports.updateNotificationsState = updateNotificationsState;
|
|
106
|
+
exports.useNotifications = useNotifications;
|
|
107
|
+
//# sourceMappingURL=notifications.store.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"notifications.store.js","sources":["../src/notifications.store.ts"],"sourcesContent":["import { NotificationProps } from '@mantine/core';\nimport { randomId } from '@mantine/hooks';\nimport { createStore, useStore, MantineStore } from '@mantine/store';\n\nexport interface NotificationData extends Omit<NotificationProps, 'onClose'> {\n /** Notification id, can be used to close or update notification */\n id?: string;\n\n /** Notification message, required for all notifications */\n message: React.ReactNode;\n\n /** Determines whether notification should be closed automatically,\n * number is auto close timeout in ms, overrides `autoClose` from `Notifications`\n * */\n autoClose?: boolean | number;\n\n /** Called when notification closes */\n onClose?(props: NotificationData): void;\n\n /** Called when notification opens */\n onOpen?(props: NotificationData): void;\n}\n\nexport interface NotificationsState {\n notifications: NotificationData[];\n queue: NotificationData[];\n limit: number;\n}\n\nexport type NotificationsStore = MantineStore<NotificationsState>;\n\nexport const createNotificationsStore = () =>\n createStore<NotificationsState>({\n notifications: [],\n queue: [],\n limit: 5,\n });\n\nexport const notificationsStore = createNotificationsStore();\nexport const useNotifications = (store: NotificationsStore = notificationsStore) => useStore(store);\n\nexport function updateNotificationsState(\n store: NotificationsStore,\n update: (notifications: NotificationData[]) => NotificationData[]\n) {\n const state = store.getState();\n const notifications = update([...state.notifications, ...state.queue]);\n\n store.setState({\n notifications: notifications.slice(0, state.limit),\n queue: notifications.slice(state.limit),\n limit: state.limit,\n });\n}\n\nexport function showNotification(\n notification: NotificationData,\n store: NotificationsStore = notificationsStore\n) {\n const id = notification.id || randomId();\n\n updateNotificationsState(store, (notifications) => {\n if (notification.id && notifications.some((n) => n.id === notification.id)) {\n return notifications;\n }\n\n return [...notifications, { ...notification, id }];\n });\n\n return id;\n}\n\nexport function hideNotification(id: string, store: NotificationsStore = notificationsStore) {\n updateNotificationsState(store, (notifications) =>\n notifications.filter((notification) => {\n if (notification.id === id) {\n notification.onClose?.(notification);\n return false;\n }\n\n return true;\n })\n );\n\n return id;\n}\n\nexport function updateNotification(\n notification: NotificationData,\n store: NotificationsStore = notificationsStore\n) {\n updateNotificationsState(store, (notifications) =>\n notifications.map((item) => {\n if (item.id === notification.id) {\n return { ...item, ...notification };\n }\n\n return item;\n })\n );\n\n return notification.id;\n}\n\nexport function cleanNotifications(store: NotificationsStore = notificationsStore) {\n updateNotificationsState(store, () => []);\n}\n\nexport function cleanNotificationsQueue(store: NotificationsStore = notificationsStore) {\n updateNotificationsState(store, (notifications) =>\n notifications.slice(0, store.getState().limit)\n );\n}\n\nexport const notifications = {\n show: showNotification,\n hide: hideNotification,\n update: updateNotification,\n clean: cleanNotifications,\n cleanQueue: cleanNotificationsQueue,\n updateState: updateNotificationsState,\n} as const;\n"],"names":["createStore","store","useStore","randomId"],"mappings":"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"}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import React, { forwardRef, useRef, useEffect } from 'react';
|
|
2
|
+
import { Notification } from '@mantine/core';
|
|
3
|
+
import { getAutoClose } from './get-auto-close/get-auto-close.js';
|
|
4
|
+
|
|
5
|
+
var __defProp = Object.defineProperty;
|
|
6
|
+
var __defProps = Object.defineProperties;
|
|
7
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
8
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
+
var __objRest = (source, exclude) => {
|
|
25
|
+
var target = {};
|
|
26
|
+
for (var prop in source)
|
|
27
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
if (source != null && __getOwnPropSymbols)
|
|
30
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
31
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
32
|
+
target[prop] = source[prop];
|
|
33
|
+
}
|
|
34
|
+
return target;
|
|
35
|
+
};
|
|
36
|
+
const NotificationContainer = forwardRef(
|
|
37
|
+
(_a, ref) => {
|
|
38
|
+
var _b = _a, { data, onHide, autoClose } = _b, others = __objRest(_b, ["data", "onHide", "autoClose"]);
|
|
39
|
+
const _a2 = data, { autoClose: _autoClose, message } = _a2, notificationProps = __objRest(_a2, ["autoClose", "message"]);
|
|
40
|
+
const autoCloseDuration = getAutoClose(autoClose, data.autoClose);
|
|
41
|
+
const autoCloseTimeout = useRef();
|
|
42
|
+
const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout.current);
|
|
43
|
+
const handleHide = () => {
|
|
44
|
+
onHide(data.id);
|
|
45
|
+
cancelAutoClose();
|
|
46
|
+
};
|
|
47
|
+
const handleAutoClose = () => {
|
|
48
|
+
if (typeof autoCloseDuration === "number") {
|
|
49
|
+
autoCloseTimeout.current = window.setTimeout(handleHide, autoCloseDuration);
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
useEffect(() => {
|
|
53
|
+
var _a3;
|
|
54
|
+
(_a3 = data.onOpen) == null ? void 0 : _a3.call(data, data);
|
|
55
|
+
}, []);
|
|
56
|
+
useEffect(() => {
|
|
57
|
+
handleAutoClose();
|
|
58
|
+
return cancelAutoClose;
|
|
59
|
+
}, [autoCloseDuration]);
|
|
60
|
+
return /* @__PURE__ */ React.createElement(
|
|
61
|
+
Notification,
|
|
62
|
+
__spreadProps(__spreadValues(__spreadValues({}, others), notificationProps), {
|
|
63
|
+
onClose: handleHide,
|
|
64
|
+
ref,
|
|
65
|
+
onMouseEnter: cancelAutoClose,
|
|
66
|
+
onMouseLeave: handleAutoClose
|
|
67
|
+
}),
|
|
68
|
+
message
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
);
|
|
72
|
+
NotificationContainer.displayName = "@mantine/notifications/NotificationContainer";
|
|
73
|
+
|
|
74
|
+
export { NotificationContainer };
|
|
75
|
+
//# sourceMappingURL=NotificationContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NotificationContainer.js","sources":["../src/NotificationContainer.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useEffect } from 'react';\nimport { Notification, NotificationProps } from '@mantine/core';\nimport { NotificationData } from './notifications.store';\nimport { getAutoClose } from './get-auto-close/get-auto-close';\n\ninterface NotificationContainerProps extends NotificationProps {\n data: NotificationData;\n onHide(id: string): void;\n autoClose: number | false;\n}\n\nexport const NotificationContainer = forwardRef<HTMLDivElement, NotificationContainerProps>(\n ({ data, onHide, autoClose, ...others }, ref) => {\n const { autoClose: _autoClose, message, ...notificationProps } = data;\n const autoCloseDuration = getAutoClose(autoClose, data.autoClose);\n const autoCloseTimeout = useRef<number>();\n\n const cancelAutoClose = () => window.clearTimeout(autoCloseTimeout.current);\n\n const handleHide = () => {\n onHide(data.id!);\n cancelAutoClose();\n };\n\n const handleAutoClose = () => {\n if (typeof autoCloseDuration === 'number') {\n autoCloseTimeout.current = window.setTimeout(handleHide, autoCloseDuration);\n }\n };\n\n useEffect(() => {\n data.onOpen?.(data);\n }, []);\n\n useEffect(() => {\n handleAutoClose();\n return cancelAutoClose;\n }, [autoCloseDuration]);\n\n return (\n <Notification\n {...others}\n {...notificationProps}\n onClose={handleHide}\n ref={ref}\n onMouseEnter={cancelAutoClose}\n onMouseLeave={handleAutoClose}\n >\n {message}\n </Notification>\n );\n }\n);\n\nNotificationContainer.displayName = '@mantine/notifications/NotificationContainer';\n"],"names":[],"mappings":"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"}
|