@cleartrip/ct-design-intersection-observer 5.28.0-SNAPSHOT-inter-2.0 → 5.28.0
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useinView.native.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/useinView.native.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"useinView.native.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/useinView.native.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAkI1E,QAAA,MAAM,SAAS,GAAI,CAAC,EAAE,gOAanB,mBAAmB,KAAG,kBAAkB,CAAC,CAAC,CAoI5C,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cleartrip/ct-design-intersection-observer",
|
|
3
|
-
"version": "5.28.0
|
|
3
|
+
"version": "5.28.0",
|
|
4
4
|
"description": "Intersection Observer Component",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"main": "./dist/ct-design-intersection-observer.cjs.js",
|
|
@@ -24,15 +24,15 @@
|
|
|
24
24
|
"src"
|
|
25
25
|
],
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@cleartrip/ct-design-scroll-container": "5.28.0
|
|
28
|
-
"@cleartrip/ct-design-container": "5.28.0
|
|
29
|
-
"@cleartrip/ct-design-theme": "5.28.0
|
|
30
|
-
"@cleartrip/ct-design-
|
|
31
|
-
"@cleartrip/ct-design-
|
|
32
|
-
"@cleartrip/ct-design-
|
|
27
|
+
"@cleartrip/ct-design-scroll-container": "5.28.0",
|
|
28
|
+
"@cleartrip/ct-design-container": "5.28.0",
|
|
29
|
+
"@cleartrip/ct-design-theme": "5.28.0",
|
|
30
|
+
"@cleartrip/ct-design-list": "5.28.0",
|
|
31
|
+
"@cleartrip/ct-design-common-utils": "5.28.0",
|
|
32
|
+
"@cleartrip/ct-design-style-manager": "5.28.0"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@cleartrip/ct-design-types": "5.28.0
|
|
35
|
+
"@cleartrip/ct-design-types": "5.28.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"react": ">=16.8.0",
|
package/src/useinView.native.ts
CHANGED
|
@@ -31,6 +31,8 @@ const calculateVisibility = (
|
|
|
31
31
|
): { verticalVisibility: number; horizontalVisibility: number } => {
|
|
32
32
|
const [top, left, _height = height, _width = width] = observerBox;
|
|
33
33
|
|
|
34
|
+
const clamp = (value: number) => Math.min(100, Math.max(0, value));
|
|
35
|
+
|
|
34
36
|
// Calculate vertical visibility
|
|
35
37
|
let verticalVisibility = 0;
|
|
36
38
|
if (rectHeight) {
|
|
@@ -61,7 +63,7 @@ const calculateVisibility = (
|
|
|
61
63
|
horizontalVisibility = (visibleWidth / _width) * 100;
|
|
62
64
|
}
|
|
63
65
|
|
|
64
|
-
return { verticalVisibility, horizontalVisibility };
|
|
66
|
+
return { verticalVisibility: clamp(verticalVisibility), horizontalVisibility: clamp(horizontalVisibility) };
|
|
65
67
|
};
|
|
66
68
|
|
|
67
69
|
const handleVisibilityChange = (
|
|
@@ -200,7 +202,7 @@ const useInView = <T>({
|
|
|
200
202
|
const visiblePercentage = threshold[0] * 100;
|
|
201
203
|
const isVisible =
|
|
202
204
|
horizontal || gestureHorizontallyScrollable
|
|
203
|
-
? horizontalVisibility >= visiblePercentage
|
|
205
|
+
? horizontalVisibility >= visiblePercentage && verticalVisibility > 0
|
|
204
206
|
: verticalVisibility >= visiblePercentage;
|
|
205
207
|
const visibility = horizontal ? horizontalVisibility : verticalVisibility;
|
|
206
208
|
|