funda-ui 4.7.625 → 4.7.711

package/lib/esm/Utils/hooks/usePageVisibility.tsx

@@ -0,0 +1,84 @@
+/**
+ * Watch for to know when a document becomes visible or hidden
+ * @param onVisible 
+ * @param onHidden  
+ * @param onPageInit executed once when the page first loads visibly
+ */
+/* 
+@usage:
+
+const App = () => {
+    usePageVisibility(
+        () => console.log("🍏 Page is now visible — current tab is active."),
+        () => console.log("🍎 Page is hidden — switched to another tab or minimized."),
+        () => console.log("🎬 Page initialized while visible.")
+    );
+
+    return <div>Try switching tabs to see the console output.</div>;
+};
+
+*/
+import { useEffect, useRef } from "react";
+
+type VisibilityCallback = () => void;
+
+type UsePageVisibility = (
+    onVisible?: VisibilityCallback,
+    onHidden?: VisibilityCallback,
+    onPageInit?: VisibilityCallback
+) => void;
+
+const usePageVisibility: UsePageVisibility = (
+    onVisible,
+    onHidden,
+    onPageInit
+) => {
+    const visibleRef = useRef<boolean>(document.visibilityState === "visible");
+    const onVisibleRef = useRef<VisibilityCallback | undefined>(onVisible);
+    const onHiddenRef = useRef<VisibilityCallback | undefined>(onHidden);
+    const initialVisibleTriggeredRef = useRef<boolean>(false);
+    const onPageInitRef = useRef<VisibilityCallback | undefined>(onPageInit);
+
+    useEffect(() => {
+        onVisibleRef.current = onVisible;
+    }, [onVisible]);
+
+    useEffect(() => {
+        onHiddenRef.current = onHidden;
+    }, [onHidden]);
+
+    useEffect(() => {
+        onPageInitRef.current = onPageInit;
+    }, [onPageInit]);
+
+    useEffect(() => {
+        const handleVisibilityChange = () => {
+            const isVisible = document.visibilityState === "visible";
+
+            if (isVisible && !visibleRef.current) {
+                onVisibleRef.current && onVisibleRef.current();
+            }
+
+            if (!isVisible && visibleRef.current) {
+                onHiddenRef.current && onHiddenRef.current();
+            }
+
+            visibleRef.current = isVisible;
+        };
+
+        // It retains the original switching monitor, and can ensure that onPageInit will run when the first screen is loaded.
+        if (visibleRef.current && !initialVisibleTriggeredRef.current) {
+            initialVisibleTriggeredRef.current = true;
+            onPageInitRef.current && onPageInitRef.current();
+        }
+
+        document.addEventListener("visibilitychange", handleVisibilityChange);
+        return () => {
+            document.removeEventListener("visibilitychange", handleVisibilityChange);
+        };
+    }, []);
+};
+
+
+export default usePageVisibility;
+export { usePageVisibility };

package/lib/esm/Utils/hooks/useSSE.tsx

@@ -0,0 +1,134 @@
+/**
+ * SSE
+ * 
+ * @usage:
+ *
+const App = () => {
+    const { connected, messages, disconnect, reconnect } = useSSE('http://localhost:3000/sse');
+
+    return (
+    <div>
+        <p>Status: {connected ? '✅ Connected' : '❌ Disconnected'}</p>
+        <button onClick={disconnect}>Disconnect</button>
+        <button onClick={reconnect}>Reconnect</button>
+        {messages.map((m, i) => <div key={i}>{m}</div>)}
+    </div>
+    );
+};
+
+ * It is recommended to use it in conjunction with usePageVisibility, because in HTTP mode, 
+ * browsers allow a maximum of 6 connections; otherwise, other normal interfaces will be suspended and inaccessible.
+
+ import usePageVisibility from 'funda-ui/Utils/usePageVisibility';
+
+const App = () => {
+    const { connected, messages, disconnect, reconnect } = useSSE('http://localhost:3000/sse');
+
+    // add new
+    usePageVisibility(
+        () => {
+            reconnect();
+        },
+        () => {
+            disconnect();
+        },
+        () => console.log("🎬 Page initialized while visible.")
+    );
+
+    return '';
+};
+
+ */
+
+
+import { useEffect, useRef, useState, useCallback } from 'react';
+
+const useSSE = (url: string | null | undefined, retryDelay: number = 3000) => {
+    const [connected, setConnected] = useState<boolean>(false);
+    const [messages, setMessages] = useState<string[]>([]);
+    const sourceRef = useRef<EventSource | null>(null);
+    const reconnectTimerRef = useRef<NodeJS.Timeout | null>(null);
+    const manuallyClosedRef = useRef<boolean>(false);
+
+    const internalCleanup = useCallback(() => {
+        if (reconnectTimerRef.current) {
+            clearTimeout(reconnectTimerRef.current);
+            reconnectTimerRef.current = null;
+        }
+
+        if (sourceRef.current) {
+            try {
+                sourceRef.current.close();
+            } catch (_) {
+                // Ignore errors during cleanup
+            }
+            sourceRef.current = null;
+        }
+
+        setConnected(false);
+    }, []);
+
+    const connect = useCallback(() => {
+        if (!url || manuallyClosedRef.current) return;
+
+        // Prevent duplicate connections
+        if (sourceRef.current) return;
+
+        const source = new EventSource(url);
+        sourceRef.current = source;
+
+        source.onopen = () => {
+            setConnected(true);
+        };
+
+        source.onmessage = (event: MessageEvent) => {
+            setMessages([event.data]);
+        };
+
+        source.onerror = (err: Event) => {
+            internalCleanup();
+
+            if (!manuallyClosedRef.current) {
+                reconnectTimerRef.current = setTimeout(() => {
+                    connect();
+                }, retryDelay);
+            }
+        };
+    }, [internalCleanup, retryDelay, url]);
+
+    const disconnect = useCallback(() => {
+        manuallyClosedRef.current = true;
+        internalCleanup();
+    }, [internalCleanup]);
+
+    const reconnect = useCallback(() => {
+        manuallyClosedRef.current = false;
+        internalCleanup();
+        connect();
+    }, [connect, internalCleanup]);
+
+    const resetMessages = useCallback(() => setMessages([]), []);
+
+    useEffect(() => {
+        if (!url) return;
+
+        manuallyClosedRef.current = false;
+        connect();
+
+        return () => {
+            // Cleanup on unmount (does not mark manual close)
+            internalCleanup();
+        };
+    }, [url, connect, internalCleanup]);
+
+    return { 
+        connected, 
+        messages, 
+        disconnect, 
+        reconnect, 
+        resetMessages 
+    } as const;
+};
+
+export default useSSE;
+export { useSSE };

package/lib/esm/index.js

@@ -25,6 +25,7 @@ export { default as MultipleSelect } from './MultipleSelect';
 export { default as NativeSelect } from './NativeSelect';
 export { default as NumberInput } from './NumberInput';
 export { default as Pagination } from './Pagination';
+export { default as Popover } from './Popover';
 export { default as Radio } from './Radio';
 export { default as RangeSlider } from './RangeSlider';
 export { default as Refresher } from './Refresher';

package/package.json

@@ -1 +1 @@
-{"author":"UIUX Lab","email":"uiuxlab@gmail.com","name":"funda-ui","version":"4.7.625","description":"React components using pure Bootstrap 5+ which does not contain any external style and script libraries.","repository":{"type":"git","url":"git+https://github.com/xizon/funda-ui.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["bootstrap","react-bootstrap","react-components","components","components-react","react-bootstrap-components","react","funda-ui","fundaui","uikit","ui-kit","ui-components"],"bugs":{"url":"https://github.com/xizon/funda-ui/issues"},"homepage":"https://github.com/xizon/funda-ui#readme","main":"all.js","license":"MIT","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"types":"all.d.ts","publishConfig":{"directory":"lib"},"directories":{"lib":"lib"}}
+{"author":"UIUX Lab","email":"uiuxlab@gmail.com","name":"funda-ui","version":"4.7.711","description":"React components using pure Bootstrap 5+ which does not contain any external style and script libraries.","repository":{"type":"git","url":"git+https://github.com/xizon/funda-ui.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["bootstrap","react-bootstrap","react-components","components","components-react","react-bootstrap-components","react","funda-ui","fundaui","uikit","ui-kit","ui-components"],"bugs":{"url":"https://github.com/xizon/funda-ui/issues"},"homepage":"https://github.com/xizon/funda-ui#readme","main":"all.js","license":"MIT","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"types":"all.d.ts","publishConfig":{"directory":"lib"},"directories":{"lib":"lib"}}