rewrite pagination
This commit is contained in:
parent
c528c6b182
commit
5dd5ae03c1
|
@ -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>
|
<h1 style={{textAlign: 'center'}}>Идет загрузка...</h1>
|
||||||
}
|
}
|
||||||
<ApartmentsList list={apartamentsFavorites}/>
|
<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';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
export default styled.div`
|
export default styled.svg`
|
||||||
width: ${props => props.width ? props.width : 24}px;
|
width: ${props => props.width ? props.width : 24}px;
|
||||||
height: ${props => props.height ? props.height : 24}px;
|
height: ${props => props.height ? props.height : 24}px;
|
||||||
background: url(${props => props.src});
|
background: url(${props => props.src});
|
||||||
|
@ -8,6 +8,5 @@ export default styled.div`
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
margin: 0 8px;
|
margin: 0 8px;
|
||||||
display: inline-block;
|
display: inline-block
|
||||||
transform: translateY(2px)
|
|
||||||
`;
|
`;
|
|
@ -1,50 +1,145 @@
|
||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
import SVGIcon from '../Icon/SVGIcon';
|
||||||
import {getPagesArray, getPreviousAndNextPage} from "../../../utils/Pages";
|
|
||||||
|
|
||||||
const PageButtonContainer = styled.div`
|
const PageButtonContainer = styled.div`
|
||||||
margin-top: 24px;
|
margin: 24px auto;
|
||||||
display: inline-block;
|
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;
|
||||||
|
|
||||||
|
${
|
||||||
|
props => props.isCurrent ?
|
||||||
|
`
|
||||||
|
color: royalblue;
|
||||||
|
font-weight: 600;
|
||||||
|
border: 1px solid royalblue;
|
||||||
|
`
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
|
||||||
const getPagesShow = () => {
|
&:hover {
|
||||||
let pagesShow = [];
|
background: #f2f2f2;
|
||||||
for (let index = page - 1, len = page + 14 > totalPages ? totalPages : page + 14; index < len; ++index) {
|
}
|
||||||
pagesShow.push(pagesArray[index])
|
|
||||||
}
|
&:active {
|
||||||
return pagesShow;
|
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: () => {}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
/**
|
||||||
<PageButtonContainer>
|
* @type {{
|
||||||
{
|
* pages: number,
|
||||||
showAllEnabled ? <button className="allBtn" onClick={viewAll}>Показать весь список</button>
|
*
|
||||||
|
* 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>
|
||||||
|
{
|
||||||
|
this.props.viewAllButton ?
|
||||||
|
<PageButton style={{float: 'left', padding: '0 16px'}}>Показать все</PageButton>
|
||||||
: null
|
: 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">
|
this.props.sideButtons ?
|
||||||
<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"/>
|
<PageButton>
|
||||||
</svg>
|
<SVGIcon style={{margin:0, transform:'rotate(180deg) translateY(-2px)'}} width='16' height='16' src='/images/icons/caret-right.svg' />
|
||||||
</button>
|
</PageButton>
|
||||||
{getPagesShow().map(p =>
|
: null
|
||||||
<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">
|
range(0, pages).map((el, i) => {
|
||||||
<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>
|
if ( !( i == 0 | i == pages - 1) )
|
||||||
</button>
|
if ( i < value - 2 | i > value + 2 ) {
|
||||||
</div>
|
if ( i == value + 3 | i == value - 3 ) {
|
||||||
</PageButtonContainer>
|
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
|
||||||
|
}
|
||||||
|
</PageButtonContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default Pagination;
|
export default Pagination;
|
|
@ -409,10 +409,9 @@ export default class IndexPage extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
<Pagination
|
<Pagination
|
||||||
totalPages={pages}
|
pages={pages}
|
||||||
page={page}
|
|
||||||
onChange={(page) => this.setState({ page })}
|
onChange={(page) => this.setState({ page })}
|
||||||
showAllEnabled={false}
|
value={page}
|
||||||
/>
|
/>
|
||||||
</IndexPageRoot>
|
</IndexPageRoot>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue