101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
import paginationArrowIcon from '@/assets/images/UI/pagination_arrow.svg';
|
|
import Button from '@/components/UI/Button/Button';
|
|
import { nanoid } from 'nanoid';
|
|
import PaginationProps from '@/interfaces/props/pages/p2p/components/Pagination/PaginationProps';
|
|
import styles from './Pagination.module.scss';
|
|
|
|
function Pagination(props: PaginationProps) {
|
|
function generateButton(value: number, selected = false, hiding: 1 | 2 | 3 | null = null) {
|
|
let className = '';
|
|
if (hiding === 1) className = styles.hiding__first;
|
|
else if (hiding === 2) className = styles.hiding__second;
|
|
else if (hiding === 3) className = styles.hiding__third;
|
|
|
|
return (
|
|
<Button
|
|
key={nanoid(16)}
|
|
onClick={() => {
|
|
props.setValue(value);
|
|
}}
|
|
className={className}
|
|
transparent={!selected}
|
|
>
|
|
{value}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
function generateArrowButton(forward: boolean) {
|
|
return (
|
|
<Button
|
|
key={nanoid(16)}
|
|
onClick={() => {
|
|
if (forward ? props.value < props.totalPages : props.value > 1) {
|
|
props.setValue(forward ? props.value + 1 : props.value - 1);
|
|
}
|
|
}}
|
|
className={styles.pagination__arrow_btn}
|
|
transparent={true}
|
|
>
|
|
<img
|
|
className={forward ? styles.reversed_img : ''}
|
|
src={paginationArrowIcon}
|
|
alt="arrow"
|
|
></img>
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
function getPagination() {
|
|
const result = [];
|
|
|
|
if (props.totalPages <= 5) {
|
|
for (let i = 1; i <= props.totalPages; i += 1) {
|
|
let hiding: 1 | 2 | 3 | null = null;
|
|
if (i === 5) hiding = 1;
|
|
else if (i === 4) hiding = 2;
|
|
|
|
result.push(generateButton(i, i === props.value, hiding));
|
|
}
|
|
} else if (props.value <= 3) {
|
|
for (let i = 1; i <= 5; i += 1) {
|
|
let hiding: 1 | 2 | 3 | null = null;
|
|
if (i === 5) hiding = 1;
|
|
else if (i === 4) hiding = 2;
|
|
else if (i === 3) hiding = 3;
|
|
|
|
result.push(generateButton(i, i === props.value, hiding));
|
|
}
|
|
result.push(<p key={nanoid(16)}>...</p>, generateButton(props.totalPages, false));
|
|
} else if (props.value >= props.totalPages - 2) {
|
|
result.push(generateButton(1, false), <p key={nanoid(16)}>...</p>);
|
|
for (let i = props.totalPages - 4; i <= props.totalPages; i += 1) {
|
|
let hiding: 1 | 2 | 3 | null = null;
|
|
if (i === props.totalPages - 4) hiding = 1;
|
|
else if (i === props.totalPages - 3) hiding = 2;
|
|
else if (i === props.totalPages - 2) hiding = 3;
|
|
|
|
result.push(generateButton(i, i === props.value, hiding));
|
|
}
|
|
} else {
|
|
result.push(
|
|
generateButton(1, false),
|
|
<p key={nanoid(16)}>...</p>,
|
|
generateButton(props.value - 1, false, 1),
|
|
generateButton(props.value, true),
|
|
generateButton(props.value + 1, false, 1),
|
|
<p key={nanoid(16)}>...</p>,
|
|
generateButton(props.totalPages, false),
|
|
);
|
|
}
|
|
|
|
result.unshift(generateArrowButton(false));
|
|
result.push(generateArrowButton(true));
|
|
|
|
return result;
|
|
}
|
|
|
|
return <div className={styles.marketplace__pagination}>{getPagination()}</div>;
|
|
}
|
|
|
|
export default Pagination;
|