Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 5x 5x 5x 1x 1x | /**
* Copyright (c) 2021-present, Matti Bar-Zeev.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import PropTypes from 'prop-types';
import {usePagination} from '@pedalboard/hooks';
import './index.scss';
export interface PaginationProps {
totalPages: number;
initialCursor: number;
pagesBuffer: number;
onChange: () => void;
}
const Pagination = (props: PaginationProps) => {
const {cursor, totalPages, goPrev, goNext} = usePagination(props);
const buffer = new Array(props.pagesBuffer).fill(0);
let bufferGap = 0;
Iif (totalPages - cursor < buffer.length) {
bufferGap = totalPages - cursor - buffer.length;
}
return (
<div className="pagination">
<button onClick={goPrev} disabled={cursor === 0}>
PREV
</button>
{buffer.map((item, index) => {
const pageCursor = cursor + index + bufferGap;
const className = pageCursor === cursor ? 'selected' : '';
return pageCursor >= 0 && pageCursor < totalPages ? (
<span key={`page-${pageCursor}`} className={className}>
{` [${pageCursor}] `}
</span>
) : null;
})}
<button onClick={goNext} disabled={cursor === totalPages - 1}>
NEXT
</button>
</div>
);
};
Pagination.propTypes = {
totalPages: PropTypes.number,
pagesBuffer: PropTypes.number,
initialCursor: PropTypes.number,
onChange: PropTypes.func,
};
export default Pagination;
|