@os-design/use-load-next 1.0.24 → 1.0.26
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/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +6 -6
package/dist/cjs/index.js
CHANGED
|
@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
var _react = require("react");
|
|
8
7
|
var _useEvent = _interopRequireDefault(require("@os-design/use-event"));
|
|
9
8
|
var _useSize = _interopRequireDefault(require("@os-design/use-size"));
|
|
9
|
+
var _react = require("react");
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
11
|
var getElement = function getElement(el) {
|
|
12
12
|
return el instanceof Element ? el : el.current;
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["getElement","el","Element","current","useLoadNext","paginationProps","options","hasNext","isLoadingNext","loadNext","count","threshold","container","size","useSize","getScrollHeight","useCallback","document","body","scrollHeight","containerElement","getScrollTop","window","pageYOffset","scrollTop","scrollListener","maxScrollTopBeforeLoad","height","useEvent","
|
|
1
|
+
{"version":3,"file":"index.js","names":["_useEvent","_interopRequireDefault","require","_useSize","_react","obj","__esModule","getElement","el","Element","current","useLoadNext","paginationProps","options","arguments","length","undefined","hasNext","isLoadingNext","loadNext","_options$count","count","_options$threshold","threshold","container","size","useSize","getScrollHeight","useCallback","document","body","scrollHeight","containerElement","getScrollTop","window","pageYOffset","scrollTop","scrollListener","maxScrollTopBeforeLoad","height","useEvent","_default","exports"],"sources":["../../src/index.ts"],"sourcesContent":["import useEvent from '@os-design/use-event';\nimport useSize from '@os-design/use-size';\nimport { RefObject, useCallback } from 'react';\nimport { LoadMoreFn } from 'react-relay';\nimport { OperationType } from 'relay-runtime';\n\ninterface PaginationProps {\n hasNext: boolean;\n isLoadingNext: boolean;\n loadNext: LoadMoreFn<OperationType>;\n}\n\ninterface Options {\n count?: number;\n threshold?: number;\n container?: Element | RefObject<Element>;\n}\n\nconst getElement = (el: Element | RefObject<Element>) =>\n el instanceof Element ? el : el.current;\n\nconst useLoadNext = (\n paginationProps: PaginationProps,\n options: Options = {}\n): void => {\n const { hasNext, isLoadingNext, loadNext } = paginationProps;\n const { count = 60, threshold = 500, container } = options;\n\n const size = useSize(container);\n\n const getScrollHeight = useCallback(() => {\n if (!container) return document.body.scrollHeight;\n const containerElement = getElement(container);\n if (!containerElement) return 0;\n return containerElement.scrollHeight;\n }, [container]);\n\n const getScrollTop = useCallback(() => {\n if (!container) return window.pageYOffset;\n const containerElement = getElement(container);\n if (!containerElement) return 0;\n return containerElement.scrollTop;\n }, [container]);\n\n const scrollListener = useCallback(() => {\n const maxScrollTopBeforeLoad = getScrollHeight() - size.height - threshold;\n if (getScrollTop() >= maxScrollTopBeforeLoad && hasNext && !isLoadingNext) {\n loadNext(count);\n }\n }, [\n getScrollHeight,\n getScrollTop,\n size.height,\n threshold,\n hasNext,\n isLoadingNext,\n loadNext,\n count,\n ]);\n\n useEvent(\n container ||\n ((typeof window !== 'undefined' ? window : undefined) as never),\n 'scroll',\n scrollListener\n );\n};\n\nexport default useLoadNext;\n"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAA+C,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAgB/C,IAAME,UAAU,GAAG,SAAbA,UAAUA,CAAIC,EAAgC;EAAA,OAClDA,EAAE,YAAYC,OAAO,GAAGD,EAAE,GAAGA,EAAE,CAACE,OAAO;AAAA;AAEzC,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CACfC,eAAgC,EAEvB;EAAA,IADTC,OAAgB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAErB,IAAQG,OAAO,GAA8BL,eAAe,CAApDK,OAAO;IAAEC,aAAa,GAAeN,eAAe,CAA3CM,aAAa;IAAEC,QAAQ,GAAKP,eAAe,CAA5BO,QAAQ;EACxC,IAAAC,cAAA,GAAmDP,OAAO,CAAlDQ,KAAK;IAALA,KAAK,GAAAD,cAAA,cAAG,EAAE,GAAAA,cAAA;IAAAE,kBAAA,GAAiCT,OAAO,CAAtCU,SAAS;IAATA,SAAS,GAAAD,kBAAA,cAAG,GAAG,GAAAA,kBAAA;IAAEE,SAAS,GAAKX,OAAO,CAArBW,SAAS;EAE9C,IAAMC,IAAI,GAAG,IAAAC,mBAAO,EAACF,SAAS,CAAC;EAE/B,IAAMG,eAAe,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACxC,IAAI,CAACJ,SAAS,EAAE,OAAOK,QAAQ,CAACC,IAAI,CAACC,YAAY;IACjD,IAAMC,gBAAgB,GAAGzB,UAAU,CAACiB,SAAS,CAAC;IAC9C,IAAI,CAACQ,gBAAgB,EAAE,OAAO,CAAC;IAC/B,OAAOA,gBAAgB,CAACD,YAAY;EACtC,CAAC,EAAE,CAACP,SAAS,CAAC,CAAC;EAEf,IAAMS,YAAY,GAAG,IAAAL,kBAAW,EAAC,YAAM;IACrC,IAAI,CAACJ,SAAS,EAAE,OAAOU,MAAM,CAACC,WAAW;IACzC,IAAMH,gBAAgB,GAAGzB,UAAU,CAACiB,SAAS,CAAC;IAC9C,IAAI,CAACQ,gBAAgB,EAAE,OAAO,CAAC;IAC/B,OAAOA,gBAAgB,CAACI,SAAS;EACnC,CAAC,EAAE,CAACZ,SAAS,CAAC,CAAC;EAEf,IAAMa,cAAc,GAAG,IAAAT,kBAAW,EAAC,YAAM;IACvC,IAAMU,sBAAsB,GAAGX,eAAe,CAAC,CAAC,GAAGF,IAAI,CAACc,MAAM,GAAGhB,SAAS;IAC1E,IAAIU,YAAY,CAAC,CAAC,IAAIK,sBAAsB,IAAIrB,OAAO,IAAI,CAACC,aAAa,EAAE;MACzEC,QAAQ,CAACE,KAAK,CAAC;IACjB;EACF,CAAC,EAAE,CACDM,eAAe,EACfM,YAAY,EACZR,IAAI,CAACc,MAAM,EACXhB,SAAS,EACTN,OAAO,EACPC,aAAa,EACbC,QAAQ,EACRE,KAAK,CACN,CAAC;EAEF,IAAAmB,oBAAQ,EACNhB,SAAS,KACL,OAAOU,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGlB,SAAS,CAAW,EACjE,QAAQ,EACRqB,cACF,CAAC;AACH,CAAC;AAAC,IAAAI,QAAA,GAEa9B,WAAW;AAAA+B,OAAA,cAAAD,QAAA"}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { useCallback } from 'react';
|
|
2
1
|
import useEvent from '@os-design/use-event';
|
|
3
2
|
import useSize from '@os-design/use-size';
|
|
3
|
+
import { useCallback } from 'react';
|
|
4
4
|
const getElement = el => el instanceof Element ? el : el.current;
|
|
5
5
|
const useLoadNext = (paginationProps, options = {}) => {
|
|
6
6
|
const {
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["useEvent","useSize","useCallback","getElement","el","Element","current","useLoadNext","paginationProps","options","hasNext","isLoadingNext","loadNext","count","threshold","container","size","getScrollHeight","document","body","scrollHeight","containerElement","getScrollTop","window","pageYOffset","scrollTop","scrollListener","maxScrollTopBeforeLoad","height","undefined"],"sources":["../../src/index.ts"],"sourcesContent":["import useEvent from '@os-design/use-event';\nimport useSize from '@os-design/use-size';\nimport { RefObject, useCallback } from 'react';\nimport { LoadMoreFn } from 'react-relay';\nimport { OperationType } from 'relay-runtime';\n\ninterface PaginationProps {\n hasNext: boolean;\n isLoadingNext: boolean;\n loadNext: LoadMoreFn<OperationType>;\n}\n\ninterface Options {\n count?: number;\n threshold?: number;\n container?: Element | RefObject<Element>;\n}\n\nconst getElement = (el: Element | RefObject<Element>) =>\n el instanceof Element ? el : el.current;\n\nconst useLoadNext = (\n paginationProps: PaginationProps,\n options: Options = {}\n): void => {\n const { hasNext, isLoadingNext, loadNext } = paginationProps;\n const { count = 60, threshold = 500, container } = options;\n\n const size = useSize(container);\n\n const getScrollHeight = useCallback(() => {\n if (!container) return document.body.scrollHeight;\n const containerElement = getElement(container);\n if (!containerElement) return 0;\n return containerElement.scrollHeight;\n }, [container]);\n\n const getScrollTop = useCallback(() => {\n if (!container) return window.pageYOffset;\n const containerElement = getElement(container);\n if (!containerElement) return 0;\n return containerElement.scrollTop;\n }, [container]);\n\n const scrollListener = useCallback(() => {\n const maxScrollTopBeforeLoad = getScrollHeight() - size.height - threshold;\n if (getScrollTop() >= maxScrollTopBeforeLoad && hasNext && !isLoadingNext) {\n loadNext(count);\n }\n }, [\n getScrollHeight,\n getScrollTop,\n size.height,\n threshold,\n hasNext,\n isLoadingNext,\n loadNext,\n count,\n ]);\n\n useEvent(\n container ||\n ((typeof window !== 'undefined' ? window : undefined) as never),\n 'scroll',\n scrollListener\n );\n};\n\nexport default useLoadNext;\n"],"mappings":"AAAA,OAAOA,QAAQ,MAAM,sBAAsB;AAC3C,OAAOC,OAAO,MAAM,qBAAqB;AACzC,SAAoBC,WAAW,QAAQ,OAAO;AAgB9C,MAAMC,UAAU,GAAIC,EAAgC,IAClDA,EAAE,YAAYC,OAAO,GAAGD,EAAE,GAAGA,EAAE,CAACE,OAAO;AAEzC,MAAMC,WAAW,GAAGA,CAClBC,eAAgC,EAChCC,OAAgB,GAAG,CAAC,CAAC,KACZ;EACT,MAAM;IAAEC,OAAO;IAAEC,aAAa;IAAEC;EAAS,CAAC,GAAGJ,eAAe;EAC5D,MAAM;IAAEK,KAAK,GAAG,EAAE;IAAEC,SAAS,GAAG,GAAG;IAAEC;EAAU,CAAC,GAAGN,OAAO;EAE1D,MAAMO,IAAI,GAAGf,OAAO,CAACc,SAAS,CAAC;EAE/B,MAAME,eAAe,GAAGf,WAAW,CAAC,MAAM;IACxC,IAAI,CAACa,SAAS,EAAE,OAAOG,QAAQ,CAACC,IAAI,CAACC,YAAY;IACjD,MAAMC,gBAAgB,GAAGlB,UAAU,CAACY,SAAS,CAAC;IAC9C,IAAI,CAACM,gBAAgB,EAAE,OAAO,CAAC;IAC/B,OAAOA,gBAAgB,CAACD,YAAY;EACtC,CAAC,EAAE,CAACL,SAAS,CAAC,CAAC;EAEf,MAAMO,YAAY,GAAGpB,WAAW,CAAC,MAAM;IACrC,IAAI,CAACa,SAAS,EAAE,OAAOQ,MAAM,CAACC,WAAW;IACzC,MAAMH,gBAAgB,GAAGlB,UAAU,CAACY,SAAS,CAAC;IAC9C,IAAI,CAACM,gBAAgB,EAAE,OAAO,CAAC;IAC/B,OAAOA,gBAAgB,CAACI,SAAS;EACnC,CAAC,EAAE,CAACV,SAAS,CAAC,CAAC;EAEf,MAAMW,cAAc,GAAGxB,WAAW,CAAC,MAAM;IACvC,MAAMyB,sBAAsB,GAAGV,eAAe,CAAC,CAAC,GAAGD,IAAI,CAACY,MAAM,GAAGd,SAAS;IAC1E,IAAIQ,YAAY,CAAC,CAAC,IAAIK,sBAAsB,IAAIjB,OAAO,IAAI,CAACC,aAAa,EAAE;MACzEC,QAAQ,CAACC,KAAK,CAAC;IACjB;EACF,CAAC,EAAE,CACDI,eAAe,EACfK,YAAY,EACZN,IAAI,CAACY,MAAM,EACXd,SAAS,EACTJ,OAAO,EACPC,aAAa,EACbC,QAAQ,EACRC,KAAK,CACN,CAAC;EAEFb,QAAQ,CACNe,SAAS,KACL,OAAOQ,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGM,SAAS,CAAW,EACjE,QAAQ,EACRH,cACF,CAAC;AACH,CAAC;AAED,eAAenB,WAAW"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,UAAU,eAAe;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;CACrC;AAED,UAAU,OAAO;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;CAC1C;AAKD,QAAA,MAAM,WAAW,oBACE,eAAe,YACvB,OAAO,KACf,IA0CF,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/use-load-next",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.26",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -30,18 +30,18 @@
|
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@os-design/use-event": "^1.0.13",
|
|
33
|
-
"@os-design/use-size": "^1.0.
|
|
33
|
+
"@os-design/use-size": "^1.0.14"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@types/react-relay": "^14.1.
|
|
36
|
+
"@types/react-relay": "^14.1.3",
|
|
37
37
|
"react": "^18.2.0",
|
|
38
|
-
"react-relay": "^
|
|
39
|
-
"relay-runtime": "^
|
|
38
|
+
"react-relay": "^15.0.0",
|
|
39
|
+
"relay-runtime": "^15.0.0"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"react": ">=18",
|
|
43
43
|
"react-relay": ">=13",
|
|
44
44
|
"relay-runtime": ">=13"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "0e88d3afc41e36cee61222a039ef1aa4d08115b5"
|
|
47
47
|
}
|