@finsemble/finsemble-ui 1.0.0-beta-1

package/react/components/notifications/components/notificationsCenter/NotificationsCenter.js

@@ -0,0 +1,402 @@
+import React, { useEffect, useRef, useState } from "react";
+import { CSSTransition } from "react-transition-group";
+import ConditionalWrapper from "../../../shared/ConditionalWrapper";
+import { ViewMode, SelectionMode } from "../../constants";
+import "../../../../assets/css/notificationsCenter.css";
+// Hooks
+import useNotifications, { useNotificationUI, getNotificationConfig, moveToToolbarMonitor, getOS, getFetchHistoryParams, } from "../../../../hooks/useNotifications";
+// Context
+import { NotificationsContext } from "../../notificationsContext";
+// Components
+import CardView from "../views/CardView";
+import Drawer from "../drawer/Drawer";
+import DrawerControls from "../drawer/DrawerControls";
+import DrawerHeader from "../drawer/DrawerHeader";
+import ListView from "../views/ListView";
+import NotificationDetailsView from "../views/NotificationDetailsView";
+import FloatingFocus from "@q42/floating-focus-a11y";
+// The package FloatingFocus injects a focus indicator that moves around the page, but only for
+// keyboard users. (Mouse users don't see the indicator.) All that needs to be done is to envoke it.
+new FloatingFocus();
+const defaultControls = {
+    controls: [
+        {
+            action: "all",
+            label: "All",
+            run: (notifications) => notifications,
+        },
+        {
+            action: "unread",
+            label: "Unread",
+            run: (notifications) => notifications.filter((notification) => !notification.isRead),
+        },
+        {
+            action: "read",
+            label: "Read",
+            run: (notifications) => notifications.filter((notification) => notification.isRead),
+        },
+        {
+            action: "snoozed",
+            label: "Snoozed",
+            run: (notifications) => notifications.filter((notification) => notification.isSnoozed),
+        },
+    ],
+    active: "all",
+};
+const addPoppedInClasses = () => {
+    var _a, _b;
+    (_a = document.getElementById("notifications-center-container")) === null || _a === void 0 ? void 0 : _a.classList.add("notifications-popped-in");
+    (_b = document.getElementById("FSBLHeader")) === null || _b === void 0 ? void 0 : _b.classList.add("notifications-popped-in");
+};
+const removePoppedInClasses = () => {
+    var _a, _b;
+    (_a = document.getElementById("notifications-center-container")) === null || _a === void 0 ? void 0 : _a.classList.remove("notifications-popped-in");
+    (_b = document.getElementById("FSBLHeader")) === null || _b === void 0 ? void 0 : _b.classList.remove("notifications-popped-in");
+};
+const storeNotificationsCenterWindowPosition = ({ showCenter, poppedOut, position }) => {
+    FSBL.Clients.StorageClient.save({
+        topic: "finsemble.notifications",
+        key: "last.position",
+        value: {
+            showCenter,
+            poppedOut,
+            position,
+        },
+    });
+};
+const setShowWindowForState = (centerState) => {
+    if (centerState.showCenter) {
+        finsembleWindow.show({}, () => {
+            finsembleWindow.bringToFront();
+        });
+    }
+    if (centerState.position) {
+        finsembleWindow.setBounds(centerState.position);
+    }
+    // Always on top when popped in
+    FSBL.Clients.WindowClient.setAlwaysOnTop(!centerState.poppedOut);
+    storeNotificationsCenterWindowPosition(centerState);
+};
+const isValidPosition = (bounds) => bounds &&
+    typeof bounds.left !== "undefined" &&
+    typeof bounds.top !== "undefined" &&
+    typeof bounds.height !== "undefined" &&
+    typeof bounds.width !== "undefined";
+const LAZY_LOAD_NO_MORE_PAGES = -1;
+export const NotificationsCenter = (props) => {
+    const params = { config: { notificationsHistory: { options: { pageSize: 10 } } } };
+    const { notifications, setOpaqueClassName, addNotification } = useNotifications(params);
+    const [uiState, setUIState] = useNotificationUI();
+    const config = getNotificationConfig();
+    const [isInitialized, setInitialized] = useState(false);
+    const [isMac] = useState(getOS() === "Mac");
+    const nextPageToFetch = useRef(1);
+    // Set up references for use in callbacks to FSBL functions
+    const showCenterRef = useRef(false);
+    const poppedOutRef = useRef(false);
+    const subscriptionMessageRef = useRef({});
+    const applicationState = useRef(null);
+    const scrollContainer = useRef(null);
+    const [searchString, setSearchString] = useState("");
+    const [filteredNotifications, setFilteredNotifications] = useState([...notifications]);
+    const [viewMode, setViewMode] = useState(ViewMode.CARD);
+    const [selectionMode, setSelectionMode] = useState(SelectionMode.NO_SELECTION);
+    const [selectedNotification, setSelectedNotification] = useState(null);
+    const [muteFilters, setMuteFilters] = useState([]);
+    const [reloadMuteFilters, setReloadMuteFilters] = useState(true);
+    const [isSelectAll, setSelectAll] = useState(false);
+    const [checkedNotifications, setCheckedNotifications] = useState([]);
+    const dcp = props.controls ? props.controls : defaultControls;
+    const [drawerControlProps, setDrawerControlProps] = useState(dcp);
+    const notificationsContextValues = {
+        viewMode,
+        setViewMode,
+        selectionMode,
+        setSelectionMode,
+        drawerControlProps,
+        setDrawerControlProps,
+        selectedNotification,
+        setSelectedNotification,
+        searchString,
+        setSearchString,
+        filteredNotifications,
+        checkedNotifications,
+        setCheckedNotifications,
+        setFilteredNotifications,
+        muteFilters,
+        setMuteFilters,
+        isSelectAll,
+        setSelectAll,
+    };
+    const togglePoppedStatus = () => {
+        const poppedOut = !uiState.poppedOut;
+        poppedOutRef.current = poppedOut;
+        setUIState(Object.assign(Object.assign({}, uiState), { poppedOut }));
+    };
+    const setFullHeight = async (monitorInfo) => {
+        if (!monitorInfo) {
+            await new Promise((resolve) => {
+                finsembleWindow.getMonitor((monitor) => {
+                    monitorInfo = monitor;
+                    resolve();
+                });
+            });
+        }
+        const { data } = await finsembleWindow.getBounds();
+        if (data) {
+            const centerWindowPosition = {
+                left: monitorInfo.availableRect.right - data.width,
+                top: monitorInfo.availableRect.top,
+                height: monitorInfo.availableRect.height,
+                width: data.width,
+            };
+            setShowWindowForState({
+                showCenter: uiState.showCenter,
+                poppedOut: poppedOutRef.current,
+                position: centerWindowPosition,
+            });
+            finsembleWindow.setShape([]);
+        }
+    };
+    const boundsChangeListener = (event) => {
+        if ((showCenterRef === null || showCenterRef === void 0 ? void 0 : showCenterRef.current) && !poppedOutRef.current) {
+            // Bounds Changed fires when Windows Taskbar + Finsemble Toolbar docking changes
+            setFullHeight();
+        }
+        const position = {
+            top: event.data.top,
+            left: event.data.left,
+            height: event.data.height,
+            width: event.data.width,
+        };
+        storeNotificationsCenterWindowPosition({
+            showCenter: (showCenterRef === null || showCenterRef === void 0 ? void 0 : showCenterRef.current) ? showCenterRef.current : false,
+            poppedOut: poppedOutRef.current,
+            position,
+        });
+    };
+    const getScrollPercentage = () => {
+        var _a, _b, _c, _d, _e, _f;
+        // document.getElementsByClassName("cards-container")[0].scrollHeight - document.getElementsByClassName("cards-container")[0].clientHeight
+        const maxScroll = ((_b = (_a = scrollContainer.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : 0) - ((_d = (_c = scrollContainer.current) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0);
+        const currentScroll = (_f = (_e = scrollContainer.current) === null || _e === void 0 ? void 0 : _e.scrollTop) !== null && _f !== void 0 ? _f : 0;
+        return currentScroll / maxScroll;
+    };
+    const lazyLoadNextPage = async () => new Promise(async (resolve) => {
+        if (nextPageToFetch.current > 0) {
+            const [options, filter] = getFetchHistoryParams(config, params);
+            options.pageNumber = nextPageToFetch.current;
+            const notificationList = await FSBL.Clients.NotificationClient.fetchHistory(options, filter);
+            if (notificationList.length) {
+                nextPageToFetch.current = nextPageToFetch.current + 1;
+                for (const notification of notificationList) {
+                    addNotification(notification);
+                }
+            }
+            else {
+                // Stop fetching after this one
+                nextPageToFetch.current = LAZY_LOAD_NO_MORE_PAGES;
+            }
+        }
+        resolve();
+    });
+    const toggleCenter = async (show, isTransparent, poppedOut) => {
+        if (isTransparent && !isMac) {
+            if (poppedOut) {
+                if (show) {
+                    finsembleWindow.show({}, () => {
+                        finsembleWindow.bringToFront();
+                        finsembleWindow.setShape([]);
+                    });
+                }
+                else {
+                    finsembleWindow.hide();
+                }
+            }
+            else {
+                if (show) {
+                    await moveToToolbarMonitor();
+                    await setFullHeight();
+                    finsembleWindow.show({}, () => {
+                        finsembleWindow.bringToFront();
+                        finsembleWindow.setShape([]);
+                    });
+                }
+                else {
+                    setTimeout(() => {
+                        finsembleWindow.setShape([
+                            {
+                                x: 0,
+                                y: 0,
+                                width: 1,
+                                height: 1,
+                            },
+                        ]);
+                        finsembleWindow.hide();
+                    }, 500);
+                }
+            }
+        }
+        else {
+            if (show) {
+                if (!poppedOut) {
+                    await moveToToolbarMonitor();
+                    await setFullHeight();
+                }
+                finsembleWindow.show({}, () => {
+                    finsembleWindow.bringToFront();
+                });
+            }
+            else {
+                finsembleWindow.hide();
+            }
+        }
+    };
+    // When popped out we want to prevent the center to be closed when the close button is clicked (or alt +)
+    useEffect(() => {
+        var _a;
+        setOpaqueClassName(!config.isTransparent);
+        const subscriptionId = FSBL.Clients.RouterClient.subscribe("Finsemble.Application.State", (err, response) => {
+            applicationState.current = response.data.state;
+        });
+        const hide = (event) => {
+            const publishValue = Object.assign({}, subscriptionMessageRef.current);
+            publishValue["showCenter"] = false;
+            setUIState(publishValue);
+            if ((applicationState === null || applicationState === void 0 ? void 0 : applicationState.current) !== "closing") {
+                try {
+                    event.cancel();
+                }
+                catch (error) {
+                    FSBL.Clients.Logger.system.error("Error cancelling the window close event", error);
+                }
+            }
+        };
+        const scrollHandler = () => {
+            if (getScrollPercentage() > 0.9) {
+                lazyLoadNextPage();
+            }
+        };
+        finsembleWindow.addEventListener("close-requested", hide);
+        finsembleWindow.addEventListener("bounds-change-end", boundsChangeListener);
+        (_a = scrollContainer.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", scrollHandler);
+        return () => {
+            var _a;
+            FSBL.Clients.RouterClient.unsubscribe(subscriptionId);
+            finsembleWindow.removeEventListener("close-requested", hide);
+            finsembleWindow.removeEventListener("bounds-change-end", boundsChangeListener);
+            (_a = scrollContainer.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", scrollHandler);
+        };
+    }, []);
+    useEffect(() => {
+        const recursiveLoad = async () => {
+            // Cater for the case where there is no scroll bar to trigger lazy load - keep loading until scrollbar or no pages
+            await lazyLoadNextPage();
+            if (getScrollPercentage() === 1 && nextPageToFetch.current != LAZY_LOAD_NO_MORE_PAGES) {
+                recursiveLoad();
+            }
+        };
+        recursiveLoad();
+    }, [viewMode, drawerControlProps.active]);
+    // Hook to set up the center state from service data on component start
+    useEffect(() => {
+        subscriptionMessageRef.current = uiState;
+        // Hook can execute before initial pubsub response - waiting for actual values
+        if (!isInitialized && typeof uiState.showCenter !== "undefined") {
+            if (uiState.poppedOut) {
+                removePoppedInClasses();
+            }
+            else {
+                addPoppedInClasses();
+            }
+            if (isValidPosition(uiState.position)) {
+                setShowWindowForState({
+                    showCenter: uiState.showCenter,
+                    poppedOut: uiState.poppedOut,
+                    position: uiState.position,
+                });
+            }
+            // Setup references
+            showCenterRef.current = uiState.showCenter;
+            poppedOutRef.current = uiState.poppedOut;
+            setInitialized(true);
+        }
+    }, [uiState]);
+    // Effect to run when we pop-in or pop-out the notification center
+    useEffect(() => {
+        if (isInitialized) {
+            poppedOutRef.current = uiState.poppedOut;
+            finsembleWindow.getMonitor(async (monitorInfo) => {
+                if (uiState.poppedOut) {
+                    const { data } = await finsembleWindow.getBounds();
+                    removePoppedInClasses();
+                    if (data) {
+                        const centerWindowPosition = {
+                            left: data.left - 25,
+                            top: data.top + 25,
+                            height: Math.round(monitorInfo.availableRect.height * 0.8),
+                            width: data.width,
+                        };
+                        setShowWindowForState({
+                            showCenter: uiState.showCenter,
+                            poppedOut: uiState.poppedOut,
+                            position: centerWindowPosition,
+                        });
+                    }
+                }
+                else {
+                    addPoppedInClasses();
+                    setFullHeight(monitorInfo);
+                }
+            });
+        }
+    }, [uiState.poppedOut]);
+    useEffect(() => {
+        if (isInitialized) {
+            showCenterRef.current = uiState.showCenter;
+            toggleCenter(uiState.showCenter, config.isTransparent, poppedOutRef.current);
+        }
+    }, [uiState.showCenter]);
+    useEffect(() => {
+        setFilteredNotifications([...notifications]);
+    }, [notifications]);
+    useEffect(() => {
+        function listenMuteStateChanged(error) {
+            if (error) {
+                console.error("FinsembleNotificationsMuteStateChannel: ", error);
+            }
+            else {
+                setReloadMuteFilters(true);
+            }
+        }
+        FSBL.Clients.RouterClient.addListener("FinsembleNotificationsMuteStateChannel", listenMuteStateChanged);
+        return () => {
+            FSBL.Clients.RouterClient.removeListener("FinsembleNotificationsMuteStateChannel", listenMuteStateChanged);
+        };
+    }, []);
+    // Sets the current active mute filters
+    useEffect(() => {
+        async function loadMuteFilter() {
+            return await FSBL.Clients.NotificationClient.getMuteFilters();
+        }
+        loadMuteFilter().then((loadedMuteFilters) => {
+            setMuteFilters(loadedMuteFilters);
+            setReloadMuteFilters(false);
+        });
+    }, [reloadMuteFilters]);
+    // Sets the select all status from user selecting notifications individually
+    useEffect(() => {
+        if (notifications.length > 0 && checkedNotifications.length === notifications.length) {
+            setSelectAll(true);
+        }
+    }, [checkedNotifications, notifications]);
+    const notificationsMainView = () => (React.createElement(React.Fragment, null,
+        React.createElement(DrawerHeader, { poppedOutStatus: uiState.poppedOut, popOutToggle: togglePoppedStatus }),
+        React.createElement(DrawerControls, null),
+        React.createElement("div", { className: "cards-container", ref: scrollContainer }, viewMode === ViewMode.CARD ? (React.createElement(CardView, { notifications: notifications, notificationCard: props.notificationCard })) : (React.createElement(ListView, { notifications: notifications, notificationHeaderRow: props.notificationHeaderRow, notificationListRow: props.notificationListRow })))));
+    const notificationDetailsViewComponent = () => React.createElement(NotificationDetailsView, { notification: selectedNotification });
+    return (React.createElement(ConditionalWrapper, { condition: config.isTransparent && !uiState.poppedOut && !isMac, wrapper: (children) => (React.createElement(CSSTransition, { in: uiState.showCenter, timeout: 500, classNames: "drawer", unmountOnExit: true }, children)) },
+        React.createElement(NotificationsContext.Provider, { value: notificationsContextValues },
+            React.createElement(Drawer, { classNames: uiState.poppedOut ? "popped-out" : "" }, selectedNotification ? notificationDetailsViewComponent() : notificationsMainView()))));
+};
+//# sourceMappingURL=NotificationsCenter.js.map

package/react/components/notifications/components/notificationsCenter/NotificationsCenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsCenter.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/notificationsCenter/NotificationsCenter.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { CSSTransition } from \"react-transition-group\";\nimport ConditionalWrapper from \"../../../shared/ConditionalWrapper\";\n\nimport { ViewMode, SelectionMode } from \"../../constants\";\n\nimport \"../../../../assets/css/notificationsCenter.css\";\n\n// Hooks\nimport useNotifications, {\n\tuseNotificationUI,\n\tgetNotificationConfig,\n\tmoveToToolbarMonitor,\n\tgetOS,\n\tgetFetchHistoryParams,\n} from \"../../../../hooks/useNotifications\";\n\n// Context\nimport { NotificationsContext } from \"../../notificationsContext\";\n\n// Types\nimport { INotificationCenterProps, NotificationCenterControlsProps, NotificationsContextType } from \"../../types\";\n\n// Components\nimport CardView from \"../views/CardView\";\nimport Drawer from \"../drawer/Drawer\";\nimport DrawerControls from \"../drawer/DrawerControls\";\nimport DrawerHeader from \"../drawer/DrawerHeader\";\nimport ListView from \"../views/ListView\";\nimport NotificationDetailsView from \"../views/NotificationDetailsView\";\nimport { services } from \"@finsemble/finsemble-api\";\n\nimport FloatingFocus from \"@q42/floating-focus-a11y\";\n// The package FloatingFocus injects a focus indicator that moves around the page, but only for\n// keyboard users. (Mouse users don't see the indicator.) All that needs to be done is to envoke it.\nnew FloatingFocus();\n// If you want to make changes to the indicator, the styles are being maintained in assets/css/focus.css\n\ntype INotification = services.notification.types.INotification;\ntype IMuteFilter = services.notification.types.IMuteFilter;\n\nconst defaultControls: NotificationCenterControlsProps = {\n\tcontrols: [\n\t\t{\n\t\t\taction: \"all\",\n\t\t\tlabel: \"All\",\n\t\t\trun: (notifications: INotification[]) => notifications,\n\t\t},\n\t\t{\n\t\t\taction: \"unread\",\n\t\t\tlabel: \"Unread\",\n\t\t\trun: (notifications: INotification[]) =>\n\t\t\t\tnotifications.filter((notification: INotification) => !notification.isRead),\n\t\t},\n\t\t{\n\t\t\taction: \"read\",\n\t\t\tlabel: \"Read\",\n\t\t\trun: (notifications: INotification[]) =>\n\t\t\t\tnotifications.filter((notification: INotification) => notification.isRead),\n\t\t},\n\t\t{\n\t\t\taction: \"snoozed\",\n\t\t\tlabel: \"Snoozed\",\n\t\t\trun: (notifications: INotification[]) =>\n\t\t\t\tnotifications.filter((notification: INotification) => notification.isSnoozed),\n\t\t},\n\t],\n\tactive: \"all\",\n};\n\nconst addPoppedInClasses = () => {\n\tdocument.getElementById(\"notifications-center-container\")?.classList.add(\"notifications-popped-in\");\n\tdocument.getElementById(\"FSBLHeader\")?.classList.add(\"notifications-popped-in\");\n};\n\nconst removePoppedInClasses = () => {\n\tdocument.getElementById(\"notifications-center-container\")?.classList.remove(\"notifications-popped-in\");\n\tdocument.getElementById(\"FSBLHeader\")?.classList.remove(\"notifications-popped-in\");\n};\n\nconst storeNotificationsCenterWindowPosition = ({ showCenter, poppedOut, position }: any) => {\n\tFSBL.Clients.StorageClient.save({\n\t\ttopic: \"finsemble.notifications\",\n\t\tkey: \"last.position\",\n\t\tvalue: {\n\t\t\tshowCenter,\n\t\t\tpoppedOut,\n\t\t\tposition,\n\t\t},\n\t});\n};\n\nconst setShowWindowForState = (centerState: any) => {\n\tif (centerState.showCenter) {\n\t\tfinsembleWindow.show({}, () => {\n\t\t\tfinsembleWindow.bringToFront();\n\t\t});\n\t}\n\n\tif (centerState.position) {\n\t\tfinsembleWindow.setBounds(centerState.position);\n\t}\n\n\t// Always on top when popped in\n\tFSBL.Clients.WindowClient.setAlwaysOnTop(!centerState.poppedOut);\n\tstoreNotificationsCenterWindowPosition(centerState);\n};\n\nconst isValidPosition = (bounds: any): boolean =>\n\tbounds &&\n\ttypeof bounds.left !== \"undefined\" &&\n\ttypeof bounds.top !== \"undefined\" &&\n\ttypeof bounds.height !== \"undefined\" &&\n\ttypeof bounds.width !== \"undefined\";\n\nconst LAZY_LOAD_NO_MORE_PAGES = -1;\n\nexport const NotificationsCenter: React.FunctionComponent<INotificationCenterProps> = (props) => {\n\tconst params = { config: { notificationsHistory: { options: { pageSize: 10 } } } };\n\tconst { notifications, setOpaqueClassName, addNotification } = useNotifications(params);\n\tconst [uiState, setUIState] = useNotificationUI();\n\n\tconst config = getNotificationConfig();\n\tconst [isInitialized, setInitialized] = useState(false);\n\tconst [isMac] = useState(getOS() === \"Mac\");\n\tconst nextPageToFetch = useRef(1);\n\n\t// Set up references for use in callbacks to FSBL functions\n\tconst showCenterRef = useRef(false);\n\tconst poppedOutRef = useRef(false);\n\tconst subscriptionMessageRef = useRef<any>({});\n\tconst applicationState = useRef(null);\n\tconst scrollContainer = useRef<HTMLDivElement>(null);\n\n\tconst [searchString, setSearchString] = useState(\"\");\n\tconst [filteredNotifications, setFilteredNotifications] = useState([...notifications]);\n\tconst [viewMode, setViewMode] = useState<ViewMode>(ViewMode.CARD);\n\tconst [selectionMode, setSelectionMode] = useState<SelectionMode>(SelectionMode.NO_SELECTION);\n\tconst [selectedNotification, setSelectedNotification] = useState<INotification | null>(null);\n\tconst [muteFilters, setMuteFilters] = useState<IMuteFilter[]>([]);\n\tconst [reloadMuteFilters, setReloadMuteFilters] = useState(true);\n\tconst [isSelectAll, setSelectAll] = useState<boolean>(false);\n\tconst [checkedNotifications, setCheckedNotifications] = useState<INotification[]>([]);\n\n\tconst dcp: NotificationCenterControlsProps = props.controls ? props.controls : defaultControls;\n\n\tconst [drawerControlProps, setDrawerControlProps] = useState(dcp);\n\tconst notificationsContextValues: NotificationsContextType = {\n\t\tviewMode,\n\t\tsetViewMode,\n\t\tselectionMode,\n\t\tsetSelectionMode,\n\t\tdrawerControlProps,\n\t\tsetDrawerControlProps,\n\t\tselectedNotification,\n\t\tsetSelectedNotification,\n\t\tsearchString,\n\t\tsetSearchString,\n\t\tfilteredNotifications,\n\t\tcheckedNotifications,\n\t\tsetCheckedNotifications,\n\t\tsetFilteredNotifications,\n\t\tmuteFilters,\n\t\tsetMuteFilters,\n\t\tisSelectAll,\n\t\tsetSelectAll,\n\t};\n\n\tconst togglePoppedStatus = () => {\n\t\tconst poppedOut = !uiState.poppedOut;\n\t\tpoppedOutRef.current = poppedOut;\n\t\tsetUIState({\n\t\t\t...uiState,\n\t\t\tpoppedOut,\n\t\t});\n\t};\n\n\tconst setFullHeight = async (monitorInfo?: any) => {\n\t\tif (!monitorInfo) {\n\t\t\tawait new Promise<void>((resolve) => {\n\t\t\t\tfinsembleWindow.getMonitor((monitor: any) => {\n\t\t\t\t\tmonitorInfo = monitor;\n\t\t\t\t\tresolve();\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\n\t\tconst { data } = await finsembleWindow.getBounds();\n\t\tif (data) {\n\t\t\tconst centerWindowPosition = {\n\t\t\t\tleft: monitorInfo.availableRect.right - data.width,\n\t\t\t\ttop: monitorInfo.availableRect.top,\n\t\t\t\theight: monitorInfo.availableRect.height,\n\t\t\t\twidth: data.width,\n\t\t\t};\n\n\t\t\tsetShowWindowForState({\n\t\t\t\tshowCenter: uiState.showCenter,\n\t\t\t\tpoppedOut: poppedOutRef.current,\n\t\t\t\tposition: centerWindowPosition,\n\t\t\t});\n\n\t\t\tfinsembleWindow.setShape([]);\n\t\t}\n\t};\n\n\tconst boundsChangeListener = (event: any) => {\n\t\tif (showCenterRef?.current && !poppedOutRef.current) {\n\t\t\t// Bounds Changed fires when Windows Taskbar + Finsemble Toolbar docking changes\n\t\t\tsetFullHeight();\n\t\t}\n\t\tconst position = {\n\t\t\ttop: event.data.top,\n\t\t\tleft: event.data.left,\n\t\t\theight: event.data.height,\n\t\t\twidth: event.data.width,\n\t\t};\n\n\t\tstoreNotificationsCenterWindowPosition({\n\t\t\tshowCenter: showCenterRef?.current ? showCenterRef.current : false,\n\t\t\tpoppedOut: poppedOutRef.current,\n\t\t\tposition,\n\t\t});\n\t};\n\n\tconst getScrollPercentage = () => {\n\t\t// document.getElementsByClassName(\"cards-container\")[0].scrollHeight - document.getElementsByClassName(\"cards-container\")[0].clientHeight\n\t\tconst maxScroll = (scrollContainer.current?.scrollHeight ?? 0) - (scrollContainer.current?.clientHeight ?? 0);\n\t\tconst currentScroll = scrollContainer.current?.scrollTop ?? 0;\n\t\treturn currentScroll / maxScroll;\n\t};\n\n\tconst lazyLoadNextPage = async () =>\n\t\tnew Promise<void>(async (resolve) => {\n\t\t\tif (nextPageToFetch.current > 0) {\n\t\t\t\tconst [options, filter] = getFetchHistoryParams(config, params);\n\t\t\t\toptions.pageNumber = nextPageToFetch.current;\n\t\t\t\tconst notificationList = await FSBL.Clients.NotificationClient.fetchHistory(options, filter);\n\t\t\t\tif (notificationList.length) {\n\t\t\t\t\tnextPageToFetch.current = nextPageToFetch.current + 1;\n\t\t\t\t\tfor (const notification of notificationList) {\n\t\t\t\t\t\taddNotification(notification);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Stop fetching after this one\n\t\t\t\t\tnextPageToFetch.current = LAZY_LOAD_NO_MORE_PAGES;\n\t\t\t\t}\n\t\t\t}\n\t\t\tresolve();\n\t\t});\n\n\tconst toggleCenter = async (show: boolean, isTransparent: boolean, poppedOut: boolean) => {\n\t\tif (isTransparent && !isMac) {\n\t\t\tif (poppedOut) {\n\t\t\t\tif (show) {\n\t\t\t\t\tfinsembleWindow.show({}, () => {\n\t\t\t\t\t\tfinsembleWindow.bringToFront();\n\t\t\t\t\t\tfinsembleWindow.setShape([]);\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tfinsembleWindow.hide();\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (show) {\n\t\t\t\t\tawait moveToToolbarMonitor();\n\t\t\t\t\tawait setFullHeight();\n\t\t\t\t\tfinsembleWindow.show({}, () => {\n\t\t\t\t\t\tfinsembleWindow.bringToFront();\n\t\t\t\t\t\tfinsembleWindow.setShape([]);\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tfinsembleWindow.setShape([\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tx: 0,\n\t\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\t\twidth: 1,\n\t\t\t\t\t\t\t\theight: 1,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t]);\n\t\t\t\t\t\tfinsembleWindow.hide();\n\t\t\t\t\t}, 500);\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tif (show) {\n\t\t\t\tif (!poppedOut) {\n\t\t\t\t\tawait moveToToolbarMonitor();\n\t\t\t\t\tawait setFullHeight();\n\t\t\t\t}\n\t\t\t\tfinsembleWindow.show({}, () => {\n\t\t\t\t\tfinsembleWindow.bringToFront();\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tfinsembleWindow.hide();\n\t\t\t}\n\t\t}\n\t};\n\n\t// When popped out we want to prevent the center to be closed when the close button is clicked (or alt +)\n\tuseEffect(() => {\n\t\tsetOpaqueClassName(!config.isTransparent);\n\n\t\tconst subscriptionId = FSBL.Clients.RouterClient.subscribe(\"Finsemble.Application.State\", (err, response) => {\n\t\t\tapplicationState.current = response.data.state;\n\t\t});\n\n\t\tconst hide = (event: any) => {\n\t\t\tconst publishValue = { ...subscriptionMessageRef.current };\n\t\t\tpublishValue[\"showCenter\"] = false;\n\t\t\tsetUIState(publishValue);\n\t\t\tif (applicationState?.current !== \"closing\") {\n\t\t\t\ttry {\n\t\t\t\t\tevent.cancel();\n\t\t\t\t} catch (error) {\n\t\t\t\t\tFSBL.Clients.Logger.system.error(\"Error cancelling the window close event\", error);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst scrollHandler = () => {\n\t\t\tif (getScrollPercentage() > 0.9) {\n\t\t\t\tlazyLoadNextPage();\n\t\t\t}\n\t\t};\n\n\t\tfinsembleWindow.addEventListener(\"close-requested\", hide);\n\t\tfinsembleWindow.addEventListener(\"bounds-change-end\", boundsChangeListener);\n\t\tscrollContainer.current?.addEventListener(\"scroll\", scrollHandler);\n\t\treturn () => {\n\t\t\tFSBL.Clients.RouterClient.unsubscribe(subscriptionId);\n\t\t\tfinsembleWindow.removeEventListener(\"close-requested\", hide);\n\t\t\tfinsembleWindow.removeEventListener(\"bounds-change-end\", boundsChangeListener);\n\t\t\tscrollContainer.current?.removeEventListener(\"scroll\", scrollHandler);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tconst recursiveLoad = async () => {\n\t\t\t// Cater for the case where there is no scroll bar to trigger lazy load - keep loading until scrollbar or no pages\n\t\t\tawait lazyLoadNextPage();\n\t\t\tif (getScrollPercentage() === 1 && nextPageToFetch.current != LAZY_LOAD_NO_MORE_PAGES) {\n\t\t\t\trecursiveLoad();\n\t\t\t}\n\t\t};\n\n\t\trecursiveLoad();\n\t}, [viewMode, drawerControlProps.active]);\n\n\t// Hook to set up the center state from service data on component start\n\tuseEffect(() => {\n\t\tsubscriptionMessageRef.current = uiState;\n\t\t// Hook can execute before initial pubsub response - waiting for actual values\n\t\tif (!isInitialized && typeof uiState.showCenter !== \"undefined\") {\n\t\t\tif (uiState.poppedOut) {\n\t\t\t\tremovePoppedInClasses();\n\t\t\t} else {\n\t\t\t\taddPoppedInClasses();\n\t\t\t}\n\n\t\t\tif (isValidPosition(uiState.position)) {\n\t\t\t\tsetShowWindowForState({\n\t\t\t\t\tshowCenter: uiState.showCenter,\n\t\t\t\t\tpoppedOut: uiState.poppedOut,\n\t\t\t\t\tposition: uiState.position,\n\t\t\t\t});\n\t\t\t}\n\n\t\t\t// Setup references\n\t\t\tshowCenterRef.current = uiState.showCenter;\n\t\t\tpoppedOutRef.current = uiState.poppedOut;\n\n\t\t\tsetInitialized(true);\n\t\t}\n\t}, [uiState]);\n\n\t// Effect to run when we pop-in or pop-out the notification center\n\tuseEffect(() => {\n\t\tif (isInitialized) {\n\t\t\tpoppedOutRef.current = uiState.poppedOut;\n\t\t\tfinsembleWindow.getMonitor(async (monitorInfo: any) => {\n\t\t\t\tif (uiState.poppedOut) {\n\t\t\t\t\tconst { data } = await finsembleWindow.getBounds();\n\t\t\t\t\tremovePoppedInClasses();\n\n\t\t\t\t\tif (data) {\n\t\t\t\t\t\tconst centerWindowPosition = {\n\t\t\t\t\t\t\tleft: data.left - 25,\n\t\t\t\t\t\t\ttop: data.top + 25,\n\t\t\t\t\t\t\theight: Math.round(monitorInfo.availableRect.height * 0.8),\n\t\t\t\t\t\t\twidth: data.width,\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\tsetShowWindowForState({\n\t\t\t\t\t\t\tshowCenter: uiState.showCenter,\n\t\t\t\t\t\t\tpoppedOut: uiState.poppedOut,\n\t\t\t\t\t\t\tposition: centerWindowPosition,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\taddPoppedInClasses();\n\t\t\t\t\tsetFullHeight(monitorInfo);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}, [uiState.poppedOut]);\n\n\tuseEffect(() => {\n\t\tif (isInitialized) {\n\t\t\tshowCenterRef.current = uiState.showCenter;\n\t\t\ttoggleCenter(uiState.showCenter, config.isTransparent as boolean, poppedOutRef.current);\n\t\t}\n\t}, [uiState.showCenter]);\n\n\tuseEffect(() => {\n\t\tsetFilteredNotifications([...notifications]);\n\t}, [notifications]);\n\n\tuseEffect(() => {\n\t\tfunction listenMuteStateChanged(error: any) {\n\t\t\tif (error) {\n\t\t\t\tconsole.error(\"FinsembleNotificationsMuteStateChannel: \", error);\n\t\t\t} else {\n\t\t\t\tsetReloadMuteFilters(true);\n\t\t\t}\n\t\t}\n\t\tFSBL.Clients.RouterClient.addListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\n\t\treturn () => {\n\t\t\tFSBL.Clients.RouterClient.removeListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\n\t\t};\n\t}, []);\n\n\t// Sets the current active mute filters\n\tuseEffect(() => {\n\t\tasync function loadMuteFilter() {\n\t\t\treturn await FSBL.Clients.NotificationClient.getMuteFilters();\n\t\t}\n\n\t\tloadMuteFilter().then((loadedMuteFilters: IMuteFilter[]) => {\n\t\t\tsetMuteFilters(loadedMuteFilters);\n\t\t\tsetReloadMuteFilters(false);\n\t\t});\n\t}, [reloadMuteFilters]);\n\n\t// Sets the select all status from user selecting notifications individually\n\tuseEffect(() => {\n\t\tif (notifications.length > 0 && checkedNotifications.length === notifications.length) {\n\t\t\tsetSelectAll(true);\n\t\t}\n\t}, [checkedNotifications, notifications]);\n\n\tconst notificationsMainView = () => (\n\t\t<>\n\t\t\t<DrawerHeader poppedOutStatus={uiState.poppedOut} popOutToggle={togglePoppedStatus} />\n\t\t\t<DrawerControls />\n\t\t\t<div className=\"cards-container\" ref={scrollContainer}>\n\t\t\t\t{viewMode === ViewMode.CARD ? (\n\t\t\t\t\t<CardView notifications={notifications} notificationCard={props.notificationCard} />\n\t\t\t\t) : (\n\t\t\t\t\t<ListView\n\t\t\t\t\t\tnotifications={notifications}\n\t\t\t\t\t\tnotificationHeaderRow={props.notificationHeaderRow}\n\t\t\t\t\t\tnotificationListRow={props.notificationListRow}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n\n\tconst notificationDetailsViewComponent = () => <NotificationDetailsView notification={selectedNotification} />;\n\n\treturn (\n\t\t<ConditionalWrapper\n\t\t\tcondition={(config.isTransparent as boolean) && !uiState.poppedOut && !isMac}\n\t\t\twrapper={(children) => (\n\t\t\t\t<CSSTransition in={uiState.showCenter} timeout={500} classNames=\"drawer\" unmountOnExit>\n\t\t\t\t\t{children}\n\t\t\t\t</CSSTransition>\n\t\t\t)}\n\t\t>\n\t\t\t<NotificationsContext.Provider value={notificationsContextValues}>\n\t\t\t\t<Drawer classNames={uiState.poppedOut ? \"popped-out\" : \"\"}>\n\t\t\t\t\t{selectedNotification ? notificationDetailsViewComponent() : notificationsMainView()}\n\t\t\t\t</Drawer>\n\t\t\t</NotificationsContext.Provider>\n\t\t</ConditionalWrapper>\n\t);\n};\n"]}

package/react/components/notifications/components/notificationsToasts/NotificationsToasts.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { INotificationToastsProps } from "../../types";
+import "../../../../assets/css/notificationsCenter.css";
+export declare const NotificationsToasts: React.FunctionComponent<INotificationToastsProps>;

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

@@ -0,0 +1,162 @@
+import React, { useEffect, useRef, useState } from "react";
+import useNotifications, { useNotificationUI, moveToToolbarMonitor, getNotificationConfig, getOS, } from "../../../../hooks/useNotifications";
+import { NotificationCardShell } from "../shared/NotificationCardShell";
+import { CSSTransition } from "react-transition-group";
+import "../../../../assets/css/notificationsCenter.css";
+const ToastCard = (props) => {
+    const { notification, informationalNotificationTimeout, removeFunction, isActiveFunction, actionableTimeoutEnabled } = props;
+    const notificationRef = useRef(notification);
+    const [slideIn, setSlideIn] = useState(isActiveFunction(notification));
+    const [showNotification] = useState(isActiveFunction(notification));
+    const [timeoutId, setTimeoutId] = useState();
+    useEffect(() => {
+        return () => {
+            if (timeoutId) {
+                clearInterval(timeoutId);
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (timeoutId) {
+            clearInterval(timeoutId);
+        }
+        if (!notification.actions || notification.actions.length == 0 || actionableTimeoutEnabled) {
+            // Is an informational notification or timeout enabled actionable notifications
+            let timeoutLength;
+            if (informationalNotificationTimeout !== false) {
+                // Convert to milliseconds
+                timeoutLength = informationalNotificationTimeout * 1000;
+                if (notification.timeout && Number.isInteger(notification.timeout)) {
+                    timeoutLength = notification.timeout;
+                }
+            }
+            if (timeoutLength) {
+                setTimeoutId(setTimeout(() => {
+                    setSlideIn(false);
+                }, timeoutLength));
+            }
+        }
+        if (!isActiveFunction(notificationRef.current)) {
+            removeFunction(notification);
+        }
+        setSlideIn(isActiveFunction(notification));
+    }, [notification]);
+    const onExited = () => {
+        removeFunction(notification);
+    };
+    const Card = props.notificationCard ? props.notificationCard : NotificationCardShell;
+    return (showNotification && (React.createElement(CSSTransition, { in: slideIn, timeout: 500, onExited: onExited, classNames: "notifications-toast" },
+        React.createElement("div", { className: "notifications-toast__offscreen" },
+            React.createElement(Card, { notification: notification, uiContext: "toasts", removeNotification: () => {
+                    setSlideIn(false);
+                } }),
+            React.createElement("div", { className: "divider" }, "\u00A0")))));
+};
+export const NotificationsToasts = (props) => {
+    const { notifications, notificationIsActive, setOpaqueClassName, removeNotification, activeNotifications } = useNotifications({ config: { notificationsHistory: { options: { sentAfter: "startup" } } } });
+    const notificationsRef = useRef(notifications);
+    const [uiState] = useNotificationUI();
+    const isNotificationActive = (notification) => {
+        const notificationCenterNotActive = !uiState.showCenter || uiState.poppedOut;
+        return notificationIsActive(notification) && notificationCenterNotActive;
+    };
+    const config = getNotificationConfig();
+    const [isMac] = useState(getOS() === "Mac");
+    const [informationalTimeout, setInformationalTimeout] = useState(false);
+    const [actionableTimeoutEnabled, setActionableTimeoutEnabled] = useState(true);
+    useEffect(() => {
+        async function listenForPreferenceChange(error, response) {
+            if (error) {
+                console.error("FinsembleUserPreferencesChannel: ", error);
+            }
+            else {
+                const { data } = response;
+                if (data.notificationPreferences) {
+                    const { informationalNotificationToastPeriodSeconds, toastTimeoutOnActionableNotifications } = data.notificationPreferences;
+                    if (informationalNotificationToastPeriodSeconds) {
+                        setInformationalTimeout(informationalNotificationToastPeriodSeconds);
+                    }
+                    if (typeof toastTimeoutOnActionableNotifications !== "undefined") {
+                        setActionableTimeoutEnabled(toastTimeoutOnActionableNotifications);
+                    }
+                }
+            }
+        }
+        FSBL.Clients.RouterClient.addListener("FinsembleUserPreferencesChannel", listenForPreferenceChange);
+        return () => {
+            FSBL.Clients.RouterClient.removeListener("FinsembleUserPreferencesChannel", listenForPreferenceChange);
+        };
+    }, []);
+    useEffect(() => {
+        const transparencySupported = config.isTransparent;
+        setOpaqueClassName(!transparencySupported);
+        if (transparencySupported) {
+            finsembleWindow.show();
+        }
+        async function getNotificationsPreferences() {
+            return await FSBL.Clients.NotificationClient.getPreferences();
+        }
+        getNotificationsPreferences().then((preferences) => {
+            setInformationalTimeout(preferences.informationalNotificationToastPeriodSeconds);
+        });
+    }, []);
+    useEffect(() => {
+        moveToToolbarMonitor().then(async () => {
+            var _a, _b, _c;
+            let forceHide = false;
+            if (activeNotifications(notifications).length === 0 &&
+                activeNotifications(notificationsRef.current).length === 0) {
+                // Bug fix: Toasts flash when inActive components (partially caused by allowing notifications to animate out)
+                forceHide = true;
+            }
+            notificationsRef.current = notifications;
+            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 === null || rect === void 0 ? void 0 : rect.x),
+                        y: Math.round(rect === null || rect === void 0 ? void 0 : rect.y),
+                        width: 1,
+                        height: 1,
+                    };
+                    finsembleWindow.setShape([roundedRect]);
+                }
+                finsembleWindow.hide();
+            }
+            else {
+                finsembleWindow.bringToFront();
+                if (config.isTransparent && !isMac) {
+                    const roundedRect = {
+                        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),
+                    };
+                    await finsembleWindow.show();
+                    finsembleWindow.setShape([roundedRect]);
+                }
+                else {
+                    await finsembleWindow.show();
+                    const { err, data } = await FSBL.Clients.LauncherClient.getMonitorInfo({ monitor: "mine" });
+                    if (err || !data) {
+                        console.error(err);
+                        return;
+                    }
+                    const { data: bounds } = await finsembleWindow.getBounds();
+                    const width = ((_b = bounds === null || bounds === void 0 ? void 0 : bounds.right) !== null && _b !== void 0 ? _b : 0) - ((_c = bounds === null || bounds === void 0 ? void 0 : bounds.left) !== null && _c !== void 0 ? _c : 0);
+                    const height = Math.round(rect === null || rect === void 0 ? void 0 : rect.height) + 6;
+                    await finsembleWindow.setBounds({
+                        bounds: {
+                            top: data["availableRect"]["top"],
+                            left: data["availableRect"]["right"] - width,
+                            height: height + 10,
+                            width: width,
+                        },
+                    });
+                }
+            }
+        });
+    }, [notifications]);
+    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