xxf_react 0.4.6 → 0.4.8
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.
|
@@ -2,9 +2,12 @@ import { RefObject } from 'react';
|
|
|
2
2
|
/**
|
|
3
3
|
* 监听元素及其所有祖先的可见性
|
|
4
4
|
* 支持检测 display: none、visibility: hidden、opacity: 0
|
|
5
|
+
* 支持 Radix UI 的 data-state 属性变化（如 Tabs.Content）
|
|
5
6
|
*
|
|
6
7
|
* @param ref - 要监听的元素 ref
|
|
7
8
|
* @param debounceMs - 防抖时间（毫秒），默认 16ms（约一帧）
|
|
9
|
+
* @param ancestor - 是否同步检查祖先元素的可见性，默认 true
|
|
10
|
+
* @returns boolean | null - null 表示还未检测到结果
|
|
8
11
|
*/
|
|
9
|
-
export declare function useElementVisibility(ref: RefObject<HTMLElement | null>, debounceMs?: number): boolean;
|
|
12
|
+
export declare function useElementVisibility(ref: RefObject<HTMLElement | null>, debounceMs?: number, ancestor?: boolean): boolean | null;
|
|
10
13
|
//# 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;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAChC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,UAAU,GAAE,MAAW,EACvB,QAAQ,GAAE,OAAc,GACzB,OAAO,GAAG,IAAI,CAyHhB"}
|
|
@@ -3,11 +3,14 @@ import { useState, useEffect, useRef } from 'react';
|
|
|
3
3
|
/**
|
|
4
4
|
* 监听元素及其所有祖先的可见性
|
|
5
5
|
* 支持检测 display: none、visibility: hidden、opacity: 0
|
|
6
|
+
* 支持 Radix UI 的 data-state 属性变化（如 Tabs.Content）
|
|
6
7
|
*
|
|
7
8
|
* @param ref - 要监听的元素 ref
|
|
8
9
|
* @param debounceMs - 防抖时间（毫秒），默认 16ms（约一帧）
|
|
10
|
+
* @param ancestor - 是否同步检查祖先元素的可见性，默认 true
|
|
11
|
+
* @returns boolean | null - null 表示还未检测到结果
|
|
9
12
|
*/
|
|
10
|
-
export function useElementVisibility(ref, debounceMs = 16) {
|
|
13
|
+
export function useElementVisibility(ref, debounceMs = 16, ancestor = true) {
|
|
11
14
|
const [isVisible, setIsVisible] = useState(null);
|
|
12
15
|
const lastVisibleRef = useRef(null);
|
|
13
16
|
const timerRef = useRef(null);
|
|
@@ -37,6 +40,9 @@ export function useElementVisibility(ref, debounceMs = 16) {
|
|
|
37
40
|
visible = false;
|
|
38
41
|
break;
|
|
39
42
|
}
|
|
43
|
+
// 如果不检查祖先，只检查当前元素后退出
|
|
44
|
+
if (!ancestor)
|
|
45
|
+
break;
|
|
40
46
|
current = current.parentElement;
|
|
41
47
|
}
|
|
42
48
|
// 只在值变化时更新
|
|
@@ -66,8 +72,12 @@ export function useElementVisibility(ref, debounceMs = 16) {
|
|
|
66
72
|
while (parent) {
|
|
67
73
|
observer.observe(parent, {
|
|
68
74
|
attributes: true,
|
|
69
|
-
|
|
75
|
+
// 监听 style、class、以及 data-state（Radix UI）
|
|
76
|
+
attributeFilter: ['style', 'class', 'data-state'],
|
|
70
77
|
});
|
|
78
|
+
// 如果不检查祖先，只监听当前元素后退出
|
|
79
|
+
if (!ancestor)
|
|
80
|
+
break;
|
|
71
81
|
parent = parent.parentElement;
|
|
72
82
|
}
|
|
73
83
|
observerRef.current = observer;
|
|
@@ -103,7 +113,7 @@ export function useElementVisibility(ref, debounceMs = 16) {
|
|
|
103
113
|
cancelAnimationFrame(rafId);
|
|
104
114
|
}
|
|
105
115
|
};
|
|
106
|
-
}, [ref]);
|
|
107
|
-
//
|
|
108
|
-
return isVisible
|
|
116
|
+
}, [ref, ancestor]);
|
|
117
|
+
// null 表示还未检测到结果
|
|
118
|
+
return isVisible;
|
|
109
119
|
}
|