0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Infinite pagination.

Browse source
This commit is contained in:
Pushkar Anand 2020-11-20 22:54:21 +05:30
parent 90b41c67a5
commit a7664dbab1
3 changed files with 40 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -23,7 +23,8 @@
"react-bootstrap": "^1.3.0",
"react-dom": "16.13.1",
"react-photoswipe": "^1.3.0",
"react-window": "^1.8.5",
"react-virtualized-auto-sizer": "^1.0.2",
"react-window": "^1.8.6",
"react-window-infinite-loader": "^1.0.5",
"scrypt-js": "^3.0.1",
"styled-components": "^5.2.0",

42
src/pages/gallery/index.tsx
View file

@ -8,12 +8,13 @@ import PreviewCard from './components/PreviewCard';
import { getActualKey } from 'utils/common/key';
import styled from 'styled-components';
import { PhotoSwipeGallery } from 'react-photoswipe';
import InfiniteLoader from 'react-window-infinite-loader';
import { FixedSizeGrid as Grid } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';
import { FixedSizeList as List } from 'react-window';
const Container = styled.div`
max-width: 1000px;
display: flex;
display: block;
flex: 1;
width: 100%;
flex-wrap: wrap;
margin: 0 auto;
@ -23,6 +24,11 @@ const Container = styled.div`
}
`;
const ListItem = styled.div`
display: flex;
justify-content: center;
`;
const PAGE_SIZE = 12;
const COLUMNS = 3;
@ -59,14 +65,24 @@ export default function Gallery() {
)
return (<Container>
<PhotoSwipeGallery
items={data.map(item => ({
...item,
src: '/image.svg',
w: window.innerWidth,
h: window.innerHeight,
}))}
thumbnailContent={getThumbnail}
/>
<AutoSizer>
{({ height, width }) => (
<List
itemSize={200}
height={height}
width={width}
itemCount={data.length / 5}
>
{({ index, style }) => <ListItem style={style}>
{getThumbnail(data[index * 5])}
{getThumbnail(data[index * 5 + 1])}
{getThumbnail(data[index * 5 + 2])}
{getThumbnail(data[index * 5 + 3])}
{getThumbnail(data[index * 5 + 4])}
</ListItem>}
</List>
)}
</AutoSizer>
</Container>);
}

13
yarn.lock
View file

@ -4964,15 +4964,20 @@ react-transition-group@^4.4.1:
loose-envify "^1.4.0"
prop-types "^15.6.2"
react-virtualized-auto-sizer@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==
react-window-infinite-loader@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/react-window-infinite-loader/-/react-window-infinite-loader-1.0.5.tgz#6fe094d538a88978c2c9b623052bc50cb28c2abc"
integrity sha512-IcPIq8lADK3zsAcqoLqQGyduicqR6jWkiK2VUX5sKSI9X/rou6OWlOEexnGyujdNTG7hSG8OVBFEhLSDs4qrxg==
react-window@^1.8.5:
version "1.8.5"
resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.5.tgz#a56b39307e79979721021f5d06a67742ecca52d1"
integrity sha512-HeTwlNa37AFa8MDZFZOKcNEkuF2YflA0hpGPiTT9vR7OawEt+GZbfM6wqkBahD3D3pUjIabQYzsnY/BSJbgq6Q==
react-window@^1.8.6:
version "1.8.6"
resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112"
integrity sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==
dependencies:
"@babel/runtime" "^7.0.0"
memoize-one ">=3.1.1 <6"