index.tsx
79 lines
| 1 | import {__, sprintf} from '@wordpress/i18n'; |
| 2 | import cx from 'classnames'; |
| 3 | import {ChevronLeft, ChevronRight} from './icons'; |
| 4 | |
| 5 | import './styles.scss'; |
| 6 | |
| 7 | export default ({currentPage, totalPages, setPage}: PaginationProps) => { |
| 8 | if (1 >= totalPages) { |
| 9 | return null; |
| 10 | } |
| 11 | |
| 12 | const nextPage = currentPage + 1; |
| 13 | const previousPage = currentPage - 1; |
| 14 | |
| 15 | return ( |
| 16 | <div className="give-campaign-components-pagination"> |
| 17 | <div className="give-campaign-components-pagination__pages"> |
| 18 | <div className="give-campaign-components-pagination__pages-links"> |
| 19 | {previousPage > 0 ? ( |
| 20 | <button |
| 21 | title={__('Previous page', 'give')} |
| 22 | className="give-campaign-components-pagination__pages-links-arrow" |
| 23 | onClick={(e) => { |
| 24 | e.preventDefault(); |
| 25 | setPage(previousPage); |
| 26 | }} |
| 27 | > |
| 28 | <ChevronLeft /> |
| 29 | </button> |
| 30 | ) : ( |
| 31 | <button className="give-campaign-components-pagination__pages-links-arrow-disabled"> |
| 32 | <ChevronLeft /> |
| 33 | </button> |
| 34 | )} |
| 35 | |
| 36 | {[...Array(totalPages)].map((e, i) => { |
| 37 | const page = i + 1; |
| 38 | return ( |
| 39 | <button |
| 40 | title={sprintf(__('Page %d', 'give'), page)} |
| 41 | className={cx('give-campaign-components-pagination__pages-links-page', {'give-campaign-components-pagination__pages-links-current': currentPage === page})} |
| 42 | onClick={(e) => { |
| 43 | e.preventDefault(); |
| 44 | setPage(page); |
| 45 | }} |
| 46 | > |
| 47 | {page} |
| 48 | </button> |
| 49 | ) |
| 50 | })} |
| 51 | |
| 52 | {nextPage <= totalPages ? ( |
| 53 | <button |
| 54 | title={__('Next page', 'give')} |
| 55 | className="give-campaign-components-pagination__pages-links-arrow" |
| 56 | onClick={(e) => { |
| 57 | e.preventDefault(); |
| 58 | setPage(nextPage); |
| 59 | }} |
| 60 | > |
| 61 | <ChevronRight /> |
| 62 | </button> |
| 63 | ) : ( |
| 64 | <button className="give-campaign-components-pagination__pages-links-arrow-disabled"> |
| 65 | <ChevronRight /> |
| 66 | </button> |
| 67 | )} |
| 68 | </div> |
| 69 | </div> |
| 70 | </div> |
| 71 | ); |
| 72 | } |
| 73 | |
| 74 | interface PaginationProps { |
| 75 | currentPage: number, |
| 76 | totalPages: number, |
| 77 | setPage: (page: number) => void |
| 78 | } |
| 79 |