@finsemble/finsemble-ui 6.1.4 → 6.3.0-beta.20211008

package/react/components/notifications/components/notificationsToasts/NotificationsToasts.js

@@ -1,9 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
-import useNotifications, { moveToToolbarMonitor, getNotificationConfig, getOS, } from "../../../../hooks/useNotifications";
-import { usePubSub } from "../../../../hooks/usePubSub";
+import useNotifications, { useNotificationUI, moveToToolbarMonitor, getNotificationConfig, getOS, } from "../../../../hooks/useNotifications";
 import { NotificationCardShell } from "../shared/NotificationCardShell";
 import { CSSTransition } from "react-transition-group";
-import { NOTIFICATIONS_PUBSUB_TOPIC } from "../../constants";
 import "../../../../assets/css/notificationsCenter.css";
 const ToastCard = (props) => {
     const notificationRef = useRef();
@@ -51,10 +49,10 @@ const ToastCard = (props) => {
 export const NotificationsToasts = (props) => {
     const { notifications, notificationIsActive, setOpaqueClassName, removeNotification, activeNotifications } = useNotifications({ config: { notificationsHistory: { options: { sentAfter: "startup" } } } });
     const notificationsRef = useRef(notifications);
-    const [notificationSubscribeMessage] = usePubSub(NOTIFICATIONS_PUBSUB_TOPIC);
+    const [uiState] = useNotificationUI();
     const isNotificationActive = (notification) => {
-        return (notificationIsActive(notification) &&
-            (!notificationSubscribeMessage.showCenter || notificationSubscribeMessage.poppedOut));
+        const notificationCenterNotActive = !uiState.showCenter || uiState.poppedOut;
+        return notificationIsActive(notification) && notificationCenterNotActive;
     };
     const config = getNotificationConfig();
     const [isMac] = useState(getOS() === "Mac");
@@ -98,18 +96,19 @@ export const NotificationsToasts = (props) => {
     }, []);
     useEffect(() => {
         moveToToolbarMonitor().then(() => {
+            var _a;
             let forceHide = false;
             if (activeNotifications(notifications).length === 0 &&
                 activeNotifications(notificationsRef.current).length === 0) {
                 forceHide = true;
             }
             notificationsRef.current = notifications;
-            const rect = document.getElementById("notifications-toasts")?.getBoundingClientRect();
+            const rect = (_a = document.getElementById("notifications-toasts")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
             if (notifications.length === 0 || forceHide) {
                 if (config.isTransparent && !isMac) {
                     const roundedRect = {
-                        x: Math.round(rect?.x),
-                        y: Math.round(rect?.y),
+                        x: Math.round(rect === null || rect === void 0 ? void 0 : rect.x),
+                        y: Math.round(rect === null || rect === void 0 ? void 0 : rect.y),
                         width: 1,
                         height: 1,
                     };
@@ -121,10 +120,10 @@ export const NotificationsToasts = (props) => {
                 finsembleWindow.bringToFront();
                 if (config.isTransparent && !isMac) {
                     const roundedRect = {
-                        x: Math.round(rect?.x),
-                        y: Math.round(rect?.y),
-                        width: Math.round(rect?.width),
-                        height: Math.round(rect?.height),
+                        x: Math.round(rect === null || rect === void 0 ? void 0 : rect.x),
+                        y: Math.round(rect === null || rect === void 0 ? void 0 : rect.y),
+                        width: Math.round(rect === null || rect === void 0 ? void 0 : rect.width),
+                        height: Math.round(rect === null || rect === void 0 ? void 0 : rect.height),
                     };
                     finsembleWindow.show({}, () => {
                         FSBL.Clients.WindowClient.setShape([roundedRect]);
@@ -139,7 +138,7 @@ export const NotificationsToasts = (props) => {
                         }
                         const bounds = (await finsembleWindow.getBounds({}));
                         const width = bounds.data.right - bounds.data.left;
-                        const height = Math.round(rect?.height) + 6;
+                        const height = Math.round(rect === null || rect === void 0 ? void 0 : rect.height) + 6;
                         finsembleWindow.setBounds({
                             bounds: {
                                 top: data["availableRect"]["top"],
@@ -157,6 +156,6 @@ export const NotificationsToasts = (props) => {
             }
         });
     }, [notifications]);
-    return (React.createElement("div", null, notifications.map((notification) => (React.createElement(ToastCard, { key: `toast-card-${notification.id}`, notification: notification, informationalNotificationTimeout: informationalTimeout, actionableTimeoutEnabled: actionableTimeoutEnabled, removeFunction: removeNotification, isActiveFunction: isNotificationActive, ...props })))));
+    return (React.createElement("div", null, notifications.map((notification) => (React.createElement(ToastCard, Object.assign({ key: `toast-card-${notification.id}`, notification: notification, informationalNotificationTimeout: informationalTimeout, actionableTimeoutEnabled: actionableTimeoutEnabled, removeFunction: removeNotification, isActiveFunction: isNotificationActive }, props))))));
 };
 //# sourceMappingURL=NotificationsToasts.js.map

package/react/components/notifications/components/notificationsToasts/NotificationsToasts.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsToasts.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/notificationsToasts/NotificationsToasts.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\r\nimport useNotifications, {\r\n\tmoveToToolbarMonitor,\r\n\tgetNotificationConfig,\r\n\tgetOS,\r\n} from \"../../../../hooks/useNotifications\";\r\nimport { usePubSub } from \"../../../../hooks/usePubSub\";\r\nimport { INotification } from \"common/notifications/definitions/INotification\";\r\nimport { NotificationCardShell } from \"../shared/NotificationCardShell\";\r\nimport { CSSTransition } from \"react-transition-group\";\r\nimport { NOTIFICATIONS_PUBSUB_TOPIC } from \"../../constants\";\r\nimport { INotificationToastsProps } from \"../../types\";\r\n\r\nimport \"../../../../assets/css/notificationsCenter.css\";\r\n\r\ntype ToastCardProps = {\r\n\tnotification: INotification;\r\n\tremoveFunction: Function;\r\n\tisActiveFunction: Function;\r\n\tinformationalNotificationTimeout: number | false;\r\n\tactionableTimeoutEnabled: boolean;\r\n\tnotificationCard?: React.ComponentType<any>;\r\n};\r\n\r\nconst ToastCard = (props: ToastCardProps) => {\r\n\tconst notificationRef = useRef<INotification>();\r\n\tconst { notification, informationalNotificationTimeout, removeFunction, isActiveFunction, actionableTimeoutEnabled } =\r\n\t\tprops;\r\n\tconst [slideIn, setSlideIn] = useState(isActiveFunction(notification));\r\n\tconst [showNotification] = useState(isActiveFunction(notification));\r\n\r\n\tuseEffect(() => {\r\n\t\tnotificationRef.current = notification;\r\n\t\tlet timeoutId: any;\r\n\r\n\t\tif (!notification.actions || notification.actions.length == 0 || actionableTimeoutEnabled) {\r\n\t\t\t// Is an informational notification or timeout enabled actionable notifications\r\n\t\t\tlet timeoutLength;\r\n\r\n\t\t\tif (informationalNotificationTimeout !== false) {\r\n\t\t\t\t// Convert to milliseconds\r\n\t\t\t\ttimeoutLength = informationalNotificationTimeout * 1000;\r\n\t\t\t\tif (notification.timeout && Number.isInteger(notification.timeout)) {\r\n\t\t\t\t\ttimeoutLength = notification.timeout;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\tif (timeoutLength) {\r\n\t\t\t\ttimeoutId = setTimeout(() => {\r\n\t\t\t\t\tsetSlideIn(false);\r\n\t\t\t\t}, timeoutLength);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn () => {\r\n\t\t\tclearInterval(timeoutId);\r\n\t\t};\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!isActiveFunction(notificationRef.current)) {\r\n\t\t\tremoveFunction(notification);\r\n\t\t}\r\n\t\tsetSlideIn(isActiveFunction(notification));\r\n\t}, [notification]);\r\n\r\n\tconst onExited = () => {\r\n\t\tremoveFunction(notification);\r\n\t};\r\n\r\n\tconst Card = props.notificationCard ? props.notificationCard : NotificationCardShell;\r\n\r\n\treturn (\r\n\t\tshowNotification && (\r\n\t\t\t<CSSTransition in={slideIn} timeout={500} onExited={onExited} classNames=\"notifications-toast\">\r\n\t\t\t\t<div className=\"notifications-toast__offscreen\">\r\n\t\t\t\t\t<Card\r\n\t\t\t\t\t\tnotification={notification}\r\n\t\t\t\t\t\tuiContext=\"toasts\"\r\n\t\t\t\t\t\tremoveNotification={() => {\r\n\t\t\t\t\t\t\tsetSlideIn(false);\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<div className=\"divider\">&nbsp;</div>\r\n\t\t\t\t</div>\r\n\t\t\t</CSSTransition>\r\n\t\t)\r\n\t);\r\n};\r\n\r\nexport const NotificationsToasts: React.FunctionComponent<INotificationToastsProps> = (props) => {\r\n\tconst { notifications, notificationIsActive, setOpaqueClassName, removeNotification, activeNotifications } =\r\n\t\tuseNotifications({ config: { notificationsHistory: { options: { sentAfter: \"startup\" } } } });\r\n\tconst notificationsRef = useRef<INotification[]>(notifications);\r\n\tconst [notificationSubscribeMessage] = usePubSub(NOTIFICATIONS_PUBSUB_TOPIC);\r\n\r\n\tconst isNotificationActive = (notification: INotification) => {\r\n\t\treturn (\r\n\t\t\tnotificationIsActive(notification) &&\r\n\t\t\t// Only treat notification as active (show it) if the center not shown or popped out\r\n\t\t\t(!notificationSubscribeMessage.showCenter || notificationSubscribeMessage.poppedOut)\r\n\t\t);\r\n\t};\r\n\r\n\tconst config = getNotificationConfig();\r\n\tconst [isMac] = useState(getOS() === \"Mac\");\r\n\r\n\tconst [informationalTimeout, setInformationalTimeout] = useState<number | false>(false);\r\n\tconst [actionableTimeoutEnabled, setActionableTimeoutEnabled] = useState<boolean>(true);\r\n\r\n\tuseEffect(() => {\r\n\t\tasync function listenForPreferenceChange(error: any, response: any) {\r\n\t\t\tif (error) {\r\n\t\t\t\tconsole.error(\"FinsembleUserPreferencesChannel: \", error);\r\n\t\t\t} else {\r\n\t\t\t\tconst { data } = response;\r\n\t\t\t\tif (data.notificationPreferences) {\r\n\t\t\t\t\tconst { informationalNotificationToastPeriodSeconds, toastTimeoutOnActionableNotifications } =\r\n\t\t\t\t\t\tdata.notificationPreferences;\r\n\r\n\t\t\t\t\tif (informationalNotificationToastPeriodSeconds) {\r\n\t\t\t\t\t\tsetInformationalTimeout(informationalNotificationToastPeriodSeconds);\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tif (typeof toastTimeoutOnActionableNotifications !== \"undefined\") {\r\n\t\t\t\t\t\tsetActionableTimeoutEnabled(toastTimeoutOnActionableNotifications);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tFSBL.Clients.RouterClient.addListener(\"FinsembleUserPreferencesChannel\", listenForPreferenceChange);\r\n\t\treturn () => {\r\n\t\t\tFSBL.Clients.RouterClient.removeListener(\"FinsembleUserPreferencesChannel\", listenForPreferenceChange);\r\n\t\t};\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst transparencySupported = config.isTransparent;\r\n\r\n\t\tsetOpaqueClassName(!transparencySupported);\r\n\r\n\t\tif (transparencySupported) {\r\n\t\t\tfinsembleWindow.show();\r\n\t\t}\r\n\r\n\t\tasync function getNotificationsPreferences() {\r\n\t\t\treturn await FSBL.Clients.NotificationClient.getPreferences();\r\n\t\t}\r\n\r\n\t\tgetNotificationsPreferences().then((preferences: any) => {\r\n\t\t\tsetInformationalTimeout(preferences.informationalNotificationToastPeriodSeconds);\r\n\t\t});\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tmoveToToolbarMonitor().then(() => {\r\n\t\t\tlet forceHide = false;\r\n\t\t\tif (\r\n\t\t\t\tactiveNotifications(notifications).length === 0 &&\r\n\t\t\t\tactiveNotifications(notificationsRef.current).length === 0\r\n\t\t\t) {\r\n\t\t\t\t// Bug fix: Toasts flash when inActive components (partially caused by allowing notifications to animate out)\r\n\t\t\t\tforceHide = true;\r\n\t\t\t}\r\n\r\n\t\t\tnotificationsRef.current = notifications;\r\n\t\t\tconst rect = document.getElementById(\"notifications-toasts\")?.getBoundingClientRect();\r\n\t\t\tif (notifications.length === 0 || forceHide) {\r\n\t\t\t\tif (config.isTransparent && !isMac) {\r\n\t\t\t\t\tconst roundedRect = {\r\n\t\t\t\t\t\tx: Math.round(rect?.x as number),\r\n\t\t\t\t\t\ty: Math.round(rect?.y as number),\r\n\t\t\t\t\t\twidth: 1,\r\n\t\t\t\t\t\theight: 1,\r\n\t\t\t\t\t};\r\n\r\n\t\t\t\t\tFSBL.Clients.WindowClient.setShape([roundedRect]);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tfinsembleWindow.hide();\r\n\t\t\t} else {\r\n\t\t\t\tfinsembleWindow.bringToFront();\r\n\t\t\t\tif (config.isTransparent && !isMac) {\r\n\t\t\t\t\tconst roundedRect = {\r\n\t\t\t\t\t\tx: Math.round(rect?.x as number),\r\n\t\t\t\t\t\ty: Math.round(rect?.y as number),\r\n\t\t\t\t\t\twidth: Math.round(rect?.width as number),\r\n\t\t\t\t\t\theight: Math.round(rect?.height as number),\r\n\t\t\t\t\t};\r\n\r\n\t\t\t\t\tfinsembleWindow.show({}, () => {\r\n\t\t\t\t\t\tFSBL.Clients.WindowClient.setShape([roundedRect]);\r\n\t\t\t\t\t});\r\n\t\t\t\t} else {\r\n\t\t\t\t\tfinsembleWindow.show({}, async () => {\r\n\t\t\t\t\t\tconst { err, data } = (await FSBL.Clients.LauncherClient.getMonitorInfo({ monitor: \"mine\" })) as any;\r\n\t\t\t\t\t\tif (err) {\r\n\t\t\t\t\t\t\tconsole.error(err);\r\n\t\t\t\t\t\t\treturn;\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tconst bounds = (await finsembleWindow.getBounds({})) as any;\r\n\t\t\t\t\t\tconst width = bounds.data.right - bounds.data.left;\r\n\t\t\t\t\t\tconst height = Math.round(rect?.height as number) + 6;\r\n\r\n\t\t\t\t\t\tfinsembleWindow.setBounds(\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\tbounds: {\r\n\t\t\t\t\t\t\t\t\ttop: data[\"availableRect\"][\"top\"],\r\n\t\t\t\t\t\t\t\t\tleft: data[\"availableRect\"][\"right\"] - width,\r\n\t\t\t\t\t\t\t\t\theight: height + 10,\r\n\t\t\t\t\t\t\t\t\twidth: width,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t(error: any) => {\r\n\t\t\t\t\t\t\t\tif (error) {\r\n\t\t\t\t\t\t\t\t\tconsole.error(error);\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t});\r\n\t}, [notifications]);\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t{notifications.map((notification: INotification) => (\r\n\t\t\t\t<ToastCard\r\n\t\t\t\t\tkey={`toast-card-${notification.id}`}\r\n\t\t\t\t\tnotification={notification}\r\n\t\t\t\t\tinformationalNotificationTimeout={informationalTimeout}\r\n\t\t\t\t\tactionableTimeoutEnabled={actionableTimeoutEnabled}\r\n\t\t\t\t\tremoveFunction={removeNotification}\r\n\t\t\t\t\tisActiveFunction={isNotificationActive}\r\n\t\t\t\t\t{...props}\r\n\t\t\t\t/>\r\n\t\t\t))}\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"NotificationsToasts.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/notificationsToasts/NotificationsToasts.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\r\nimport useNotifications, {\r\n\tuseNotificationUI,\r\n\tmoveToToolbarMonitor,\r\n\tgetNotificationConfig,\r\n\tgetOS,\r\n} from \"../../../../hooks/useNotifications\";\r\nimport { NotificationCardShell } from \"../shared/NotificationCardShell\";\r\nimport { CSSTransition } from \"react-transition-group\";\r\nimport { INotificationToastsProps } from \"../../types\";\r\nimport \"../../../../assets/css/notificationsCenter.css\";\r\nimport { services } from \"@finsemble/finsemble-core\";\r\n\r\ntype INotification = services.notification.types.INotification;\r\n\r\ntype ToastCardProps = {\r\n\tnotification: INotification;\r\n\tremoveFunction: Function;\r\n\tisActiveFunction: Function;\r\n\tinformationalNotificationTimeout: number | false;\r\n\tactionableTimeoutEnabled: boolean;\r\n\tnotificationCard?: React.ComponentType<any>;\r\n};\r\n\r\nconst ToastCard = (props: ToastCardProps) => {\r\n\tconst notificationRef = useRef<INotification>();\r\n\tconst { notification, informationalNotificationTimeout, removeFunction, isActiveFunction, actionableTimeoutEnabled } =\r\n\t\tprops;\r\n\tconst [slideIn, setSlideIn] = useState(isActiveFunction(notification));\r\n\tconst [showNotification] = useState(isActiveFunction(notification));\r\n\r\n\tuseEffect(() => {\r\n\t\tnotificationRef.current = notification;\r\n\t\tlet timeoutId: any;\r\n\r\n\t\tif (!notification.actions || notification.actions.length == 0 || actionableTimeoutEnabled) {\r\n\t\t\t// Is an informational notification or timeout enabled actionable notifications\r\n\t\t\tlet timeoutLength;\r\n\r\n\t\t\tif (informationalNotificationTimeout !== false) {\r\n\t\t\t\t// Convert to milliseconds\r\n\t\t\t\ttimeoutLength = informationalNotificationTimeout * 1000;\r\n\t\t\t\tif (notification.timeout && Number.isInteger(notification.timeout)) {\r\n\t\t\t\t\ttimeoutLength = notification.timeout;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\tif (timeoutLength) {\r\n\t\t\t\ttimeoutId = setTimeout(() => {\r\n\t\t\t\t\tsetSlideIn(false);\r\n\t\t\t\t}, timeoutLength);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn () => {\r\n\t\t\tclearInterval(timeoutId);\r\n\t\t};\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!isActiveFunction(notificationRef.current)) {\r\n\t\t\tremoveFunction(notification);\r\n\t\t}\r\n\t\tsetSlideIn(isActiveFunction(notification));\r\n\t}, [notification]);\r\n\r\n\tconst onExited = () => {\r\n\t\tremoveFunction(notification);\r\n\t};\r\n\r\n\tconst Card = props.notificationCard ? props.notificationCard : NotificationCardShell;\r\n\r\n\treturn (\r\n\t\tshowNotification && (\r\n\t\t\t<CSSTransition in={slideIn} timeout={500} onExited={onExited} classNames=\"notifications-toast\">\r\n\t\t\t\t<div className=\"notifications-toast__offscreen\">\r\n\t\t\t\t\t<Card\r\n\t\t\t\t\t\tnotification={notification}\r\n\t\t\t\t\t\tuiContext=\"toasts\"\r\n\t\t\t\t\t\tremoveNotification={() => {\r\n\t\t\t\t\t\t\tsetSlideIn(false);\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<div className=\"divider\">&nbsp;</div>\r\n\t\t\t\t</div>\r\n\t\t\t</CSSTransition>\r\n\t\t)\r\n\t);\r\n};\r\n\r\nexport const NotificationsToasts: React.FunctionComponent<INotificationToastsProps> = (props) => {\r\n\tconst { notifications, notificationIsActive, setOpaqueClassName, removeNotification, activeNotifications } =\r\n\t\tuseNotifications({ config: { notificationsHistory: { options: { sentAfter: \"startup\" } } } });\r\n\tconst notificationsRef = useRef<INotification[]>(notifications);\r\n\tconst [uiState] = useNotificationUI();\r\n\r\n\tconst isNotificationActive = (notification: INotification): boolean => {\r\n\t\tconst notificationCenterNotActive = !uiState.showCenter || uiState.poppedOut;\r\n\t\treturn notificationIsActive(notification) && notificationCenterNotActive;\r\n\t};\r\n\r\n\tconst config = getNotificationConfig();\r\n\tconst [isMac] = useState(getOS() === \"Mac\");\r\n\r\n\tconst [informationalTimeout, setInformationalTimeout] = useState<number | false>(false);\r\n\tconst [actionableTimeoutEnabled, setActionableTimeoutEnabled] = useState<boolean>(true);\r\n\r\n\tuseEffect(() => {\r\n\t\tasync function listenForPreferenceChange(error: any, response: any) {\r\n\t\t\tif (error) {\r\n\t\t\t\tconsole.error(\"FinsembleUserPreferencesChannel: \", error);\r\n\t\t\t} else {\r\n\t\t\t\tconst { data } = response;\r\n\t\t\t\tif (data.notificationPreferences) {\r\n\t\t\t\t\tconst { informationalNotificationToastPeriodSeconds, toastTimeoutOnActionableNotifications } =\r\n\t\t\t\t\t\tdata.notificationPreferences;\r\n\r\n\t\t\t\t\tif (informationalNotificationToastPeriodSeconds) {\r\n\t\t\t\t\t\tsetInformationalTimeout(informationalNotificationToastPeriodSeconds);\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tif (typeof toastTimeoutOnActionableNotifications !== \"undefined\") {\r\n\t\t\t\t\t\tsetActionableTimeoutEnabled(toastTimeoutOnActionableNotifications);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tFSBL.Clients.RouterClient.addListener(\"FinsembleUserPreferencesChannel\", listenForPreferenceChange);\r\n\t\treturn () => {\r\n\t\t\tFSBL.Clients.RouterClient.removeListener(\"FinsembleUserPreferencesChannel\", listenForPreferenceChange);\r\n\t\t};\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst transparencySupported = config.isTransparent;\r\n\r\n\t\tsetOpaqueClassName(!transparencySupported);\r\n\r\n\t\tif (transparencySupported) {\r\n\t\t\tfinsembleWindow.show();\r\n\t\t}\r\n\r\n\t\tasync function getNotificationsPreferences() {\r\n\t\t\treturn await FSBL.Clients.NotificationClient.getPreferences();\r\n\t\t}\r\n\r\n\t\tgetNotificationsPreferences().then((preferences: any) => {\r\n\t\t\tsetInformationalTimeout(preferences.informationalNotificationToastPeriodSeconds);\r\n\t\t});\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tmoveToToolbarMonitor().then(() => {\r\n\t\t\tlet forceHide = false;\r\n\t\t\tif (\r\n\t\t\t\tactiveNotifications(notifications).length === 0 &&\r\n\t\t\t\tactiveNotifications(notificationsRef.current).length === 0\r\n\t\t\t) {\r\n\t\t\t\t// Bug fix: Toasts flash when inActive components (partially caused by allowing notifications to animate out)\r\n\t\t\t\tforceHide = true;\r\n\t\t\t}\r\n\r\n\t\t\tnotificationsRef.current = notifications;\r\n\t\t\tconst rect = document.getElementById(\"notifications-toasts\")?.getBoundingClientRect();\r\n\t\t\tif (notifications.length === 0 || forceHide) {\r\n\t\t\t\tif (config.isTransparent && !isMac) {\r\n\t\t\t\t\tconst roundedRect = {\r\n\t\t\t\t\t\tx: Math.round(rect?.x as number),\r\n\t\t\t\t\t\ty: Math.round(rect?.y as number),\r\n\t\t\t\t\t\twidth: 1,\r\n\t\t\t\t\t\theight: 1,\r\n\t\t\t\t\t};\r\n\r\n\t\t\t\t\tFSBL.Clients.WindowClient.setShape([roundedRect]);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tfinsembleWindow.hide();\r\n\t\t\t} else {\r\n\t\t\t\tfinsembleWindow.bringToFront();\r\n\t\t\t\tif (config.isTransparent && !isMac) {\r\n\t\t\t\t\tconst roundedRect = {\r\n\t\t\t\t\t\tx: Math.round(rect?.x as number),\r\n\t\t\t\t\t\ty: Math.round(rect?.y as number),\r\n\t\t\t\t\t\twidth: Math.round(rect?.width as number),\r\n\t\t\t\t\t\theight: Math.round(rect?.height as number),\r\n\t\t\t\t\t};\r\n\r\n\t\t\t\t\tfinsembleWindow.show({}, () => {\r\n\t\t\t\t\t\tFSBL.Clients.WindowClient.setShape([roundedRect]);\r\n\t\t\t\t\t});\r\n\t\t\t\t} else {\r\n\t\t\t\t\tfinsembleWindow.show({}, async () => {\r\n\t\t\t\t\t\tconst { err, data } = (await FSBL.Clients.LauncherClient.getMonitorInfo({ monitor: \"mine\" })) as any;\r\n\t\t\t\t\t\tif (err) {\r\n\t\t\t\t\t\t\tconsole.error(err);\r\n\t\t\t\t\t\t\treturn;\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tconst bounds = (await finsembleWindow.getBounds({})) as any;\r\n\t\t\t\t\t\tconst width = bounds.data.right - bounds.data.left;\r\n\t\t\t\t\t\tconst height = Math.round(rect?.height as number) + 6;\r\n\r\n\t\t\t\t\t\tfinsembleWindow.setBounds(\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\tbounds: {\r\n\t\t\t\t\t\t\t\t\ttop: data[\"availableRect\"][\"top\"],\r\n\t\t\t\t\t\t\t\t\tleft: data[\"availableRect\"][\"right\"] - width,\r\n\t\t\t\t\t\t\t\t\theight: height + 10,\r\n\t\t\t\t\t\t\t\t\twidth: width,\r\n\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t(error: any) => {\r\n\t\t\t\t\t\t\t\tif (error) {\r\n\t\t\t\t\t\t\t\t\tconsole.error(error);\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t);\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t});\r\n\t}, [notifications]);\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t{notifications.map((notification: INotification) => (\r\n\t\t\t\t<ToastCard\r\n\t\t\t\t\tkey={`toast-card-${notification.id}`}\r\n\t\t\t\t\tnotification={notification}\r\n\t\t\t\t\tinformationalNotificationTimeout={informationalTimeout}\r\n\t\t\t\t\tactionableTimeoutEnabled={actionableTimeoutEnabled}\r\n\t\t\t\t\tremoveFunction={removeNotification}\r\n\t\t\t\t\tisActiveFunction={isNotificationActive}\r\n\t\t\t\t\t{...props}\r\n\t\t\t\t/>\r\n\t\t\t))}\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}

package/react/components/notifications/components/shared/CheckButton.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="finsemble-core" />
 import React from "react";
-import { INotification } from "common/notifications/definitions/INotification";
+import { services } from "@finsemble/finsemble-core";
+declare type INotification = services.notification.types.INotification;
 export declare const CheckButton: React.FunctionComponent<{
     notification: INotification;
 }>;

package/react/components/notifications/components/shared/CheckButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckButton.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/shared/CheckButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElE,MAAM,CAAC,MAAM,WAAW,GAEnB,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;IACzB,MAAM,oBAAoB,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAC9D,MAAM,EAAE,oBAAoB,EAAE,GAAG,oBAAoB,CAAC;IACtD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAGlD,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,oBAAoB,EAAE;YACzB,YAAY,CAAC,oBAAoB,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;SAC/D;IACF,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAE3B,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,SAAS,EAAE;YACf,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SACxC;aAAM;YACN,IAAI,KAAK,GAAG,oBAAoB,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;YACvD,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;gBACjB,oBAAoB,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;aACtC;SACD;QACD,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,CACN,6BAAK,SAAS,EAAC,sBAAsB,EAAC,OAAO,EAAE,iBAAiB;QAC/D,2BAAG,SAAS,EAAE,mCAAmC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,GAAI,CAC5E,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import React, { useState, useContext, useEffect } from \"react\";\r\n\r\nimport { INotification } from \"common/notifications/definitions/INotification\";\r\nimport { NotificationsContext } from \"../../notificationsContext\";\r\n\r\nexport const CheckButton: React.FunctionComponent<{\r\n\tnotification: INotification;\r\n}> = ({ notification }) => {\r\n\tconst notificationsContext = useContext(NotificationsContext);\r\n\tconst { checkedNotifications } = notificationsContext;\r\n\tconst [isChecked, setIsChecked] = useState(false);\r\n\r\n\t// update isChecked value on action\r\n\tuseEffect(() => {\r\n\t\tif (checkedNotifications) {\r\n\t\t\tsetIsChecked(checkedNotifications.indexOf(notification) != -1);\r\n\t\t}\r\n\t}, [checkedNotifications]);\r\n\r\n\tconst checkNotification = () => {\r\n\t\tif (!isChecked) {\r\n\t\t\tcheckedNotifications.push(notification);\r\n\t\t} else {\r\n\t\t\tvar index = checkedNotifications.indexOf(notification);\r\n\t\t\tif (index !== -1) {\r\n\t\t\t\tcheckedNotifications.splice(index, 1);\r\n\t\t\t}\r\n\t\t}\r\n\t\tsetIsChecked(!isChecked);\r\n\t};\r\n\r\n\treturn (\r\n\t\t<div className=\"check_icon_container\" onClick={checkNotification}>\r\n\t\t\t<i className={`ff-check-mark default-img large ${isChecked ? \"checked\" : \"\"}`} />\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default CheckButton;\r\n"]}
+{"version":3,"file":"CheckButton.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/shared/CheckButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAKlE,MAAM,CAAC,MAAM,WAAW,GAEnB,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;IACzB,MAAM,oBAAoB,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAC9D,MAAM,EAAE,oBAAoB,EAAE,GAAG,oBAAoB,CAAC;IACtD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAGlD,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,oBAAoB,EAAE;YACzB,YAAY,CAAC,oBAAoB,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;SAC/D;IACF,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAE3B,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,SAAS,EAAE;YACf,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SACxC;aAAM;YACN,IAAI,KAAK,GAAG,oBAAoB,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;YACvD,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;gBACjB,oBAAoB,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;aACtC;SACD;QACD,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,CACN,6BAAK,SAAS,EAAC,sBAAsB,EAAC,OAAO,EAAE,iBAAiB;QAC/D,2BAAG,SAAS,EAAE,mCAAmC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,GAAI,CAC5E,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import React, { useState, useContext, useEffect } from \"react\";\r\nimport { NotificationsContext } from \"../../notificationsContext\";\r\nimport { services } from \"@finsemble/finsemble-core\";\r\n\r\ntype INotification = services.notification.types.INotification;\r\n\r\nexport const CheckButton: React.FunctionComponent<{\r\n\tnotification: INotification;\r\n}> = ({ notification }) => {\r\n\tconst notificationsContext = useContext(NotificationsContext);\r\n\tconst { checkedNotifications } = notificationsContext;\r\n\tconst [isChecked, setIsChecked] = useState(false);\r\n\r\n\t// update isChecked value on action\r\n\tuseEffect(() => {\r\n\t\tif (checkedNotifications) {\r\n\t\t\tsetIsChecked(checkedNotifications.indexOf(notification) != -1);\r\n\t\t}\r\n\t}, [checkedNotifications]);\r\n\r\n\tconst checkNotification = () => {\r\n\t\tif (!isChecked) {\r\n\t\t\tcheckedNotifications.push(notification);\r\n\t\t} else {\r\n\t\t\tvar index = checkedNotifications.indexOf(notification);\r\n\t\t\tif (index !== -1) {\r\n\t\t\t\tcheckedNotifications.splice(index, 1);\r\n\t\t\t}\r\n\t\t}\r\n\t\tsetIsChecked(!isChecked);\r\n\t};\r\n\r\n\treturn (\r\n\t\t<div className=\"check_icon_container\" onClick={checkNotification}>\r\n\t\t\t<i className={`ff-check-mark default-img large ${isChecked ? \"checked\" : \"\"}`} />\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default CheckButton;\r\n"]}

package/react/components/notifications/components/shared/IconButton.js

@@ -1,8 +1,6 @@
 import React from "react";
-const IconButton = ({ clickHandler = () => { }, tooltip, iconName = "ff-finsemble", classNames, children, }) => {
-    return (React.createElement("div", { className: `finsemble-icon__btn ${classNames ? classNames : ""}`, title: tooltip ? tooltip : "", onClick: () => clickHandler() },
-        React.createElement("i", { className: iconName }),
-        children));
-};
+const IconButton = ({ clickHandler = () => { }, tooltip, iconName = "ff-finsemble", classNames, children, }) => (React.createElement("div", { className: `finsemble-icon__btn ${classNames ? classNames : ""}`, title: tooltip ? tooltip : "", onClick: () => clickHandler() },
+    React.createElement("i", { className: iconName }),
+    children));
 export default IconButton;
 //# sourceMappingURL=IconButton.js.map

package/react/components/notifications/components/shared/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/shared/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,UAAU,GAAuD,CAAC,EACvE,YAAY,GAAG,GAAG,EAAE,GAAE,CAAC,EACvB,OAAO,EACP,QAAQ,GAAG,cAAc,EACzB,UAAU,EACV,QAAQ,GACmB,EAAE,EAAE;IAC/B,OAAO,CACN,6BACC,SAAS,EAAE,uBAAuB,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAChE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE;QAE7B,2BAAG,SAAS,EAAE,QAAQ,GAAI;QACzB,QAAQ,CACJ,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import React from \"react\";\r\n\r\nexport interface IFinsembleIconButtonProps {\r\n\ttooltip?: string;\r\n\tclickHandler?: Function;\r\n\ticonName?: string;\r\n\tclassNames?: string;\r\n\tchildren?: React.ReactNode;\r\n}\r\n\r\nconst IconButton: React.FunctionComponent<IFinsembleIconButtonProps> = ({\r\n\tclickHandler = () => {},\r\n\ttooltip,\r\n\ticonName = \"ff-finsemble\",\r\n\tclassNames,\r\n\tchildren,\r\n}: IFinsembleIconButtonProps) => {\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName={`finsemble-icon__btn ${classNames ? classNames : \"\"}`}\r\n\t\t\ttitle={tooltip ? tooltip : \"\"}\r\n\t\t\tonClick={() => clickHandler()}\r\n\t\t>\r\n\t\t\t<i className={iconName} />\r\n\t\t\t{children}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default IconButton;\r\n"]}
+{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/shared/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,UAAU,GAAuD,CAAC,EACvE,YAAY,GAAG,GAAG,EAAE,GAAE,CAAC,EACvB,OAAO,EACP,QAAQ,GAAG,cAAc,EACzB,UAAU,EACV,QAAQ,GACmB,EAAE,EAAE,CAAC,CAChC,6BACC,SAAS,EAAE,uBAAuB,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAChE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE;IAE7B,2BAAG,SAAS,EAAE,QAAQ,GAAI;IACzB,QAAQ,CACJ,CACN,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import React from \"react\";\r\n\r\nexport interface IFinsembleIconButtonProps {\r\n\ttooltip?: string;\r\n\tclickHandler?: Function;\r\n\ticonName?: string;\r\n\tclassNames?: string;\r\n\tchildren?: React.ReactNode;\r\n}\r\n\r\nconst IconButton: React.FunctionComponent<IFinsembleIconButtonProps> = ({\r\n\tclickHandler = () => {},\r\n\ttooltip,\r\n\ticonName = \"ff-finsemble\",\r\n\tclassNames,\r\n\tchildren,\r\n}: IFinsembleIconButtonProps) => (\r\n\t<div\r\n\t\tclassName={`finsemble-icon__btn ${classNames ? classNames : \"\"}`}\r\n\t\ttitle={tooltip ? tooltip : \"\"}\r\n\t\tonClick={() => clickHandler()}\r\n\t>\r\n\t\t<i className={iconName} />\r\n\t\t{children}\r\n\t</div>\r\n);\r\n\r\nexport default IconButton;\r\n"]}

package/react/components/notifications/components/shared/NotificationCardShell.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="finsemble-core" />
 import React from "react";
-import { INotification } from "common/notifications/definitions/INotification";
+import { services } from "@finsemble/finsemble-core";
+declare type INotification = services.notification.types.INotification;
 export declare type NotificationCardPropType = {
     notification: INotification;
     uiContext: "toasts" | "center";
     removeNotification: Function;
 };
 export declare const NotificationCardShell: React.FunctionComponent<NotificationCardPropType>;
+export {};

package/react/components/notifications/components/shared/NotificationCardShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCardShell.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/shared/NotificationCardShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from \"react\";\r\nimport { parseISO, differenceInMilliseconds, addSeconds } from \"date-fns\";\r\n\r\n// Types\r\nimport IPerformedAction from \"common/notifications/definitions/IPerformedAction\";\r\nimport { INotification } from \"common/notifications/definitions/INotification\";\r\n// Components\r\n\r\n// Utils\r\nimport { isNewNotification, isReNotification, getMostRecentAction } from \"../../utils\";\r\nimport { NotificationCardHeaderShell } from \"./notificationCard/NotificationCardHeaderShell\";\r\nimport { NotificationCardBodyShell } from \"./notificationCard/NotificationCardBodyShell\";\r\n\r\nexport type NotificationCardPropType = {\r\n\t/**\r\n\t * The Notification to be displayed\r\n\t */\r\n\tnotification: INotification;\r\n\r\n\t/**\r\n\t * Which UI context the Card is being used in\r\n\t */\r\n\tuiContext: \"toasts\" | \"center\";\r\n\r\n\t/**\r\n\t * The internal function that will be called on toasts when dismissed or marked as read\r\n\t */\r\n\tremoveNotification: Function;\r\n};\r\n\r\nexport const NotificationCardShell: React.FunctionComponent<NotificationCardPropType> = ({\r\n\tnotification,\r\n\tuiContext,\r\n\tremoveNotification,\r\n\tchildren,\r\n}) => {\r\n\tconst { isRead } = notification;\r\n\r\n\tconst [newNotificationHaloPeriodSeconds, setNotificationHaloPeriodSeconds] = useState(0);\r\n\r\n\tconst [isNew, setIsNew] = useState(isNewNotification(notification, newNotificationHaloPeriodSeconds));\r\n\tconst [wokeFromSnooze, setWokeFromSnooze] = useState(\r\n\t\tisReNotification(notification, newNotificationHaloPeriodSeconds)\r\n\t);\r\n\r\n\t// Sets the current default preference\r\n\tuseEffect(() => {\r\n\t\tasync function getNotificationsPreferences() {\r\n\t\t\treturn await FSBL.Clients.NotificationClient.getPreferences();\r\n\t\t}\r\n\r\n\t\tgetNotificationsPreferences().then((preferences: any) => {\r\n\t\t\tsetNotificationHaloPeriodSeconds(preferences.newNotificationHaloPeriodSeconds);\r\n\t\t\tsetIsNew(isNewNotification(notification, preferences.newNotificationHaloPeriodSeconds));\r\n\t\t});\r\n\t}, []);\r\n\r\n\t// Listens for preferences change\r\n\tuseEffect(() => {\r\n\t\tasync function listenForPreferenceChange(error: any, response: any) {\r\n\t\t\tif (error) {\r\n\t\t\t\tconsole.error(\"FinsembleUserPreferencesChannel: \", error);\r\n\t\t\t} else {\r\n\t\t\t\tconst { data } = response;\r\n\t\t\t\tif (\r\n\t\t\t\t\tdata.notificationPreferences &&\r\n\t\t\t\t\tdata.notificationPreferences.hasOwnProperty(\"newNotificationHaloPeriodSeconds\")\r\n\t\t\t\t) {\r\n\t\t\t\t\tsetNotificationHaloPeriodSeconds(data.notificationPreferences.newNotificationHaloPeriodSeconds);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tFSBL.Clients.RouterClient.addListener(\"FinsembleUserPreferencesChannel\", listenForPreferenceChange);\r\n\t\treturn () => {\r\n\t\t\tFSBL.Clients.RouterClient.removeListener(\"FinsembleUserPreferencesChannel\", listenForPreferenceChange);\r\n\t\t};\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tlet isNewTimerId: any;\r\n\t\tif (isNew) {\r\n\t\t\tif (notification.isRead) {\r\n\t\t\t\tsetIsNew(false);\r\n\t\t\t\tclearTimeout(isNewTimerId);\r\n\t\t\t} else {\r\n\t\t\t\tisNewTimerId = setTimeout(() => {\r\n\t\t\t\t\tsetIsNew(false);\r\n\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(notification.issuedAt), newNotificationHaloPeriodSeconds), Date.now()));\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn () => {\r\n\t\t\tclearTimeout(isNewTimerId);\r\n\t\t};\r\n\t}, [isNew, notification]);\r\n\r\n\tuseEffect(() => {\r\n\t\tlet isRenotificationTimerId: any;\r\n\t\tif (isReNotification(notification, newNotificationHaloPeriodSeconds)) {\r\n\t\t\tconst mostRecentAction: IPerformedAction | null = getMostRecentAction(notification);\r\n\t\t\tif (mostRecentAction) {\r\n\t\t\t\tsetWokeFromSnooze(true);\r\n\t\t\t\tisRenotificationTimerId = setTimeout(() => {\r\n\t\t\t\t\tsetWokeFromSnooze(false);\r\n\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(mostRecentAction.datePerformed), newNotificationHaloPeriodSeconds), Date.now()));\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tsetWokeFromSnooze(false);\r\n\t\t\tclearTimeout(isRenotificationTimerId);\r\n\t\t}\r\n\t\treturn () => {\r\n\t\t\tclearTimeout(isRenotificationTimerId);\r\n\t\t};\r\n\t}, [newNotificationHaloPeriodSeconds, notification]);\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName={`notification-card ${isRead ? \"read\" : \"\"} ${isNew || wokeFromSnooze ? \"new\" : \"\"} \r\n\t\t\t${notification.cssClassName ? notification.cssClassName : \"\"}`}\r\n\t\t>\r\n\t\t\t{children ? (\r\n\t\t\t\tchildren\r\n\t\t\t) : (\r\n\t\t\t\t<>\r\n\t\t\t\t\t<NotificationCardHeaderShell\r\n\t\t\t\t\t\tnotification={notification}\r\n\t\t\t\t\t\tremoveNotification={removeNotification}\r\n\t\t\t\t\t\tuiContext={uiContext}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<NotificationCardBodyShell notification={notification} />\r\n\t\t\t\t</>\r\n\t\t\t)}\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"NotificationCardShell.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/shared/NotificationCardShell.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from \"react\";\r\nimport { parseISO, differenceInMilliseconds, addSeconds } from \"date-fns\";\r\nimport { isNewNotification, isReNotification, getMostRecentAction } from \"../../utils\";\r\nimport { NotificationCardHeaderShell } from \"./notificationCard/NotificationCardHeaderShell\";\r\nimport { NotificationCardBodyShell } from \"./notificationCard/NotificationCardBodyShell\";\r\nimport { services } from \"@finsemble/finsemble-core\";\r\n\r\ntype INotification = services.notification.types.INotification;\r\ntype IPerformedAction = services.notification.types.IPerformedAction;\r\n\r\nexport type NotificationCardPropType = {\r\n\t/**\r\n\t * The Notification to be displayed\r\n\t */\r\n\tnotification: INotification;\r\n\r\n\t/**\r\n\t * Which UI context the Card is being used in\r\n\t */\r\n\tuiContext: \"toasts\" | \"center\";\r\n\r\n\t/**\r\n\t * The internal function that will be called on toasts when dismissed or marked as read\r\n\t */\r\n\tremoveNotification: Function;\r\n};\r\n\r\nexport const NotificationCardShell: React.FunctionComponent<NotificationCardPropType> = ({\r\n\tnotification,\r\n\tuiContext,\r\n\tremoveNotification,\r\n\tchildren,\r\n}) => {\r\n\tconst { isRead } = notification;\r\n\r\n\tconst [newNotificationHaloPeriodSeconds, setNotificationHaloPeriodSeconds] = useState(0);\r\n\r\n\tconst [isNew, setIsNew] = useState(isNewNotification(notification, newNotificationHaloPeriodSeconds));\r\n\tconst [wokeFromSnooze, setWokeFromSnooze] = useState(\r\n\t\tisReNotification(notification, newNotificationHaloPeriodSeconds)\r\n\t);\r\n\r\n\t// Sets the current default preference\r\n\tuseEffect(() => {\r\n\t\tasync function getNotificationsPreferences() {\r\n\t\t\treturn await FSBL.Clients.NotificationClient.getPreferences();\r\n\t\t}\r\n\r\n\t\tgetNotificationsPreferences().then((preferences: any) => {\r\n\t\t\tsetNotificationHaloPeriodSeconds(preferences.newNotificationHaloPeriodSeconds);\r\n\t\t\tsetIsNew(isNewNotification(notification, preferences.newNotificationHaloPeriodSeconds));\r\n\t\t});\r\n\t}, []);\r\n\r\n\t// Listens for preferences change\r\n\tuseEffect(() => {\r\n\t\tasync function listenForPreferenceChange(error: any, response: any) {\r\n\t\t\tif (error) {\r\n\t\t\t\tconsole.error(\"FinsembleUserPreferencesChannel: \", error);\r\n\t\t\t} else {\r\n\t\t\t\tconst { data } = response;\r\n\t\t\t\tif (\r\n\t\t\t\t\tdata.notificationPreferences &&\r\n\t\t\t\t\tdata.notificationPreferences.hasOwnProperty(\"newNotificationHaloPeriodSeconds\")\r\n\t\t\t\t) {\r\n\t\t\t\t\tsetNotificationHaloPeriodSeconds(data.notificationPreferences.newNotificationHaloPeriodSeconds);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tFSBL.Clients.RouterClient.addListener(\"FinsembleUserPreferencesChannel\", listenForPreferenceChange);\r\n\t\treturn () => {\r\n\t\t\tFSBL.Clients.RouterClient.removeListener(\"FinsembleUserPreferencesChannel\", listenForPreferenceChange);\r\n\t\t};\r\n\t}, []);\r\n\r\n\tuseEffect(() => {\r\n\t\tlet isNewTimerId: any;\r\n\t\tif (isNew) {\r\n\t\t\tif (notification.isRead) {\r\n\t\t\t\tsetIsNew(false);\r\n\t\t\t\tclearTimeout(isNewTimerId);\r\n\t\t\t} else {\r\n\t\t\t\tisNewTimerId = setTimeout(() => {\r\n\t\t\t\t\tsetIsNew(false);\r\n\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(notification.issuedAt), newNotificationHaloPeriodSeconds), Date.now()));\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn () => {\r\n\t\t\tclearTimeout(isNewTimerId);\r\n\t\t};\r\n\t}, [isNew, notification]);\r\n\r\n\tuseEffect(() => {\r\n\t\tlet isRenotificationTimerId: any;\r\n\t\tif (isReNotification(notification, newNotificationHaloPeriodSeconds)) {\r\n\t\t\tconst mostRecentAction: IPerformedAction | null = getMostRecentAction(notification);\r\n\t\t\tif (mostRecentAction) {\r\n\t\t\t\tsetWokeFromSnooze(true);\r\n\t\t\t\tisRenotificationTimerId = setTimeout(() => {\r\n\t\t\t\t\tsetWokeFromSnooze(false);\r\n\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(mostRecentAction.datePerformed), newNotificationHaloPeriodSeconds), Date.now()));\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tsetWokeFromSnooze(false);\r\n\t\t\tclearTimeout(isRenotificationTimerId);\r\n\t\t}\r\n\t\treturn () => {\r\n\t\t\tclearTimeout(isRenotificationTimerId);\r\n\t\t};\r\n\t}, [newNotificationHaloPeriodSeconds, notification]);\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName={`notification-card ${isRead ? \"read\" : \"\"} ${isNew || wokeFromSnooze ? \"new\" : \"\"} \r\n\t\t\t${notification.cssClassName ? notification.cssClassName : \"\"}`}\r\n\t\t>\r\n\t\t\t{children ? (\r\n\t\t\t\tchildren\r\n\t\t\t) : (\r\n\t\t\t\t<>\r\n\t\t\t\t\t<NotificationCardHeaderShell\r\n\t\t\t\t\t\tnotification={notification}\r\n\t\t\t\t\t\tremoveNotification={removeNotification}\r\n\t\t\t\t\t\tuiContext={uiContext}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<NotificationCardBodyShell notification={notification} />\r\n\t\t\t\t</>\r\n\t\t\t)}\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}

package/react/components/notifications/components/shared/OverflowMenu.d.ts

@@ -1,6 +1,7 @@
 import React, { Dispatch, SetStateAction } from "react";
-import { INotification } from "common/notifications/definitions/INotification";
 import { OverFlowMenuAction } from "../../types";
+import { services } from "@finsemble/finsemble-core";
+declare type INotification = services.notification.types.INotification;
 export declare const OverflowMenuActions: {
     [key: string]: OverFlowMenuAction;
 };

package/react/components/notifications/components/shared/OverflowMenu.js

@@ -69,18 +69,19 @@ export const renderOverflowMenuAction = (notification, menuAction, isMuted) => {
         return null;
     }
     return (React.createElement("div", { key: `${notification.id}_${menuAction.name}`, className: "overflow-menu__action", onClick: () => {
-            menuAction?.action(notification);
-        } },
-        menuAction?.icon,
-        React.createElement("span", { className: "btn-label" }, menuAction?.label)));
+            menuAction === null || menuAction === void 0 ? void 0 : menuAction.action(notification);
+        } }, menuAction === null || menuAction === void 0 ? void 0 :
+        menuAction.icon,
+        React.createElement("span", { className: "btn-label" }, menuAction === null || menuAction === void 0 ? void 0 : menuAction.label)));
 };
 const OverflowMenu = ({ closeSelf, children }) => {
     const wrapperRef = useRef(null);
     const [className, setClassName] = useState("overflow-menu__container");
     useOutsideClickDetector(wrapperRef, () => closeSelf(false));
     const moveElementIntoView = () => {
+        var _a;
         const bottomViewPort = window.innerHeight + window.scrollY;
-        const domRect = wrapperRef?.current?.getBoundingClientRect();
+        const domRect = (_a = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
         const elementBottom = domRect ? domRect.y + domRect.height + window.scrollY : null;
         if (elementBottom && elementBottom > bottomViewPort) {
             setClassName("overflow-menu__container flow-up");

package/react/components/notifications/components/shared/OverflowMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowMenu.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/shared/OverflowMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA4B,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGrF,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,EACN,qBAAqB,EACrB,uBAAuB,EACvB,mBAAmB,GACnB,MAAM,oCAAoC,CAAC;AAS5C,OAAO,iBAAiB,MAAM,2BAA2B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,0BAA0B,CAAC;AAExD,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAGhD,MAAM,CAAC,MAAM,mBAAmB,GAA0C;IACzE,cAAc,EAAE;QACf,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,oBAAC,iBAAiB,OAAG;QAC3B,KAAK,EAAE,aAAa;QACpB,MAAM,EAAE,CAAC,YAA2B,EAAE,EAAE,CAAC,uBAAuB,CAAC,CAAC,YAAY,CAAC,CAAC;KAChF;IACD,YAAY,EAAE;QACb,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,oBAAC,gBAAgB,OAAG;QAC1B,KAAK,EAAE,WAAW;QAClB,MAAM,EAAE,CAAC,YAA2B,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC,YAAY,CAAC,CAAC;KAC9E;IACD,MAAM,EAAE;QACP,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,oBAAC,UAAU,OAAG;QACpB,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,CAAC,YAA2B,EAAE,EAAE,CAAC,mBAAmB,CAAC,CAAC,YAAY,CAAC,CAAC;KAC5E;IACD,OAAO,EAAE;QACR,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,CACL,6BAAK,SAAS,EAAC,gBAAgB;YAC9B,2BAAG,SAAS,EAAC,UAAU,GAAG,CACrB,CACN;QACD,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,GAAG,EAAE;QAEb,CAAC;KACD;IACD,QAAQ,EAAE;QACT,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,CACL,6BAAK,SAAS,EAAC,gBAAgB;YAC9B,2BAAG,SAAS,EAAC,aAAa,GAAG,CACxB,CACN;QACD,KAAK,EAAE,UAAU;QACjB,MAAM,EAAE,CAAC,YAA2B,EAAE,EAAE;YACvC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,UAAU,CACrC;gBACC,aAAa,EAAE,iBAAiB;aAChC,EACD;gBACC,OAAO,EAAE,MAAM;gBACf,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,QAAQ;aACb,EACD,GAAG,EAAE;gBACJ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,iCAAiC,EAAE;oBACrE,cAAc,EAAE,eAAe;oBAC/B,YAAY;iBACZ,CAAC,CAAC;gBAEH,UAAU,CAAC,GAAG,EAAE;oBACf,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,yCAAyC,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC;gBACjG,CAAC,EAAE,EAAE,CAAC,CAAC;YACR,CAAC,CACD,CAAC;QACH,CAAC;KACD;IACD,OAAO,EAAE;QACR,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,CACL,6BAAK,SAAS,EAAC,gBAAgB;YAC9B,2BAAG,SAAS,EAAC,cAAc,GAAG,CACzB,CACN;QACD,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,GAAG,EAAE;QAEb,CAAC;KACD;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACvC,YAA2B,EAC3B,UAA8B,EAC9B,OAAgB,EACf,EAAE;IACH,IAEC,CAAC,YAAY,CAAC,MAAM,IAAI,UAAU,CAAC,IAAI,KAAK,mBAAmB,CAAC,YAAY,CAAC,IAAI,CAAC;QAElF,CAAC,CAAC,YAAY,CAAC,MAAM,IAAI,UAAU,CAAC,IAAI,KAAK,mBAAmB,CAAC,cAAc,CAAC,IAAI,CAAC,EACpF;QACD,OAAO,IAAI,CAAC;KACZ;IAED,OAAO,CACN,6BACC,GAAG,EAAE,GAAG,YAAY,CAAC,EAAE,IAAI,UAAU,CAAC,IAAI,EAAE,EAC5C,SAAS,EAAC,uBAAuB,EACjC,OAAO,EAAE,GAAG,EAAE;YACb,UAAU,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;QAClC,CAAC;QAEA,UAAU,EAAE,IAAI;QACjB,8BAAM,SAAS,EAAC,WAAW,IAAE,UAAU,EAAE,KAAK,CAAQ,CACjD,CACN,CAAC;AACH,CAAC,CAAC;AAMF,MAAM,YAAY,GAEb,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IAChC,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,0BAA0B,CAAC,CAAC;IAEvE,uBAAuB,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAE5D,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAChC,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC;QAC3D,MAAM,OAAO,GAAG,UAAU,EAAE,OAAO,EAAE,qBAAqB,EAAE,CAAC;QAC7D,MAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;QAEnF,IAAI,aAAa,IAAI,aAAa,GAAG,cAAc,EAAE;YACpD,YAAY,CAAC,kCAAkC,CAAC,CAAC;SACjD;IACF,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,mBAAmB,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,OAAO,CACN,6BAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,IACxC,QAAQ,CACJ,CACN,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import React, { Dispatch, SetStateAction, useEffect, useRef, useState } from \"react\";\r\n\r\n// Hooks\r\nimport { useOutsideClickDetector } from \"../../../../hooks/useOutsideClickDetector\";\r\nimport {\r\n\tmarkNotificationsRead,\r\n\tmarkNotificationsUnread,\r\n\tsnoozeNotifications,\r\n} from \"../../../../hooks/useNotifications\";\r\n\r\n// Types\r\nimport { INotification } from \"common/notifications/definitions/INotification\";\r\nimport { OverFlowMenuAction } from \"../../types\";\r\n\r\n// Icons\r\nimport BellIcon from \"../../../shared/BellIcon\";\r\nimport BellIconCrossed from \"../../../shared/BellIconCrossed\";\r\nimport EnvelopeCloseIcon from \"../../icons/EnvelopeClose\";\r\nimport EnvelopeOpenIcon from \"../../icons/EnvelopeOpen\";\r\nimport IMuteFilter from \"common/notifications/definitions/IMuteFilter\";\r\nimport SnoozeIcon from \"../../icons/SnoozeIcon\";\r\nimport { getMuteFilterFromNotification } from \"../../utils\";\r\n\r\nexport const OverflowMenuActions: { [key: string]: OverFlowMenuAction } = {\r\n\tMARK_AS_UNREAD: {\r\n\t\tname: \"MARK_AS_UNREAD\",\r\n\t\ticon: <EnvelopeCloseIcon />,\r\n\t\tlabel: \"Mark Unread\",\r\n\t\taction: (notification: INotification) => markNotificationsUnread([notification]),\r\n\t},\r\n\tMARK_AS_READ: {\r\n\t\tname: \"MARK_AS_READ\",\r\n\t\ticon: <EnvelopeOpenIcon />,\r\n\t\tlabel: \"Mark Read\",\r\n\t\taction: (notification: INotification) => markNotificationsRead([notification]),\r\n\t},\r\n\tSNOOZE: {\r\n\t\tname: \"SNOOZE\",\r\n\t\ticon: <SnoozeIcon />,\r\n\t\tlabel: \"Snooze\",\r\n\t\taction: (notification: INotification) => snoozeNotifications([notification]),\r\n\t},\r\n\tDISMISS: {\r\n\t\tname: \"DISMISS\",\r\n\t\ticon: (\r\n\t\t\t<div className=\"finsemble-icon\">\r\n\t\t\t\t<i className=\"ff-close\" />\r\n\t\t\t</div>\r\n\t\t),\r\n\t\tlabel: \"Dismiss\",\r\n\t\taction: () => {\r\n\t\t\t// Empty - filled in later\r\n\t\t},\r\n\t},\r\n\tSETTINGS: {\r\n\t\tname: \"SETTINGS\",\r\n\t\ticon: (\r\n\t\t\t<div className=\"finsemble-icon\">\r\n\t\t\t\t<i className=\"ff-settings\" />\r\n\t\t\t</div>\r\n\t\t),\r\n\t\tlabel: \"Settings\",\r\n\t\taction: (notification: INotification) => {\r\n\t\t\tFSBL.Clients.LauncherClient.showWindow(\r\n\t\t\t\t{\r\n\t\t\t\t\tcomponentType: \"UserPreferences\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tmonitor: \"mine\",\r\n\t\t\t\t\tleft: \"center\",\r\n\t\t\t\t\ttop: \"center\",\r\n\t\t\t\t},\r\n\t\t\t\t() => {\r\n\t\t\t\t\tFSBL.Clients.RouterClient.transmit(\"FinsembleUserPreferencesChannel\", {\r\n\t\t\t\t\t\tpreferencesTab: \"Notifications\",\r\n\t\t\t\t\t\tnotification,\r\n\t\t\t\t\t});\r\n\t\t\t\t\t// we need this timeout otherwise the UserPreferences screen does not detect the message being transmited\r\n\t\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\t\tFSBL.Clients.RouterClient.transmit(\"FinsembleNotificationsNavigationChannel\", { notification });\r\n\t\t\t\t\t}, 50);\r\n\t\t\t\t}\r\n\t\t\t);\r\n\t\t},\r\n\t},\r\n\tDETAILS: {\r\n\t\tname: \"DETAILS\",\r\n\t\ticon: (\r\n\t\t\t<div className=\"finsemble-icon\">\r\n\t\t\t\t<i className=\"ff-dots-horz\" />\r\n\t\t\t</div>\r\n\t\t),\r\n\t\tlabel: \"Details\",\r\n\t\taction: () => {\r\n\t\t\t// Empty - filled in later\r\n\t\t},\r\n\t},\r\n};\r\n\r\nexport const renderOverflowMenuAction = (\r\n\tnotification: INotification,\r\n\tmenuAction: OverFlowMenuAction,\r\n\tisMuted: boolean\r\n) => {\r\n\tif (\r\n\t\t// Don't display read if notification is read\r\n\t\t(notification.isRead && menuAction.name === OverflowMenuActions.MARK_AS_READ.name) ||\r\n\t\t// Don't display unread if notification is unread\r\n\t\t(!notification.isRead && menuAction.name === OverflowMenuActions.MARK_AS_UNREAD.name)\r\n\t) {\r\n\t\treturn null;\r\n\t}\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tkey={`${notification.id}_${menuAction.name}`}\r\n\t\t\tclassName=\"overflow-menu__action\"\r\n\t\t\tonClick={() => {\r\n\t\t\t\tmenuAction?.action(notification);\r\n\t\t\t}}\r\n\t\t>\r\n\t\t\t{menuAction?.icon}\r\n\t\t\t<span className=\"btn-label\">{menuAction?.label}</span>\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\n/**\r\n * Overflow menu component for notifications that will provide a set of actions\r\n * a user can perform on a notification (e.g. dismiss, snooze)\r\n */\r\nconst OverflowMenu: React.FunctionComponent<{\r\n\tcloseSelf: Dispatch<SetStateAction<boolean>>;\r\n}> = ({ closeSelf, children }) => {\r\n\tconst wrapperRef = useRef<HTMLDivElement>(null);\r\n\tconst [className, setClassName] = useState(\"overflow-menu__container\");\r\n\r\n\tuseOutsideClickDetector(wrapperRef, () => closeSelf(false));\r\n\r\n\tconst moveElementIntoView = () => {\r\n\t\tconst bottomViewPort = window.innerHeight + window.scrollY;\r\n\t\tconst domRect = wrapperRef?.current?.getBoundingClientRect();\r\n\t\tconst elementBottom = domRect ? domRect.y + domRect.height + window.scrollY : null;\r\n\r\n\t\tif (elementBottom && elementBottom > bottomViewPort) {\r\n\t\t\tsetClassName(\"overflow-menu__container flow-up\");\r\n\t\t}\r\n\t};\r\n\r\n\tuseEffect(() => {\r\n\t\tmoveElementIntoView();\r\n\t});\r\n\r\n\treturn (\r\n\t\t<div ref={wrapperRef} className={className}>\r\n\t\t\t{children}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default OverflowMenu;\r\n"]}
+{"version":3,"file":"OverflowMenu.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/shared/OverflowMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { Dispatch, SetStateAction, useEffect, useRef, useState } from \"react\";\r\n\r\n// Hooks\r\nimport { useOutsideClickDetector } from \"../../../../hooks/useOutsideClickDetector\";\r\nimport {\r\n\tmarkNotificationsRead,\r\n\tmarkNotificationsUnread,\r\n\tsnoozeNotifications,\r\n} from \"../../../../hooks/useNotifications\";\r\n\r\n// Types\r\nimport { OverFlowMenuAction } from \"../../types\";\r\n\r\n// Icons\r\nimport EnvelopeCloseIcon from \"../../icons/EnvelopeClose\";\r\nimport EnvelopeOpenIcon from \"../../icons/EnvelopeOpen\";\r\nimport SnoozeIcon from \"../../icons/SnoozeIcon\";\r\nimport { services } from \"@finsemble/finsemble-core\";\r\n\r\ntype INotification = services.notification.types.INotification;\r\n\r\nexport const OverflowMenuActions: { [key: string]: OverFlowMenuAction } = {\r\n\tMARK_AS_UNREAD: {\r\n\t\tname: \"MARK_AS_UNREAD\",\r\n\t\ticon: <EnvelopeCloseIcon />,\r\n\t\tlabel: \"Mark Unread\",\r\n\t\taction: (notification: INotification) => markNotificationsUnread([notification]),\r\n\t},\r\n\tMARK_AS_READ: {\r\n\t\tname: \"MARK_AS_READ\",\r\n\t\ticon: <EnvelopeOpenIcon />,\r\n\t\tlabel: \"Mark Read\",\r\n\t\taction: (notification: INotification) => markNotificationsRead([notification]),\r\n\t},\r\n\tSNOOZE: {\r\n\t\tname: \"SNOOZE\",\r\n\t\ticon: <SnoozeIcon />,\r\n\t\tlabel: \"Snooze\",\r\n\t\taction: (notification: INotification) => snoozeNotifications([notification]),\r\n\t},\r\n\tDISMISS: {\r\n\t\tname: \"DISMISS\",\r\n\t\ticon: (\r\n\t\t\t<div className=\"finsemble-icon\">\r\n\t\t\t\t<i className=\"ff-close\" />\r\n\t\t\t</div>\r\n\t\t),\r\n\t\tlabel: \"Dismiss\",\r\n\t\taction: () => {\r\n\t\t\t// Empty - filled in later\r\n\t\t},\r\n\t},\r\n\tSETTINGS: {\r\n\t\tname: \"SETTINGS\",\r\n\t\ticon: (\r\n\t\t\t<div className=\"finsemble-icon\">\r\n\t\t\t\t<i className=\"ff-settings\" />\r\n\t\t\t</div>\r\n\t\t),\r\n\t\tlabel: \"Settings\",\r\n\t\taction: (notification: INotification) => {\r\n\t\t\tFSBL.Clients.LauncherClient.showWindow(\r\n\t\t\t\t{\r\n\t\t\t\t\tcomponentType: \"UserPreferences\",\r\n\t\t\t\t},\r\n\t\t\t\t{\r\n\t\t\t\t\tmonitor: \"mine\",\r\n\t\t\t\t\tleft: \"center\",\r\n\t\t\t\t\ttop: \"center\",\r\n\t\t\t\t},\r\n\t\t\t\t() => {\r\n\t\t\t\t\tFSBL.Clients.RouterClient.transmit(\"FinsembleUserPreferencesChannel\", {\r\n\t\t\t\t\t\tpreferencesTab: \"Notifications\",\r\n\t\t\t\t\t\tnotification,\r\n\t\t\t\t\t});\r\n\t\t\t\t\t// we need this timeout otherwise the UserPreferences screen does not detect the message being transmited\r\n\t\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\t\tFSBL.Clients.RouterClient.transmit(\"FinsembleNotificationsNavigationChannel\", { notification });\r\n\t\t\t\t\t}, 50);\r\n\t\t\t\t}\r\n\t\t\t);\r\n\t\t},\r\n\t},\r\n\tDETAILS: {\r\n\t\tname: \"DETAILS\",\r\n\t\ticon: (\r\n\t\t\t<div className=\"finsemble-icon\">\r\n\t\t\t\t<i className=\"ff-dots-horz\" />\r\n\t\t\t</div>\r\n\t\t),\r\n\t\tlabel: \"Details\",\r\n\t\taction: () => {\r\n\t\t\t// Empty - filled in later\r\n\t\t},\r\n\t},\r\n};\r\n\r\nexport const renderOverflowMenuAction = (\r\n\tnotification: INotification,\r\n\tmenuAction: OverFlowMenuAction,\r\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n\tisMuted: boolean\r\n) => {\r\n\tif (\r\n\t\t// Don't display read if notification is read\r\n\t\t(notification.isRead && menuAction.name === OverflowMenuActions.MARK_AS_READ.name) ||\r\n\t\t// Don't display unread if notification is unread\r\n\t\t(!notification.isRead && menuAction.name === OverflowMenuActions.MARK_AS_UNREAD.name)\r\n\t) {\r\n\t\treturn null;\r\n\t}\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tkey={`${notification.id}_${menuAction.name}`}\r\n\t\t\tclassName=\"overflow-menu__action\"\r\n\t\t\tonClick={() => {\r\n\t\t\t\tmenuAction?.action(notification);\r\n\t\t\t}}\r\n\t\t>\r\n\t\t\t{menuAction?.icon}\r\n\t\t\t<span className=\"btn-label\">{menuAction?.label}</span>\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\n/**\r\n * Overflow menu component for notifications that will provide a set of actions\r\n * a user can perform on a notification (e.g. dismiss, snooze)\r\n */\r\nconst OverflowMenu: React.FunctionComponent<{\r\n\tcloseSelf: Dispatch<SetStateAction<boolean>>;\r\n}> = ({ closeSelf, children }) => {\r\n\tconst wrapperRef = useRef<HTMLDivElement>(null);\r\n\tconst [className, setClassName] = useState(\"overflow-menu__container\");\r\n\r\n\tuseOutsideClickDetector(wrapperRef, () => closeSelf(false));\r\n\r\n\tconst moveElementIntoView = () => {\r\n\t\tconst bottomViewPort = window.innerHeight + window.scrollY;\r\n\t\tconst domRect = wrapperRef?.current?.getBoundingClientRect();\r\n\t\tconst elementBottom = domRect ? domRect.y + domRect.height + window.scrollY : null;\r\n\r\n\t\tif (elementBottom && elementBottom > bottomViewPort) {\r\n\t\t\tsetClassName(\"overflow-menu__container flow-up\");\r\n\t\t}\r\n\t};\r\n\r\n\tuseEffect(() => {\r\n\t\tmoveElementIntoView();\r\n\t});\r\n\r\n\treturn (\r\n\t\t<div ref={wrapperRef} className={className}>\r\n\t\t\t{children}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default OverflowMenu;\r\n"]}

package/react/components/notifications/components/shared/notificationCard/NotificationCardBodyActions.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="finsemble-core" />
 import React from "react";
-import { INotification } from "common/notifications/definitions/INotification";
+import { services } from "@finsemble/finsemble-core";
+declare type INotification = services.notification.types.INotification;
 export declare const NotificationCardBodyActions: React.FunctionComponent<{
     notification: INotification;
 }>;
+export {};

package/react/components/notifications/components/shared/notificationCard/NotificationCardBodyActions.js

@@ -27,6 +27,6 @@ const renderActionButtons = (notification, action, id) => {
 export const NotificationCardBodyActions = ({ notification, }) => {
     const { actions } = notification;
     const hasActions = actions && actions.length > 0;
-    return (React.createElement(React.Fragment, null, hasActions ? (React.createElement("div", { className: "actions-panel" }, actions?.map((action, index) => renderActionButtons(notification, action, index)))) : null));
+    return (React.createElement(React.Fragment, null, hasActions ? (React.createElement("div", { className: "actions-panel" }, actions === null || actions === void 0 ? void 0 : actions.map((action, index) => renderActionButtons(notification, action, index)))) : null));
 };
 //# sourceMappingURL=NotificationCardBodyActions.js.map

package/react/components/notifications/components/shared/notificationCard/NotificationCardBodyActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCardBodyActions.js","sourceRoot":"","sources":["../../../../../../src/components/notifications/components/shared/notificationCard/NotificationCardBodyActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,cAAuD,MAAM,mCAAmC,CAAC;AACxG,OAAO,MAAiC,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAEjE,MAAM,mBAAmB,GAAG,CAAC,YAA2B,EAAE,MAA2B,EAAE,EAAmB,EAAE,EAAE;IAC7G,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;QAC1B,IAAI,UAAU,GAAG,EAAyC,CAAC;QAC3D,IAAI,aAAa,GAA4B,EAAE,CAAC;QAChD,MAAM,CAAC,GAAG,CAAC,CAAC,eAAe,EAAE,KAAK,EAAE,EAAE;YACrC,IAAI,KAAK,KAAK,CAAC,EAAE;gBAChB,UAAU,CAAC,UAAU,GAAG,GAAG,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC;gBAClF,UAAU,CAAC,WAAW,GAAG,eAAe,CAAC,UAAU,CAAC;aACpD;iBAAM;gBACN,aAAa,CAAC,IAAI,CAAC;oBAClB,WAAW,EAAE,eAAe,CAAC,UAAU;oBACvC,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,YAAY,EAAE,eAAe,CAAC;iBACvE,CAAC,CAAC;aACH;QACF,CAAC,CAAC,CAAC;QACH,OAAO,CACN,oBAAC,cAAc,IACd,GAAG,EAAE,EAAE,EACP,WAAW,EAAE,UAAU,CAAC,WAAW,EACnC,UAAU,EAAE,UAAU,CAAC,UAAU,EACjC,aAAa,EAAE,aAAa,GAC3B,CACF,CAAC;KACF;SAAM;QACN,OAAO,CACN,oBAAC,MAAM,IACN,GAAG,EAAE,EAAE,EACP,WAAW,EAAE,MAAM,CAAC,UAAU,EAC9B,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC,GAC7D,CACF,CAAC;KACF;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAA6D,CAAC,EACrG,YAAY,GACZ,EAAE,EAAE;IACJ,MAAM,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;IACjC,MAAM,UAAU,GAAG,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IAEjD,OAAO,CACN,0CACE,UAAU,CAAC,CAAC,CAAC,CACb,6BAAK,SAAS,EAAC,eAAe,IAC5B,OAAO,EAAE,GAAG,CAAC,CAAC,MAA2B,EAAE,KAAU,EAAE,EAAE,CAAC,mBAAmB,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CACvG,CACN,CAAC,CAAC,CAAC,IAAI,CACN,CACH,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\r\nimport { INotification } from \"common/notifications/definitions/INotification\";\r\nimport IAction from \"common/notifications/definitions/IAction\";\r\nimport DropdownButton, { IFinsembleDropdownActionButtonProps } from \"../../../../common/DropdownButton\";\r\nimport Button, { IFinsembleButtonProps } from \"../../../../shared/Button\";\r\nimport { doAction } from \"../../../../../hooks/useNotifications\";\r\n\r\nconst renderActionButtons = (notification: INotification, action: IAction | IAction[], id: string | number) => {\r\n\tif (Array.isArray(action)) {\r\n\t\tlet buttonData = {} as IFinsembleDropdownActionButtonProps;\r\n\t\tlet buttonOptions: IFinsembleButtonProps[] = [];\r\n\t\taction.map((compositeAction, index) => {\r\n\t\t\tif (index === 0) {\r\n\t\t\t\tbuttonData.mainAction = () => doAction && doAction(notification, compositeAction);\r\n\t\t\t\tbuttonData.buttonLabel = compositeAction.buttonText;\r\n\t\t\t} else {\r\n\t\t\t\tbuttonOptions.push({\r\n\t\t\t\t\tbuttonLabel: compositeAction.buttonText,\r\n\t\t\t\t\tclickHandler: () => doAction && doAction(notification, compositeAction),\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t});\r\n\t\treturn (\r\n\t\t\t<DropdownButton\r\n\t\t\t\tkey={id}\r\n\t\t\t\tbuttonLabel={buttonData.buttonLabel}\r\n\t\t\t\tmainAction={buttonData.mainAction}\r\n\t\t\t\tbuttonOptions={buttonOptions}\r\n\t\t\t/>\r\n\t\t);\r\n\t} else {\r\n\t\treturn (\r\n\t\t\t<Button\r\n\t\t\t\tkey={id}\r\n\t\t\t\tbuttonLabel={action.buttonText}\r\n\t\t\t\tclickHandler={() => doAction && doAction(notification, action)}\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n};\r\n\r\nexport const NotificationCardBodyActions: React.FunctionComponent<{ notification: INotification }> = ({\r\n\tnotification,\r\n}) => {\r\n\tconst { actions } = notification;\r\n\tconst hasActions = actions && actions.length > 0;\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t{hasActions ? (\r\n\t\t\t\t<div className=\"actions-panel\">\r\n\t\t\t\t\t{actions?.map((action: IAction | IAction[], index: any) => renderActionButtons(notification, action, index))}\r\n\t\t\t\t</div>\r\n\t\t\t) : null}\r\n\t\t</>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"NotificationCardBodyActions.js","sourceRoot":"","sources":["../../../../../../src/components/notifications/components/shared/notificationCard/NotificationCardBodyActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAuD,MAAM,mCAAmC,CAAC;AACxG,OAAO,MAAiC,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAMjE,MAAM,mBAAmB,GAAG,CAAC,YAA2B,EAAE,MAA2B,EAAE,EAAmB,EAAE,EAAE;IAC7G,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;QAC1B,IAAI,UAAU,GAAG,EAAyC,CAAC;QAC3D,IAAI,aAAa,GAA4B,EAAE,CAAC;QAChD,MAAM,CAAC,GAAG,CAAC,CAAC,eAAe,EAAE,KAAK,EAAE,EAAE;YACrC,IAAI,KAAK,KAAK,CAAC,EAAE;gBAChB,UAAU,CAAC,UAAU,GAAG,GAAG,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC;gBAClF,UAAU,CAAC,WAAW,GAAG,eAAe,CAAC,UAAU,CAAC;aACpD;iBAAM;gBACN,aAAa,CAAC,IAAI,CAAC;oBAClB,WAAW,EAAE,eAAe,CAAC,UAAU;oBACvC,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,YAAY,EAAE,eAAe,CAAC;iBACvE,CAAC,CAAC;aACH;QACF,CAAC,CAAC,CAAC;QACH,OAAO,CACN,oBAAC,cAAc,IACd,GAAG,EAAE,EAAE,EACP,WAAW,EAAE,UAAU,CAAC,WAAW,EACnC,UAAU,EAAE,UAAU,CAAC,UAAU,EACjC,aAAa,EAAE,aAAa,GAC3B,CACF,CAAC;KACF;SAAM;QACN,OAAO,CACN,oBAAC,MAAM,IACN,GAAG,EAAE,EAAE,EACP,WAAW,EAAE,MAAM,CAAC,UAAU,EAC9B,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC,GAC7D,CACF,CAAC;KACF;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAA6D,CAAC,EACrG,YAAY,GACZ,EAAE,EAAE;IACJ,MAAM,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;IACjC,MAAM,UAAU,GAAG,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IAEjD,OAAO,CACN,0CACE,UAAU,CAAC,CAAC,CAAC,CACb,6BAAK,SAAS,EAAC,eAAe,IAC5B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,CAAC,CAAC,MAA2B,EAAE,KAAU,EAAE,EAAE,CAAC,mBAAmB,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CACvG,CACN,CAAC,CAAC,CAAC,IAAI,CACN,CACH,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\r\nimport DropdownButton, { IFinsembleDropdownActionButtonProps } from \"../../../../common/DropdownButton\";\r\nimport Button, { IFinsembleButtonProps } from \"../../../../shared/Button\";\r\nimport { doAction } from \"../../../../../hooks/useNotifications\";\r\nimport { services } from \"@finsemble/finsemble-core\";\r\n\r\ntype INotification = services.notification.types.INotification;\r\ntype IAction = services.notification.types.IAction;\r\n\r\nconst renderActionButtons = (notification: INotification, action: IAction | IAction[], id: string | number) => {\r\n\tif (Array.isArray(action)) {\r\n\t\tlet buttonData = {} as IFinsembleDropdownActionButtonProps;\r\n\t\tlet buttonOptions: IFinsembleButtonProps[] = [];\r\n\t\taction.map((compositeAction, index) => {\r\n\t\t\tif (index === 0) {\r\n\t\t\t\tbuttonData.mainAction = () => doAction && doAction(notification, compositeAction);\r\n\t\t\t\tbuttonData.buttonLabel = compositeAction.buttonText;\r\n\t\t\t} else {\r\n\t\t\t\tbuttonOptions.push({\r\n\t\t\t\t\tbuttonLabel: compositeAction.buttonText,\r\n\t\t\t\t\tclickHandler: () => doAction && doAction(notification, compositeAction),\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t});\r\n\t\treturn (\r\n\t\t\t<DropdownButton\r\n\t\t\t\tkey={id}\r\n\t\t\t\tbuttonLabel={buttonData.buttonLabel}\r\n\t\t\t\tmainAction={buttonData.mainAction}\r\n\t\t\t\tbuttonOptions={buttonOptions}\r\n\t\t\t/>\r\n\t\t);\r\n\t} else {\r\n\t\treturn (\r\n\t\t\t<Button\r\n\t\t\t\tkey={id}\r\n\t\t\t\tbuttonLabel={action.buttonText}\r\n\t\t\t\tclickHandler={() => doAction && doAction(notification, action)}\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n};\r\n\r\nexport const NotificationCardBodyActions: React.FunctionComponent<{ notification: INotification }> = ({\r\n\tnotification,\r\n}) => {\r\n\tconst { actions } = notification;\r\n\tconst hasActions = actions && actions.length > 0;\r\n\r\n\treturn (\r\n\t\t<>\r\n\t\t\t{hasActions ? (\r\n\t\t\t\t<div className=\"actions-panel\">\r\n\t\t\t\t\t{actions?.map((action: IAction | IAction[], index: any) => renderActionButtons(notification, action, index))}\r\n\t\t\t\t</div>\r\n\t\t\t) : null}\r\n\t\t</>\r\n\t);\r\n};\r\n"]}

package/react/components/notifications/components/shared/notificationCard/NotificationCardBodyShell.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="finsemble-core" />
 import React from "react";
-import { INotification } from "common/notifications/definitions/INotification";
+import { services } from "@finsemble/finsemble-core";
+declare type INotification = services.notification.types.INotification;
 export declare const NotificationCardBodyShell: React.FunctionComponent<{
     notification: INotification;
 }>;
+export {};

package/react/components/notifications/components/shared/notificationCard/NotificationCardBodyShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCardBodyShell.js","sourceRoot":"","sources":["../../../../../../src/components/notifications/components/shared/notificationCard/NotificationCardBodyShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,+BAA+B,EAAE,MAAM,mCAAmC,CAAC;AAEpF,MAAM,CAAC,MAAM,yBAAyB,GAA6D,CAAC,EACnG,YAAY,EACZ,QAAQ,GACR,EAAE,EAAE;IACJ,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,YAAY,CAAC;IACvD,MAAM,UAAU,GAAG,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IAEjD,OAAO,CACN,6BAAK,SAAS,EAAE,2BAA2B,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE;QACtE,QAAQ,CAAC,CAAC,CAAC,CACX,QAAQ,CACR,CAAC,CAAC,CAAC,CACH;YACC,oBAAC,+BAA+B,IAAC,WAAW,EAAE,WAAW,GAAI;YAC7D,6BAAK,SAAS,EAAC,8BAA8B,IAAE,OAAO,CAAO,CAC3D,CACH;QACD,oBAAC,2BAA2B,IAAC,YAAY,EAAE,YAAY,GAAI,CACtD,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\r\nimport { INotification } from \"common/notifications/definitions/INotification\";\r\nimport { NotificationCardBodyActions } from \"./NotificationCardBodyActions\";\r\nimport { NotificationCardBodyContentLogo } from \"./NotificationCardBodyContentLogo\";\r\n\r\nexport const NotificationCardBodyShell: React.FunctionComponent<{ notification: INotification }> = ({\r\n\tnotification,\r\n\tchildren,\r\n}) => {\r\n\tconst { actions, details, contentLogo } = notification;\r\n\tconst hasActions = actions && actions.length > 0;\r\n\r\n\treturn (\r\n\t\t<div className={`notification-card__body ${hasActions ? \"actions\" : \"\"}`}>\r\n\t\t\t{children ? (\r\n\t\t\t\tchildren\r\n\t\t\t) : (\r\n\t\t\t\t<>\r\n\t\t\t\t\t<NotificationCardBodyContentLogo contentLogo={contentLogo} />\r\n\t\t\t\t\t<div className=\"notification-card__body_text\">{details}</div>\r\n\t\t\t\t</>\r\n\t\t\t)}\r\n\t\t\t<NotificationCardBodyActions notification={notification} />\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"NotificationCardBodyShell.js","sourceRoot":"","sources":["../../../../../../src/components/notifications/components/shared/notificationCard/NotificationCardBodyShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,+BAA+B,EAAE,MAAM,mCAAmC,CAAC;AAKpF,MAAM,CAAC,MAAM,yBAAyB,GAA6D,CAAC,EACnG,YAAY,EACZ,QAAQ,GACR,EAAE,EAAE;IACJ,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,YAAY,CAAC;IACvD,MAAM,UAAU,GAAG,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IAEjD,OAAO,CACN,6BAAK,SAAS,EAAE,2BAA2B,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE;QACtE,QAAQ,CAAC,CAAC,CAAC,CACX,QAAQ,CACR,CAAC,CAAC,CAAC,CACH;YACC,oBAAC,+BAA+B,IAAC,WAAW,EAAE,WAAW,GAAI;YAC7D,6BAAK,SAAS,EAAC,8BAA8B,IAAE,OAAO,CAAO,CAC3D,CACH;QACD,oBAAC,2BAA2B,IAAC,YAAY,EAAE,YAAY,GAAI,CACtD,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React from \"react\";\r\nimport { NotificationCardBodyActions } from \"./NotificationCardBodyActions\";\r\nimport { NotificationCardBodyContentLogo } from \"./NotificationCardBodyContentLogo\";\r\nimport { services } from \"@finsemble/finsemble-core\";\r\n\r\ntype INotification = services.notification.types.INotification;\r\n\r\nexport const NotificationCardBodyShell: React.FunctionComponent<{ notification: INotification }> = ({\r\n\tnotification,\r\n\tchildren,\r\n}) => {\r\n\tconst { actions, details, contentLogo } = notification;\r\n\tconst hasActions = actions && actions.length > 0;\r\n\r\n\treturn (\r\n\t\t<div className={`notification-card__body ${hasActions ? \"actions\" : \"\"}`}>\r\n\t\t\t{children ? (\r\n\t\t\t\tchildren\r\n\t\t\t) : (\r\n\t\t\t\t<>\r\n\t\t\t\t\t<NotificationCardBodyContentLogo contentLogo={contentLogo} />\r\n\t\t\t\t\t<div className=\"notification-card__body_text\">{details}</div>\r\n\t\t\t\t</>\r\n\t\t\t)}\r\n\t\t\t<NotificationCardBodyActions notification={notification} />\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}

package/react/components/notifications/components/shared/notificationCard/NotificationCardHeaderControls.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="finsemble-core" />
 import React from "react";
-import { INotification } from "common/notifications/definitions/INotification";
+import { services } from "@finsemble/finsemble-core";
+declare type INotification = services.notification.types.INotification;
 export declare const NotificationCardHeaderControls: React.FunctionComponent<{
     notification: INotification;
     uiContext?: string;
     removeNotification?: Function;
 }>;
+export {};

package/react/components/notifications/components/shared/notificationCard/NotificationCardHeaderControls.js

@@ -6,9 +6,7 @@ import { formatDistanceToNow } from "date-fns";
 export const NotificationCardHeaderControls = ({ notification, removeNotification, uiContext = "center" }) => {
     const notificationsContext = useContext(NotificationsContext);
     const { setSelectedNotification, muteFilters } = notificationsContext;
-    const { title, headerLogo } = notification;
     const [overflowMenuOpen, setOverflowMenuOpen] = useState(false);
-    const [showDefaultIcon, setShowDefaultIcon] = useState(false);
     const [isMuteFilterApplied, setIsMuteFilterApplied] = useState(muteFilters
         ? muteFilters.some((filter) => filter.source === notification.source && filter.type === notification.type)
         : false);
@@ -30,8 +28,8 @@ export const NotificationCardHeaderControls = ({ notification, removeNotificatio
     let optionsToggleClassName = "notification-card__more-options__toggle";
     if (uiContext === "center") {
         delete overFlowActions.DISMISS;
-        overFlowActions.DETAILS.action = (notification) => {
-            setSelectedNotification(notification);
+        overFlowActions.DETAILS.action = (overflowNotification) => {
+            setSelectedNotification(overflowNotification);
         };
     }
     else {

package/react/components/notifications/components/shared/notificationCard/NotificationCardHeaderControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCardHeaderControls.js","sourceRoot":"","sources":["../../../../../../src/components/notifications/components/shared/notificationCard/NotificationCardHeaderControls.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useEffect, useState } from \"react\";\r\nimport { INotification } from \"common/notifications/definitions/INotification\";\r\nimport IconButton from \"../IconButton\";\r\nimport OverflowMenu, { OverflowMenuActions, renderOverflowMenuAction } from \"../OverflowMenu\";\r\nimport { NotificationsContext } from \"../../../notificationsContext\";\r\nimport { formatDistanceToNow } from \"date-fns\";\r\n\r\nexport const NotificationCardHeaderControls: React.FunctionComponent<{\r\n\tnotification: INotification;\r\n\tuiContext?: string;\r\n\tremoveNotification?: Function;\r\n}> = ({ notification, removeNotification, uiContext = \"center\" }) => {\r\n\tconst notificationsContext = useContext(NotificationsContext);\r\n\tconst { setSelectedNotification, muteFilters } = notificationsContext;\r\n\tconst { title, headerLogo } = notification;\r\n\r\n\tconst [overflowMenuOpen, setOverflowMenuOpen] = useState(false);\r\n\tconst [showDefaultIcon, setShowDefaultIcon] = useState(false);\r\n\tconst [isMuteFilterApplied, setIsMuteFilterApplied] = useState(\r\n\t\tmuteFilters\r\n\t\t\t? muteFilters.some((filter) => filter.source === notification.source && filter.type === notification.type)\r\n\t\t\t: false\r\n\t);\r\n\r\n\tconst [time, setTime] = useState(\r\n\t\tformatDistanceToNow(new Date(notification.issuedAt), {\r\n\t\t\tincludeSeconds: true,\r\n\t\t})\r\n\t);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst id = setInterval(() => {\r\n\t\t\tsetTime(\r\n\t\t\t\tformatDistanceToNow(new Date(notification.issuedAt), {\r\n\t\t\t\t\tincludeSeconds: true,\r\n\t\t\t\t})\r\n\t\t\t);\r\n\t\t}, 60000);\r\n\t\treturn () => clearInterval(id);\r\n\t});\r\n\r\n\tconst toggleOverflowMenu = () => {\r\n\t\tsetOverflowMenuOpen(!overflowMenuOpen);\r\n\t};\r\n\r\n\tconst overFlowActions = Object.assign({}, OverflowMenuActions);\r\n\tlet optionsToggleClassName = \"notification-card__more-options__toggle\";\r\n\r\n\tif (uiContext === \"center\") {\r\n\t\tdelete overFlowActions.DISMISS;\r\n\t\toverFlowActions.DETAILS.action = (notification: INotification) => {\r\n\t\t\tsetSelectedNotification(notification);\r\n\t\t};\r\n\t} else {\r\n\t\toptionsToggleClassName = \"notification-card__more-options__no-toggle\";\r\n\t\tdelete overFlowActions.MARK_AS_READ;\r\n\t\tdelete overFlowActions.MARK_AS_UNREAD;\r\n\t\tdelete overFlowActions.DETAILS;\r\n\t\tdelete overFlowActions.DISMISS;\r\n\t}\r\n\r\n\tuseEffect(() => {\r\n\t\tfunction listenMuteStateChanged(error: any, response: any) {\r\n\t\t\tif (error) {\r\n\t\t\t\tconsole.error(\"FinsembleNotificationsMuteStateChannel: \", error);\r\n\t\t\t} else {\r\n\t\t\t\tconst { data } = response;\r\n\t\t\t\tif (notification.source === data.source && notification.type === data.type) {\r\n\t\t\t\t\tsetIsMuteFilterApplied(data.isMuted);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t\tFSBL.Clients.RouterClient.addListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\r\n\t\treturn () => {\r\n\t\t\tFSBL.Clients.RouterClient.removeListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\r\n\t\t};\r\n\t}, []);\r\n\r\n\tconst menuActions = Object.values(overFlowActions).map((value) =>\r\n\t\trenderOverflowMenuAction(notification, value, isMuteFilterApplied)\r\n\t);\r\n\r\n\treturn (\r\n\t\t<div className={optionsToggleClassName} onMouseLeave={() => setOverflowMenuOpen(false)}>\r\n\t\t\t<span className=\"notification-card_overflow_menu\">\r\n\t\t\t\t<IconButton iconName=\"ff-dots-vert\" tooltip=\"Options\" clickHandler={toggleOverflowMenu}>\r\n\t\t\t\t\t{overflowMenuOpen ? <OverflowMenu closeSelf={setOverflowMenuOpen}>{menuActions}</OverflowMenu> : null}\r\n\t\t\t\t</IconButton>\r\n\t\t\t</span>\r\n\t\t\t{uiContext == \"toasts\" && (\r\n\t\t\t\t<IconButton\r\n\t\t\t\t\ticonName=\"ff-close\"\r\n\t\t\t\t\tclassNames={\"notification-card__dismiss no-hover\"}\r\n\t\t\t\t\ttooltip=\"Dismiss\"\r\n\t\t\t\t\tclickHandler={removeNotification}\r\n\t\t\t\t/>\r\n\t\t\t)}\r\n\t\t\t{uiContext == \"center\" && <span className=\"notification-card_timestamp\">{time}</span>}\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"NotificationCardHeaderControls.js","sourceRoot":"","sources":["../../../../../../src/components/notifications/components/shared/notificationCard/NotificationCardHeaderControls.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useEffect, useState } from \"react\";\r\nimport IconButton from \"../IconButton\";\r\nimport OverflowMenu, { OverflowMenuActions, renderOverflowMenuAction } from \"../OverflowMenu\";\r\nimport { NotificationsContext } from \"../../../notificationsContext\";\r\nimport { formatDistanceToNow } from \"date-fns\";\r\nimport { services } from \"@finsemble/finsemble-core\";\r\n\r\ntype INotification = services.notification.types.INotification;\r\n\r\nexport const NotificationCardHeaderControls: React.FunctionComponent<{\r\n\tnotification: INotification;\r\n\tuiContext?: string;\r\n\tremoveNotification?: Function;\r\n}> = ({ notification, removeNotification, uiContext = \"center\" }) => {\r\n\tconst notificationsContext = useContext(NotificationsContext);\r\n\tconst { setSelectedNotification, muteFilters } = notificationsContext;\r\n\r\n\tconst [overflowMenuOpen, setOverflowMenuOpen] = useState(false);\r\n\tconst [isMuteFilterApplied, setIsMuteFilterApplied] = useState(\r\n\t\tmuteFilters\r\n\t\t\t? muteFilters.some((filter) => filter.source === notification.source && filter.type === notification.type)\r\n\t\t\t: false\r\n\t);\r\n\r\n\tconst [time, setTime] = useState(\r\n\t\tformatDistanceToNow(new Date(notification.issuedAt), {\r\n\t\t\tincludeSeconds: true,\r\n\t\t})\r\n\t);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst id = setInterval(() => {\r\n\t\t\tsetTime(\r\n\t\t\t\tformatDistanceToNow(new Date(notification.issuedAt), {\r\n\t\t\t\t\tincludeSeconds: true,\r\n\t\t\t\t})\r\n\t\t\t);\r\n\t\t}, 60000);\r\n\t\treturn () => clearInterval(id);\r\n\t});\r\n\r\n\tconst toggleOverflowMenu = () => {\r\n\t\tsetOverflowMenuOpen(!overflowMenuOpen);\r\n\t};\r\n\r\n\tconst overFlowActions = Object.assign({}, OverflowMenuActions);\r\n\tlet optionsToggleClassName = \"notification-card__more-options__toggle\";\r\n\r\n\tif (uiContext === \"center\") {\r\n\t\tdelete overFlowActions.DISMISS;\r\n\t\toverFlowActions.DETAILS.action = (overflowNotification: INotification) => {\r\n\t\t\tsetSelectedNotification(overflowNotification);\r\n\t\t};\r\n\t} else {\r\n\t\toptionsToggleClassName = \"notification-card__more-options__no-toggle\";\r\n\t\tdelete overFlowActions.MARK_AS_READ;\r\n\t\tdelete overFlowActions.MARK_AS_UNREAD;\r\n\t\tdelete overFlowActions.DETAILS;\r\n\t\tdelete overFlowActions.DISMISS;\r\n\t}\r\n\r\n\tuseEffect(() => {\r\n\t\tfunction listenMuteStateChanged(error: any, response: any) {\r\n\t\t\tif (error) {\r\n\t\t\t\tconsole.error(\"FinsembleNotificationsMuteStateChannel: \", error);\r\n\t\t\t} else {\r\n\t\t\t\tconst { data } = response;\r\n\t\t\t\tif (notification.source === data.source && notification.type === data.type) {\r\n\t\t\t\t\tsetIsMuteFilterApplied(data.isMuted);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t\tFSBL.Clients.RouterClient.addListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\r\n\t\treturn () => {\r\n\t\t\tFSBL.Clients.RouterClient.removeListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\r\n\t\t};\r\n\t}, []);\r\n\r\n\tconst menuActions = Object.values(overFlowActions).map((value) =>\r\n\t\trenderOverflowMenuAction(notification, value, isMuteFilterApplied)\r\n\t);\r\n\r\n\treturn (\r\n\t\t<div className={optionsToggleClassName} onMouseLeave={() => setOverflowMenuOpen(false)}>\r\n\t\t\t<span className=\"notification-card_overflow_menu\">\r\n\t\t\t\t<IconButton iconName=\"ff-dots-vert\" tooltip=\"Options\" clickHandler={toggleOverflowMenu}>\r\n\t\t\t\t\t{overflowMenuOpen ? <OverflowMenu closeSelf={setOverflowMenuOpen}>{menuActions}</OverflowMenu> : null}\r\n\t\t\t\t</IconButton>\r\n\t\t\t</span>\r\n\t\t\t{uiContext == \"toasts\" && (\r\n\t\t\t\t<IconButton\r\n\t\t\t\t\ticonName=\"ff-close\"\r\n\t\t\t\t\tclassNames={\"notification-card__dismiss no-hover\"}\r\n\t\t\t\t\ttooltip=\"Dismiss\"\r\n\t\t\t\t\tclickHandler={removeNotification}\r\n\t\t\t\t/>\r\n\t\t\t)}\r\n\t\t\t{uiContext == \"center\" && <span className=\"notification-card_timestamp\">{time}</span>}\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}

package/react/components/notifications/components/shared/notificationCard/NotificationCardHeaderShell.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="finsemble-core" />
 import React from "react";
-import { INotification } from "common/notifications/definitions/INotification";
+import { services } from "@finsemble/finsemble-core";
+declare type INotification = services.notification.types.INotification;
 export declare const NotificationCardHeaderShell: React.FunctionComponent<{
     notification: INotification;
     uiContext: string;
     removeNotification: Function;
 }>;
+export {};

package/react/components/notifications/components/shared/notificationCard/NotificationCardHeaderShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCardHeaderShell.js","sourceRoot":"","sources":["../../../../../../src/components/notifications/components/shared/notificationCard/NotificationCardHeaderShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,8BAA8B,EAAE,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,2BAA2B,GAInC,CAAC,EAAE,YAAY,EAAE,kBAAkB,EAAE,SAAS,GAAG,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC7E,MAAM,oBAAoB,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAC9D,MAAM,EAAE,aAAa,EAAE,GAAG,oBAAoB,CAAC;IAE/C,OAAO,CACN,6BAAK,SAAS,EAAC,2BAA2B;QACxC,QAAQ,CAAC,CAAC,CAAC,CACX;YACE,aAAa,KAAK,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAC,WAAW,IAAC,YAAY,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,yCAAK;YAC/F,QAAQ,CACP,CACH,CAAC,CAAC,CAAC,CACH;YACE,aAAa,KAAK,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,CAC5C,oBAAC,WAAW,IAAC,YAAY,EAAE,YAAY,GAAI,CAC3C,CAAC,CAAC,CAAC,CACH,oBAAC,0BAA0B,IAAC,UAAU,EAAE,YAAY,CAAC,UAAU,GAAI,CACnE;YACD,6BAAK,SAAS,EAAC,0BAA0B,IAAE,YAAY,CAAC,KAAK,CAAO,CAClE,CACH;QACD,oBAAC,8BAA8B,IAC9B,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,SAAS,EAAE,SAAS,GACnB,CACG,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useContext } from \"react\";\r\nimport { INotification } from \"common/notifications/definitions/INotification\";\r\nimport { NotificationCardHeaderControls } from \"./NotificationCardHeaderControls\";\r\nimport { NotificationCardHeaderLogo } from \"./NotificationCardHeaderLogo\";\r\nimport { NotificationsContext } from \"../../../notificationsContext\";\r\nimport { SelectionMode } from \"../../../constants\";\r\nimport { CheckButton } from \"../CheckButton\";\r\n\r\nexport const NotificationCardHeaderShell: React.FunctionComponent<{\r\n\tnotification: INotification;\r\n\tuiContext: string;\r\n\tremoveNotification: Function;\r\n}> = ({ notification, removeNotification, uiContext = \"center\", children }) => {\r\n\tconst notificationsContext = useContext(NotificationsContext);\r\n\tconst { selectionMode } = notificationsContext;\r\n\r\n\treturn (\r\n\t\t<div className=\"notification-card__header\">\r\n\t\t\t{children ? (\r\n\t\t\t\t<>\r\n\t\t\t\t\t{selectionMode === SelectionMode.SELECTION ? <CheckButton notification={notification} /> : <></>}\r\n\t\t\t\t\t{children}\r\n\t\t\t\t</>\r\n\t\t\t) : (\r\n\t\t\t\t<>\r\n\t\t\t\t\t{selectionMode === SelectionMode.SELECTION ? (\r\n\t\t\t\t\t\t<CheckButton notification={notification} />\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t<NotificationCardHeaderLogo headerLogo={notification.headerLogo} />\r\n\t\t\t\t\t)}\r\n\t\t\t\t\t<div className=\"notification-card__title\">{notification.title}</div>\r\n\t\t\t\t</>\r\n\t\t\t)}\r\n\t\t\t<NotificationCardHeaderControls\r\n\t\t\t\tnotification={notification}\r\n\t\t\t\tremoveNotification={removeNotification}\r\n\t\t\t\tuiContext={uiContext}\r\n\t\t\t/>\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}
+{"version":3,"file":"NotificationCardHeaderShell.js","sourceRoot":"","sources":["../../../../../../src/components/notifications/components/shared/notificationCard/NotificationCardHeaderShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,8BAA8B,EAAE,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAK7C,MAAM,CAAC,MAAM,2BAA2B,GAInC,CAAC,EAAE,YAAY,EAAE,kBAAkB,EAAE,SAAS,GAAG,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC7E,MAAM,oBAAoB,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAC9D,MAAM,EAAE,aAAa,EAAE,GAAG,oBAAoB,CAAC;IAE/C,OAAO,CACN,6BAAK,SAAS,EAAC,2BAA2B;QACxC,QAAQ,CAAC,CAAC,CAAC,CACX;YACE,aAAa,KAAK,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAC,WAAW,IAAC,YAAY,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,yCAAK;YAC/F,QAAQ,CACP,CACH,CAAC,CAAC,CAAC,CACH;YACE,aAAa,KAAK,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,CAC5C,oBAAC,WAAW,IAAC,YAAY,EAAE,YAAY,GAAI,CAC3C,CAAC,CAAC,CAAC,CACH,oBAAC,0BAA0B,IAAC,UAAU,EAAE,YAAY,CAAC,UAAU,GAAI,CACnE;YACD,6BAAK,SAAS,EAAC,0BAA0B,IAAE,YAAY,CAAC,KAAK,CAAO,CAClE,CACH;QACD,oBAAC,8BAA8B,IAC9B,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,SAAS,EAAE,SAAS,GACnB,CACG,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import React, { useContext } from \"react\";\r\nimport { NotificationCardHeaderControls } from \"./NotificationCardHeaderControls\";\r\nimport { NotificationCardHeaderLogo } from \"./NotificationCardHeaderLogo\";\r\nimport { NotificationsContext } from \"../../../notificationsContext\";\r\nimport { SelectionMode } from \"../../../constants\";\r\nimport { CheckButton } from \"../CheckButton\";\r\nimport { services } from \"@finsemble/finsemble-core\";\r\n\r\ntype INotification = services.notification.types.INotification;\r\n\r\nexport const NotificationCardHeaderShell: React.FunctionComponent<{\r\n\tnotification: INotification;\r\n\tuiContext: string;\r\n\tremoveNotification: Function;\r\n}> = ({ notification, removeNotification, uiContext = \"center\", children }) => {\r\n\tconst notificationsContext = useContext(NotificationsContext);\r\n\tconst { selectionMode } = notificationsContext;\r\n\r\n\treturn (\r\n\t\t<div className=\"notification-card__header\">\r\n\t\t\t{children ? (\r\n\t\t\t\t<>\r\n\t\t\t\t\t{selectionMode === SelectionMode.SELECTION ? <CheckButton notification={notification} /> : <></>}\r\n\t\t\t\t\t{children}\r\n\t\t\t\t</>\r\n\t\t\t) : (\r\n\t\t\t\t<>\r\n\t\t\t\t\t{selectionMode === SelectionMode.SELECTION ? (\r\n\t\t\t\t\t\t<CheckButton notification={notification} />\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t<NotificationCardHeaderLogo headerLogo={notification.headerLogo} />\r\n\t\t\t\t\t)}\r\n\t\t\t\t\t<div className=\"notification-card__title\">{notification.title}</div>\r\n\t\t\t\t</>\r\n\t\t\t)}\r\n\t\t\t<NotificationCardHeaderControls\r\n\t\t\t\tnotification={notification}\r\n\t\t\t\tremoveNotification={removeNotification}\r\n\t\t\t\tuiContext={uiContext}\r\n\t\t\t/>\r\n\t\t</div>\r\n\t);\r\n};\r\n"]}

package/react/components/notifications/components/views/CardView.js

@@ -13,17 +13,14 @@ var Periods;
 })(Periods || (Periods = {}));
 const isEmpty = (byPeriodNotifications, accountForSnooze) => {
     if (accountForSnooze) {
-        return Object.values(byPeriodNotifications).every((value) => {
-            return value.length === 0;
-        });
+        return Object.values(byPeriodNotifications).every((value) => value.length === 0);
     }
     else {
-        return Object.values(byPeriodNotifications).every((value) => {
-            return value.length === 0 || value.filter((notification) => !notification.isSnoozed).length === 0;
-        });
+        return Object.values(byPeriodNotifications).every((value) => value.length === 0 || value.filter((notification) => !notification.isSnoozed).length === 0);
     }
 };
 export const CardView = (props) => {
+    var _a;
     const { notifications } = props;
     const notificationsContext = useContext(NotificationsContext);
     const { drawerControlProps, searchString, filteredNotifications, setFilteredNotifications } = notificationsContext;
@@ -42,7 +39,7 @@ export const CardView = (props) => {
             setFilteredNotifications(searchNotifications(notifications, searchString));
         }
     }, [searchString, notifications]);
-    const controlFilteredNotifications = activeFilter ? activeFilter.run?.(filteredNotifications) : [];
+    const controlFilteredNotifications = activeFilter ? (_a = activeFilter.run) === null || _a === void 0 ? void 0 : _a.call(activeFilter, filteredNotifications) : [];
     controlFilteredNotifications.reduce((accumulator, notification) => {
         const notificationDate = Date.parse(notification.issuedAt);
         if (isToday(notificationDate)) {
@@ -74,23 +71,17 @@ export const CardView = (props) => {
             return React.createElement("p", { className: "notification-day" }, "Older");
         }
     };
-    const renderNotificationsBlock = (period) => {
-        return byPeriodNotifications[period]
-            .sort((a, b) => {
-            return Date.parse(b.issuedAt) - Date.parse(a.issuedAt);
-        })
-            .filter((notification) => (activeFilter.action === "snoozed" ? notification.isSnoozed : !notification.isSnoozed))
-            .map((notification, index) => {
-            const id = notification.id || index.toString();
-            return (React.createElement("div", { key: id },
-                index === 0 ? renderSeparatorLabel(period) : null,
-                React.createElement(NotificationCardComponent, { notification: notification, removeNotification: () => { }, uiContext: "center" }),
-                React.createElement("div", { className: "divider" }, "\u00A0")));
-        });
-    };
-    return isEmpty(byPeriodNotifications, activeFilter.action === "snoozed") ? (React.createElement(NoNotifications, null)) : (React.createElement(React.Fragment, null, Object.keys(byPeriodNotifications).map((period) => {
-        return renderNotificationsBlock(period);
-    })));
+    const renderNotificationsBlock = (period) => byPeriodNotifications[period]
+        .sort((a, b) => Date.parse(b.issuedAt) - Date.parse(a.issuedAt))
+        .filter((notification) => (activeFilter.action === "snoozed" ? notification.isSnoozed : !notification.isSnoozed))
+        .map((notification, index) => {
+        const id = notification.id || index.toString();
+        return (React.createElement("div", { key: id },
+            index === 0 ? renderSeparatorLabel(period) : null,
+            React.createElement(NotificationCardComponent, { notification: notification, removeNotification: () => { }, uiContext: "center" }),
+            React.createElement("div", { className: "divider" }, "\u00A0")));
+    });
+    return isEmpty(byPeriodNotifications, activeFilter.action === "snoozed") ? (React.createElement(NoNotifications, null)) : (React.createElement(React.Fragment, null, Object.keys(byPeriodNotifications).map((period) => renderNotificationsBlock(period))));
 };
 export default CardView;
 //# sourceMappingURL=CardView.js.map