linear-react-components-ui 2.2.0-beta.6 → 2.2.0-beta.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.
|
@@ -8,20 +8,17 @@ function getCurrentThreshold(scrollableElement, scrollThreshold) {
|
|
|
8
8
|
scrollHeight,
|
|
9
9
|
clientHeight
|
|
10
10
|
} = scrollableElement;
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
return Math.min(calculatedScrollThreshold, maxScrollThreshold);
|
|
11
|
+
const scrollableHeight = Math.max(scrollHeight - clientHeight, 0);
|
|
12
|
+
const thresholdBase = Math.min(clientHeight, scrollableHeight);
|
|
13
|
+
return Math.round(thresholdBase * scrollThreshold);
|
|
15
14
|
}
|
|
16
15
|
function useScrollEndReached({
|
|
17
16
|
elementRef,
|
|
18
17
|
onEndReached,
|
|
19
|
-
onEndReachedThreshold = 0.
|
|
18
|
+
onEndReachedThreshold = 0.25
|
|
20
19
|
}) {
|
|
21
20
|
const lastScrollTop = useRef(null);
|
|
22
|
-
const lastTriggerThreshold = useRef(null);
|
|
23
21
|
const enableOnEndReached = useRef(true);
|
|
24
|
-
const hasLeftThreshold = useRef(true);
|
|
25
22
|
const onScrollEndReached = async () => {
|
|
26
23
|
const element = elementRef.current;
|
|
27
24
|
if (element && onEndReached) {
|
|
@@ -33,15 +30,9 @@ function useScrollEndReached({
|
|
|
33
30
|
const isScrollingDown = lastScrollTop.current === null || scrollTop > lastScrollTop.current;
|
|
34
31
|
lastScrollTop.current = scrollTop;
|
|
35
32
|
const scrollOffset = scrollHeight - clientHeight - scrollTop - 1;
|
|
36
|
-
const
|
|
37
|
-
|
|
38
|
-
if (!hasLeftThreshold.current && scrollOffset > threshold) {
|
|
39
|
-
hasLeftThreshold.current = true;
|
|
40
|
-
}
|
|
41
|
-
if (scrollOffset <= threshold && isScrollingDown && enableOnEndReached.current && hasLeftThreshold.current) {
|
|
33
|
+
const threshold = getCurrentThreshold(element, onEndReachedThreshold);
|
|
34
|
+
if (scrollOffset <= threshold && isScrollingDown && enableOnEndReached.current) {
|
|
42
35
|
enableOnEndReached.current = false;
|
|
43
|
-
lastTriggerThreshold.current = currentThreshold;
|
|
44
|
-
hasLeftThreshold.current = false;
|
|
45
36
|
try {
|
|
46
37
|
await onEndReached();
|
|
47
38
|
} finally {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/lib/hooks/useScrollEndReached/index.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { AsyncFunc, Func, UseScrollEndReachedParams } from \"./types\";\n\nexport interface ScrollEndReachedParams extends UseScrollEndReachedParams {\n elementRef: React.RefObject<HTMLElement | null>;\n onEndReached?: Func | AsyncFunc;\n onEndReachedThreshold?: number;\n}\n\nexport function getCurrentThreshold(\n scrollableElement: HTMLElement,\n scrollThreshold: number,\n): number {\n const MIN_THRESHOLD = 0;\n const MAX_THRESHOLD = 1;\n if (scrollThreshold < MIN_THRESHOLD) return MIN_THRESHOLD;\n if (scrollThreshold > MAX_THRESHOLD) return MAX_THRESHOLD;\n const { scrollHeight, clientHeight } = scrollableElement;\n const
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/lib/hooks/useScrollEndReached/index.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { AsyncFunc, Func, UseScrollEndReachedParams } from \"./types\";\n\nexport interface ScrollEndReachedParams extends UseScrollEndReachedParams {\n elementRef: React.RefObject<HTMLElement | null>;\n onEndReached?: Func | AsyncFunc;\n onEndReachedThreshold?: number;\n}\n\nexport function getCurrentThreshold(\n scrollableElement: HTMLElement,\n scrollThreshold: number,\n): number {\n const MIN_THRESHOLD = 0;\n const MAX_THRESHOLD = 1;\n if (scrollThreshold < MIN_THRESHOLD) return MIN_THRESHOLD;\n if (scrollThreshold > MAX_THRESHOLD) return MAX_THRESHOLD;\n const { scrollHeight, clientHeight } = scrollableElement;\n const scrollableHeight = Math.max(scrollHeight - clientHeight, 0);\n const thresholdBase = Math.min(clientHeight, scrollableHeight);\n\n return Math.round(thresholdBase * scrollThreshold);\n}\n\nexport function useScrollEndReached({\n elementRef,\n onEndReached,\n onEndReachedThreshold = 0.25,\n}: ScrollEndReachedParams) {\n const lastScrollTop = useRef<number | null>(null);\n const enableOnEndReached = useRef(true);\n\n const onScrollEndReached = async () => {\n const element = elementRef.current;\n\n if (element && onEndReached) {\n const { scrollTop, scrollHeight, clientHeight } = element;\n const isScrollingDown =\n lastScrollTop.current === null || scrollTop > lastScrollTop.current;\n lastScrollTop.current = scrollTop;\n const scrollOffset = scrollHeight - clientHeight - scrollTop - 1;\n const threshold = getCurrentThreshold(element, onEndReachedThreshold);\n\n if (\n scrollOffset <= threshold &&\n isScrollingDown &&\n enableOnEndReached.current\n ) {\n enableOnEndReached.current = false;\n try {\n await onEndReached();\n } finally {\n enableOnEndReached.current = true;\n }\n }\n }\n };\n\n useEffect(() => {\n const element = elementRef.current;\n if (element && onEndReached) {\n element.addEventListener('scroll', onScrollEndReached);\n }\n\n return () => {\n element?.removeEventListener('scroll', onScrollEndReached);\n };\n }, [onEndReached, onEndReachedThreshold]);\n}\n"],"names":["getCurrentThreshold","scrollableElement","scrollThreshold","MIN_THRESHOLD","MAX_THRESHOLD","scrollHeight","clientHeight","scrollableHeight","Math","max","thresholdBase","min","round","useScrollEndReached","elementRef","onEndReached","onEndReachedThreshold","lastScrollTop","useRef","enableOnEndReached","onScrollEndReached","element","current","scrollTop","isScrollingDown","scrollOffset","threshold","useEffect","addEventListener","removeEventListener"],"mappings":";AASO,SAASA,oBACdC,mBACAC,iBACQ;AACR,QAAMC,gBAAgB;AACtB,QAAMC,gBAAgB;AACtB,MAAIF,kBAAkBC,cAAe,QAAOA;AAC5C,MAAID,kBAAkBE,cAAe,QAAOA;AAC5C,QAAM;AAAA,IAAEC;AAAAA,IAAcC;AAAAA,EAAAA,IAAiBL;AACvC,QAAMM,mBAAmBC,KAAKC,IAAIJ,eAAeC,cAAc,CAAC;AAChE,QAAMI,gBAAgBF,KAAKG,IAAIL,cAAcC,gBAAgB;AAE7D,SAAOC,KAAKI,MAAMF,gBAAgBR,eAAe;AACnD;AAEO,SAASW,oBAAoB;AAAA,EAClCC;AAAAA,EACAC;AAAAA,EACAC,wBAAwB;AACF,GAAG;AACzB,QAAMC,gBAAgBC,OAAsB,IAAI;AAChD,QAAMC,qBAAqBD,OAAO,IAAI;AAEtC,QAAME,qBAAqB,YAAY;AACrC,UAAMC,UAAUP,WAAWQ;AAE3B,QAAID,WAAWN,cAAc;AAC3B,YAAM;AAAA,QAAEQ;AAAAA,QAAWlB;AAAAA,QAAcC;AAAAA,MAAAA,IAAiBe;AAClD,YAAMG,kBACJP,cAAcK,YAAY,QAAQC,YAAYN,cAAcK;AAC9DL,oBAAcK,UAAUC;AACxB,YAAME,eAAepB,eAAeC,eAAeiB,YAAY;AAC/D,YAAMG,YAAY1B,oBAAoBqB,SAASL,qBAAqB;AAEpE,UACES,gBAAgBC,aAChBF,mBACAL,mBAAmBG,SACnB;AACAH,2BAAmBG,UAAU;AAC7B,YAAI;AACF,gBAAMP,aAAAA;AAAAA,QACR,UAAA;AACEI,6BAAmBG,UAAU;AAAA,QAC/B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEAK,YAAU,MAAM;AACd,UAAMN,YAAUP,WAAWQ;AAC3B,QAAID,aAAWN,cAAc;AAC3BM,gBAAQO,iBAAiB,UAAUR,kBAAkB;AAAA,IACvD;AAEA,WAAO,MAAM;AACXC,iBAASQ,oBAAoB,UAAUT,kBAAkB;AAAA,IAC3D;AAAA,EACF,GAAG,CAACL,cAAcC,qBAAqB,CAAC;AAC1C;"}
|