use pagination class in index page
This commit is contained in:
parent
0c088c732a
commit
73c1e7b007
|
@ -1,9 +1,11 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {getPagesArray, getPreviousAndNextPage} from "../../../utils/Pages";
|
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 pagesArray = getPagesArray(totalPages);
|
||||||
let [previousPage, nextPage] = getPreviousAndNextPage(totalPages, page);
|
let [previousPage, nextPage] = getPreviousAndNextPage(totalPages, page);
|
||||||
|
|
||||||
|
changePage = onChange ?? changePage;
|
||||||
|
|
||||||
const getPagesShow = () => {
|
const getPagesShow = () => {
|
||||||
let pagesShow = [];
|
let pagesShow = [];
|
||||||
|
@ -15,7 +17,10 @@ const Pagination = ({totalPages, page, changePage, viewAll}) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="btnSection">
|
<section className="btnSection">
|
||||||
<button className="allBtn" onClick={() => viewAll()}>Показать весь список</button>
|
{
|
||||||
|
showAll ? <button className="allBtn" onClick={viewAll}>Показать весь список</button>
|
||||||
|
: null
|
||||||
|
}
|
||||||
<div className="choiceBtn">
|
<div className="choiceBtn">
|
||||||
<button onClick={() => changePage(previousPage)} className="btnPrevious">
|
<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">
|
<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 constants from "../../constants";
|
||||||
|
|
||||||
|
import Pagination from '../../components/UI/Pagination';
|
||||||
|
|
||||||
const API_ROOT = constants.API_ROOT;
|
const API_ROOT = constants.API_ROOT;
|
||||||
|
|
||||||
const Select = styled.select`
|
const Select = styled.select`
|
||||||
|
@ -130,32 +132,6 @@ const SearchBarInput = styled.input`
|
||||||
outline: none;
|
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`
|
const IndexPageRoot = styled.div`
|
||||||
width: 1150px;
|
width: 1150px;
|
||||||
margin: 50px auto
|
margin: 50px auto
|
||||||
|
@ -355,7 +331,7 @@ export default class IndexPage extends React.Component {
|
||||||
this.state = {
|
this.state = {
|
||||||
apartments: [],
|
apartments: [],
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
page: 0,
|
page: 1,
|
||||||
data_loaded: false,
|
data_loaded: false,
|
||||||
load_err: false,
|
load_err: false,
|
||||||
loading_filters: false
|
loading_filters: false
|
||||||
|
@ -432,28 +408,12 @@ export default class IndexPage extends React.Component {
|
||||||
null
|
null
|
||||||
}
|
}
|
||||||
|
|
||||||
<PageButtons>
|
<Pagination
|
||||||
{
|
totalPages={pages}
|
||||||
pages != 0 ?
|
page={page}
|
||||||
[...Array(pages)].map((_, i) => {
|
onChange={(page) => this.setState({ page })}
|
||||||
if (i > (pages / 4) & i < (pages - (pages / 4)) && i != 0 && i != pages) {
|
showAll={false}
|
||||||
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>
|
|
||||||
</IndexPageRoot>
|
</IndexPageRoot>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue