@vuu-ui/vuu-notifications 2.1.18 → 2.1.19-beta.2
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/package.json +7 -10
- package/src/NotificationsCenter.js +185 -0
- package/src/NotificationsContext.js +7 -0
- package/src/NotificationsProvider.js +43 -0
- package/src/ToastNotification.css.js +132 -0
- package/src/ToastNotification.js +85 -0
- package/src/WorkspaceNotification.css.js +16 -0
- package/src/WorkspaceNotification.js +53 -0
- package/src/index.js +3 -0
- package/cjs/NotificationsCenter.js +0 -231
- package/cjs/NotificationsCenter.js.map +0 -1
- package/cjs/NotificationsContext.js +0 -13
- package/cjs/NotificationsContext.js.map +0 -1
- package/cjs/NotificationsProvider.js +0 -64
- package/cjs/NotificationsProvider.js.map +0 -1
- package/cjs/ToastNotification.css.js +0 -6
- package/cjs/ToastNotification.css.js.map +0 -1
- package/cjs/ToastNotification.js +0 -112
- package/cjs/ToastNotification.js.map +0 -1
- package/cjs/WorkspaceNotification.css.js +0 -6
- package/cjs/WorkspaceNotification.css.js.map +0 -1
- package/cjs/WorkspaceNotification.js +0 -52
- package/cjs/WorkspaceNotification.js.map +0 -1
- package/cjs/index.js +0 -13
- package/cjs/index.js.map +0 -1
- package/esm/NotificationsCenter.js +0 -229
- package/esm/NotificationsCenter.js.map +0 -1
- package/esm/NotificationsContext.js +0 -9
- package/esm/NotificationsContext.js.map +0 -1
- package/esm/NotificationsProvider.js +0 -61
- package/esm/NotificationsProvider.js.map +0 -1
- package/esm/ToastNotification.css.js +0 -4
- package/esm/ToastNotification.css.js.map +0 -1
- package/esm/ToastNotification.js +0 -110
- package/esm/ToastNotification.js.map +0 -1
- package/esm/WorkspaceNotification.css.js +0 -4
- package/esm/WorkspaceNotification.css.js.map +0 -1
- package/esm/WorkspaceNotification.js +0 -50
- package/esm/WorkspaceNotification.js.map +0 -1
- package/esm/index.js +0 -4
- package/esm/index.js.map +0 -1
|
@@ -1,229 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { saveLocalEntity, getUniqueId } from '@vuu-ui/vuu-utils';
|
|
3
|
-
import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
|
|
4
|
-
import { isToastNotification, isWorkspaceNotification } from './NotificationsContext.js';
|
|
5
|
-
import { ToastNotification } from './ToastNotification.js';
|
|
6
|
-
import { WorkspaceNotification } from './WorkspaceNotification.js';
|
|
7
|
-
|
|
8
|
-
const ZeroSize = { height: 0, width: 0 };
|
|
9
|
-
const toastContainerRightPadding = 20;
|
|
10
|
-
const toastOffsetTop = 60;
|
|
11
|
-
const toastDisplayDuration = 6e3;
|
|
12
|
-
const toastDisplayDurationPostHover = 2e3;
|
|
13
|
-
const toastContainerContentGap = 10;
|
|
14
|
-
const RuntimeToast = (toast) => {
|
|
15
|
-
const slidesIn = toast.animationType?.includes("slide-in") ? true : false;
|
|
16
|
-
return {
|
|
17
|
-
...toast,
|
|
18
|
-
hidden: slidesIn,
|
|
19
|
-
id: getUniqueId(),
|
|
20
|
-
left: document.body.clientWidth,
|
|
21
|
-
opacity: slidesIn ? void 0 : 0,
|
|
22
|
-
size: ZeroSize
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
|
-
const NotificationsCenter = ({
|
|
26
|
-
notificationsContext,
|
|
27
|
-
startupToastNotification
|
|
28
|
-
}) => {
|
|
29
|
-
const toastNotifications = useMemo(
|
|
30
|
-
() => startupToastNotification ? [RuntimeToast(startupToastNotification)] : [],
|
|
31
|
-
[startupToastNotification]
|
|
32
|
-
);
|
|
33
|
-
const [workspaceNotification, setWorkspaceNotification] = useState(null);
|
|
34
|
-
const hoveredToastRef = useRef(void 0);
|
|
35
|
-
const notificationsRef = useRef(toastNotifications);
|
|
36
|
-
const [notifications, _setNotifications] = useState(toastNotifications);
|
|
37
|
-
const setNotifications = useCallback(
|
|
38
|
-
(notifications2) => {
|
|
39
|
-
_setNotifications(notificationsRef.current = notifications2);
|
|
40
|
-
},
|
|
41
|
-
[]
|
|
42
|
-
);
|
|
43
|
-
const showNotification = useCallback(
|
|
44
|
-
(notification) => {
|
|
45
|
-
if (isToastNotification(notification)) {
|
|
46
|
-
if (notification.renderPostRefresh) {
|
|
47
|
-
saveLocalEntity("startup-notification", {
|
|
48
|
-
...notification,
|
|
49
|
-
expires: +/* @__PURE__ */ new Date() + 1e4
|
|
50
|
-
});
|
|
51
|
-
} else {
|
|
52
|
-
setNotifications(
|
|
53
|
-
notificationsRef.current.concat(RuntimeToast(notification))
|
|
54
|
-
);
|
|
55
|
-
}
|
|
56
|
-
} else if (isWorkspaceNotification(notification)) {
|
|
57
|
-
setWorkspaceNotification(
|
|
58
|
-
/* @__PURE__ */ jsx(WorkspaceNotification, { children: notification.content })
|
|
59
|
-
);
|
|
60
|
-
} else {
|
|
61
|
-
throw Error("[NotificationsCenter] invalid notification received");
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
[setNotifications]
|
|
65
|
-
);
|
|
66
|
-
const hideNotification = useCallback(() => {
|
|
67
|
-
setWorkspaceNotification(null);
|
|
68
|
-
}, []);
|
|
69
|
-
useMemo(() => {
|
|
70
|
-
notificationsContext.setNotify(showNotification, hideNotification);
|
|
71
|
-
}, [hideNotification, notificationsContext, showNotification]);
|
|
72
|
-
const onMeasured = useCallback(
|
|
73
|
-
(id, height, width) => {
|
|
74
|
-
let scheduledUpdate = void 0;
|
|
75
|
-
const pageWidth = document.body.clientWidth;
|
|
76
|
-
setNotifications(
|
|
77
|
-
notificationsRef.current.map((n) => {
|
|
78
|
-
if (n.id === id) {
|
|
79
|
-
const slideIn = n.animationType?.includes("slide-in");
|
|
80
|
-
const newToast = {
|
|
81
|
-
...n,
|
|
82
|
-
hidden: slideIn ? true : false,
|
|
83
|
-
left: slideIn ? pageWidth + width - toastContainerRightPadding : pageWidth - width - toastContainerRightPadding,
|
|
84
|
-
size: { height, width },
|
|
85
|
-
transitionStatus: "entry"
|
|
86
|
-
};
|
|
87
|
-
if (slideIn) {
|
|
88
|
-
scheduledUpdate = {
|
|
89
|
-
...newToast,
|
|
90
|
-
hidden: false,
|
|
91
|
-
left: pageWidth - width - toastContainerRightPadding
|
|
92
|
-
};
|
|
93
|
-
} else {
|
|
94
|
-
scheduledUpdate = {
|
|
95
|
-
...newToast,
|
|
96
|
-
opacity: 1
|
|
97
|
-
};
|
|
98
|
-
}
|
|
99
|
-
return newToast;
|
|
100
|
-
} else {
|
|
101
|
-
return n;
|
|
102
|
-
}
|
|
103
|
-
})
|
|
104
|
-
);
|
|
105
|
-
if (scheduledUpdate) {
|
|
106
|
-
const updateNotifications = notificationsRef.current.map((n) => {
|
|
107
|
-
if (n.id === scheduledUpdate?.id) {
|
|
108
|
-
return scheduledUpdate;
|
|
109
|
-
} else {
|
|
110
|
-
return n;
|
|
111
|
-
}
|
|
112
|
-
});
|
|
113
|
-
requestAnimationFrame(() => {
|
|
114
|
-
setNotifications(updateNotifications);
|
|
115
|
-
});
|
|
116
|
-
}
|
|
117
|
-
},
|
|
118
|
-
[setNotifications]
|
|
119
|
-
);
|
|
120
|
-
useEffect(() => {
|
|
121
|
-
document.body.addEventListener("transitionend", (e) => {
|
|
122
|
-
const { classList, id } = e.target;
|
|
123
|
-
if (classList?.contains("vuuToastNotification")) {
|
|
124
|
-
const notification = notificationsRef.current.find((n) => n.id === id);
|
|
125
|
-
if (notification?.transitionStatus === "exit") {
|
|
126
|
-
setNotifications(notificationsRef.current.filter((n) => n.id !== id));
|
|
127
|
-
} else if (notification?.dismissal !== "manual") {
|
|
128
|
-
setTimeout(() => {
|
|
129
|
-
if (notification && hoveredToastRef.current !== id) {
|
|
130
|
-
const pageWidth = document.body.clientWidth;
|
|
131
|
-
setNotifications(
|
|
132
|
-
notificationsRef.current.map((n) => {
|
|
133
|
-
if (n.id === id) {
|
|
134
|
-
if (n.animationType?.includes("slide-out")) {
|
|
135
|
-
return {
|
|
136
|
-
...n,
|
|
137
|
-
transitionStatus: "exit",
|
|
138
|
-
left: pageWidth + toastContainerRightPadding
|
|
139
|
-
};
|
|
140
|
-
} else {
|
|
141
|
-
return {
|
|
142
|
-
...n,
|
|
143
|
-
transitionStatus: "exit",
|
|
144
|
-
opacity: 0
|
|
145
|
-
};
|
|
146
|
-
}
|
|
147
|
-
} else {
|
|
148
|
-
return n;
|
|
149
|
-
}
|
|
150
|
-
}).filter((v) => v !== null)
|
|
151
|
-
);
|
|
152
|
-
}
|
|
153
|
-
}, toastDisplayDuration);
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
});
|
|
157
|
-
}, [setNotifications]);
|
|
158
|
-
const handleDismiss = useCallback(
|
|
159
|
-
(id) => {
|
|
160
|
-
if (id) {
|
|
161
|
-
setNotifications(notificationsRef.current.filter((n) => n.id !== id));
|
|
162
|
-
}
|
|
163
|
-
},
|
|
164
|
-
[setNotifications]
|
|
165
|
-
);
|
|
166
|
-
const handleHoverEntry = useCallback((id) => {
|
|
167
|
-
hoveredToastRef.current = id;
|
|
168
|
-
}, []);
|
|
169
|
-
const handleHoverExit = useCallback(
|
|
170
|
-
(id) => {
|
|
171
|
-
hoveredToastRef.current = void 0;
|
|
172
|
-
const notification = notificationsRef.current.find((n) => n.id === id);
|
|
173
|
-
setTimeout(() => {
|
|
174
|
-
if (notification) {
|
|
175
|
-
const pageWidth = document.body.clientWidth;
|
|
176
|
-
setNotifications(
|
|
177
|
-
notificationsRef.current.map((n) => {
|
|
178
|
-
if (n.id === id) {
|
|
179
|
-
if (n.animationType?.includes("slide-out")) {
|
|
180
|
-
return {
|
|
181
|
-
...n,
|
|
182
|
-
transitionStatus: "exit",
|
|
183
|
-
left: pageWidth + toastContainerRightPadding
|
|
184
|
-
};
|
|
185
|
-
} else {
|
|
186
|
-
return {
|
|
187
|
-
...n,
|
|
188
|
-
transitionStatus: "exit",
|
|
189
|
-
opacity: 0
|
|
190
|
-
};
|
|
191
|
-
}
|
|
192
|
-
} else {
|
|
193
|
-
return n;
|
|
194
|
-
}
|
|
195
|
-
}).filter((v) => v !== null)
|
|
196
|
-
);
|
|
197
|
-
}
|
|
198
|
-
}, toastDisplayDurationPostHover);
|
|
199
|
-
},
|
|
200
|
-
[setNotifications]
|
|
201
|
-
);
|
|
202
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
203
|
-
workspaceNotification,
|
|
204
|
-
notifications.map(
|
|
205
|
-
({ hidden, id, left = 0, opacity, size, ...toast }, i) => {
|
|
206
|
-
const height = size ? size.height : 80;
|
|
207
|
-
return /* @__PURE__ */ jsx(
|
|
208
|
-
ToastNotification,
|
|
209
|
-
{
|
|
210
|
-
hidden,
|
|
211
|
-
id,
|
|
212
|
-
left,
|
|
213
|
-
notification: toast,
|
|
214
|
-
onHoverEntry: handleHoverEntry,
|
|
215
|
-
onHoverExit: handleHoverExit,
|
|
216
|
-
onMeasured,
|
|
217
|
-
onDismiss: handleDismiss,
|
|
218
|
-
opacity,
|
|
219
|
-
top: toastOffsetTop + (height + toastContainerContentGap) * i
|
|
220
|
-
},
|
|
221
|
-
id
|
|
222
|
-
);
|
|
223
|
-
}
|
|
224
|
-
)
|
|
225
|
-
] });
|
|
226
|
-
};
|
|
227
|
-
|
|
228
|
-
export { NotificationsCenter };
|
|
229
|
-
//# sourceMappingURL=NotificationsCenter.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationsCenter.js","sources":["../../../packages/vuu-notifications/src/NotificationsCenter.tsx"],"sourcesContent":["import { getUniqueId, saveLocalEntity } from \"@vuu-ui/vuu-utils\";\nimport {\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport {\n isToastNotification,\n isWorkspaceNotification,\n Notification,\n NotificationsContext,\n ToastNotificationDescriptor,\n} from \"./NotificationsContext\";\nimport { ToastHoverHandler, ToastNotification } from \"./ToastNotification\";\nimport { WorkspaceNotification } from \"./WorkspaceNotification\";\nimport { MeasuredSize } from \"@vuu-ui/vuu-ui-controls\";\n\nconst ZeroSize: MeasuredSize = { height: 0, width: 0 };\nconst toastContainerRightPadding = 20;\nexport interface NotificationsCenterProps {\n notificationsContext: NotificationsContext;\n startupToastNotification?: ToastNotificationDescriptor;\n}\n\ntype TransitionStatus = \"entry\" | \"exit\";\ninterface RuntimeToastNotification extends ToastNotificationDescriptor {\n hidden: boolean;\n id: string;\n left: number;\n opacity?: number;\n size: MeasuredSize;\n transitionStatus?: TransitionStatus;\n}\n\n// animation times in milliseconds\nconst toastOffsetTop = 60;\nconst toastDisplayDuration = 6000;\nconst toastDisplayDurationPostHover = 2000;\n\nconst toastContainerContentGap = 10;\n// rightPadding is used together with the toastWidth to compute the toast position\n// at the beginning and at the end of the animation\n\nconst RuntimeToast = (\n toast: ToastNotificationDescriptor,\n): RuntimeToastNotification => {\n const slidesIn = toast.animationType?.includes(\"slide-in\") ? true : false;\n return {\n ...toast,\n hidden: slidesIn,\n id: getUniqueId(),\n left: document.body.clientWidth,\n opacity: slidesIn ? undefined : 0,\n size: ZeroSize,\n };\n};\n\nexport const NotificationsCenter = ({\n notificationsContext,\n startupToastNotification,\n}: NotificationsCenterProps) => {\n const toastNotifications = useMemo<RuntimeToastNotification[]>(\n () =>\n startupToastNotification ? [RuntimeToast(startupToastNotification)] : [],\n [startupToastNotification],\n );\n\n const [workspaceNotification, setWorkspaceNotification] =\n useState<ReactNode>(null);\n\n const hoveredToastRef = useRef<string | undefined>(undefined);\n const notificationsRef =\n useRef<RuntimeToastNotification[]>(toastNotifications);\n const [notifications, _setNotifications] =\n useState<RuntimeToastNotification[]>(toastNotifications);\n\n const setNotifications = useCallback(\n (notifications: RuntimeToastNotification[]) => {\n _setNotifications((notificationsRef.current = notifications));\n },\n [],\n );\n\n const showNotification = useCallback(\n (notification: Notification) => {\n if (isToastNotification(notification)) {\n if (notification.renderPostRefresh) {\n saveLocalEntity(\"startup-notification\", {\n ...notification,\n expires: +new Date() + 10000,\n });\n } else {\n setNotifications(\n notificationsRef.current.concat(RuntimeToast(notification)),\n );\n }\n } else if (isWorkspaceNotification(notification)) {\n setWorkspaceNotification(\n <WorkspaceNotification>{notification.content}</WorkspaceNotification>,\n );\n } else {\n throw Error(\"[NotificationsCenter] invalid notification received\");\n }\n },\n [setNotifications],\n );\n\n const hideNotification = useCallback(() => {\n setWorkspaceNotification(null);\n }, []);\n\n useMemo(() => {\n notificationsContext.setNotify(showNotification, hideNotification);\n }, [hideNotification, notificationsContext, showNotification]);\n\n const onMeasured = useCallback(\n (id: string, height: number, width: number) => {\n let scheduledUpdate: RuntimeToastNotification | undefined = undefined;\n const pageWidth = document.body.clientWidth;\n\n setNotifications(\n notificationsRef.current.map((n) => {\n if (n.id === id) {\n const slideIn = n.animationType?.includes(\"slide-in\");\n const newToast: RuntimeToastNotification = {\n ...n,\n hidden: slideIn ? true : false,\n left: slideIn\n ? pageWidth + width - toastContainerRightPadding\n : pageWidth - width - toastContainerRightPadding,\n size: { height, width },\n transitionStatus: \"entry\",\n };\n\n if (slideIn) {\n scheduledUpdate = {\n ...newToast,\n hidden: false,\n left: pageWidth - width - toastContainerRightPadding,\n };\n } else {\n scheduledUpdate = {\n ...newToast,\n opacity: 1,\n };\n }\n\n return newToast;\n } else {\n return n;\n }\n }),\n );\n\n if (scheduledUpdate) {\n const updateNotifications = notificationsRef.current.map((n) => {\n if (n.id === scheduledUpdate?.id) {\n return scheduledUpdate;\n } else {\n return n;\n }\n });\n requestAnimationFrame(() => {\n setNotifications(updateNotifications);\n });\n }\n },\n [setNotifications],\n );\n\n useEffect(() => {\n // This handles both the entry transition and the exit transition\n document.body.addEventListener(\"transitionend\", (e) => {\n const { classList, id } = e.target as HTMLElement;\n if (classList?.contains(\"vuuToastNotification\")) {\n const notification = notificationsRef.current.find((n) => n.id === id);\n if (notification?.transitionStatus === \"exit\") {\n setNotifications(notificationsRef.current.filter((n) => n.id !== id));\n } else if (notification?.dismissal !== \"manual\") {\n setTimeout(() => {\n // In case notification has been manually cancelled ...\n if (notification && hoveredToastRef.current !== id) {\n const pageWidth = document.body.clientWidth;\n setNotifications(\n notificationsRef.current\n .map((n) => {\n if (n.id === id) {\n if (n.animationType?.includes(\"slide-out\")) {\n return {\n ...n,\n transitionStatus: \"exit\" as TransitionStatus,\n left: pageWidth + toastContainerRightPadding,\n };\n } else {\n return {\n ...n,\n transitionStatus: \"exit\" as TransitionStatus,\n opacity: 0,\n };\n }\n } else {\n return n;\n }\n })\n .filter((v) => v !== null),\n );\n }\n }, toastDisplayDuration);\n }\n }\n });\n }, [setNotifications]);\n\n const handleDismiss = useCallback(\n (id?: string) => {\n if (id) {\n setNotifications(notificationsRef.current.filter((n) => n.id !== id));\n }\n },\n [setNotifications],\n );\n\n const handleHoverEntry = useCallback<ToastHoverHandler>((id) => {\n hoveredToastRef.current = id;\n }, []);\n\n const handleHoverExit = useCallback<ToastHoverHandler>(\n (id) => {\n hoveredToastRef.current = undefined;\n const notification = notificationsRef.current.find((n) => n.id === id);\n setTimeout(() => {\n // In case notification has been manually cancelled ...\n if (notification) {\n const pageWidth = document.body.clientWidth;\n setNotifications(\n notificationsRef.current\n .map((n) => {\n if (n.id === id) {\n if (n.animationType?.includes(\"slide-out\")) {\n return {\n ...n,\n transitionStatus: \"exit\" as TransitionStatus,\n left: pageWidth + toastContainerRightPadding,\n };\n } else {\n return {\n ...n,\n transitionStatus: \"exit\" as TransitionStatus,\n opacity: 0,\n };\n }\n } else {\n return n;\n }\n })\n .filter((v) => v !== null),\n );\n }\n }, toastDisplayDurationPostHover);\n },\n [setNotifications],\n );\n return (\n <>\n {workspaceNotification}\n {notifications.map(\n ({ hidden, id, left = 0, opacity, size, ...toast }, i) => {\n const height = size ? size.height : 80;\n return (\n <ToastNotification\n hidden={hidden}\n id={id}\n key={id}\n left={left}\n notification={toast}\n onHoverEntry={handleHoverEntry}\n onHoverExit={handleHoverExit}\n onMeasured={onMeasured}\n onDismiss={handleDismiss}\n opacity={opacity}\n top={toastOffsetTop + (height + toastContainerContentGap) * i}\n />\n );\n },\n )}\n </>\n );\n};\n"],"names":["notifications"],"mappings":"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"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
const NotificationType = {
|
|
2
|
-
Toast: "toast",
|
|
3
|
-
Workspace: "workspace"
|
|
4
|
-
};
|
|
5
|
-
const isToastNotification = (n) => n.type === NotificationType.Toast;
|
|
6
|
-
const isWorkspaceNotification = (n) => n.type === NotificationType.Workspace;
|
|
7
|
-
|
|
8
|
-
export { NotificationType, isToastNotification, isWorkspaceNotification };
|
|
9
|
-
//# sourceMappingURL=NotificationsContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationsContext.js","sources":["../../../packages/vuu-notifications/src/NotificationsContext.tsx"],"sourcesContent":["import { type ValidationStatus } from \"@salt-ds/core\";\nimport { ValueOf } from \"@vuu-ui/vuu-utils\";\nimport { ReactNode } from \"react\";\n\nexport type DispatchShowNotification = (notification: Notification) => void;\nexport type DispatchHideNotification = () => void;\n\nexport const NotificationType = {\n Toast: \"toast\",\n Workspace: \"workspace\",\n} as const;\n\nexport type NotificationType = ValueOf<typeof NotificationType>;\n\nexport type DismissalStyle = \"automatic\" | \"manual\";\n\nexport type NotificationAnimationType =\n | \"slide-in\"\n | \"slide-out\"\n | \"slide-in,slide-out\";\n\ninterface NotificationDescriptorBase<T extends NotificationType> {\n animationType?: NotificationAnimationType;\n /**\n * 'automatic' dismissal means the Notification will be removed after a configurable delay\n * (6 seconds by default). 'manual' means a close button will be rendered and user must\n * manually dismiss by clicking the close button.\n */\n dismissal?: DismissalStyle;\n /**\n * A custom icon can be provided or false can be used to suppress rendering of any icon.\n * Default icons will be rendered for the different status values.\n */\n icon?: string | false;\n renderPostRefresh?: boolean;\n showCloseButton?: boolean;\n status: ValidationStatus;\n type: T;\n}\n\nexport interface ToastNotificationDescriptor\n extends NotificationDescriptorBase<\"toast\"> {\n content?: ReactNode;\n header: string;\n}\n\nexport interface WorkspaceNotificationDescriptor\n extends NotificationDescriptorBase<\"workspace\"> {\n content: ReactNode;\n}\n\nexport type Notification =\n | ToastNotificationDescriptor\n | WorkspaceNotificationDescriptor;\n\nexport const isToastNotification = (\n n: Notification,\n): n is ToastNotificationDescriptor => n.type === NotificationType.Toast;\n\nexport const isWorkspaceNotification = (\n n: Notification,\n): n is WorkspaceNotificationDescriptor =>\n n.type === NotificationType.Workspace;\n\nexport type NotificationsContext = {\n hideNotification: DispatchHideNotification;\n showNotification: DispatchShowNotification;\n setNotify: (\n showNotificationDispatcher: DispatchShowNotification,\n hideNotificationDispatcher: DispatchHideNotification,\n ) => void;\n};\n"],"names":[],"mappings":"AAOO,MAAM,gBAAmB,GAAA;AAAA,EAC9B,KAAO,EAAA,OAAA;AAAA,EACP,SAAW,EAAA;AACb;AA6CO,MAAM,mBAAsB,GAAA,CACjC,CACqC,KAAA,CAAA,CAAE,SAAS,gBAAiB,CAAA;AAE5D,MAAM,uBAA0B,GAAA,CACrC,CAEA,KAAA,CAAA,CAAE,SAAS,gBAAiB,CAAA;;;;"}
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import React, { useContext, useMemo } from 'react';
|
|
3
|
-
import { NotificationsCenter } from './NotificationsCenter.js';
|
|
4
|
-
import { getLocalEntity } from '@vuu-ui/vuu-utils';
|
|
5
|
-
|
|
6
|
-
var __defProp = Object.defineProperty;
|
|
7
|
-
var __typeError = (msg) => {
|
|
8
|
-
throw TypeError(msg);
|
|
9
|
-
};
|
|
10
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
11
|
-
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
12
|
-
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
13
|
-
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
14
|
-
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
15
|
-
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
|
|
16
|
-
var _showNotification, _hideNotification;
|
|
17
|
-
class NotificationsContextObject {
|
|
18
|
-
constructor() {
|
|
19
|
-
__privateAdd(this, _showNotification, () => console.log("have you forgotten to provide a NotificationsCenter?"));
|
|
20
|
-
__privateAdd(this, _hideNotification, () => console.log("have you forgotten to provide a NotificationsCenter?"));
|
|
21
|
-
// We want the public notify method to be stable, setNotify call should not trigger re-renders
|
|
22
|
-
__publicField(this, "showNotification", (notification) => __privateGet(this, _showNotification).call(this, notification));
|
|
23
|
-
__publicField(this, "hideNotification", () => __privateGet(this, _hideNotification).call(this));
|
|
24
|
-
__publicField(this, "setNotify", (showNotificationDispatcher, hideNotificationDispatcher) => {
|
|
25
|
-
__privateSet(this, _showNotification, showNotificationDispatcher);
|
|
26
|
-
__privateSet(this, _hideNotification, hideNotificationDispatcher);
|
|
27
|
-
});
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
_showNotification = new WeakMap();
|
|
31
|
-
_hideNotification = new WeakMap();
|
|
32
|
-
const NotificationsContext = React.createContext(
|
|
33
|
-
new NotificationsContextObject()
|
|
34
|
-
);
|
|
35
|
-
const NotificationsProvider = (props) => {
|
|
36
|
-
const context = useContext(NotificationsContext);
|
|
37
|
-
const startupToastNotification = useMemo(() => {
|
|
38
|
-
const toast = getLocalEntity("startup-notification", true);
|
|
39
|
-
if (toast && toast.expires >= +Date.now()) {
|
|
40
|
-
const { expires, ...toastDescriptor } = toast;
|
|
41
|
-
return toastDescriptor;
|
|
42
|
-
}
|
|
43
|
-
}, []);
|
|
44
|
-
return /* @__PURE__ */ jsxs(NotificationsContext.Provider, { value: context, children: [
|
|
45
|
-
/* @__PURE__ */ jsx(
|
|
46
|
-
NotificationsCenter,
|
|
47
|
-
{
|
|
48
|
-
startupToastNotification,
|
|
49
|
-
notificationsContext: context
|
|
50
|
-
}
|
|
51
|
-
),
|
|
52
|
-
props.children
|
|
53
|
-
] });
|
|
54
|
-
};
|
|
55
|
-
const useNotifications = () => {
|
|
56
|
-
const { hideNotification, showNotification } = useContext(NotificationsContext);
|
|
57
|
-
return { hideNotification, showNotification };
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
export { NotificationsProvider, useNotifications };
|
|
61
|
-
//# sourceMappingURL=NotificationsProvider.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationsProvider.js","sources":["../../../packages/vuu-notifications/src/NotificationsProvider.tsx"],"sourcesContent":["import React, { ReactElement, useContext, useMemo } from \"react\";\nimport { NotificationsCenter } from \"./NotificationsCenter\";\nimport {\n DispatchHideNotification,\n DispatchShowNotification,\n type NotificationsContext,\n ToastNotificationDescriptor,\n} from \"./NotificationsContext\";\nimport { getLocalEntity } from \"@vuu-ui/vuu-utils\";\n\ninterface ToastWithExpiry extends ToastNotificationDescriptor {\n expires: number;\n}\n\n/*\n The Context is not exposed outside this module, only the notify\n prop can be accessed via the useNotifications hook.\n The NotificationsCenter receives the full context object and\n sets the notify method. State management around dispatched\n notifications is handled entirely within the NotificationsCenter,\n avoiding rerendering our children when notifications are \n dispatched.\n*/\nclass NotificationsContextObject implements NotificationsContext {\n #showNotification: DispatchShowNotification = () =>\n console.log(\"have you forgotten to provide a NotificationsCenter?\");\n #hideNotification: DispatchHideNotification = () =>\n console.log(\"have you forgotten to provide a NotificationsCenter?\");\n // We want the public notify method to be stable, setNotify call should not trigger re-renders\n showNotification: DispatchShowNotification = (notification) =>\n this.#showNotification(notification);\n hideNotification: DispatchHideNotification = () => this.#hideNotification();\n setNotify = (\n showNotificationDispatcher: DispatchShowNotification,\n hideNotificationDispatcher: DispatchHideNotification,\n ) => {\n this.#showNotification = showNotificationDispatcher;\n this.#hideNotification = hideNotificationDispatcher;\n };\n}\n\nconst NotificationsContext = React.createContext<NotificationsContext>(\n new NotificationsContextObject(),\n);\n\nexport const NotificationsProvider = (props: {\n children: ReactElement | ReactElement[];\n}) => {\n const context = useContext(NotificationsContext);\n const startupToastNotification = useMemo<\n ToastNotificationDescriptor | undefined\n >(() => {\n const toast = getLocalEntity<ToastWithExpiry>(\"startup-notification\", true);\n if (toast && toast.expires >= +Date.now()) {\n const { expires, ...toastDescriptor } = toast;\n return toastDescriptor;\n }\n }, []);\n return (\n <NotificationsContext.Provider value={context}>\n <NotificationsCenter\n startupToastNotification={startupToastNotification}\n notificationsContext={context}\n />\n {props.children}\n </NotificationsContext.Provider>\n );\n};\n\nexport const useNotifications = () => {\n const { hideNotification, showNotification } =\n useContext(NotificationsContext);\n return { hideNotification, showNotification };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,IAAA,iBAAA,EAAA,iBAAA;AAuBA,MAAM,0BAA2D,CAAA;AAAA,EAAjE,WAAA,GAAA;AACE,IAA8C,YAAA,CAAA,IAAA,EAAA,iBAAA,EAAA,MAC5C,OAAQ,CAAA,GAAA,CAAI,sDAAsD,CAAA,CAAA;AACpE,IAA8C,YAAA,CAAA,IAAA,EAAA,iBAAA,EAAA,MAC5C,OAAQ,CAAA,GAAA,CAAI,sDAAsD,CAAA,CAAA;AAEpE;AAAA,IAAA,aAAA,CAAA,IAAA,EAAA,kBAAA,EAA6C,CAAC,YAAA,KAC5C,YAAK,CAAA,IAAA,EAAA,iBAAA,CAAA,CAAL,IAAuB,CAAA,IAAA,EAAA,YAAA,CAAA,CAAA;AACzB,IAA6C,aAAA,CAAA,IAAA,EAAA,kBAAA,EAAA,MAAM,mBAAK,iBAAL,CAAA,CAAA,IAAA,CAAA,IAAA,CAAA,CAAA;AACnD,IAAY,aAAA,CAAA,IAAA,EAAA,WAAA,EAAA,CACV,4BACA,0BACG,KAAA;AACH,MAAA,YAAA,CAAA,IAAA,EAAK,iBAAoB,EAAA,0BAAA,CAAA;AACzB,MAAA,YAAA,CAAA,IAAA,EAAK,iBAAoB,EAAA,0BAAA,CAAA;AAAA,KAC3B,CAAA;AAAA;AACF;AAfE,iBAAA,GAAA,IAAA,OAAA,EAAA;AAEA,iBAAA,GAAA,IAAA,OAAA,EAAA;AAeF,MAAM,uBAAuB,KAAM,CAAA,aAAA;AAAA,EACjC,IAAI,0BAA2B;AACjC,CAAA;AAEa,MAAA,qBAAA,GAAwB,CAAC,KAEhC,KAAA;AACJ,EAAM,MAAA,OAAA,GAAU,WAAW,oBAAoB,CAAA;AAC/C,EAAM,MAAA,wBAAA,GAA2B,QAE/B,MAAM;AACN,IAAM,MAAA,KAAA,GAAQ,cAAgC,CAAA,sBAAA,EAAwB,IAAI,CAAA;AAC1E,IAAA,IAAI,SAAS,KAAM,CAAA,OAAA,IAAW,CAAC,IAAA,CAAK,KAAO,EAAA;AACzC,MAAA,MAAM,EAAE,OAAA,EAAS,GAAG,eAAA,EAAoB,GAAA,KAAA;AACxC,MAAO,OAAA,eAAA;AAAA;AACT,GACF,EAAG,EAAE,CAAA;AACL,EAAA,uBACG,IAAA,CAAA,oBAAA,CAAqB,QAArB,EAAA,EAA8B,OAAO,OACpC,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,wBAAA;AAAA,QACA,oBAAsB,EAAA;AAAA;AAAA,KACxB;AAAA,IACC,KAAM,CAAA;AAAA,GACT,EAAA,CAAA;AAEJ;AAEO,MAAM,mBAAmB,MAAM;AACpC,EAAA,MAAM,EAAE,gBAAA,EAAkB,gBAAiB,EAAA,GACzC,WAAW,oBAAoB,CAAA;AACjC,EAAO,OAAA,EAAE,kBAAkB,gBAAiB,EAAA;AAC9C;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var toastNotificationCss = ".vuuToastNotification {\n --toast-transition-duration: .4s;\n --padding-base: var(--vuuToast-padding, var(--salt-spacing-300));\n\n align-items: center;;\n background: var(--vuuToast-background, var(--toast-background));\n border-radius: var(--vuuToast-borderRadius, var(--salt-curve-100, 0));\n box-sizing: border-box;\n box-shadow: var(--salt-overlayable-shadow-popout);\n color: var(--vuuToast-foreground, var(--toast-foreground));\n column-gap: var(--salt-spacing-100);\n display: grid;\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header\"\n );\n grid-template-columns: auto;\n max-width: var(--vuuToast-maxWidth, 600px);\n min-width: var(--vuuToast-minWidth, 300px);\n opacity: 1;\n padding: var(--padding-base);\n row-gap: var(--salt-spacing-100);\n transition: opacity .4s, top;\n z-index: var(--salt-zIndex-notification);\n\n &.vuuToastNotification-hidden {\n visibility: hidden;\n }\n\n &.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header close-button\"\n );\n grid-template-columns: 1fr 36px;\n }\n\n &.vuuToastNotification-withIcon {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto);\n }\n\n &.vuuToastNotification-withIcon.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header close-button\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto 36px);\n }\n\n &.vuuToastNotification-withContent {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header\"\n \"toast-content\"\n );\n }\n &.vuuToastNotification-withContent.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-header close-button\"\n \"toast-content close-button\"\n );\n grid-template-columns: 1fr 36px;\n }\n\n &.vuuToastNotification-withTransition {\n transition: top .2s ease-out, left var(--toast-transition-duration) ease-in, opacity .4s;\n }\n\n &.vuuToastNotification-transparent {\n opacity: 0;\n transition: top .2s ease-out, opacity .4s;\n }\n\n &.vuuToastNotification-withIcon.vuuToastNotification-withContent {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header\"\n \"toast-icon toast-content\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto);\n }\n\n &.vuuToastNotification-withIcon.vuuToastNotification-withContent.vuuToastNotification-withCloseButton {\n grid-template-areas: var(--vuuToast-grid-template-areas, \n \"toast-icon toast-header close-button\"\n \"toast-icon toast-content close-button\"\n );\n grid-template-columns: var(--vuuToast-gridTemplateColumns, 36px auto 36px);\n }\n\n &.vuuToastNotification-error {\n --toast-background: var(--vuuToast-error-background, var(--salt-container-primary-background));\n --toast-foreground: var(--vuuToast-error-foreground, var(--salt-content-primary-foreground));\n --vuu-icon-svg: var(--vuuToast-error-icon, var(--vuu-svg-info-circle));\n }\n\n &.vuuToastNotification-success {\n --toast-background: var(--vuuToast-success-background, var(--salt-container-primary-background));\n --toast-foreground: var(--vuuToast-success-foreground, var(--salt-content-primary-foreground));\n --vuu-icon-svg: var(--vuuToast-success-icon, var(--vuu-svg-tick));\n }\n &.vuuToastNotification-warning {\n --toast-background: var(--vuuToast-warning-background, var(--salt-container-primary-background));\n --toast-foreground: var(--vuuToast-warning-foreground, var(--salt-content-primary-foreground));\n --vuu-icon-svg: var(--vuuToast-warning-icon, var(--vuu-svg-info-circle));\n }\n &.vuuToastNotification-info {\n --toast-background: var(--vuuToast-info-background, var(--salt-container-primary-background));\n --toast-foreground: var(--vuuToast-info-foreground, var(--salt-content-primary-foreground));\n --vuu-icon-svg: var(--vuuToast-info-icon, var(--vuu-svg-info-circle));\n }\n\n .vuuIcon {\n --vuu-icon-color: var(--toast-foreground);\n --vuu-icon-size: 20px;\n grid-area:toast-icon;\n justify-self: center;\n }\n\n .vuuToastNotification-header {\n font-size: var(--vuuToast-header-fontSize, var(--salt-text-h3-fontSize));\n font-weight: var(--salt-text-display1-fontWeight-strong);\n grid-area: toast-header;\n justify-self: start;\n line-height: var(--salt-text-h3-lineHeight);\n margin: 0;\n white-space: nowrap;\n }\n\n .vuuToastNotification-content {\n grid-area: toast-content;\n justify-self: start;\n }\n\n .vuuToastNotification-closeButton.saltButton {\n grid-area: close-button;\n justify-self: center;\n .vuuIcon {\n --vuu-icon-size: 16px;\n }\n }\n\n}";
|
|
2
|
-
|
|
3
|
-
export { toastNotificationCss as default };
|
|
4
|
-
//# sourceMappingURL=ToastNotification.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToastNotification.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/esm/ToastNotification.js
DELETED
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useFloatingComponent } from '@salt-ds/core';
|
|
3
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
-
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import { Icon, IconButton } from '@vuu-ui/vuu-ui-controls';
|
|
6
|
-
import cx from 'clsx';
|
|
7
|
-
import { useCallback } from 'react';
|
|
8
|
-
import toastNotificationCss from './ToastNotification.css.js';
|
|
9
|
-
|
|
10
|
-
const classBase = "vuuToastNotification";
|
|
11
|
-
const ToastNotification = ({
|
|
12
|
-
hidden,
|
|
13
|
-
id,
|
|
14
|
-
left,
|
|
15
|
-
onDismiss,
|
|
16
|
-
onMeasured,
|
|
17
|
-
top,
|
|
18
|
-
notification,
|
|
19
|
-
onHoverEntry,
|
|
20
|
-
onHoverExit,
|
|
21
|
-
opacity = 1
|
|
22
|
-
}) => {
|
|
23
|
-
const targetWindow = useWindow();
|
|
24
|
-
useComponentCssInjection({
|
|
25
|
-
testId: "vuu-toast-notification",
|
|
26
|
-
css: toastNotificationCss,
|
|
27
|
-
window: targetWindow
|
|
28
|
-
});
|
|
29
|
-
const { Component: FloatingComponent } = useFloatingComponent();
|
|
30
|
-
const {
|
|
31
|
-
animationType,
|
|
32
|
-
content,
|
|
33
|
-
dismissal,
|
|
34
|
-
header,
|
|
35
|
-
icon,
|
|
36
|
-
showCloseButton,
|
|
37
|
-
status
|
|
38
|
-
} = notification;
|
|
39
|
-
const iconName = icon === false ? void 0 : icon ?? status;
|
|
40
|
-
const callbackRef = useCallback(
|
|
41
|
-
(el) => {
|
|
42
|
-
if (el) {
|
|
43
|
-
setTimeout(() => {
|
|
44
|
-
const { height, width } = el.getBoundingClientRect();
|
|
45
|
-
if (id) {
|
|
46
|
-
onMeasured?.(id, height, width);
|
|
47
|
-
}
|
|
48
|
-
}, 60);
|
|
49
|
-
}
|
|
50
|
-
},
|
|
51
|
-
[id, onMeasured]
|
|
52
|
-
);
|
|
53
|
-
const handleDismiss = useCallback(() => {
|
|
54
|
-
onDismiss?.(id);
|
|
55
|
-
}, [id, onDismiss]);
|
|
56
|
-
const handleMouseEnter = useCallback(
|
|
57
|
-
() => onHoverEntry?.(id),
|
|
58
|
-
[id, onHoverEntry]
|
|
59
|
-
);
|
|
60
|
-
const handleMouseLeave = useCallback(
|
|
61
|
-
() => onHoverExit?.(id),
|
|
62
|
-
[id, onHoverExit]
|
|
63
|
-
);
|
|
64
|
-
if (dismissal === "manual" && showCloseButton === false) {
|
|
65
|
-
console.warn(
|
|
66
|
-
"[ToastNotification] invalid props, if dismissal is manual, showCloseButton should not be false"
|
|
67
|
-
);
|
|
68
|
-
}
|
|
69
|
-
const withCloseButton = showCloseButton || dismissal === "manual";
|
|
70
|
-
return /* @__PURE__ */ jsxs(
|
|
71
|
-
FloatingComponent,
|
|
72
|
-
{
|
|
73
|
-
className: cx(classBase, `${classBase}-${notification.status}`, {
|
|
74
|
-
[`${classBase}-hidden`]: hidden,
|
|
75
|
-
[`${classBase}-transparent`]: opacity === 0,
|
|
76
|
-
[`${classBase}-withContent`]: content !== void 0,
|
|
77
|
-
[`${classBase}-withIcon`]: icon !== false,
|
|
78
|
-
[`${classBase}-withTransition`]: animationType !== void 0 && !hidden,
|
|
79
|
-
[`${classBase}-withCloseButton`]: withCloseButton
|
|
80
|
-
}),
|
|
81
|
-
id,
|
|
82
|
-
left,
|
|
83
|
-
onMouseEnter: handleMouseEnter,
|
|
84
|
-
onMouseLeave: handleMouseLeave,
|
|
85
|
-
open: true,
|
|
86
|
-
position: "absolute",
|
|
87
|
-
ref: callbackRef,
|
|
88
|
-
role: "alert",
|
|
89
|
-
top,
|
|
90
|
-
children: [
|
|
91
|
-
iconName ? /* @__PURE__ */ jsx(Icon, { name: iconName }) : null,
|
|
92
|
-
/* @__PURE__ */ jsx("h3", { className: `${classBase}-header`, children: header }),
|
|
93
|
-
content ? /* @__PURE__ */ jsx("div", { className: `${classBase}-content`, children: content }) : null,
|
|
94
|
-
withCloseButton ? /* @__PURE__ */ jsx(
|
|
95
|
-
IconButton,
|
|
96
|
-
{
|
|
97
|
-
className: `${classBase}-closeButton`,
|
|
98
|
-
icon: "close",
|
|
99
|
-
onClick: handleDismiss,
|
|
100
|
-
appearance: "transparent",
|
|
101
|
-
sentiment: "neutral"
|
|
102
|
-
}
|
|
103
|
-
) : null
|
|
104
|
-
]
|
|
105
|
-
}
|
|
106
|
-
);
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
export { ToastNotification };
|
|
110
|
-
//# sourceMappingURL=ToastNotification.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ToastNotification.js","sources":["../../../packages/vuu-notifications/src/ToastNotification.tsx"],"sourcesContent":["import { useFloatingComponent } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { RefCallback, useCallback } from \"react\";\nimport type { ToastNotificationDescriptor } from \"./NotificationsContext\";\n\nimport toastNotificationCss from \"./ToastNotification.css\";\n\nexport type ToastHoverHandler = (id?: string) => void;\n\nexport type ToastNotificationProps = {\n hidden?: boolean;\n id?: string;\n left?: number;\n notification: ToastNotificationDescriptor;\n onMeasured?: (id: string, height: number, width: number) => void;\n onDismiss?: (id?: string) => void;\n onHoverEntry?: ToastHoverHandler;\n onHoverExit?: ToastHoverHandler;\n opacity?: number;\n top?: number;\n};\n\nconst classBase = \"vuuToastNotification\";\n\nexport const ToastNotification = ({\n hidden,\n id,\n left,\n onDismiss,\n onMeasured,\n top,\n notification,\n onHoverEntry,\n onHoverExit,\n opacity = 1,\n}: ToastNotificationProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-toast-notification\",\n css: toastNotificationCss,\n window: targetWindow,\n });\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const {\n animationType,\n content,\n dismissal,\n header,\n icon,\n showCloseButton,\n status,\n } = notification;\n\n const iconName = icon === false ? undefined : (icon ?? status);\n\n const callbackRef = useCallback<RefCallback<HTMLDivElement>>(\n (el) => {\n if (el) {\n setTimeout(() => {\n const { height, width } = el.getBoundingClientRect();\n if (id) {\n onMeasured?.(id, height, width);\n }\n }, 60);\n }\n },\n [id, onMeasured],\n );\n\n const handleDismiss = useCallback(() => {\n onDismiss?.(id);\n }, [id, onDismiss]);\n\n const handleMouseEnter = useCallback(\n () => onHoverEntry?.(id),\n [id, onHoverEntry],\n );\n const handleMouseLeave = useCallback(\n () => onHoverExit?.(id),\n [id, onHoverExit],\n );\n\n if (dismissal === \"manual\" && showCloseButton === false) {\n console.warn(\n \"[ToastNotification] invalid props, if dismissal is manual, showCloseButton should not be false\",\n );\n }\n\n const withCloseButton = showCloseButton || dismissal === \"manual\";\n\n return (\n <FloatingComponent\n className={cx(classBase, `${classBase}-${notification.status}`, {\n [`${classBase}-hidden`]: hidden,\n [`${classBase}-transparent`]: opacity === 0,\n [`${classBase}-withContent`]: content !== undefined,\n [`${classBase}-withIcon`]: icon !== false,\n [`${classBase}-withTransition`]: animationType !== undefined && !hidden,\n [`${classBase}-withCloseButton`]: withCloseButton,\n })}\n id={id}\n left={left}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n open\n position=\"absolute\"\n ref={callbackRef}\n role=\"alert\"\n top={top}\n >\n {iconName ? <Icon name={iconName} /> : null}\n <h3 className={`${classBase}-header`}>{header}</h3>\n {content ? <div className={`${classBase}-content`}>{content}</div> : null}\n {withCloseButton ? (\n <IconButton\n className={`${classBase}-closeButton`}\n icon=\"close\"\n onClick={handleDismiss}\n appearance=\"transparent\"\n sentiment=\"neutral\"\n />\n ) : null}\n </FloatingComponent>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var workspaceNotificationCss = ".vuuWorkspaceNotification {\n position: absolute;\n z-index: var(--salt-zIndex-notification);\n\n .vuuWorkspaceNotification-content {\n align-items: center;\n background: var(--salt-container-primary-background);\n display: flex;\n justify-content: center\n }\n}";
|
|
2
|
-
|
|
3
|
-
export { workspaceNotificationCss as default };
|
|
4
|
-
//# sourceMappingURL=WorkspaceNotification.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"WorkspaceNotification.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useFloatingComponent } from '@salt-ds/core';
|
|
3
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
-
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import { VuuShellLocation } from '@vuu-ui/vuu-utils';
|
|
6
|
-
import cx from 'clsx';
|
|
7
|
-
import { useMemo } from 'react';
|
|
8
|
-
import workspaceNotificationCss from './WorkspaceNotification.css.js';
|
|
9
|
-
|
|
10
|
-
const classBase = "vuuWorkspaceNotification";
|
|
11
|
-
const WorkspaceNotification = ({
|
|
12
|
-
children,
|
|
13
|
-
className,
|
|
14
|
-
style: styleProp,
|
|
15
|
-
...htmlAttributes
|
|
16
|
-
}) => {
|
|
17
|
-
const targetWindow = useWindow();
|
|
18
|
-
useComponentCssInjection({
|
|
19
|
-
testId: "vuu-toast-notification",
|
|
20
|
-
css: workspaceNotificationCss,
|
|
21
|
-
window: targetWindow
|
|
22
|
-
});
|
|
23
|
-
const { Component: FloatingComponent } = useFloatingComponent();
|
|
24
|
-
const [left, top, width, height] = useMemo(() => {
|
|
25
|
-
const target = document.querySelector(
|
|
26
|
-
`#${VuuShellLocation.WorkspaceContainer}`
|
|
27
|
-
);
|
|
28
|
-
if (target) {
|
|
29
|
-
const { left: left2, top: top2, width: width2, height: height2 } = target.getBoundingClientRect();
|
|
30
|
-
return [left2, top2, width2, height2];
|
|
31
|
-
} else {
|
|
32
|
-
return [0, 0, 200, 200];
|
|
33
|
-
}
|
|
34
|
-
}, []);
|
|
35
|
-
return /* @__PURE__ */ jsx(
|
|
36
|
-
FloatingComponent,
|
|
37
|
-
{
|
|
38
|
-
...htmlAttributes,
|
|
39
|
-
className: cx(classBase, className),
|
|
40
|
-
open: true,
|
|
41
|
-
role: "alert",
|
|
42
|
-
left,
|
|
43
|
-
top,
|
|
44
|
-
children: /* @__PURE__ */ jsx("div", { className: `${classBase}-content`, style: { height, width }, children })
|
|
45
|
-
}
|
|
46
|
-
);
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
export { WorkspaceNotification };
|
|
50
|
-
//# sourceMappingURL=WorkspaceNotification.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"WorkspaceNotification.js","sources":["../../../packages/vuu-notifications/src/WorkspaceNotification.tsx"],"sourcesContent":["import { useFloatingComponent } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, ReactNode, useMemo } from \"react\";\n\nimport workspaceNotificationCss from \"./WorkspaceNotification.css\";\n\nconst classBase = \"vuuWorkspaceNotification\";\n\nexport interface WorkspaceNotificationProps\n extends HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n}\n\nexport const WorkspaceNotification = ({\n children,\n className,\n style: styleProp,\n ...htmlAttributes\n}: WorkspaceNotificationProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-toast-notification\",\n css: workspaceNotificationCss,\n window: targetWindow,\n });\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const [left, top, width, height] = useMemo<\n [number, number, number, number]\n >(() => {\n const target = document.querySelector(\n `#${VuuShellLocation.WorkspaceContainer}`,\n );\n if (target) {\n const { left, top, width, height } = target.getBoundingClientRect();\n return [left, top, width, height];\n } else {\n return [0, 0, 200, 200];\n }\n }, []);\n\n return (\n <FloatingComponent\n {...htmlAttributes}\n className={cx(classBase, className)}\n open\n role=\"alert\"\n left={left}\n top={top}\n >\n <div className={`${classBase}-content`} style={{ height, width }}>\n {children}\n </div>\n </FloatingComponent>\n );\n};\n"],"names":["left","top","width","height"],"mappings":";;;;;;;;;AASA,MAAM,SAAY,GAAA,0BAAA;AAOX,MAAM,wBAAwB,CAAC;AAAA,EACpC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,GAAG;AACL,CAAkC,KAAA;AAChC,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,wBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA;AAE9D,EAAA,MAAM,CAAC,IAAM,EAAA,GAAA,EAAK,OAAO,MAAM,CAAA,GAAI,QAEjC,MAAM;AACN,IAAA,MAAM,SAAS,QAAS,CAAA,aAAA;AAAA,MACtB,CAAA,CAAA,EAAI,iBAAiB,kBAAkB,CAAA;AAAA,KACzC;AACA,IAAA,IAAI,MAAQ,EAAA;AACV,MAAM,MAAA,EAAE,IAAAA,EAAAA,KAAAA,EAAM,GAAAC,EAAAA,IAAAA,EAAK,KAAAC,EAAAA,MAAAA,EAAO,MAAAC,EAAAA,OAAAA,EAAW,GAAA,MAAA,CAAO,qBAAsB,EAAA;AAClE,MAAA,OAAO,CAACH,KAAAA,EAAMC,IAAKC,EAAAA,MAAAA,EAAOC,OAAM,CAAA;AAAA,KAC3B,MAAA;AACL,MAAA,OAAO,CAAC,CAAA,EAAG,CAAG,EAAA,GAAA,EAAK,GAAG,CAAA;AAAA;AACxB,GACF,EAAG,EAAE,CAAA;AAEL,EACE,uBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,IAAI,EAAA,IAAA;AAAA,MACJ,IAAK,EAAA,OAAA;AAAA,MACL,IAAA;AAAA,MACA,GAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAY,QAAA,CAAA,EAAA,KAAA,EAAO,EAAE,MAAA,EAAQ,KAAM,EAAA,EAC5D,QACH,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
|
package/esm/index.js
DELETED
package/esm/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|