xxf_react 0.4.5 → 0.4.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5,6 +5,8 @@ import { RefObject } from 'react';
|
|
|
5
5
|
*
|
|
6
6
|
* @param ref - 要监听的元素 ref
|
|
7
7
|
* @param debounceMs - 防抖时间（毫秒），默认 16ms（约一帧）
|
|
8
|
+
* @param ancestor - 是否同步检查祖先元素的可见性，默认 true
|
|
9
|
+
* @returns boolean | null - null 表示还未检测到结果
|
|
8
10
|
*/
|
|
9
|
-
export declare function useElementVisibility(ref: RefObject<HTMLElement | null>, debounceMs?: number): boolean;
|
|
11
|
+
export declare function useElementVisibility(ref: RefObject<HTMLElement | null>, debounceMs?: number, ancestor?: boolean): boolean | null;
|
|
10
12
|
//# sourceMappingURL=ElementVisibilityHooks.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAChC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,UAAU,GAAE,MAAW,EACvB,QAAQ,GAAE,OAAc,GACzB,OAAO,GAAG,IAAI,CAwHhB"}
|
|
@@ -6,8 +6,10 @@ import { useState, useEffect, useRef } from 'react';
|
|
|
6
6
|
*
|
|
7
7
|
* @param ref - 要监听的元素 ref
|
|
8
8
|
* @param debounceMs - 防抖时间（毫秒），默认 16ms（约一帧）
|
|
9
|
+
* @param ancestor - 是否同步检查祖先元素的可见性，默认 true
|
|
10
|
+
* @returns boolean | null - null 表示还未检测到结果
|
|
9
11
|
*/
|
|
10
|
-
export function useElementVisibility(ref, debounceMs = 16) {
|
|
12
|
+
export function useElementVisibility(ref, debounceMs = 16, ancestor = true) {
|
|
11
13
|
const [isVisible, setIsVisible] = useState(null);
|
|
12
14
|
const lastVisibleRef = useRef(null);
|
|
13
15
|
const timerRef = useRef(null);
|
|
@@ -37,6 +39,9 @@ export function useElementVisibility(ref, debounceMs = 16) {
|
|
|
37
39
|
visible = false;
|
|
38
40
|
break;
|
|
39
41
|
}
|
|
42
|
+
// 如果不检查祖先，只检查当前元素后退出
|
|
43
|
+
if (!ancestor)
|
|
44
|
+
break;
|
|
40
45
|
current = current.parentElement;
|
|
41
46
|
}
|
|
42
47
|
// 只在值变化时更新
|
|
@@ -68,6 +73,9 @@ export function useElementVisibility(ref, debounceMs = 16) {
|
|
|
68
73
|
attributes: true,
|
|
69
74
|
attributeFilter: ['style', 'class'],
|
|
70
75
|
});
|
|
76
|
+
// 如果不检查祖先，只监听当前元素后退出
|
|
77
|
+
if (!ancestor)
|
|
78
|
+
break;
|
|
71
79
|
parent = parent.parentElement;
|
|
72
80
|
}
|
|
73
81
|
observerRef.current = observer;
|
|
@@ -103,7 +111,7 @@ export function useElementVisibility(ref, debounceMs = 16) {
|
|
|
103
111
|
cancelAnimationFrame(rafId);
|
|
104
112
|
}
|
|
105
113
|
};
|
|
106
|
-
}, [ref]);
|
|
107
|
-
//
|
|
108
|
-
return isVisible
|
|
114
|
+
}, [ref, ancestor]);
|
|
115
|
+
// null 表示还未检测到结果
|
|
116
|
+
return isVisible;
|
|
109
117
|
}
|