@tap-payments/os-micro-frontend-shared 0.0.285-test.1 → 0.0.285-test.2

package/build/components/ScrollLoader/ScrollLoader.js

@@ -10,34 +10,55 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import Stack from '@mui/material/Stack';
 const OFFSET = 50;
+const isNearBottom = (el, offset = OFFSET) => {
+    const scrollBottom = el.scrollTop + el.clientHeight;
+    const scrollHeight = el.scrollHeight;
+    return scrollHeight - scrollBottom <= offset;
+};
 const ScrollLoader = (props) => {
     const { component = Stack, loadMoreItems, hasMore, loading, children } = props, rootProps = __rest(props, ["component", "loadMoreItems", "hasMore", "loading", "children"]);
+    const [initialChecked, setInitialChecked] = useState(false);
     const loadMoreItemsRef = useRef(loadMoreItems);
+    const containerRef = useRef(null);
     loadMoreItemsRef.current = loadMoreItems;
     const Component = component;
-    const containerRef = useRef(null);
     const handleScroll = useCallback(() => {
         const el = containerRef.current;
         if (!el || loading || !hasMore)
             return;
-        const isBottom = el.scrollHeight - el.scrollTop <= el.clientHeight + OFFSET;
+        const isBottom = isNearBottom(el);
         if (isBottom)
             loadMoreItemsRef.current();
     }, [loading, hasMore]);
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        el.addEventListener('scroll', handleScroll);
+        return () => el.removeEventListener('scroll', handleScroll);
+    }, [handleScroll]);
     useEffect(() => {
         const el = containerRef.current;
         if (!el || loading)
             return;
-        const isBottom = el.scrollHeight - el.scrollTop <= el.clientHeight + OFFSET;
-        if (isBottom)
-            loadMoreItemsRef.current();
-    }, [loading]);
-    return (_jsx(Component, Object.assign({ overflow: "auto", height: "100%", maxHeight: "calc(100vh - 321px)", ref: containerRef, onScroll: handleScroll, style: {
+        const timeout = setTimeout(() => {
+            const isBottom = isNearBottom(el);
+            if (isBottom && !initialChecked) {
+                loadMoreItemsRef.current();
+                setInitialChecked(true);
+            }
+        }, 2000);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [loading, initialChecked]);
+    return (_jsx(Component, Object.assign({ overflow: "auto", ref: containerRef, style: {
             overflow: 'auto',
             height: '100%',
+            maxHeight: '100%',
         } }, rootProps, { children: children })));
 };
 export default ScrollLoader;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.285-test.1",
-  "testVersion": 1,
+  "version": "0.0.285-test.2",
+  "testVersion": 2,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",