@tap-payments/os-micro-frontend-shared 0.1.441 → 0.1.442

package/build/constants/timezones.js

@@ -0,0 +1,47 @@
+export const TIMEZONES = {
+    AE: 'UTC +04:00',
+    SA: 'UTC +03:00',
+    KW: 'UTC +03:00',
+    OM: 'UTC +04:00',
+    YM: 'UTC +03:00',
+    EG: 'UTC +03:00',
+    BH: 'UTC +03:00',
+    JO: 'UTC +03:00',
+    LB: 'UTC +03:00',
+    QA: 'UTC +03:00',
+    GB: 'UTC +01:00',
+    IE: 'UTC +01:00',
+    FR: 'UTC +02:00',
+    NL: 'UTC +02:00',
+    DE: 'UTC +02:00',
+    ES: 'UTC +02:00',
+    IT: 'UTC +02:00',
+    PK: 'UTC +05:00',
+    IN: 'UTC +05:00',
+    SG: 'UTC +08:00',
+    US: 'UTC -05:00',
+    UTC: 'UTC +00:00',
+};
+export const ACCEPTANCE_TIMEZONE = TIMEZONES.UTC;
+export const COUNTRIES_TIMEZONES = [
+    { countryCode: 'SA', label: '(GMT:+0300) Saudi Arabia', timezone: 'Asia/Riyadh', offset: 3 },
+    { countryCode: 'BH', label: '(GMT:+0300) Bahrain', timezone: 'Asia/Bahrain', offset: 3 },
+    { countryCode: 'EG', label: '(GMT:+0300) Egypt', timezone: 'Africa/Cairo', offset: 3 },
+    { countryCode: 'LB', label: '(GMT:+0200) Lebanon', timezone: 'Asia/Beirut', offset: 2 },
+    { countryCode: 'JO', label: '(GMT:+0300) Jordan', timezone: 'Asia/Amman', offset: 3 },
+    { countryCode: 'KW', label: '(GMT:+0300) Kuwait', timezone: 'Asia/Kuwait', offset: 3 },
+    { countryCode: 'OM', label: '(GMT:+0400) Oman', timezone: 'Asia/Muscat', offset: 4 },
+    { countryCode: 'QA', label: '(GMT:+0300) Qatar', timezone: 'Asia/Qatar', offset: 3 },
+    { countryCode: 'AE', label: '(GMT:+0400) United Arab Emirates', timezone: 'Asia/Dubai', offset: 4 },
+    { countryCode: 'GB', label: '(GMT:+0000) United Kingdom', timezone: 'Europe/London', offset: 0 },
+    { countryCode: 'IE', label: '(GMT:+0000) Ireland', timezone: 'Europe/Dublin', offset: 0 },
+    { countryCode: 'FR', label: '(GMT:+0100) France', timezone: '	Europe/Paris', offset: 1 },
+    { countryCode: 'NL', label: '(GMT:+0100) Netherlands', timezone: 'Europe/Amsterdam', offset: 1 },
+    { countryCode: 'DE', label: '(GMT:+0100) Germany', timezone: 'Europe/Berlin', offset: 1 },
+    { countryCode: 'IT', label: '(GMT:+0100) Italy', timezone: 'Europe/Rome', offset: 1 },
+    { countryCode: 'ES', label: '(GMT:+0100) Spain', timezone: 'Europe/Madrid', offset: 1 },
+    { countryCode: 'PK', label: '(GMT:+0500) Pakistan', timezone: 'Asia/Karachi', offset: 5 },
+    { countryCode: 'IN', label: '(GMT:-0500) India', timezone: 'America/Indiana/Indianapolis', offset: -5 },
+    { countryCode: 'SG', label: '(GMT:+0800) Singapore', timezone: 'Asia/Singapore', offset: 8 },
+    { countryCode: 'US', label: '(GMT:-0500) Eastern Time (US & Canada)', timezone: 'America/New_York', offset: -5 },
+];

package/build/constants/toggleOptions.js

@@ -0,0 +1,8 @@
+export const DATA_KEY = {
+    COUNT: 'count',
+    AMOUNT: 'amount',
+};
+export const DATA_KEY_LABEL = {
+    count: 'transaction',
+    amount: 'amount',
+};

package/build/hooks/index.js

@@ -1 +1,17 @@
-export{d as useActionMenu,m as useAppEventListener,l as useAppEventPublisher,k as useAppsInfo,e as useBadgesCount,f as useCheckUserLoggedIn,j as useCountdown,c as useDelayToSetValue,b as useMouseState,q as useNetworkState,p as useScrolledTo,n as useSelectedMerchantDetails,h as useStickyHeaderShadow,g as useTableViews,i as useThemeMode,o as useToast,a as useWindowDimensions}from'../chunk-XXZJ5D5P.js';import'../chunk-DQLGJFLX.js';import'../chunk-EDMW226P.js';import'../chunk-7IW25XZP.js';import'../chunk-OYEIM6ED.js';import'../chunk-RWXGVZUC.js';
+export * from './useWindowDimensions';
+export * from './useMouseState';
+export * from './useDelayToSetValue';
+export * from './useActionMenu';
+export * from './useBadgesCount';
+export * from './useCheckUserLoggedIn';
+export * from './useIsParameterSelected';
+export * from './useStickyHeaderShadow';
+export * from './useThemeMode';
+export * from './useCountdown';
+export * from './useAppsInfo';
+export * from './useAppEventPublisher';
+export * from './useAppEventListener';
+export * from './useSelectedMerchantDetails';
+export * from './useToast';
+export * from './useScrolledTo';
+export * from './useNetworkState';

package/build/hooks/useActionMenu.js

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+export const useActionMenu = () => {
+    const [actionMenuAnchor, setActionMenuAnchor] = useState(null);
+    const [actionMenuOptions, setActionMenuOptions] = useState(undefined);
+    const [selectedActionMenuId, setSelectedActionMenuId] = useState(undefined);
+    const [isActionMenuCheckMarkHighlighted, setIsActionMenuCheckMarkHighlighted] = useState(false);
+    const [showActionsDropdown, setShowActionsDropdown] = useState(true);
+    const hideDropdown = () => {
+        setShowActionsDropdown(false);
+        setTimeout(() => {
+            setShowActionsDropdown(true);
+        }, 100);
+    };
+    const handleCloseActionMenu = (e) => {
+        if (e && (actionMenuAnchor === null || actionMenuAnchor === void 0 ? void 0 : actionMenuAnchor.getBoundingClientRect())) {
+            const { pageX, pageY } = e;
+            const boundingClient = actionMenuAnchor === null || actionMenuAnchor === void 0 ? void 0 : actionMenuAnchor.getBoundingClientRect();
+            const { left, right, bottom, top } = boundingClient;
+            const isAnchorDropdownClicked = pageX > left && pageX < right && pageY > top && pageY < bottom;
+            if (isAnchorDropdownClicked) {
+                setIsActionMenuCheckMarkHighlighted(true);
+                setTimeout(() => {
+                    setIsActionMenuCheckMarkHighlighted(false);
+                }, 2000);
+                return;
+            }
+        }
+        setActionMenuAnchor(null);
+        setActionMenuOptions(undefined);
+        setSelectedActionMenuId(undefined);
+    };
+    return {
+        actionMenuAnchor,
+        actionMenuOptions,
+        selectedActionMenuId,
+        isActionMenuCheckMarkHighlighted,
+        setActionMenuAnchor,
+        setActionMenuOptions,
+        setSelectedActionMenuId,
+        setIsActionMenuCheckMarkHighlighted,
+        handleCloseActionMenu,
+        hideDropdown,
+        showActionsDropdown,
+    };
+};

package/build/hooks/useAppEventListener.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+export function useAppEventListener(eventName, handler) {
+    useEffect(() => {
+        const listener = (e) => {
+            const customEvent = e;
+            handler(...(customEvent.detail || []));
+        };
+        window.addEventListener(eventName, listener);
+        return () => {
+            window.removeEventListener(eventName, listener);
+        };
+    }, [eventName, handler]);
+}

package/build/hooks/useAppEventPublisher.js

@@ -0,0 +1,7 @@
+import { useCallback } from 'react';
+export function useAppEventPublisher(eventName) {
+    return useCallback((...args) => {
+        const event = new CustomEvent(eventName, { detail: args });
+        window.dispatchEvent(event);
+    }, [eventName]);
+}

package/build/hooks/useAppsInfo.js

@@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+export const useAppsInfo = (segmentApps) => {
+    const getAppInfo = useCallback((appCode) => segmentApps.find((app) => app.code.toLowerCase() === appCode.toLowerCase()), [segmentApps]);
+    const getServiceInfo = useCallback(({ appCode, serviceCode }) => {
+        var _a;
+        return (_a = getAppInfo(appCode)) === null || _a === void 0 ? void 0 : _a.app_services.find(({ code }) => code.toLowerCase() === serviceCode.toLowerCase());
+    }, [getAppInfo]);
+    const getServiceFunctions = useCallback(({ appCode, serviceCode }) => {
+        var _a, _b;
+        return (_b = (_a = getServiceInfo({ appCode, serviceCode })) === null || _a === void 0 ? void 0 : _a.functions) !== null && _b !== void 0 ? _b : [];
+    }, [getServiceInfo]);
+    const getFunctionInfo = useCallback(({ appCode, serviceCode, functionCode }) => {
+        return getServiceFunctions({ appCode, serviceCode }).find(({ code }) => code.toLowerCase() === functionCode.toLowerCase());
+    }, [getServiceFunctions]);
+    return {
+        getAppInfo,
+        getServiceInfo,
+        getServiceFunctions,
+        getFunctionInfo,
+    };
+};

package/build/hooks/useBadgesCount.js

@@ -0,0 +1,15 @@
+import { useCallback, useEffect, useState } from 'react';
+export function useBadgesCount(filterStatus, count) {
+    const [badgesCount, setBadgesCount] = useState({});
+    useEffect(() => {
+        if (filterStatus) {
+            setBadgesCount((statusesCounts) => (Object.assign(Object.assign({}, statusesCounts), { [filterStatus]: count || 0 })));
+        }
+    }, [count, filterStatus]);
+    const getBadgeCount = useCallback((status) => {
+        if (status)
+            return badgesCount[status];
+        return '';
+    }, [badgesCount]);
+    return { getBadgeCount };
+}

package/build/hooks/useCheckUserLoggedIn.js

@@ -0,0 +1,11 @@
+import { useLayoutEffect } from 'react';
+import { useLocation } from 'react-router';
+import { isUserLoggedInAndJwtTokenExistsAndNotExpired } from '../utils/index.js';
+export const useCheckUserLoggedIn = () => {
+    const { pathname } = useLocation();
+    useLayoutEffect(() => {
+        if (!isUserLoggedInAndJwtTokenExistsAndNotExpired()) {
+            window.location.href = '/login';
+        }
+    }, [pathname]);
+};

package/build/hooks/useCountdown.js

@@ -0,0 +1,50 @@
+import { secondsToTimeString } from '../utils/index.js';
+import { useEffect, useRef, useState } from 'react';
+export function useCountdown() {
+    const [timer, setTimer] = useState(0);
+    const timerInterval = useRef(null);
+    const formattedTime = secondsToTimeString(timer);
+    // Stop the timer
+    const stopTimer = () => {
+        if (timerInterval.current) {
+            clearInterval(timerInterval.current);
+            timerInterval.current = null;
+        }
+    };
+    // Reset the timer
+    const resetTimer = () => {
+        stopTimer();
+        setTimer(0);
+    };
+    // Start the timer
+    const startTimer = (expiryTime) => {
+        if (expiryTime <= 0)
+            return;
+        if (timerInterval.current) {
+            stopTimer();
+        }
+        setTimer(expiryTime);
+        timerInterval.current = setInterval(() => {
+            setTimer((prev) => {
+                const newTime = prev - 1;
+                if (newTime <= 0) {
+                    stopTimer();
+                }
+                return newTime;
+            });
+        }, 1000);
+    };
+    // Auto-stop and cleanup on unmount
+    useEffect(() => {
+        return () => {
+            stopTimer();
+        };
+    }, []);
+    return {
+        timer,
+        formattedTime,
+        startTimer,
+        stopTimer,
+        resetTimer,
+    };
+}

package/build/hooks/useDelayToSetValue.js

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+export function useDelayToSetValue({ value, delay }) {
+    const [delayedValue, setDelayedValue] = useState(value);
+    useEffect(() => {
+        let timeout;
+        if (value) {
+            setDelayedValue(value);
+        }
+        else {
+            timeout = setTimeout(() => {
+                setDelayedValue(value);
+            }, delay);
+        }
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [value]);
+    return delayedValue;
+}

package/build/hooks/useIsParameterSelected.js

@@ -0,0 +1,13 @@
+import { isParameterSelected } from '../utils/index.js';
+export function useTableViews(tableViews) {
+    const isSelected = (columnId, parameters) => {
+        return parameters === null || parameters === void 0 ? void 0 : parameters.map((param) => {
+            return isParameterSelected(tableViews, columnId, param);
+        });
+    };
+    const getColumnOrder = (columnId) => {
+        const columnIndex = tableViews.findIndex((col) => { var _a; return ((_a = col.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (columnId === null || columnId === void 0 ? void 0 : columnId.toLowerCase()); });
+        return columnIndex === -1 ? 100 : columnIndex;
+    };
+    return { isParameterSelected: isSelected, getColumnOrder };
+}

package/build/hooks/useMouseState.js

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+export const useMouseState = () => {
+    const [isHovered, setIsHovered] = useState(false);
+    const [isContentHovered, setIsContentHovered] = useState(false);
+    const onMouseEnter = () => {
+        setIsHovered(true);
+    };
+    const onMouseLeave = () => {
+        setIsHovered(false);
+    };
+    const onMouseContentEnter = () => {
+        setIsContentHovered(true);
+    };
+    const onMouseContentLeave = () => {
+        setIsContentHovered(false);
+    };
+    return {
+        onMouseContentEnter,
+        onMouseContentLeave,
+        isHovered,
+        isContentHovered,
+        onMouseEnter,
+        onMouseLeave,
+    };
+};

package/build/hooks/useNetworkState.js

@@ -0,0 +1,112 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useCallback, useEffect, useRef, useState } from 'react';
+export const useNetworkState = (options = {}) => {
+    const { checkUrl = '/status', checkIntervalMs = 30000, // poll /status only while offline
+    debounceMs = 800, timeoutMs = 5000, } = options;
+    const isBrowser = typeof window !== 'undefined' && typeof navigator !== 'undefined';
+    const [isOnline, setIsOnline] = useState(isBrowser ? navigator.onLine : true);
+    const [isChecking, setIsChecking] = useState(false);
+    const [error, setError] = useState(null);
+    const debounceTimer = useRef(null);
+    const intervalId = useRef(null);
+    const applyStatusWithDebounce = useCallback((nextOnline) => {
+        if (debounceTimer.current !== null) {
+            window.clearTimeout(debounceTimer.current);
+        }
+        debounceTimer.current = window.setTimeout(() => {
+            setIsOnline(nextOnline);
+            debounceTimer.current = null;
+        }, debounceMs);
+    }, [debounceMs]);
+    useEffect(() => {
+        if (!isBrowser) {
+            return;
+        }
+        let abortController = null;
+        const clearPolling = () => {
+            if (intervalId.current !== null) {
+                window.clearInterval(intervalId.current);
+                intervalId.current = null;
+            }
+        };
+        const checkConnectivity = () => __awaiter(void 0, void 0, void 0, function* () {
+            setIsChecking(true);
+            setError(null);
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+            abortController = new AbortController();
+            try {
+                const timeout = window.setTimeout(() => {
+                    abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+                }, timeoutMs);
+                const res = yield fetch(checkUrl, {
+                    method: 'GET',
+                    cache: 'no-store',
+                    signal: abortController.signal,
+                });
+                window.clearTimeout(timeout);
+                const ok = res.ok;
+                applyStatusWithDebounce(ok);
+                if (ok)
+                    clearPolling();
+                else
+                    setError(`Health check failed with status ${res.status}`);
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            }
+            catch (_err) {
+                applyStatusWithDebounce(false);
+                setError('Unable to reach network');
+            }
+            finally {
+                setIsChecking(false);
+            }
+        });
+        const handleOnline = () => {
+            // Browser says we're online: trust it, no /status request
+            clearPolling();
+            applyStatusWithDebounce(true);
+        };
+        const handleOffline = () => {
+            // Browser says we're offline: reflect that and poll /status until back
+            applyStatusWithDebounce(false);
+            clearPolling();
+            checkConnectivity();
+            intervalId.current = window.setInterval(checkConnectivity, checkIntervalMs);
+        };
+        window.addEventListener('online', handleOnline);
+        window.addEventListener('offline', handleOffline);
+        // If initially offline, start polling /status; if online, do not hit /status
+        if (!navigator.onLine) {
+            checkConnectivity();
+            intervalId.current = window.setInterval(checkConnectivity, checkIntervalMs);
+        }
+        return () => {
+            window.removeEventListener('online', handleOnline);
+            window.removeEventListener('offline', handleOffline);
+            if (debounceTimer.current !== null) {
+                window.clearTimeout(debounceTimer.current);
+            }
+            clearPolling();
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+        };
+    }, [isBrowser, checkUrl, checkIntervalMs, debounceMs, timeoutMs, applyStatusWithDebounce]);
+    if (!isBrowser) {
+        return {
+            isOnline: false,
+            isChecking: false,
+            error: 'Online status is only available in a browser environment.',
+        };
+    }
+    return {
+        isOnline,
+        isChecking,
+        error,
+    };
+};

package/build/hooks/useScrolledTo.js

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useState } from 'react';
+const DEFAULT_THRESHOLD = 10;
+export function useScrolledTo({ threshold = DEFAULT_THRESHOLD, containerRef } = {}) {
+    const [scrolledToTop, setScrolledToTop] = useState(true);
+    const [scrolledToBottom, setScrolledToBottom] = useState(false);
+    const [scrollable, setScrollable] = useState(false);
+    const updateFromElement = useCallback((el) => {
+        const { scrollTop, scrollHeight, clientHeight } = el;
+        setScrollable(scrollHeight > clientHeight + threshold);
+        setScrolledToTop(scrollTop <= threshold);
+        setScrolledToBottom(scrollHeight - (scrollTop + clientHeight) <= threshold);
+    }, [threshold]);
+    const handleScroll = useCallback((source) => {
+        if (!source)
+            return;
+        // React onScroll event
+        if ('currentTarget' in source) {
+            updateFromElement(source.currentTarget);
+            return;
+        }
+        // Direct HTMLElement
+        updateFromElement(source);
+    }, [updateFromElement]);
+    useEffect(() => {
+        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current))
+            return;
+        const element = containerRef.current;
+        // Initial calculation
+        handleScroll(element);
+        // Watch for container size changes
+        const resizeObserver = new ResizeObserver(() => {
+            handleScroll(element);
+        });
+        resizeObserver.observe(element);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [containerRef, handleScroll]);
+    return {
+        handleScroll,
+        scrolledToTop,
+        scrolledToBottom,
+        scrollable,
+    };
+}

package/build/hooks/useSelectedMerchantDetails.js

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+/**
+ * Custom hook to get selected merchant details
+ */
+export const useSelectedMerchantDetails = (selectedValue, selectedBrand) => {
+    const selectedEntity = useMemo(() => selectedBrand === null || selectedBrand === void 0 ? void 0 : selectedBrand.entities.find((entity) => entity.id === (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.entityId)), [selectedBrand, selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.entityId]);
+    const selectedMerchant = useMemo(() => { var _a; return (_a = selectedEntity === null || selectedEntity === void 0 ? void 0 : selectedEntity.merchants) === null || _a === void 0 ? void 0 : _a.find((merchant) => merchant.id === (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.merchantId)); }, [selectedEntity, selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.merchantId]);
+    const displayName = useMemo(() => { var _a, _b; return (_b = (_a = selectedMerchant === null || selectedMerchant === void 0 ? void 0 : selectedMerchant.display_name) !== null && _a !== void 0 ? _a : selectedMerchant === null || selectedMerchant === void 0 ? void 0 : selectedMerchant.legacy_id) !== null && _b !== void 0 ? _b : 'Select'; }, [selectedMerchant]);
+    return {
+        selectedBrand,
+        selectedEntity,
+        selectedMerchant,
+        displayName,
+    };
+};

package/build/hooks/useStickyHeaderShadow.js

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+/* Usage: you will need to add an empty div before your sticky header and pass it's ref to this hook
+    Example:
+     <Box ref={interceptRef} />
+     <StickyHeader></StickyHeader>
+*/
+// TODO: enhance the hook to take only the ref of the sticky bar and handle adding the interceptRef internally from the hook
+export const useStickyHeaderShadow = (interceptRef) => {
+    const [showShadow, setShowShadow] = useState(false);
+    useEffect(() => {
+        const observer = new IntersectionObserver(([entry]) => {
+            setShowShadow(!entry.isIntersecting);
+        });
+        if (interceptRef === null || interceptRef === void 0 ? void 0 : interceptRef.current)
+            observer.observe(interceptRef.current);
+    });
+    return {
+        showShadow,
+    };
+};

package/build/hooks/useThemeMode.js

@@ -0,0 +1,8 @@
+import { useTheme } from '@mui/material/styles';
+import { ThemeMode } from '../types/index.js';
+export const useThemeMode = () => {
+    const theme = useTheme();
+    const isDark = theme.palette.mode === ThemeMode.DARK;
+    const isLight = theme.palette.mode === ThemeMode.LIGHT;
+    return { isDark, isLight };
+};

package/build/hooks/useToast.js

@@ -0,0 +1,29 @@
+import { useMemo, useCallback } from 'react';
+import { useAppEventPublisher } from './index.js';
+import { AppEvent } from '../types/index.js';
+const generateToastId = () => crypto.randomUUID();
+export function useToast() {
+    const publish = useAppEventPublisher(AppEvent.OnToast);
+    const createToastByVariant = useCallback((variant) => (message, options) => {
+        var _a;
+        const id = (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : generateToastId();
+        publish({ action: 'show', variant, message, options: Object.assign(Object.assign({}, options), { id }) });
+        return id;
+    }, [publish]);
+    return useMemo(() => {
+        // base callable function
+        const toast = createToastByVariant('default');
+        // attach variants
+        toast.success = createToastByVariant('success');
+        toast.error = createToastByVariant('error');
+        toast.loading = createToastByVariant('loading');
+        toast.custom = createToastByVariant('custom');
+        toast.dismiss = (toastId) => {
+            publish({ action: 'dismiss', variant: 'dismiss', toastId });
+        };
+        toast.remove = (toastId) => {
+            publish({ action: 'remove', variant: 'remove', toastId });
+        };
+        return toast;
+    }, [createToastByVariant, publish]);
+}

package/build/hooks/useWindowDimensions.js

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+function getWindowDimensions() {
+    const { innerWidth: width, innerHeight: height } = window;
+    return {
+        width,
+        height,
+    };
+}
+export function useWindowDimensions() {
+    const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+    useEffect(() => {
+        function handleResize() {
+            setWindowDimensions(getWindowDimensions());
+        }
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    return windowDimensions;
+}