linear-react-components-ui 2.2.0-beta.5 → 2.2.0-beta.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.
@@ -8,18 +8,16 @@ function getCurrentThreshold(scrollableElement, scrollThreshold) {
8
8
  scrollHeight,
9
9
  clientHeight
10
10
  } = scrollableElement;
11
- const offsetHeight = scrollHeight - clientHeight;
12
- const calculatedScrollThreshold = Math.round(scrollHeight * scrollThreshold);
13
- const maxScrollThreshold = Math.round(offsetHeight - offsetHeight * 0.3);
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.1
18
+ onEndReachedThreshold = 0.5
20
19
  }) {
21
20
  const lastScrollTop = useRef(null);
22
- const lastTriggerThreshold = useRef(null);
23
21
  const enableOnEndReached = useRef(true);
24
22
  const onScrollEndReached = async () => {
25
23
  const element = elementRef.current;
@@ -32,11 +30,9 @@ function useScrollEndReached({
32
30
  const isScrollingDown = lastScrollTop.current === null || scrollTop > lastScrollTop.current;
33
31
  lastScrollTop.current = scrollTop;
34
32
  const scrollOffset = scrollHeight - clientHeight - scrollTop - 1;
35
- const currentThreshold = getCurrentThreshold(element, onEndReachedThreshold);
36
- const threshold = lastTriggerThreshold.current === null ? currentThreshold : Math.min(currentThreshold, lastTriggerThreshold.current);
33
+ const threshold = getCurrentThreshold(element, onEndReachedThreshold);
37
34
  if (scrollOffset <= threshold && isScrollingDown && enableOnEndReached.current) {
38
35
  enableOnEndReached.current = false;
39
- lastTriggerThreshold.current = currentThreshold;
40
36
  try {
41
37
  await onEndReached();
42
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 offsetHeight = scrollHeight - clientHeight;\n\n const calculatedScrollThreshold = Math.round(scrollHeight * scrollThreshold);\n const maxScrollThreshold = Math.round(offsetHeight - (offsetHeight * 0.3));\n\n return Math.min(calculatedScrollThreshold, maxScrollThreshold);\n}\n\nexport function useScrollEndReached({\n elementRef,\n onEndReached,\n onEndReachedThreshold = 0.1,\n}: ScrollEndReachedParams) {\n const lastScrollTop = useRef<number | null>(null);\n const lastTriggerThreshold = 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 currentThreshold = getCurrentThreshold(element, onEndReachedThreshold);\n const threshold = lastTriggerThreshold.current === null\n ? currentThreshold\n : Math.min(currentThreshold, lastTriggerThreshold.current);\n\n if (\n scrollOffset <= threshold && isScrollingDown && enableOnEndReached.current\n ) {\n enableOnEndReached.current = false;\n lastTriggerThreshold.current = currentThreshold;\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","offsetHeight","calculatedScrollThreshold","Math","round","maxScrollThreshold","min","useScrollEndReached","elementRef","onEndReached","onEndReachedThreshold","lastScrollTop","useRef","lastTriggerThreshold","enableOnEndReached","onScrollEndReached","element","current","scrollTop","isScrollingDown","scrollOffset","currentThreshold","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,eAAeF,eAAeC;AAEpC,QAAME,4BAA4BC,KAAKC,MAAML,eAAeH,eAAe;AAC3E,QAAMS,qBAAqBF,KAAKC,MAAMH,eAAgBA,eAAe,GAAI;AAEzE,SAAOE,KAAKG,IAAIJ,2BAA2BG,kBAAkB;AAC/D;AAEO,SAASE,oBAAoB;AAAA,EAClCC;AAAAA,EACAC;AAAAA,EACAC,wBAAwB;AACF,GAAG;AACzB,QAAMC,gBAAgBC,OAAsB,IAAI;AAChD,QAAMC,uBAAuBD,OAAsB,IAAI;AACvD,QAAME,qBAAqBF,OAAO,IAAI;AAEtC,QAAMG,qBAAqB,YAAY;AACrC,UAAMC,UAAUR,WAAWS;AAE3B,QAAID,WAAWP,cAAc;AAC3B,YAAM;AAAA,QAAES;AAAAA,QAAWnB;AAAAA,QAAcC;AAAAA,MAAAA,IAAiBgB;AAClD,YAAMG,kBACJR,cAAcM,YAAY,QAAQC,YAAYP,cAAcM;AAC9DN,oBAAcM,UAAUC;AACxB,YAAME,eAAerB,eAAeC,eAAekB,YAAY;AAC/D,YAAMG,mBAAmB3B,oBAAoBsB,SAASN,qBAAqB;AAC3E,YAAMY,YAAYT,qBAAqBI,YAAY,OAC/CI,mBACAlB,KAAKG,IAAIe,kBAAkBR,qBAAqBI,OAAO;AAE3D,UACEG,gBAAgBE,aAAaH,mBAAmBL,mBAAmBG,SACnE;AACAH,2BAAmBG,UAAU;AAC7BJ,6BAAqBI,UAAUI;AAC/B,YAAI;AACF,gBAAMZ,aAAAA;AAAAA,QACR,UAAA;AACEK,6BAAmBG,UAAU;AAAA,QAC/B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEAM,YAAU,MAAM;AACd,UAAMP,YAAUR,WAAWS;AAC3B,QAAID,aAAWP,cAAc;AAC3BO,gBAAQQ,iBAAiB,UAAUT,kBAAkB;AAAA,IACvD;AAEA,WAAO,MAAM;AACXC,iBAASS,oBAAoB,UAAUV,kBAAkB;AAAA,IAC3D;AAAA,EACF,GAAG,CAACN,cAAcC,qBAAqB,CAAC;AAC1C;"}
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.5,\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;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "linear-react-components-ui",
3
- "version": "2.2.0-beta.5",
3
+ "version": "2.2.0-beta.7",
4
4
  "description": "Linear Sistemas ReactJs Components",
5
5
  "type": "module",
6
6
  "main": "./lib/index.js",