rewrite pagination

This commit is contained in:
b1ek 2023-05-13 13:25:46 +10:00
parent c528c6b182
commit 5dd5ae03c1
Signed by: blek
GPG Key ID: 14546221E3595D0C
5 changed files with 140 additions and 44 deletions

View File

@ -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

View File

@ -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} />
</> </>
); );
}; };

View File

@ -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)
`; `;

View File

@ -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;
const getPagesShow = () => { ${
let pagesShow = []; props => props.isCurrent ?
for (let index = page - 1, len = page + 14 > totalPages ? totalPages : page + 14; index < len; ++index) { `
pagesShow.push(pagesArray[index]) color: royalblue;
} font-weight: 600;
return pagesShow; border: 1px solid royalblue;
`
: ''
} }
return ( &:hover {
<PageButtonContainer> background: #f2f2f2;
{ }
showAllEnabled ? <button className="allBtn" onClick={viewAll}>Показать весь список</button>
&: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>
{
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;

View File

@ -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>
); );