rewrite pagination
This commit is contained in:
parent
c528c6b182
commit
5dd5ae03c1
GPG Key ID:
14546221E3595D0C
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right" viewBox="0 0 16 16">
|
||||
<path d="M6 12.796V3.204L11.481 8 6 12.796zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 289 B |
|
|
@ -52,7 +52,7 @@ const FavoritesApartamentsList = () => {
|
|||
<h1 style={{textAlign: 'center'}}>Идет загрузка...</h1>
|
||||
}
|
||||
<ApartmentsList list={apartamentsFavorites}/>
|
||||
<Pagination page={page} changePage={changePage} viewAll={viewAll} totalPages={totalPages}/>
|
||||
<Pagination page={page} onChange={changePage} onViewAll={viewAll} viewAllButton={true} pages={totalPages} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import styled from 'styled-components';
|
||||
|
||||
export default styled.div`
|
||||
export default styled.svg`
|
||||
width: ${props => props.width ? props.width : 24}px;
|
||||
height: ${props => props.height ? props.height : 24}px;
|
||||
background: url(${props => props.src});
|
||||
|
|
@ -8,6 +8,5 @@ export default styled.div`
|
|||
background-position: center;
|
||||
background-size: contain;
|
||||
margin: 0 8px;
|
||||
display: inline-block;
|
||||
transform: translateY(2px)
|
||||
display: inline-block
|
||||
`;
|
||||
|
|
@ -1,50 +1,145 @@
|
|||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import {getPagesArray, getPreviousAndNextPage} from "../../../utils/Pages";
|
||||
import SVGIcon from '../Icon/SVGIcon';
|
||||
|
||||
const PageButtonContainer = styled.div`
|
||||
margin-top: 24px;
|
||||
margin: 24px auto;
|
||||
display: inline-block;
|
||||
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const Pagination = ({totalPages, page, changePage, onChange, viewAll, showAllEnabled}) => {
|
||||
let pagesArray = getPagesArray(totalPages);
|
||||
let [previousPage, nextPage] = getPreviousAndNextPage(totalPages, page);
|
||||
|
||||
changePage = onChange ?? changePage;
|
||||
const PageButton = styled.button`
|
||||
background: #fefefe;
|
||||
border-radius: 6px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
transition: 100ms ease;
|
||||
margin-right: 10px;
|
||||
font-size: 11pt;
|
||||
|
||||
const getPagesShow = () => {
|
||||
let pagesShow = [];
|
||||
for (let index = page - 1, len = page + 14 > totalPages ? totalPages : page + 14; index < len; ++index) {
|
||||
pagesShow.push(pagesArray[index])
|
||||
${
|
||||
props => props.isCurrent ?
|
||||
`
|
||||
color: royalblue;
|
||||
font-weight: 600;
|
||||
border: 1px solid royalblue;
|
||||
`
|
||||
: ''
|
||||
}
|
||||
return pagesShow;
|
||||
|
||||
&:hover {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #eeefee;
|
||||
}
|
||||
`;
|
||||
|
||||
const range = (start, stop) => {
|
||||
if (stop < start) throw 'Stop value can\'t be smaller than start value.';
|
||||
|
||||
let a = [];
|
||||
for (let i = start; i != stop; i++)
|
||||
a.push(i);
|
||||
return a;
|
||||
}
|
||||
|
||||
// TODO: Needs some work
|
||||
class Pagination extends React.Component {
|
||||
|
||||
static defaultProps = {
|
||||
onChange: () => {},
|
||||
disabled: false,
|
||||
sideButtons: true,
|
||||
value: 0,
|
||||
styles: {},
|
||||
viewAllButton: false,
|
||||
onViewAll: () => {}
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {{
|
||||
* pages: number,
|
||||
*
|
||||
* onChange?: (event: number) => void,
|
||||
* disabled?: boolean,
|
||||
* sideButtons?: boolean,
|
||||
* value?: number,
|
||||
* styles?: React.CSSProperties,
|
||||
* viewAllButton?: boolean,
|
||||
* onViewAll?: () => void
|
||||
* }}
|
||||
*/
|
||||
props;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
value: props.value
|
||||
}
|
||||
|
||||
this.value_controlled = props.onChange != undefined && props.value != undefined;
|
||||
this.updateValue = this.updateValue.bind(this);
|
||||
}
|
||||
|
||||
updateValue(new_val) {
|
||||
this.props.onChange(new_val);
|
||||
if (this.value_controlled)
|
||||
return;
|
||||
this.setState({value: new_val});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { pages } = this.props;
|
||||
let value = this.state.value;
|
||||
if (this.value_controlled) value = this.props.value;
|
||||
|
||||
return (
|
||||
<PageButtonContainer>
|
||||
{
|
||||
showAllEnabled ? <button className="allBtn" onClick={viewAll}>Показать весь список</button>
|
||||
this.props.viewAllButton ?
|
||||
<PageButton style={{float: 'left', padding: '0 16px'}}>Показать все</PageButton>
|
||||
: null
|
||||
}
|
||||
|
||||
{
|
||||
this.props.sideButtons ?
|
||||
<PageButton>
|
||||
<SVGIcon style={{margin:0, transform:'rotate(180deg) translateY(-2px)'}} width='16' height='16' src='/images/icons/caret-right.svg' />
|
||||
</PageButton>
|
||||
: null
|
||||
}
|
||||
|
||||
{
|
||||
range(0, pages).map((el, i) => {
|
||||
|
||||
if ( !( i == 0 | i == pages - 1) )
|
||||
if ( i < value - 2 | i > value + 2 ) {
|
||||
if ( i == value + 3 | i == value - 3 ) {
|
||||
return <PageButton>...</PageButton>
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
return <PageButton key={i} isCurrent={value == i} onClick={() => this.updateValue(i)}>{i + 1}</PageButton>
|
||||
})
|
||||
}
|
||||
|
||||
{
|
||||
this.props.sideButtons ?
|
||||
<PageButton>
|
||||
<SVGIcon style={{margin:0, transform: 'translateY(2px)'}} width='16' height='16' src='/images/icons/caret-right.svg' />
|
||||
</PageButton>
|
||||
: 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">
|
||||
<path d="M0.238707 8.62179L6.83881 15.7424C7.15713 16.0859 7.6732 16.0859 7.99148 15.7424L8.76127 14.9119C9.07904 14.5691 9.07965 14.0134 8.76263 13.6698L3.53193 7.99998L8.76263 2.33019C9.07965 1.98655 9.07904 1.43091 8.76127 1.08808L7.99148 0.257567C7.67316 -0.0858556 7.15709 -0.0858556 6.83881 0.257567L0.238741 7.37821C-0.0795746 7.72159 -0.0795746 8.27837 0.238707 8.62179Z" fill="black"/>
|
||||
</svg>
|
||||
</button>
|
||||
{getPagesShow().map(p =>
|
||||
<button onClick={() => changePage(p)} key={p} className={page === p ? "pageBtn activePage" : "pageBtn"}>{p}</button>
|
||||
)}
|
||||
<button onClick={() => changePage(nextPage)} className="btnNext">
|
||||
<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.76129 8.62179L2.16119 15.7424C1.84287 16.0859 1.3268 16.0859 1.00852 15.7424L0.238729 14.9119C-0.0790435 14.5691 -0.0796547 14.0134 0.237371 13.6698L5.46807 7.99998L0.237371 2.33019C-0.0796547 1.98655 -0.0790435 1.43091 0.238729 1.08808L1.00852 0.257567C1.32684 -0.0858556 1.84291 -0.0858556 2.16119 0.257567L8.76126 7.37821C9.07957 7.72159 9.07957 8.27837 8.76129 8.62179Z" fill="black"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</PageButtonContainer>
|
||||
);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default Pagination;
|
||||
|
|
@ -409,10 +409,9 @@ export default class IndexPage extends React.Component {
|
|||
}
|
||||
|
||||
<Pagination
|
||||
totalPages={pages}
|
||||
page={page}
|
||||
pages={pages}
|
||||
onChange={(page) => this.setState({ page })}
|
||||
showAllEnabled={false}
|
||||
value={page}
|
||||
/>
|
||||
</IndexPageRoot>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue