@os-design/use-load-next 1.0.26 → 1.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/use-load-next",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -14,7 +14,14 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "!**/__tests__",
+    "!**/*.stories.tsx",
+    "!**/*.stories.mdx",
+    "!**/*.example.tsx"
   ],
   "sideEffects": false,
   "scripts": {
@@ -29,8 +36,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/use-event": "^1.0.13",
-    "@os-design/use-size": "^1.0.14"
+    "@os-design/use-event": "^1.0.15",
+    "@os-design/use-size": "^1.0.16"
   },
   "devDependencies": {
     "@types/react-relay": "^14.1.3",
@@ -43,5 +50,5 @@
     "react-relay": ">=13",
     "relay-runtime": ">=13"
   },
-  "gitHead": "0e88d3afc41e36cee61222a039ef1aa4d08115b5"
+  "gitHead": "e5d8409760608145d2c738aa5789d0465ae5416f"
 }

package/src/index.ts

@@ -0,0 +1,69 @@
+import useEvent from '@os-design/use-event';
+import useSize from '@os-design/use-size';
+import { RefObject, useCallback } from 'react';
+import { LoadMoreFn } from 'react-relay';
+import { OperationType } from 'relay-runtime';
+
+interface PaginationProps {
+  hasNext: boolean;
+  isLoadingNext: boolean;
+  loadNext: LoadMoreFn<OperationType>;
+}
+
+interface Options {
+  count?: number;
+  threshold?: number;
+  container?: Element | RefObject<Element>;
+}
+
+const getElement = (el: Element | RefObject<Element>) =>
+  el instanceof Element ? el : el.current;
+
+const useLoadNext = (
+  paginationProps: PaginationProps,
+  options: Options = {}
+): void => {
+  const { hasNext, isLoadingNext, loadNext } = paginationProps;
+  const { count = 60, threshold = 500, container } = options;
+
+  const size = useSize(container);
+
+  const getScrollHeight = useCallback(() => {
+    if (!container) return document.body.scrollHeight;
+    const containerElement = getElement(container);
+    if (!containerElement) return 0;
+    return containerElement.scrollHeight;
+  }, [container]);
+
+  const getScrollTop = useCallback(() => {
+    if (!container) return window.pageYOffset;
+    const containerElement = getElement(container);
+    if (!containerElement) return 0;
+    return containerElement.scrollTop;
+  }, [container]);
+
+  const scrollListener = useCallback(() => {
+    const maxScrollTopBeforeLoad = getScrollHeight() - size.height - threshold;
+    if (getScrollTop() >= maxScrollTopBeforeLoad && hasNext && !isLoadingNext) {
+      loadNext(count);
+    }
+  }, [
+    getScrollHeight,
+    getScrollTop,
+    size.height,
+    threshold,
+    hasNext,
+    isLoadingNext,
+    loadNext,
+    count,
+  ]);
+
+  useEvent(
+    container ||
+      ((typeof window !== 'undefined' ? window : undefined) as never),
+    'scroll',
+    scrollListener
+  );
+};
+
+export default useLoadNext;