@cleartrip/ct-design-intersection-observer 4.0.0-SNAPSHOT-rnfinaltest56.0 → 4.0.0-SNAPSHOT-rnfinaltest58.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.
- package/dist/ct-design-intersection-observer.browser.cjs.js +1 -1
- package/dist/ct-design-intersection-observer.browser.cjs.js.map +1 -1
- package/dist/ct-design-intersection-observer.browser.esm.js +1 -1
- package/dist/ct-design-intersection-observer.browser.esm.js.map +1 -1
- package/dist/ct-design-intersection-observer.cjs.js +2 -131
- package/dist/ct-design-intersection-observer.cjs.js.map +1 -1
- package/dist/ct-design-intersection-observer.esm.js +3 -132
- package/dist/ct-design-intersection-observer.esm.js.map +1 -1
- package/dist/ct-design-intersection-observer.umd.js +6 -134
- package/dist/ct-design-intersection-observer.umd.js.map +1 -1
- package/dist/useInViewType.d.ts +0 -7
- package/dist/useInViewType.d.ts.map +1 -1
- package/dist/useinView.d.ts +1 -1
- package/dist/useinView.d.ts.map +1 -1
- package/dist/useinView.native.d.ts +4 -0
- package/dist/useinView.native.d.ts.map +1 -0
- package/package.json +8 -8
- package/src/useInViewType.ts +0 -9
- package/src/useinView.native.ts +283 -0
- package/src/useinView.ts +3 -197
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemIntersectionObserver = {}, global.jsxRuntime, global.React, global.
|
|
5
|
-
})(this, (function (exports, jsxRuntime, react,
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-scroll-container'), require('@cleartrip/ct-design-list'), require('@cleartrip/ct-design-common-utils')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-scroll-container', '@cleartrip/ct-design-list', '@cleartrip/ct-design-common-utils'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemIntersectionObserver = {}, global.jsxRuntime, global.React, global.ctDesignScrollContainer, global.ctDesignList, global.ctDesignCommonUtils));
|
|
5
|
+
})(this, (function (exports, jsxRuntime, react, ctDesignScrollContainer, ctDesignList, ctDesignCommonUtils) { 'use strict';
|
|
6
6
|
|
|
7
7
|
const WebIntersectionObserver = ({ children, onIntersection, onTimedObservationComplete, threshold = [0.01, 0.5], wrapped, }) => {
|
|
8
8
|
const viewed = react.useRef(false);
|
|
@@ -61,92 +61,12 @@
|
|
|
61
61
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { ref: intersectionRef }), children] }));
|
|
62
62
|
};
|
|
63
63
|
|
|
64
|
-
const {
|
|
65
|
-
const calculateVisibility = (rectTop, rectBottom, rectHeight, rectLeft, rectRight, rectWidth, observerBox) => {
|
|
66
|
-
const [top, left, _height = height, _width = width] = observerBox;
|
|
67
|
-
let verticalVisibility = 0;
|
|
68
|
-
if (rectHeight) {
|
|
69
|
-
if (rectTop >= top && rectBottom <= _height) {
|
|
70
|
-
verticalVisibility = 100;
|
|
71
|
-
}
|
|
72
|
-
else if (rectTop < top) {
|
|
73
|
-
verticalVisibility = ((rectBottom - top) / rectHeight) * 100;
|
|
74
|
-
}
|
|
75
|
-
else {
|
|
76
|
-
verticalVisibility = ((_height - rectTop) / rectHeight) * 100;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
else {
|
|
80
|
-
const visibleHeight = rectTop > top && rectTop < _height ? rectTop - top : 0;
|
|
81
|
-
verticalVisibility = (visibleHeight / _height) * 100;
|
|
82
|
-
}
|
|
83
|
-
let horizontalVisibility = 0;
|
|
84
|
-
if (rectWidth) {
|
|
85
|
-
if (rectLeft >= left && rectRight <= _width) {
|
|
86
|
-
horizontalVisibility = 100;
|
|
87
|
-
}
|
|
88
|
-
else if (rectLeft < left) {
|
|
89
|
-
horizontalVisibility = ((rectRight - left) / rectWidth) * 100;
|
|
90
|
-
}
|
|
91
|
-
else {
|
|
92
|
-
horizontalVisibility = ((_width - rectLeft) / rectWidth) * 100;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
else {
|
|
96
|
-
const visibleWidth = rectLeft > left && rectLeft < _width ? rectLeft - left : 0;
|
|
97
|
-
horizontalVisibility = (visibleWidth / _width) * 100;
|
|
98
|
-
}
|
|
99
|
-
return { verticalVisibility, horizontalVisibility };
|
|
100
|
-
};
|
|
101
|
-
const handleVisibilityChange = (visibility, threshold, state, callbacks) => {
|
|
102
|
-
const { visibleRef, timeoutVisibleRef, timeoutVisibleStartRef, triggerOnceValue } = state;
|
|
103
|
-
const { onChange, onIntersectionComplete, onTimedObservationComplete, triggerOnce, minimumObservationTime, observerMethod, } = callbacks;
|
|
104
|
-
if (visibility === 0) {
|
|
105
|
-
if (visibleRef.current > 0) {
|
|
106
|
-
onIntersectionComplete === null || onIntersectionComplete === void 0 ? void 0 : onIntersectionComplete();
|
|
107
|
-
}
|
|
108
|
-
visibleRef.current = 0;
|
|
109
|
-
timeoutVisibleRef.current = false;
|
|
110
|
-
timeoutVisibleStartRef.current.end = 0;
|
|
111
|
-
timeoutVisibleStartRef.current.start = 0;
|
|
112
|
-
return;
|
|
113
|
-
}
|
|
114
|
-
const thresholdVisibility = threshold[visibleRef.current] * 100;
|
|
115
|
-
if (visibility >= thresholdVisibility) {
|
|
116
|
-
if (!triggerOnceValue.current) {
|
|
117
|
-
timeoutVisibleRef.current = true;
|
|
118
|
-
visibleRef.current = visibleRef.current + 1;
|
|
119
|
-
if (timeoutVisibleStartRef.current.start === 0) {
|
|
120
|
-
timeoutVisibleStartRef.current.start = Date.now();
|
|
121
|
-
}
|
|
122
|
-
else {
|
|
123
|
-
timeoutVisibleStartRef.current.end = Date.now();
|
|
124
|
-
}
|
|
125
|
-
if (triggerOnce) {
|
|
126
|
-
triggerOnceValue.current = true;
|
|
127
|
-
}
|
|
128
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(true);
|
|
129
|
-
setTimeout(() => {
|
|
130
|
-
observerMethod === null || observerMethod === void 0 ? void 0 : observerMethod();
|
|
131
|
-
}, minimumObservationTime);
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
if (timeoutVisibleRef.current &&
|
|
135
|
-
timeoutVisibleStartRef.current.start > 0 &&
|
|
136
|
-
Date.now() - timeoutVisibleStartRef.current.start >= minimumObservationTime) {
|
|
137
|
-
timeoutVisibleRef.current = false;
|
|
138
|
-
onTimedObservationComplete === null || onTimedObservationComplete === void 0 ? void 0 : onTimedObservationComplete();
|
|
139
|
-
timeoutVisibleStartRef.current.end = -1;
|
|
140
|
-
timeoutVisibleStartRef.current.start = -1;
|
|
141
|
-
}
|
|
142
|
-
};
|
|
143
|
-
const useInView = ({ threshold = [0.01, 0.5], timedThreshold = 1000, onChange, onIntersectionComplete, onTimedObservationComplete, minimumObservationTime = timedThreshold, observerBox = [0, 0, height, width], gestureHorizontallyScrollable = false, triggerOnce = false, observeOnScroll = false, onUnmount, checkFullVisibility = false, }) => {
|
|
64
|
+
const useInView = ({ onChange, onIntersectionComplete, onTimedObservationComplete, observeOnScroll = false, onUnmount, }) => {
|
|
144
65
|
const ref = react.useRef(null);
|
|
145
66
|
const visibleRef = react.useRef(0);
|
|
146
67
|
const timeoutVisibleRef = react.useRef(false);
|
|
147
68
|
const timeoutVisibleStartRef = react.useRef({ start: 0, end: 0 });
|
|
148
69
|
const triggerOnceValue = react.useRef(false);
|
|
149
|
-
const { horizontal } = ctDesignScrollContainer.useGetScrolling();
|
|
150
70
|
const { listId } = ctDesignList.useListItem();
|
|
151
71
|
const observerMethod = react.useCallback((visibleItems, isScrolling) => {
|
|
152
72
|
if (!observeOnScroll && isScrolling) {
|
|
@@ -171,61 +91,13 @@
|
|
|
171
91
|
}
|
|
172
92
|
ctDesignCommonUtils.promiseHandler.add(() => {
|
|
173
93
|
return new Promise((resolve) => {
|
|
174
|
-
var _a;
|
|
175
94
|
if (!ref.current) {
|
|
176
95
|
resolve();
|
|
177
96
|
return;
|
|
178
97
|
}
|
|
179
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.measure((_x, _y, width, height, pageX, pageY) => {
|
|
180
|
-
const { verticalVisibility, horizontalVisibility } = calculateVisibility(pageY, pageY + height, height, pageX, pageX + width, width, observerBox);
|
|
181
|
-
const visiblePercentage = threshold[0] * 100;
|
|
182
|
-
const isVisible = horizontal || gestureHorizontallyScrollable
|
|
183
|
-
? horizontalVisibility >= visiblePercentage
|
|
184
|
-
: verticalVisibility >= visiblePercentage;
|
|
185
|
-
const visibility = horizontal ? horizontalVisibility : verticalVisibility;
|
|
186
|
-
const totalVisibility = (horizontalVisibility * verticalVisibility) / 100;
|
|
187
|
-
const isTotalVisible = totalVisibility >= visiblePercentage;
|
|
188
|
-
const state = {
|
|
189
|
-
visibleRef,
|
|
190
|
-
timeoutVisibleRef,
|
|
191
|
-
timeoutVisibleStartRef,
|
|
192
|
-
triggerOnceValue,
|
|
193
|
-
};
|
|
194
|
-
const callbacks = {
|
|
195
|
-
onChange,
|
|
196
|
-
onIntersectionComplete,
|
|
197
|
-
onTimedObservationComplete,
|
|
198
|
-
triggerOnce,
|
|
199
|
-
minimumObservationTime,
|
|
200
|
-
observerMethod,
|
|
201
|
-
};
|
|
202
|
-
if (isTotalVisible) {
|
|
203
|
-
handleVisibilityChange(totalVisibility, threshold, state, callbacks);
|
|
204
|
-
}
|
|
205
|
-
else if (!checkFullVisibility && isVisible) {
|
|
206
|
-
handleVisibilityChange(visibility, threshold, state, callbacks);
|
|
207
|
-
}
|
|
208
|
-
else {
|
|
209
|
-
handleVisibilityChange(0, threshold, state, callbacks);
|
|
210
|
-
}
|
|
211
|
-
resolve();
|
|
212
|
-
});
|
|
213
98
|
});
|
|
214
99
|
}, ref.current);
|
|
215
|
-
}, [
|
|
216
|
-
checkFullVisibility,
|
|
217
|
-
gestureHorizontallyScrollable,
|
|
218
|
-
horizontal,
|
|
219
|
-
listId,
|
|
220
|
-
minimumObservationTime,
|
|
221
|
-
observeOnScroll,
|
|
222
|
-
observerBox,
|
|
223
|
-
onChange,
|
|
224
|
-
onIntersectionComplete,
|
|
225
|
-
onTimedObservationComplete,
|
|
226
|
-
threshold,
|
|
227
|
-
triggerOnce,
|
|
228
|
-
]);
|
|
100
|
+
}, [listId, observeOnScroll, onChange, onIntersectionComplete, onTimedObservationComplete]);
|
|
229
101
|
const addObservable = react.useCallback(() => {
|
|
230
102
|
return { observe: observerMethod, layout: { X: 0, Y: 0 } };
|
|
231
103
|
}, [observerMethod]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-intersection-observer.umd.js","sources":["../packages/components/InterSectionObserver/src/IntersectionObserver.tsx","../packages/components/InterSectionObserver/src/useinView.ts"],"sourcesContent":[null,null],"names":["useRef","useCallback","useEffect","_jsx","_jsxs","_Fragment","
|
|
1
|
+
{"version":3,"file":"ct-design-intersection-observer.umd.js","sources":["../packages/components/InterSectionObserver/src/IntersectionObserver.tsx","../packages/components/InterSectionObserver/src/useinView.ts"],"sourcesContent":[null,null],"names":["useRef","useCallback","useEffect","_jsx","_jsxs","_Fragment","useListItem","promiseHandler","useAddObservableChild"],"mappings":"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"}
|
package/dist/useInViewType.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { RefObject } from 'react';
|
|
2
|
-
import { LayoutChangeEvent, View } from 'react-native';
|
|
3
2
|
export type InViewHookResponse<T> = RefObject<T>;
|
|
4
3
|
export interface IntersectionOptions extends IntersectionObserverInit {
|
|
5
4
|
root?: Element | null;
|
|
@@ -38,11 +37,5 @@ export interface UseInViewProps {
|
|
|
38
37
|
onExit?: () => void;
|
|
39
38
|
id?: string;
|
|
40
39
|
}
|
|
41
|
-
export interface UseInViewReturn {
|
|
42
|
-
viewRef: React.RefObject<View>;
|
|
43
|
-
visiblePercent: number;
|
|
44
|
-
isInView: boolean;
|
|
45
|
-
onLayout: (event: LayoutChangeEvent) => void;
|
|
46
|
-
}
|
|
47
40
|
export {};
|
|
48
41
|
//# sourceMappingURL=useInViewType.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInViewType.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/useInViewType.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useInViewType.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/useInViewType.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;AAEjD,MAAM,WAAW,mBAAoB,SAAQ,wBAAwB;IAEnE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAEtB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IAErB,WAAW,CAAC,EAAE,OAAO,CAAC;IAGtB,IAAI,CAAC,EAAE,OAAO,CAAC;IAGf,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAGrC,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IAMpC,uBAAuB,CAAC,EAAE;QACxB,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IAKF,8BAA8B,CAAC,EAAE,OAAO,CAAC;IAKzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IAGxC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAGhC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAEvE,6BAA6B,CAAC,EAAE,OAAO,CAAC;IAMxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAMvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,oBAAY,cAAc;IACxB,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,QAAQ,aAAa;CACtB;AAED,UAAU,UAAU;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb"}
|
package/dist/useinView.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { IntersectionOptions, InViewHookResponse } from './useInViewType';
|
|
2
|
-
declare const useInView: <T>({
|
|
2
|
+
declare const useInView: <T>({ onChange, onIntersectionComplete, onTimedObservationComplete, observeOnScroll, onUnmount, }: IntersectionOptions) => InViewHookResponse<T>;
|
|
3
3
|
export default useInView;
|
|
4
4
|
//# sourceMappingURL=useinView.d.ts.map
|
package/dist/useinView.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useinView.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/useinView.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useinView.d.ts","sourceRoot":"","sources":["../packages/components/InterSectionObserver/src/useinView.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1E,QAAA,MAAM,SAAS,GAAI,CAAC,EAAE,+FAMnB,mBAAmB,KAAG,kBAAkB,CAAC,CAAC,CAwE5C,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { IntersectionOptions, InViewHookResponse } from './useInViewType';
|
|
2
|
+
declare const useInView: <T>({ threshold, timedThreshold, onChange, onIntersectionComplete, onTimedObservationComplete, minimumObservationTime, observerBox, gestureHorizontallyScrollable, triggerOnce, observeOnScroll, onUnmount, checkFullVisibility, }: IntersectionOptions) => InViewHookResponse<T>;
|
|
3
|
+
export default useInView;
|
|
4
|
+
//# sourceMappingURL=useinView.native.d.ts.map
|
|
@@ -0,0 +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;AAgI1E,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": "4.0.0-SNAPSHOT-
|
|
3
|
+
"version": "4.0.0-SNAPSHOT-rnfinaltest58.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": "4.0.0-SNAPSHOT-
|
|
28
|
-
"@cleartrip/ct-design-container": "4.0.0-SNAPSHOT-
|
|
29
|
-
"@cleartrip/ct-design-
|
|
30
|
-
"@cleartrip/ct-design-
|
|
31
|
-
"@cleartrip/ct-design-
|
|
32
|
-
"@cleartrip/ct-design-common-utils": "4.0.0-SNAPSHOT-
|
|
27
|
+
"@cleartrip/ct-design-scroll-container": "4.0.0-SNAPSHOT-rnfinaltest58.0",
|
|
28
|
+
"@cleartrip/ct-design-container": "4.0.0-SNAPSHOT-rnfinaltest58.0",
|
|
29
|
+
"@cleartrip/ct-design-style-manager": "4.0.0-SNAPSHOT-rnfinaltest58.0",
|
|
30
|
+
"@cleartrip/ct-design-theme": "4.0.0-SNAPSHOT-rnfinaltest58.0",
|
|
31
|
+
"@cleartrip/ct-design-list": "4.0.0-SNAPSHOT-rnfinaltest58.0",
|
|
32
|
+
"@cleartrip/ct-design-common-utils": "4.0.0-SNAPSHOT-rnfinaltest58.0"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@cleartrip/ct-design-types": "4.0.0-SNAPSHOT-
|
|
35
|
+
"@cleartrip/ct-design-types": "4.0.0-SNAPSHOT-rnfinaltest58.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"react": ">=16.8.0",
|
package/src/useInViewType.ts
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import type { RefObject } from 'react';
|
|
2
2
|
|
|
3
|
-
import { LayoutChangeEvent, View } from 'react-native';
|
|
4
|
-
|
|
5
3
|
/**
|
|
6
4
|
* The Hook response supports both array and object destructing
|
|
7
5
|
*/
|
|
@@ -97,10 +95,3 @@ export interface UseInViewProps {
|
|
|
97
95
|
onExit?: () => void;
|
|
98
96
|
id?: string;
|
|
99
97
|
}
|
|
100
|
-
|
|
101
|
-
export interface UseInViewReturn {
|
|
102
|
-
viewRef: React.RefObject<View>;
|
|
103
|
-
visiblePercent: number;
|
|
104
|
-
isInView: boolean;
|
|
105
|
-
onLayout: (event: LayoutChangeEvent) => void;
|
|
106
|
-
}
|
|
@@ -0,0 +1,283 @@
|
|
|
1
|
+
import { useCallback, useEffect, useRef } from 'react';
|
|
2
|
+
|
|
3
|
+
import { Dimensions, View } from 'react-native';
|
|
4
|
+
import { useAddObservableChild, useGetScrolling } from '@cleartrip/ct-design-scroll-container';
|
|
5
|
+
import { useListItem } from '@cleartrip/ct-design-list';
|
|
6
|
+
import { promiseHandler } from '@cleartrip/ct-design-common-utils';
|
|
7
|
+
|
|
8
|
+
import { IntersectionOptions, InViewHookResponse } from './useInViewType';
|
|
9
|
+
|
|
10
|
+
const { width, height } = Dimensions.get('window');
|
|
11
|
+
/**
|
|
12
|
+
* todo
|
|
13
|
+
* horizontal scroll and root margin
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
interface VisibilityState {
|
|
17
|
+
visibleRef: React.MutableRefObject<number>;
|
|
18
|
+
timeoutVisibleRef: React.MutableRefObject<boolean>;
|
|
19
|
+
timeoutVisibleStartRef: React.MutableRefObject<{ start: number; end: number }>;
|
|
20
|
+
triggerOnceValue: React.MutableRefObject<boolean>;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const calculateVisibility = (
|
|
24
|
+
rectTop: number,
|
|
25
|
+
rectBottom: number,
|
|
26
|
+
rectHeight: number,
|
|
27
|
+
rectLeft: number,
|
|
28
|
+
rectRight: number,
|
|
29
|
+
rectWidth: number,
|
|
30
|
+
observerBox: [number, number, number | undefined, number | undefined],
|
|
31
|
+
): { verticalVisibility: number; horizontalVisibility: number } => {
|
|
32
|
+
const [top, left, _height = height, _width = width] = observerBox;
|
|
33
|
+
|
|
34
|
+
// Calculate vertical visibility
|
|
35
|
+
let verticalVisibility = 0;
|
|
36
|
+
if (rectHeight) {
|
|
37
|
+
if (rectTop >= top && rectBottom <= _height) {
|
|
38
|
+
verticalVisibility = 100;
|
|
39
|
+
} else if (rectTop < top) {
|
|
40
|
+
verticalVisibility = ((rectBottom - top) / rectHeight) * 100;
|
|
41
|
+
} else {
|
|
42
|
+
verticalVisibility = ((_height - rectTop) / rectHeight) * 100;
|
|
43
|
+
}
|
|
44
|
+
} else {
|
|
45
|
+
const visibleHeight = rectTop > top && rectTop < _height ? rectTop - top : 0;
|
|
46
|
+
verticalVisibility = (visibleHeight / _height) * 100;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// Calculate horizontal visibility
|
|
50
|
+
let horizontalVisibility = 0;
|
|
51
|
+
if (rectWidth) {
|
|
52
|
+
if (rectLeft >= left && rectRight <= _width) {
|
|
53
|
+
horizontalVisibility = 100;
|
|
54
|
+
} else if (rectLeft < left) {
|
|
55
|
+
horizontalVisibility = ((rectRight - left) / rectWidth) * 100;
|
|
56
|
+
} else {
|
|
57
|
+
horizontalVisibility = ((_width - rectLeft) / rectWidth) * 100;
|
|
58
|
+
}
|
|
59
|
+
} else {
|
|
60
|
+
const visibleWidth = rectLeft > left && rectLeft < _width ? rectLeft - left : 0;
|
|
61
|
+
horizontalVisibility = (visibleWidth / _width) * 100;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
return { verticalVisibility, horizontalVisibility };
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
const handleVisibilityChange = (
|
|
68
|
+
visibility: number,
|
|
69
|
+
threshold: number[],
|
|
70
|
+
state: VisibilityState,
|
|
71
|
+
callbacks: {
|
|
72
|
+
onChange?: (visible: boolean) => void;
|
|
73
|
+
onIntersectionComplete?: () => void;
|
|
74
|
+
onTimedObservationComplete?: () => void;
|
|
75
|
+
triggerOnce?: boolean;
|
|
76
|
+
minimumObservationTime: number;
|
|
77
|
+
observerMethod?: (visibleItems?: Set<number>, isScrolling?: boolean) => void;
|
|
78
|
+
},
|
|
79
|
+
) => {
|
|
80
|
+
const { visibleRef, timeoutVisibleRef, timeoutVisibleStartRef, triggerOnceValue } = state;
|
|
81
|
+
const {
|
|
82
|
+
onChange,
|
|
83
|
+
onIntersectionComplete,
|
|
84
|
+
onTimedObservationComplete,
|
|
85
|
+
triggerOnce,
|
|
86
|
+
minimumObservationTime,
|
|
87
|
+
observerMethod,
|
|
88
|
+
} = callbacks;
|
|
89
|
+
|
|
90
|
+
if (visibility === 0) {
|
|
91
|
+
if (visibleRef.current > 0) {
|
|
92
|
+
onIntersectionComplete?.();
|
|
93
|
+
}
|
|
94
|
+
visibleRef.current = 0;
|
|
95
|
+
timeoutVisibleRef.current = false;
|
|
96
|
+
timeoutVisibleStartRef.current.end = 0;
|
|
97
|
+
timeoutVisibleStartRef.current.start = 0;
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
const thresholdVisibility = threshold[visibleRef.current] * 100;
|
|
102
|
+
|
|
103
|
+
if (visibility >= thresholdVisibility) {
|
|
104
|
+
if (!triggerOnceValue.current) {
|
|
105
|
+
timeoutVisibleRef.current = true;
|
|
106
|
+
visibleRef.current = visibleRef.current + 1;
|
|
107
|
+
|
|
108
|
+
if (timeoutVisibleStartRef.current.start === 0) {
|
|
109
|
+
timeoutVisibleStartRef.current.start = Date.now();
|
|
110
|
+
} else {
|
|
111
|
+
timeoutVisibleStartRef.current.end = Date.now();
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
if (triggerOnce) {
|
|
115
|
+
triggerOnceValue.current = true;
|
|
116
|
+
}
|
|
117
|
+
onChange?.(true);
|
|
118
|
+
setTimeout(() => {
|
|
119
|
+
observerMethod?.();
|
|
120
|
+
}, minimumObservationTime);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
if (
|
|
125
|
+
timeoutVisibleRef.current &&
|
|
126
|
+
timeoutVisibleStartRef.current.start > 0 &&
|
|
127
|
+
Date.now() - timeoutVisibleStartRef.current.start >= minimumObservationTime
|
|
128
|
+
) {
|
|
129
|
+
timeoutVisibleRef.current = false;
|
|
130
|
+
onTimedObservationComplete?.();
|
|
131
|
+
timeoutVisibleStartRef.current.end = -1;
|
|
132
|
+
timeoutVisibleStartRef.current.start = -1;
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
const useInView = <T>({
|
|
137
|
+
threshold = [0.01, 0.5],
|
|
138
|
+
timedThreshold = 1000,
|
|
139
|
+
onChange,
|
|
140
|
+
onIntersectionComplete,
|
|
141
|
+
onTimedObservationComplete,
|
|
142
|
+
minimumObservationTime = timedThreshold,
|
|
143
|
+
observerBox = [0, 0, height, width],
|
|
144
|
+
gestureHorizontallyScrollable = false,
|
|
145
|
+
triggerOnce = false,
|
|
146
|
+
observeOnScroll = false,
|
|
147
|
+
onUnmount,
|
|
148
|
+
checkFullVisibility = false,
|
|
149
|
+
}: IntersectionOptions): InViewHookResponse<T> => {
|
|
150
|
+
const ref = useRef<View>(null);
|
|
151
|
+
const visibleRef = useRef(0);
|
|
152
|
+
const timeoutVisibleRef = useRef(false);
|
|
153
|
+
const timeoutVisibleStartRef = useRef({ start: 0, end: 0 });
|
|
154
|
+
const triggerOnceValue = useRef(false);
|
|
155
|
+
|
|
156
|
+
const { horizontal } = useGetScrolling();
|
|
157
|
+
const { listId } = useListItem();
|
|
158
|
+
|
|
159
|
+
const observerMethod = useCallback(
|
|
160
|
+
(visibleItems?: Set<number>, isScrolling?: boolean) => {
|
|
161
|
+
if (!observeOnScroll && isScrolling) {
|
|
162
|
+
return;
|
|
163
|
+
}
|
|
164
|
+
if (visibleItems) {
|
|
165
|
+
const visibleItem = visibleItems?.has(listId);
|
|
166
|
+
|
|
167
|
+
if (visibleItem) {
|
|
168
|
+
onTimedObservationComplete?.();
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
if (visibleItem && visibleRef.current === 0) {
|
|
172
|
+
visibleRef.current = 1;
|
|
173
|
+
onChange?.(true);
|
|
174
|
+
return;
|
|
175
|
+
} else if (!visibleItem && visibleRef.current === 1) {
|
|
176
|
+
visibleRef.current = 0;
|
|
177
|
+
onIntersectionComplete?.();
|
|
178
|
+
return;
|
|
179
|
+
}
|
|
180
|
+
return;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
promiseHandler.add(() => {
|
|
184
|
+
return new Promise<void>((resolve) => {
|
|
185
|
+
if (!ref.current) {
|
|
186
|
+
resolve();
|
|
187
|
+
return;
|
|
188
|
+
}
|
|
189
|
+
ref.current?.measure((_x, _y, width, height, pageX, pageY) => {
|
|
190
|
+
const { verticalVisibility, horizontalVisibility } = calculateVisibility(
|
|
191
|
+
pageY,
|
|
192
|
+
pageY + height,
|
|
193
|
+
height,
|
|
194
|
+
pageX,
|
|
195
|
+
pageX + width,
|
|
196
|
+
width,
|
|
197
|
+
observerBox,
|
|
198
|
+
);
|
|
199
|
+
|
|
200
|
+
const visiblePercentage = threshold[0] * 100;
|
|
201
|
+
const isVisible =
|
|
202
|
+
horizontal || gestureHorizontallyScrollable
|
|
203
|
+
? horizontalVisibility >= visiblePercentage
|
|
204
|
+
: verticalVisibility >= visiblePercentage;
|
|
205
|
+
const visibility = horizontal ? horizontalVisibility : verticalVisibility;
|
|
206
|
+
|
|
207
|
+
const totalVisibility = (horizontalVisibility * verticalVisibility) / 100;
|
|
208
|
+
const isTotalVisible = totalVisibility >= visiblePercentage;
|
|
209
|
+
|
|
210
|
+
const state = {
|
|
211
|
+
visibleRef,
|
|
212
|
+
timeoutVisibleRef,
|
|
213
|
+
timeoutVisibleStartRef,
|
|
214
|
+
triggerOnceValue,
|
|
215
|
+
};
|
|
216
|
+
|
|
217
|
+
const callbacks = {
|
|
218
|
+
onChange,
|
|
219
|
+
onIntersectionComplete,
|
|
220
|
+
onTimedObservationComplete,
|
|
221
|
+
triggerOnce,
|
|
222
|
+
minimumObservationTime,
|
|
223
|
+
observerMethod,
|
|
224
|
+
};
|
|
225
|
+
if (isTotalVisible) {
|
|
226
|
+
handleVisibilityChange(totalVisibility, threshold, state, callbacks);
|
|
227
|
+
} else if (!checkFullVisibility && isVisible) {
|
|
228
|
+
handleVisibilityChange(visibility, threshold, state, callbacks);
|
|
229
|
+
} else {
|
|
230
|
+
handleVisibilityChange(0, threshold, state, callbacks);
|
|
231
|
+
}
|
|
232
|
+
resolve();
|
|
233
|
+
});
|
|
234
|
+
});
|
|
235
|
+
}, ref.current);
|
|
236
|
+
},
|
|
237
|
+
[
|
|
238
|
+
checkFullVisibility,
|
|
239
|
+
gestureHorizontallyScrollable,
|
|
240
|
+
horizontal,
|
|
241
|
+
listId,
|
|
242
|
+
minimumObservationTime,
|
|
243
|
+
observeOnScroll,
|
|
244
|
+
observerBox,
|
|
245
|
+
onChange,
|
|
246
|
+
onIntersectionComplete,
|
|
247
|
+
onTimedObservationComplete,
|
|
248
|
+
threshold,
|
|
249
|
+
triggerOnce,
|
|
250
|
+
],
|
|
251
|
+
);
|
|
252
|
+
|
|
253
|
+
const addObservable = useCallback(() => {
|
|
254
|
+
return { observe: observerMethod, layout: { X: 0, Y: 0 } };
|
|
255
|
+
}, [observerMethod]);
|
|
256
|
+
|
|
257
|
+
useAddObservableChild(addObservable);
|
|
258
|
+
|
|
259
|
+
const handleUnmount = useCallback(() => {
|
|
260
|
+
onUnmount?.();
|
|
261
|
+
promiseHandler.clear();
|
|
262
|
+
visibleRef.current = 0;
|
|
263
|
+
timeoutVisibleRef.current = false;
|
|
264
|
+
timeoutVisibleStartRef.current.end = 0;
|
|
265
|
+
timeoutVisibleStartRef.current.start = 0;
|
|
266
|
+
triggerOnceValue.current = false;
|
|
267
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
268
|
+
}, []);
|
|
269
|
+
|
|
270
|
+
useEffect(() => {
|
|
271
|
+
setTimeout(() => {
|
|
272
|
+
observerMethod();
|
|
273
|
+
}, 400);
|
|
274
|
+
return () => {
|
|
275
|
+
handleUnmount();
|
|
276
|
+
};
|
|
277
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
278
|
+
}, [handleUnmount]);
|
|
279
|
+
|
|
280
|
+
return ref as InViewHookResponse<T>;
|
|
281
|
+
};
|
|
282
|
+
|
|
283
|
+
export default useInView;
|