Spaces:
Runtime error
Runtime error
workaround scroll component
Browse files- components/main/collections/index.tsx +5 -6
- package-lock.json +8 -19
- package.json +1 -1
components/main/collections/index.tsx
CHANGED
@@ -1,7 +1,7 @@
|
|
1 |
import classNames from "classnames";
|
2 |
import { createBreakpoint } from "react-use";
|
3 |
import { AnimatePresence } from "framer-motion";
|
4 |
-
import InfiniteScroll from "react-infinite-
|
5 |
|
6 |
import { Image } from "@/utils/type";
|
7 |
import { useCollections } from "@/components/main/hooks/useCollections";
|
@@ -23,16 +23,15 @@ export const Collections: React.FC<{ category: string }> = ({ category }) => {
|
|
23 |
return (
|
24 |
<>
|
25 |
<InfiniteScroll
|
26 |
-
|
27 |
-
|
|
|
28 |
if (infiniteLoading) return;
|
29 |
infiniteRefetch();
|
30 |
}}
|
|
|
31 |
hasMore={pagination?.total_pages > pagination?.page}
|
32 |
-
loader={<div />}
|
33 |
-
scrollableTarget="content"
|
34 |
className="mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5 mt-8 lg:mt-14"
|
35 |
-
style={{ overflow: "initial" }}
|
36 |
>
|
37 |
{images?.map((collection: Image, i: number) =>
|
38 |
collection?.loading ? (
|
|
|
1 |
import classNames from "classnames";
|
2 |
import { createBreakpoint } from "react-use";
|
3 |
import { AnimatePresence } from "framer-motion";
|
4 |
+
import InfiniteScroll from "react-infinite-scroller";
|
5 |
|
6 |
import { Image } from "@/utils/type";
|
7 |
import { useCollections } from "@/components/main/hooks/useCollections";
|
|
|
23 |
return (
|
24 |
<>
|
25 |
<InfiniteScroll
|
26 |
+
pageStart={0}
|
27 |
+
getScrollParent={() => document.getElementById("content")}
|
28 |
+
loadMore={() => {
|
29 |
if (infiniteLoading) return;
|
30 |
infiniteRefetch();
|
31 |
}}
|
32 |
+
useWindow={false}
|
33 |
hasMore={pagination?.total_pages > pagination?.page}
|
|
|
|
|
34 |
className="mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5 mt-8 lg:mt-14"
|
|
|
35 |
>
|
36 |
{images?.map((collection: Image, i: number) =>
|
37 |
collection?.loading ? (
|
package-lock.json
CHANGED
@@ -19,7 +19,7 @@
|
|
19 |
"react": "^18",
|
20 |
"react-dom": "^18",
|
21 |
"react-icons": "^4.11.0",
|
22 |
-
"react-infinite-
|
23 |
"react-use": "^17.4.0"
|
24 |
},
|
25 |
"devDependencies": {
|
@@ -3317,7 +3317,6 @@
|
|
3317 |
"version": "4.1.1",
|
3318 |
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
3319 |
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
3320 |
-
"dev": true,
|
3321 |
"engines": {
|
3322 |
"node": ">=0.10.0"
|
3323 |
}
|
@@ -3744,7 +3743,6 @@
|
|
3744 |
"version": "15.8.1",
|
3745 |
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
3746 |
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
3747 |
-
"dev": true,
|
3748 |
"dependencies": {
|
3749 |
"loose-envify": "^1.4.0",
|
3750 |
"object-assign": "^4.1.1",
|
@@ -3811,30 +3809,21 @@
|
|
3811 |
"react": "*"
|
3812 |
}
|
3813 |
},
|
3814 |
-
"node_modules/react-infinite-
|
3815 |
-
"version": "
|
3816 |
-
"resolved": "https://registry.npmjs.org/react-infinite-
|
3817 |
-
"integrity": "sha512-
|
3818 |
"dependencies": {
|
3819 |
-
"
|
3820 |
},
|
3821 |
"peerDependencies": {
|
3822 |
-
"react": "
|
3823 |
-
}
|
3824 |
-
},
|
3825 |
-
"node_modules/react-infinite-scroll-component/node_modules/throttle-debounce": {
|
3826 |
-
"version": "2.3.0",
|
3827 |
-
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
|
3828 |
-
"integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==",
|
3829 |
-
"engines": {
|
3830 |
-
"node": ">=8"
|
3831 |
}
|
3832 |
},
|
3833 |
"node_modules/react-is": {
|
3834 |
"version": "16.13.1",
|
3835 |
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
3836 |
-
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
3837 |
-
"dev": true
|
3838 |
},
|
3839 |
"node_modules/react-universal-interface": {
|
3840 |
"version": "0.6.2",
|
|
|
19 |
"react": "^18",
|
20 |
"react-dom": "^18",
|
21 |
"react-icons": "^4.11.0",
|
22 |
+
"react-infinite-scroller": "^1.2.6",
|
23 |
"react-use": "^17.4.0"
|
24 |
},
|
25 |
"devDependencies": {
|
|
|
3317 |
"version": "4.1.1",
|
3318 |
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
3319 |
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
|
|
3320 |
"engines": {
|
3321 |
"node": ">=0.10.0"
|
3322 |
}
|
|
|
3743 |
"version": "15.8.1",
|
3744 |
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
3745 |
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
|
|
3746 |
"dependencies": {
|
3747 |
"loose-envify": "^1.4.0",
|
3748 |
"object-assign": "^4.1.1",
|
|
|
3809 |
"react": "*"
|
3810 |
}
|
3811 |
},
|
3812 |
+
"node_modules/react-infinite-scroller": {
|
3813 |
+
"version": "1.2.6",
|
3814 |
+
"resolved": "https://registry.npmjs.org/react-infinite-scroller/-/react-infinite-scroller-1.2.6.tgz",
|
3815 |
+
"integrity": "sha512-mGdMyOD00YArJ1S1F3TVU9y4fGSfVVl6p5gh/Vt4u99CJOptfVu/q5V/Wlle72TMgYlBwIhbxK5wF0C/R33PXQ==",
|
3816 |
"dependencies": {
|
3817 |
+
"prop-types": "^15.5.8"
|
3818 |
},
|
3819 |
"peerDependencies": {
|
3820 |
+
"react": "^0.14.9 || ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
3821 |
}
|
3822 |
},
|
3823 |
"node_modules/react-is": {
|
3824 |
"version": "16.13.1",
|
3825 |
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
3826 |
+
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
|
|
3827 |
},
|
3828 |
"node_modules/react-universal-interface": {
|
3829 |
"version": "0.6.2",
|
package.json
CHANGED
@@ -20,7 +20,7 @@
|
|
20 |
"react": "^18",
|
21 |
"react-dom": "^18",
|
22 |
"react-icons": "^4.11.0",
|
23 |
-
"react-infinite-
|
24 |
"react-use": "^17.4.0"
|
25 |
},
|
26 |
"devDependencies": {
|
|
|
20 |
"react": "^18",
|
21 |
"react-dom": "^18",
|
22 |
"react-icons": "^4.11.0",
|
23 |
+
"react-infinite-scroller": "^1.2.6",
|
24 |
"react-use": "^17.4.0"
|
25 |
},
|
26 |
"devDependencies": {
|