use pagination class in index page
This commit is contained in:
parent
0c088c732a
commit
73c1e7b007
|
@ -1,10 +1,12 @@
|
|||
import React from 'react';
|
||||
import {getPagesArray, getPreviousAndNextPage} from "../../../utils/Pages";
|
||||
|
||||
const Pagination = ({totalPages, page, changePage, viewAll}) => {
|
||||
const Pagination = ({totalPages, page, changePage, onChange, viewAll, showAll}) => {
|
||||
let pagesArray = getPagesArray(totalPages);
|
||||
let [previousPage, nextPage] = getPreviousAndNextPage(totalPages, page);
|
||||
|
||||
changePage = onChange ?? changePage;
|
||||
|
||||
const getPagesShow = () => {
|
||||
let pagesShow = [];
|
||||
for (let index = page - 1, len = page + 14 > totalPages ? totalPages : page + 14; index < len; ++index) {
|
||||
|
@ -15,7 +17,10 @@ const Pagination = ({totalPages, page, changePage, viewAll}) => {
|
|||
|
||||
return (
|
||||
<section className="btnSection">
|
||||
<button className="allBtn" onClick={() => viewAll()}>Показать весь список</button>
|
||||
{
|
||||
showAll ? <button className="allBtn" onClick={viewAll}>Показать весь список</button>
|
||||
: null
|
||||
}
|
||||
<div className="choiceBtn">
|
||||
<button onClick={() => changePage(previousPage)} className="btnPrevious">
|
||||
<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
|
@ -15,6 +15,8 @@ import AwsSliderStyles from 'react-awesome-slider/src/styles?inline';
|
|||
|
||||
import constants from "../../constants";
|
||||
|
||||
import Pagination from '../../components/UI/Pagination';
|
||||
|
||||
const API_ROOT = constants.API_ROOT;
|
||||
|
||||
const Select = styled.select`
|
||||
|
@ -130,32 +132,6 @@ const SearchBarInput = styled.input`
|
|||
outline: none;
|
||||
`;
|
||||
|
||||
const PageButtons = styled.div`
|
||||
margin: 60px auto;
|
||||
width: fit-content
|
||||
`;
|
||||
|
||||
const PageButton = styled.button`
|
||||
background: #dedede;
|
||||
width: 60px; height: 60px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 1px 2px #20202060;
|
||||
margin-right: 32px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
|
||||
transition: 350ms ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 4px #20202060;
|
||||
}
|
||||
`;
|
||||
|
||||
const CurrentPage = styled(PageButton)`
|
||||
background: 0;
|
||||
border: 2px solid royalblue;
|
||||
`;
|
||||
|
||||
const IndexPageRoot = styled.div`
|
||||
width: 1150px;
|
||||
margin: 50px auto
|
||||
|
@ -355,7 +331,7 @@ export default class IndexPage extends React.Component {
|
|||
this.state = {
|
||||
apartments: [],
|
||||
pageSize: 10,
|
||||
page: 0,
|
||||
page: 1,
|
||||
data_loaded: false,
|
||||
load_err: false,
|
||||
loading_filters: false
|
||||
|
@ -432,28 +408,12 @@ export default class IndexPage extends React.Component {
|
|||
null
|
||||
}
|
||||
|
||||
<PageButtons>
|
||||
{
|
||||
pages != 0 ?
|
||||
[...Array(pages)].map((_, i) => {
|
||||
if (i > (pages / 4) & i < (pages - (pages / 4)) && i != 0 && i != pages) {
|
||||
if (!(i == page + 1 | i == page - 1 | i == page)) {
|
||||
if (i == Math.floor((pages / 2)))
|
||||
return <PageButton disabled>...</PageButton>;
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
if (i == page)
|
||||
return <CurrentPage>{i + 1}</CurrentPage>
|
||||
|
||||
return (
|
||||
<PageButton onClick={() => this.setState({page: i})}>{i + 1}</PageButton>
|
||||
);
|
||||
}) :
|
||||
null
|
||||
}
|
||||
</PageButtons>
|
||||
<Pagination
|
||||
totalPages={pages}
|
||||
page={page}
|
||||
onChange={(page) => this.setState({ page })}
|
||||
showAll={false}
|
||||
/>
|
||||
</IndexPageRoot>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue