@finsemble/finsemble-ui 7.2.1 → 8.0.0-beta.1

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

@@ -1,402 +1,407 @@
-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()))));
-};
+import React, { useEffect, useRef, useState } from "react";
+import { useTitle } from "../../../../hooks/useTitle";
+import ConditionalWrapper from "../../../shared/ConditionalWrapper";
+import { ViewMode, SelectionMode } from "../../constants";
+import "../../../../assets/css/notificationsCenter.css";
+import { CSSTransition } from "react-transition-group";
+// 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 { FEAGlobals } from "../../../../../common/Globals";
+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;
+    document.body.classList.add("notifications-popped-in");
+    (_a = document.getElementById("FSBLHeader")) === null || _a === void 0 ? void 0 : _a.classList.add("notifications-popped-in");
+};
+const removePoppedInClasses = () => {
+    var _a;
+    document.body.classList.remove("notifications-popped-in");
+    (_a = document.getElementById("FSBLHeader")) === null || _a === void 0 ? void 0 : _a.classList.remove("notifications-popped-in");
+};
+const storeNotificationsCenterWindowPosition = ({ showCenter, poppedOut, position }) => {
+    FEAGlobals.FSBL.Clients.StorageClient.save({
+        topic: "finsemble.notifications",
+        key: "last.position",
+        value: {
+            showCenter,
+            poppedOut,
+            position,
+        },
+    });
+};
+const setShowWindowForState = (centerState) => {
+    if (centerState.showCenter) {
+        FEAGlobals.finsembleWindow.show({}, () => {
+            FEAGlobals.finsembleWindow.bringToFront();
+        });
+    }
+    if (centerState.position) {
+        FEAGlobals.finsembleWindow.setBounds(centerState.position);
+    }
+    // Always on top when popped in
+    FEAGlobals.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 { title } = props;
+    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 FEAGlobals.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) => {
+                FEAGlobals.finsembleWindow.getMonitor((monitor) => {
+                    monitorInfo = monitor;
+                    resolve();
+                });
+            });
+        }
+        const { data } = await FEAGlobals.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,
+            });
+            FEAGlobals.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 FEAGlobals.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) {
+                    FEAGlobals.finsembleWindow.show({}, () => {
+                        FEAGlobals.finsembleWindow.bringToFront();
+                        FEAGlobals.finsembleWindow.setShape([]);
+                    });
+                }
+                else {
+                    FEAGlobals.finsembleWindow.hide();
+                }
+            }
+            else {
+                if (show) {
+                    await moveToToolbarMonitor();
+                    await setFullHeight();
+                    FEAGlobals.finsembleWindow.show({}, () => {
+                        FEAGlobals.finsembleWindow.bringToFront();
+                        FEAGlobals.finsembleWindow.setShape([]);
+                    });
+                }
+                else {
+                    setTimeout(() => {
+                        FEAGlobals.finsembleWindow.setShape([
+                            {
+                                x: 0,
+                                y: 0,
+                                width: 1,
+                                height: 1,
+                            },
+                        ]);
+                        FEAGlobals.finsembleWindow.hide();
+                    }, 500);
+                }
+            }
+        }
+        else {
+            if (show) {
+                if (!poppedOut) {
+                    await moveToToolbarMonitor();
+                    await setFullHeight();
+                }
+                FEAGlobals.finsembleWindow.show({}, () => {
+                    FEAGlobals.finsembleWindow.bringToFront();
+                });
+            }
+            else {
+                FEAGlobals.finsembleWindow.hide();
+            }
+        }
+    };
+    useTitle(title !== null && title !== void 0 ? title : "Notification Center");
+    // Add styles to the notification center window's body.
+    useEffect(() => {
+        document.body.classList.add("notifications-center-body");
+    }, []);
+    // 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 = FEAGlobals.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) {
+                    FEAGlobals.FSBL.Clients.Logger.system.error("Error cancelling the window close event", error);
+                }
+            }
+        };
+        const scrollHandler = () => {
+            if (getScrollPercentage() > 0.9) {
+                lazyLoadNextPage();
+            }
+        };
+        FEAGlobals.finsembleWindow.addEventListener("close-requested", hide);
+        FEAGlobals.finsembleWindow.addEventListener("bounds-change-end", boundsChangeListener);
+        (_a = scrollContainer.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", scrollHandler);
+        return () => {
+            var _a;
+            FEAGlobals.FSBL.Clients.RouterClient.unsubscribe(subscriptionId);
+            FEAGlobals.finsembleWindow.removeEventListener("close-requested", hide);
+            FEAGlobals.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;
+            FEAGlobals.finsembleWindow.getMonitor(async (monitorInfo) => {
+                if (uiState.poppedOut) {
+                    const { data } = await FEAGlobals.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);
+                FEAGlobals.FSBL.Clients.Logger.system.error("FinsembleNotificationsMuteStateChannel: ", error);
+            }
+            else {
+                setReloadMuteFilters(true);
+            }
+        }
+        FEAGlobals.FSBL.Clients.RouterClient.addListener("FinsembleNotificationsMuteStateChannel", listenMuteStateChanged);
+        return () => {
+            FEAGlobals.FSBL.Clients.RouterClient.removeListener("FinsembleNotificationsMuteStateChannel", listenMuteStateChanged);
+        };
+    }, []);
+    // Sets the current active mute filters
+    useEffect(() => {
+        async function loadMuteFilter() {
+            return await FEAGlobals.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