new pagination UI
This commit is contained in:
parent
ce8945a639
commit
8a5d89e640
GPG Key ID:
606EEEF3C479A91F
|
|
@ -1496,6 +1496,15 @@
|
|||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/react-paginate": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-paginate/-/react-paginate-6.2.1.tgz",
|
||||
"integrity": "sha512-+q8k1N0WzbMyOCsIEH/p5D6/KQD8dXYLzfvSvriYn//94icd2sqhAL2rWXkgwGvqHGCSTU9AoHtsWCJxPfquUQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/react-router": {
|
||||
"version": "4.4.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-4.4.5.tgz",
|
||||
|
|
@ -18941,6 +18950,14 @@
|
|||
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.8.0.tgz",
|
||||
"integrity": "sha512-5Q4Rn7QLEoh7WIe66KFvYIpWJ49GeHoygP1/EtJyZjXKgrWH19Tf0Ty3lWyQzrEEDyLOwUvvmBFSE3dcDdvagA=="
|
||||
},
|
||||
"react-paginate": {
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-paginate/-/react-paginate-6.3.0.tgz",
|
||||
"integrity": "sha512-lT/ne7hZzctGDli4QzUAou0JjfZgxKmtl9/r30B5UVonICZIy1u0SrAkdlEZ5ubgzrOykBeCmxkTWi5IyPg4AQ==",
|
||||
"requires": {
|
||||
"prop-types": "^15.6.1"
|
||||
}
|
||||
},
|
||||
"react-popper": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.3.tgz",
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@
|
|||
"react-helmet": "^5.2.0",
|
||||
"react-markdown": "^4.0.6",
|
||||
"react-moment": "^0.9.2",
|
||||
"react-paginate": "^6.3.0",
|
||||
"react-popper": "^1.3.3",
|
||||
"react-router-dom": "^5.0.0",
|
||||
"react-transition-group": "^3.0.0",
|
||||
|
|
@ -43,6 +44,7 @@
|
|||
"@types/react-dom": "^16.8.3",
|
||||
"@types/react-dotdotdot": "^1.2.0",
|
||||
"@types/react-helmet": "^5.0.8",
|
||||
"@types/react-paginate": "^6.2.1",
|
||||
"@types/react-router-dom": "^4.3.1",
|
||||
"@types/react-transition-group": "^2.8.0",
|
||||
"@types/web3": "^1.0.18",
|
||||
|
|
|
|||
|
|
@ -2,18 +2,17 @@
|
|||
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: $spacer * 2;
|
||||
margin-bottom: $spacer;
|
||||
justify-content: center;
|
||||
padding-left: 0;
|
||||
|
||||
> div {
|
||||
&:first-child {
|
||||
padding: $spacer / 4;
|
||||
}
|
||||
li {
|
||||
margin: 0;
|
||||
|
||||
&:last-child {
|
||||
padding: $spacer / 4;
|
||||
text-align: right;
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -21,15 +20,55 @@
|
|||
.number {
|
||||
text-align: center;
|
||||
font-weight: $font-weight-bold;
|
||||
padding: $spacer / 4;
|
||||
margin-left: $spacer / 4;
|
||||
margin-right: $spacer / 4;
|
||||
padding: $spacer / 4 $spacer / 2;
|
||||
margin-left: -1px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border: 1px solid $brand-grey-lighter;
|
||||
min-width: 3rem;
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
transform: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($brand-grey-lighter, 7%);
|
||||
}
|
||||
}
|
||||
|
||||
.current {
|
||||
composes: number;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
color: $brand-grey-light;
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $brand-grey-light;
|
||||
background: lighten($brand-grey-lighter, 7%);
|
||||
}
|
||||
}
|
||||
|
||||
.prev {
|
||||
composes: number;
|
||||
}
|
||||
|
||||
.next {
|
||||
composes: number;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.prevNextDisabled {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.break {
|
||||
composes: number;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,82 +1,36 @@
|
|||
import React, { PureComponent } from 'react'
|
||||
import Button from '../atoms/Button'
|
||||
import ReactPaginate from 'react-paginate'
|
||||
import styles from './Pagination.module.scss'
|
||||
|
||||
const PageNumber = ({
|
||||
i,
|
||||
current,
|
||||
setPage
|
||||
}: {
|
||||
i: number
|
||||
current: boolean
|
||||
setPage(page: number): void
|
||||
}) => (
|
||||
<Button
|
||||
link
|
||||
className={current ? styles.current : styles.number}
|
||||
onClick={() => setPage(i + 1)}
|
||||
>
|
||||
{`${i + 1}`}
|
||||
</Button>
|
||||
)
|
||||
|
||||
const PrevNext = ({
|
||||
currentPage,
|
||||
prevPage,
|
||||
setPage
|
||||
}: {
|
||||
currentPage: number
|
||||
prevPage?: number
|
||||
setPage(page: number): void
|
||||
}) => (
|
||||
<Button
|
||||
link
|
||||
onClick={
|
||||
prevPage ? () => setPage(prevPage) : () => setPage(currentPage + 1)
|
||||
}
|
||||
>
|
||||
{prevPage ? '←' : '→'}
|
||||
</Button>
|
||||
)
|
||||
|
||||
export default class Pagination extends PureComponent<{
|
||||
currentPage: number
|
||||
totalPages: number
|
||||
prevPage?: number
|
||||
setPage(page: number): void
|
||||
currentPage: number
|
||||
handlePageClick(data: { selected: number }): Promise<any>
|
||||
}> {
|
||||
public render() {
|
||||
const { currentPage, totalPages, prevPage, setPage } = this.props
|
||||
const isFirst = currentPage === 1
|
||||
const isLast = currentPage === totalPages
|
||||
const { totalPages, currentPage, handlePageClick } = this.props
|
||||
|
||||
return totalPages > 1 ? (
|
||||
<div className={styles.pagination}>
|
||||
<div>
|
||||
{!isFirst && (
|
||||
<PrevNext
|
||||
prevPage={prevPage}
|
||||
currentPage={currentPage}
|
||||
setPage={setPage}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
{Array.from({ length: totalPages }, (_, i) => (
|
||||
<PageNumber
|
||||
key={`pagination-number${i + 1}`}
|
||||
i={i}
|
||||
current={currentPage === i + 1}
|
||||
setPage={setPage}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
{!isLast && (
|
||||
<PrevNext currentPage={currentPage} setPage={setPage} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : null
|
||||
return (
|
||||
totalPages > 1 && (
|
||||
<ReactPaginate
|
||||
pageCount={totalPages}
|
||||
initialPage={currentPage - 1}
|
||||
marginPagesDisplayed={1}
|
||||
pageRangeDisplayed={6}
|
||||
onPageChange={data => handlePageClick(data)}
|
||||
containerClassName={styles.pagination}
|
||||
pageLinkClassName={styles.number}
|
||||
activeLinkClassName={styles.current}
|
||||
previousLinkClassName={styles.prev}
|
||||
nextLinkClassName={styles.next}
|
||||
disabledClassName={styles.prevNextDisabled}
|
||||
disableInitialCallback
|
||||
previousLabel={'←'}
|
||||
nextLabel={'→'}
|
||||
breakLabel={'...'}
|
||||
breakLinkClassName={styles.break}
|
||||
/>
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,13 +72,15 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
|
|||
Logger.log(`Loaded ${this.state.results.length} assets`)
|
||||
}
|
||||
|
||||
private setPage = async (page: number) => {
|
||||
private handlePageClick = async (data: { selected: number }) => {
|
||||
let toPage = data.selected + 1
|
||||
|
||||
this.props.history.push({
|
||||
pathname: this.props.location.pathname,
|
||||
search: `?text=${this.searchTerm}&page=${page}`
|
||||
search: `?text=${this.searchTerm}&page=${toPage}`
|
||||
})
|
||||
|
||||
await this.setState({ currentPage: page, isLoading: true })
|
||||
await this.setState({ currentPage: toPage, isLoading: true })
|
||||
await this.searchAssets()
|
||||
}
|
||||
|
||||
|
|
@ -111,8 +113,7 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
|
|||
<Pagination
|
||||
totalPages={totalPages}
|
||||
currentPage={currentPage}
|
||||
prevPage={currentPage - 1}
|
||||
setPage={this.setPage}
|
||||
handlePageClick={this.handlePageClick}
|
||||
/>
|
||||
</Route>
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue