@capsitech/react-utilities 0.1.4 → 0.1.6

package/lib/Components/SuspenseRoute.d.ts

@@ -1,7 +1,7 @@
-interface ISuspenseRouteProps {
-    label?: string;
-    children?: any;
-    fallback?: any;
-}
-export declare const SuspenseRoute: ({ children: Component, label, fallback: FallbackComponent, }: ISuspenseRouteProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+interface ISuspenseRouteProps {
+    label?: string;
+    children?: any;
+    fallback?: any;
+}
+export declare const SuspenseRoute: ({ children: Component, label, fallback: FallbackComponent, }: ISuspenseRouteProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/Components/SuspenseRoute.js

@@ -1,29 +1,29 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-const isSuspenseComponent = (component) => typeof component === "object" &&
-    component &&
-    component.hasOwnProperty("$$typeof") &&
-    component.hasOwnProperty("_payload") &&
-    component.hasOwnProperty("_init");
-export const SuspenseRoute = ({ children: Component, label = "Loading components...", fallback: FallbackComponent, }) => {
-    if (isSuspenseComponent(Component)) {
-        if (!FallbackComponent)
-            FallbackComponent = SuspenseRouteFallback;
-        return _jsx(React.Suspense, { fallback: _jsx(FallbackComponent, { label: label }), children: _jsx(Component, {}) });
-    }
-    return (_jsx(Component, {}));
-};
-const SuspenseRouteFallback = ({ label = "Loading components..." }) => {
-    return _jsx("div", { style: {
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            backgroundColor: 'rgba(0, 0, 0, 0.3)',
-            zIndex: 9999,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
-        }, children: label });
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+const isSuspenseComponent = (component) => typeof component === "object" &&
+    component &&
+    component.hasOwnProperty("$$typeof") &&
+    component.hasOwnProperty("_payload") &&
+    component.hasOwnProperty("_init");
+export const SuspenseRoute = ({ children: Component, label = "Loading components...", fallback: FallbackComponent, }) => {
+    if (isSuspenseComponent(Component)) {
+        if (!FallbackComponent)
+            FallbackComponent = SuspenseRouteFallback;
+        return _jsx(React.Suspense, { fallback: _jsx(FallbackComponent, { label: label }), children: _jsx(Component, {}) });
+    }
+    return (_jsx(Component, {}));
+};
+const SuspenseRouteFallback = ({ label = "Loading components..." }) => {
+    return _jsx("div", { style: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+            zIndex: 9999,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
+        }, children: label });
+};

package/lib/Components/index.d.ts

@@ -1 +1 @@
-export * from './SuspenseRoute';
+export * from './SuspenseRoute';

package/lib/Components/index.js

@@ -1 +1 @@
-export * from './SuspenseRoute';
+export * from './SuspenseRoute';

package/lib/Hooks/index.d.ts

@@ -1,45 +1,45 @@
-import { useEffect } from 'react';
-export * from './useInfiniteScroll';
-export * from './useNetworkState';
-export * from './useShortcuts';
-/**
- * React effect hook that invokes only on update.
- * It doesn't invoke on mount
- */
-export declare const useUpdateEffect: typeof useEffect;
-/**
- * React hook to persist any value between renders,
- * but keeps it up-to-date if it changes.
- *
- * @param value the value or function to persist
- */
-export declare function useLatestRef<T>(value: T): import("react").MutableRefObject<T>;
-/**
- * useCallbackRef hook
- *
- * A custom hook that converts a callback to a ref to avoid triggering re-renders
- * ..when passed as a prop or avoid re-executing effects when passed as a dependency
- *
- * @param callback The callback to write to a ref object
- */
-export declare const useCallbackRef: <T extends (...args: any[]) => any>(callback: T | undefined) => T;
-/**
- * useFirstRenderState hook
- *
- * Returns "true" if component is just mounted (first render), else "false".
- */
-export declare const useFirstRenderState: () => boolean;
-/**
- * React Hook that provides a declarative `setInterval`
- *
- * @param callback the callback to execute at interval
- * @param delay the `setInterval` delay (in ms)
- */
-export declare function useInterval(callback: () => void, delay: number | null): void;
-/**
- * React hook that provides a declarative `setTimeout`
- *
- * @param callback the callback to run after specified delay
- * @param delay the delay (in ms)
- */
-export declare function useTimeout(callback: Function, delay: number | null): void;
+import { useEffect } from 'react';
+export * from './useInfiniteScroll';
+export * from './useNetworkState';
+export * from './useShortcuts';
+/**
+ * React effect hook that invokes only on update.
+ * It doesn't invoke on mount
+ */
+export declare const useUpdateEffect: typeof useEffect;
+/**
+ * React hook to persist any value between renders,
+ * but keeps it up-to-date if it changes.
+ *
+ * @param value the value or function to persist
+ */
+export declare function useLatestRef<T>(value: T): import("react").MutableRefObject<T>;
+/**
+ * useCallbackRef hook
+ *
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders
+ * ..when passed as a prop or avoid re-executing effects when passed as a dependency
+ *
+ * @param callback The callback to write to a ref object
+ */
+export declare const useCallbackRef: <T extends (...args: any[]) => any>(callback: T | undefined) => T;
+/**
+ * useFirstRenderState hook
+ *
+ * Returns "true" if component is just mounted (first render), else "false".
+ */
+export declare const useFirstRenderState: () => boolean;
+/**
+ * React Hook that provides a declarative `setInterval`
+ *
+ * @param callback the callback to execute at interval
+ * @param delay the `setInterval` delay (in ms)
+ */
+export declare function useInterval(callback: () => void, delay: number | null): void;
+/**
+ * React hook that provides a declarative `setTimeout`
+ *
+ * @param callback the callback to run after specified delay
+ * @param delay the delay (in ms)
+ */
+export declare function useTimeout(callback: Function, delay: number | null): void;

package/lib/Hooks/index.js

@@ -1,98 +1,98 @@
-import { useCallback, useEffect, useRef } from 'react';
-export * from './useInfiniteScroll';
-export * from './useNetworkState';
-export * from './useShortcuts';
-/**
- * React effect hook that invokes only on update.
- * It doesn't invoke on mount
- */
-export const useUpdateEffect = (effect, deps) => {
-    const mounted = useRef(false);
-    useEffect(() => {
-        if (mounted.current) {
-            return effect();
-        }
-        mounted.current = true;
-        return undefined;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
-    return mounted.current;
-};
-/**
- * React hook to persist any value between renders,
- * but keeps it up-to-date if it changes.
- *
- * @param value the value or function to persist
- */
-export function useLatestRef(value) {
-    const ref = useRef(value);
-    useEffect(() => {
-        ref.current = value;
-    }, [value]);
-    return ref;
-}
-/**
- * useCallbackRef hook
- *
- * A custom hook that converts a callback to a ref to avoid triggering re-renders
- * ..when passed as a prop or avoid re-executing effects when passed as a dependency
- *
- * @param callback The callback to write to a ref object
- */
-export const useCallbackRef = (callback) => {
-    const callbackRef = useRef(callback);
-    useEffect(() => {
-        callbackRef.current = callback;
-    });
-    return useCallback(((...args) => {
-        return callbackRef.current?.(...args);
-    }), []);
-};
-/**
- * useFirstRenderState hook
- *
- * Returns "true" if component is just mounted (first render), else "false".
- */
-export const useFirstRenderState = () => {
-    const isFirst = useRef(true);
-    if (isFirst.current) {
-        isFirst.current = false;
-        return true;
-    }
-    return isFirst.current;
-};
-/**
- * React Hook that provides a declarative `setInterval`
- *
- * @param callback the callback to execute at interval
- * @param delay the `setInterval` delay (in ms)
- */
-export function useInterval(callback, delay) {
-    const savedCallback = useLatestRef(callback);
-    useEffect(() => {
-        const tick = () => {
-            savedCallback.current?.();
-        };
-        if (delay !== null) {
-            const id = setInterval(tick, delay);
-            return () => clearInterval(id);
-        }
-    }, [delay, savedCallback]);
-}
-/**
- * React hook that provides a declarative `setTimeout`
- *
- * @param callback the callback to run after specified delay
- * @param delay the delay (in ms)
- */
-export function useTimeout(callback, delay) {
-    const savedCallback = useLatestRef(callback);
-    useEffect(() => {
-        if (delay == null)
-            return;
-        const timeoutId = setTimeout(() => {
-            savedCallback.current?.();
-        }, delay);
-        return () => clearTimeout(timeoutId);
-    }, [delay, savedCallback]);
-}
+import { useCallback, useEffect, useRef } from 'react';
+export * from './useInfiniteScroll';
+export * from './useNetworkState';
+export * from './useShortcuts';
+/**
+ * React effect hook that invokes only on update.
+ * It doesn't invoke on mount
+ */
+export const useUpdateEffect = (effect, deps) => {
+    const mounted = useRef(false);
+    useEffect(() => {
+        if (mounted.current) {
+            return effect();
+        }
+        mounted.current = true;
+        return undefined;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+    return mounted.current;
+};
+/**
+ * React hook to persist any value between renders,
+ * but keeps it up-to-date if it changes.
+ *
+ * @param value the value or function to persist
+ */
+export function useLatestRef(value) {
+    const ref = useRef(value);
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref;
+}
+/**
+ * useCallbackRef hook
+ *
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders
+ * ..when passed as a prop or avoid re-executing effects when passed as a dependency
+ *
+ * @param callback The callback to write to a ref object
+ */
+export const useCallbackRef = (callback) => {
+    const callbackRef = useRef(callback);
+    useEffect(() => {
+        callbackRef.current = callback;
+    });
+    return useCallback(((...args) => {
+        return callbackRef.current?.(...args);
+    }), []);
+};
+/**
+ * useFirstRenderState hook
+ *
+ * Returns "true" if component is just mounted (first render), else "false".
+ */
+export const useFirstRenderState = () => {
+    const isFirst = useRef(true);
+    if (isFirst.current) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
+};
+/**
+ * React Hook that provides a declarative `setInterval`
+ *
+ * @param callback the callback to execute at interval
+ * @param delay the `setInterval` delay (in ms)
+ */
+export function useInterval(callback, delay) {
+    const savedCallback = useLatestRef(callback);
+    useEffect(() => {
+        const tick = () => {
+            savedCallback.current?.();
+        };
+        if (delay !== null) {
+            const id = setInterval(tick, delay);
+            return () => clearInterval(id);
+        }
+    }, [delay, savedCallback]);
+}
+/**
+ * React hook that provides a declarative `setTimeout`
+ *
+ * @param callback the callback to run after specified delay
+ * @param delay the delay (in ms)
+ */
+export function useTimeout(callback, delay) {
+    const savedCallback = useLatestRef(callback);
+    useEffect(() => {
+        if (delay == null)
+            return;
+        const timeoutId = setTimeout(() => {
+            savedCallback.current?.();
+        }, delay);
+        return () => clearTimeout(timeoutId);
+    }, [delay, savedCallback]);
+}

package/lib/Hooks/useInfiniteScroll.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-/**
- * Infinite scrolling with intersection observer
- * @param scrollRef Reference object for observe bottom boundary
- * @param dispatch Trigger an action that updates the page number
- */
-export declare const useInfiniteScroll: (scrollRef: React.MutableRefObject<any>, dispatch: any) => void;
+import React from 'react';
+/**
+ * Infinite scrolling with intersection observer
+ * @param scrollRef Reference object for observe bottom boundary
+ * @param dispatch Trigger an action that updates the page number
+ */
+export declare const useInfiniteScroll: (scrollRef: React.MutableRefObject<any>, dispatch: any) => void;

package/lib/Hooks/useInfiniteScroll.js

@@ -1,22 +1,22 @@
-import React from 'react';
-/**
- * Infinite scrolling with intersection observer
- * @param scrollRef Reference object for observe bottom boundary
- * @param dispatch Trigger an action that updates the page number
- */
-export const useInfiniteScroll = (scrollRef, dispatch) => {
-    const scrollObserver = React.useCallback((node) => {
-        new IntersectionObserver((entries) => {
-            entries.forEach((en) => {
-                if (en.intersectionRatio > 0) {
-                    dispatch({ type: 'next-page' });
-                }
-            });
-        }).observe(node);
-    }, [dispatch]);
-    React.useEffect(() => {
-        if (scrollRef.current) {
-            scrollObserver(scrollRef.current);
-        }
-    }, [scrollObserver, scrollRef]);
-};
+import React from 'react';
+/**
+ * Infinite scrolling with intersection observer
+ * @param scrollRef Reference object for observe bottom boundary
+ * @param dispatch Trigger an action that updates the page number
+ */
+export const useInfiniteScroll = (scrollRef, dispatch) => {
+    const scrollObserver = React.useCallback((node) => {
+        new IntersectionObserver((entries) => {
+            entries.forEach((en) => {
+                if (en.intersectionRatio > 0) {
+                    dispatch({ type: 'next-page' });
+                }
+            });
+        }).observe(node);
+    }, [dispatch]);
+    React.useEffect(() => {
+        if (scrollRef.current) {
+            scrollObserver(scrollRef.current);
+        }
+    }, [scrollObserver, scrollRef]);
+};

package/lib/Hooks/useNetworkState.d.ts

@@ -1,67 +1,67 @@
-export interface INetworkInformation extends EventTarget {
-    readonly downlink: number;
-    readonly downlinkMax: number;
-    readonly effectiveType: 'slow-2g' | '2g' | '3g' | '4g';
-    readonly rtt: number;
-    readonly saveData: boolean;
-    readonly type: 'bluetooth' | 'cellular' | 'ethernet' | 'none' | 'wifi' | 'wimax' | 'other' | 'unknown';
-    onChange: (event: Event) => void;
-}
-export interface IUseNetworkState {
-    /**
-     * @desc Whether browser connected to the network or not.
-     */
-    online: boolean | undefined;
-    /**
-     * @desc Previous value of `online` property. Helps to identify if browser
-     * just connected or lost connection.
-     */
-    previous: boolean | undefined;
-    /**
-     * @desc The {Date} object pointing to the moment when state change occurred.
-     */
-    since: Date | undefined;
-    /**
-     * @desc Effective bandwidth estimate in megabits per second, rounded to the
-     * nearest multiple of 25 kilobits per seconds.
-     */
-    downlink: INetworkInformation['downlink'] | undefined;
-    /**
-     * @desc Maximum downlink speed, in megabits per second (Mbps), for the
-     * underlying connection technology
-     */
-    downlinkMax: INetworkInformation['downlinkMax'] | undefined;
-    /**
-     * @desc Effective type of the connection meaning one of 'slow-2g', '2g', '3g', or '4g'.
-     * This value is determined using a combination of recently observed round-trip time
-     * and downlink values.
-     */
-    effectiveType: INetworkInformation['effectiveType'] | undefined;
-    /**
-     * @desc Estimated effective round-trip time of the current connection, rounded
-     * to the nearest multiple of 25 milliseconds
-     */
-    rtt: INetworkInformation['rtt'] | undefined;
-    /**
-     * @desc {true} if the user has set a reduced data usage option on the user agent.
-     */
-    saveData: INetworkInformation['saveData'] | undefined;
-    /**
-     * @desc The type of connection a device is using to communicate with the network.
-     * It will be one of the following values:
-     *  - bluetooth
-     *  - cellular
-     *  - ethernet
-     *  - none
-     *  - wifi
-     *  - wimax
-     *  - other
-     *  - unknown
-     */
-    type: INetworkInformation['type'] | undefined;
-}
-export declare const isBrowser: boolean;
-export declare const isNavigator: boolean;
-export type IHookStateInitialSetter<S> = () => S;
-export type IHookStateInitAction<S> = S | IHookStateInitialSetter<S>;
-export declare function useNetworkState(initialState?: IHookStateInitAction<IUseNetworkState>): IUseNetworkState;
+export interface INetworkInformation extends EventTarget {
+    readonly downlink: number;
+    readonly downlinkMax: number;
+    readonly effectiveType: 'slow-2g' | '2g' | '3g' | '4g';
+    readonly rtt: number;
+    readonly saveData: boolean;
+    readonly type: 'bluetooth' | 'cellular' | 'ethernet' | 'none' | 'wifi' | 'wimax' | 'other' | 'unknown';
+    onChange: (event: Event) => void;
+}
+export interface IUseNetworkState {
+    /**
+     * @desc Whether browser connected to the network or not.
+     */
+    online: boolean | undefined;
+    /**
+     * @desc Previous value of `online` property. Helps to identify if browser
+     * just connected or lost connection.
+     */
+    previous: boolean | undefined;
+    /**
+     * @desc The {Date} object pointing to the moment when state change occurred.
+     */
+    since: Date | undefined;
+    /**
+     * @desc Effective bandwidth estimate in megabits per second, rounded to the
+     * nearest multiple of 25 kilobits per seconds.
+     */
+    downlink: INetworkInformation['downlink'] | undefined;
+    /**
+     * @desc Maximum downlink speed, in megabits per second (Mbps), for the
+     * underlying connection technology
+     */
+    downlinkMax: INetworkInformation['downlinkMax'] | undefined;
+    /**
+     * @desc Effective type of the connection meaning one of 'slow-2g', '2g', '3g', or '4g'.
+     * This value is determined using a combination of recently observed round-trip time
+     * and downlink values.
+     */
+    effectiveType: INetworkInformation['effectiveType'] | undefined;
+    /**
+     * @desc Estimated effective round-trip time of the current connection, rounded
+     * to the nearest multiple of 25 milliseconds
+     */
+    rtt: INetworkInformation['rtt'] | undefined;
+    /**
+     * @desc {true} if the user has set a reduced data usage option on the user agent.
+     */
+    saveData: INetworkInformation['saveData'] | undefined;
+    /**
+     * @desc The type of connection a device is using to communicate with the network.
+     * It will be one of the following values:
+     *  - bluetooth
+     *  - cellular
+     *  - ethernet
+     *  - none
+     *  - wifi
+     *  - wimax
+     *  - other
+     *  - unknown
+     */
+    type: INetworkInformation['type'] | undefined;
+}
+export declare const isBrowser: boolean;
+export declare const isNavigator: boolean;
+export type IHookStateInitialSetter<S> = () => S;
+export type IHookStateInitAction<S> = S | IHookStateInitialSetter<S>;
+export declare function useNetworkState(initialState?: IHookStateInitAction<IUseNetworkState>): IUseNetworkState;

package/lib/Hooks/useNetworkState.js

@@ -1,41 +1,41 @@
-import React from 'react';
-export const isBrowser = typeof window !== 'undefined';
-export const isNavigator = typeof navigator !== 'undefined';
-const nav = isNavigator ? navigator : undefined;
-const conn = nav && (nav.connection || nav.mozConnection || nav.webkitConnection);
-function getConnectionState(previousState) {
-    const online = nav?.onLine;
-    const previousOnline = previousState?.online;
-    return {
-        online,
-        previous: previousOnline,
-        since: online !== previousOnline ? new Date() : previousState?.since,
-        downlink: conn?.downlink,
-        downlinkMax: conn?.downlinkMax,
-        effectiveType: conn?.effectiveType,
-        rtt: conn?.rtt,
-        saveData: conn?.saveData,
-        type: conn?.type,
-    };
-}
-export function useNetworkState(initialState) {
-    const [state, setState] = React.useState(initialState ?? getConnectionState);
-    React.useEffect(() => {
-        const handleStateChange = () => {
-            setState(getConnectionState);
-        };
-        window.addEventListener('online', handleStateChange, { passive: true });
-        window.addEventListener('offline', handleStateChange, { passive: true });
-        if (conn) {
-            window.addEventListener('change', handleStateChange, { passive: true });
-        }
-        return () => {
-            window.removeEventListener('online', handleStateChange);
-            window.removeEventListener('offline', handleStateChange);
-            if (conn) {
-                window.removeEventListener('change', handleStateChange);
-            }
-        };
-    }, []);
-    return state;
-}
+import React from 'react';
+export const isBrowser = typeof window !== 'undefined';
+export const isNavigator = typeof navigator !== 'undefined';
+const nav = isNavigator ? navigator : undefined;
+const conn = nav && (nav.connection || nav.mozConnection || nav.webkitConnection);
+function getConnectionState(previousState) {
+    const online = nav?.onLine;
+    const previousOnline = previousState?.online;
+    return {
+        online,
+        previous: previousOnline,
+        since: online !== previousOnline ? new Date() : previousState?.since,
+        downlink: conn?.downlink,
+        downlinkMax: conn?.downlinkMax,
+        effectiveType: conn?.effectiveType,
+        rtt: conn?.rtt,
+        saveData: conn?.saveData,
+        type: conn?.type,
+    };
+}
+export function useNetworkState(initialState) {
+    const [state, setState] = React.useState(initialState ?? getConnectionState);
+    React.useEffect(() => {
+        const handleStateChange = () => {
+            setState(getConnectionState);
+        };
+        window.addEventListener('online', handleStateChange, { passive: true });
+        window.addEventListener('offline', handleStateChange, { passive: true });
+        if (conn) {
+            window.addEventListener('change', handleStateChange, { passive: true });
+        }
+        return () => {
+            window.removeEventListener('online', handleStateChange);
+            window.removeEventListener('offline', handleStateChange);
+            if (conn) {
+                window.removeEventListener('change', handleStateChange);
+            }
+        };
+    }, []);
+    return state;
+}

package/lib/Hooks/useShortcuts.d.ts

@@ -1,4 +1,4 @@
-export declare const useShortcuts: (shortcutKeys: string[] | string, callback: (keys: string) => void, options?: {
-    overrideSystem: boolean;
-}) => void;
-export declare function disabledEventPropagation(e: KeyboardEvent): void;
+export declare const useShortcuts: (shortcutKeys: string[] | string, callback: (keys: string) => void, options?: {
+    overrideSystem: boolean;
+}) => void;
+export declare function disabledEventPropagation(e: KeyboardEvent): void;