xxf_react 0.4.3 → 0.4.4

package/dist/layout/index.d.ts

@@ -4,5 +4,6 @@ export * from './resize/core/ResizeObserverHook';
 export * from './resize/impl/SizedContainer';
 export * from './resize/impl/SizedLayout';
 export * from './image/XImage';
+export * from './visibility/ElementVisibilityHooks';
 export * from './virtualized/VirtualizedConfig';
 //# sourceMappingURL=index.d.ts.map

package/dist/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAA;AAC9C,cAAc,kCAAkC,CAAA;AAChD,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iCAAiC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAA;AAC9C,cAAc,kCAAkC,CAAA;AAChD,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qCAAqC,CAAA;AACnD,cAAc,iCAAiC,CAAA"}

package/dist/layout/index.js

@@ -4,4 +4,5 @@ export * from './resize/core/ResizeObserverHook';
 export * from './resize/impl/SizedContainer';
 export * from './resize/impl/SizedLayout';
 export * from './image/XImage';
+export * from './visibility/ElementVisibilityHooks';
 export * from './virtualized/VirtualizedConfig';

package/dist/layout/visibility/ElementVisibilityHooks.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+/**
+ * 监听元素及其所有祖先的可见性
+ * 支持检测 display: none、visibility: hidden、opacity: 0
+ *
+ * @param ref - 要监听的元素 ref
+ * @param debounceMs - 防抖时间（毫秒），默认 16ms（约一帧）
+ */
+export declare function useElementVisibility(ref: RefObject<HTMLElement | null>, debounceMs?: number): boolean;
+//# sourceMappingURL=ElementVisibilityHooks.d.ts.map

package/dist/layout/visibility/ElementVisibilityHooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementVisibilityHooks.d.ts","sourceRoot":"","sources":["../../../src/layout/visibility/ElementVisibilityHooks.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA8B,SAAS,EAAC,MAAM,OAAO,CAAA;AAE5D;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAChC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,UAAU,GAAE,MAAW,GACxB,OAAO,CAoHT"}

package/dist/layout/visibility/ElementVisibilityHooks.js

@@ -0,0 +1,109 @@
+'use client';
+import { useState, useEffect, useRef } from 'react';
+/**
+ * 监听元素及其所有祖先的可见性
+ * 支持检测 display: none、visibility: hidden、opacity: 0
+ *
+ * @param ref - 要监听的元素 ref
+ * @param debounceMs - 防抖时间（毫秒），默认 16ms（约一帧）
+ */
+export function useElementVisibility(ref, debounceMs = 16) {
+    const [isVisible, setIsVisible] = useState(null);
+    const lastVisibleRef = useRef(null);
+    const timerRef = useRef(null);
+    const observerRef = useRef(null);
+    const debounceMsRef = useRef(debounceMs);
+    const mountedRef = useRef(true);
+    // 保持 debounceMs 最新，但不触发 effect 重新执行
+    debounceMsRef.current = debounceMs;
+    useEffect(() => {
+        // 重置状态（处理组件重新挂载的情况）
+        mountedRef.current = true;
+        lastVisibleRef.current = null;
+        // 检查元素及所有祖先是否可见
+        const checkVisibility = () => {
+            if (!mountedRef.current)
+                return;
+            const el = ref.current;
+            if (!el)
+                return;
+            let current = el;
+            let visible = true;
+            while (current) {
+                const style = getComputedStyle(current);
+                if (style.display === 'none' ||
+                    style.visibility === 'hidden' ||
+                    style.opacity === '0') {
+                    visible = false;
+                    break;
+                }
+                current = current.parentElement;
+            }
+            // 只在值变化时更新
+            if (mountedRef.current && lastVisibleRef.current !== visible) {
+                lastVisibleRef.current = visible;
+                setIsVisible(visible);
+            }
+        };
+        // 带防抖的检查
+        const debouncedCheck = () => {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+            timerRef.current = setTimeout(checkVisibility, debounceMsRef.current);
+        };
+        // 设置 observer
+        const setupObserver = () => {
+            const el = ref.current;
+            if (!el)
+                return;
+            // 清理旧的 observer
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+            }
+            const observer = new MutationObserver(debouncedCheck);
+            let parent = el;
+            while (parent) {
+                observer.observe(parent, {
+                    attributes: true,
+                    attributeFilter: ['style', 'class'],
+                });
+                parent = parent.parentElement;
+            }
+            observerRef.current = observer;
+            checkVisibility(); // 初始检查
+        };
+        setupObserver();
+        // 监听 ref 变化（通过 RAF 轮询，处理 ref 延迟赋值的情况）
+        let rafId = null;
+        const checkRef = () => {
+            if (!mountedRef.current)
+                return;
+            if (ref.current && !observerRef.current) {
+                setupObserver();
+                rafId = null;
+                return;
+            }
+            rafId = requestAnimationFrame(checkRef);
+        };
+        if (!ref.current) {
+            rafId = requestAnimationFrame(checkRef);
+        }
+        return () => {
+            mountedRef.current = false;
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+                observerRef.current = null;
+            }
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+                timerRef.current = null;
+            }
+            if (rafId) {
+                cancelAnimationFrame(rafId);
+            }
+        };
+    }, [ref]);
+    // 如果还没检测到，返回 true（默认可见）
+    return isVisible !== null && isVisible !== void 0 ? isVisible : true;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xxf_react",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "private": false,
   "type": "module",
   "main": "dist/index.js",