funda-ui 4.7.701 → 4.7.723

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

@@ -3,19 +3,44 @@
  * 
  * @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>
- *     );
- * };
+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) => {

package/package.json

@@ -1 +1 @@
-{"author":"UIUX Lab","email":"uiuxlab@gmail.com","name":"funda-ui","version":"4.7.701","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.723","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"}}