-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[PBNTR-258] NEW Pagination kit in React (#3552)
This PR adds the Pagination kit in react  **How to test?** Steps to confirm the desired behavior: 1. Go to 'the pagination kit and test it #### Checklist: - [ ] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [ ] **DEPLOY** I have added the `milano` label to show I'm ready for a review. - [ ] **TESTS** I have added test coverage to my code.
- Loading branch information
1 parent
4b051ec
commit 378069b
Showing
12 changed files
with
327 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
164 changes: 164 additions & 0 deletions
164
playbook/app/pb_kits/playbook/pb_pagination/_pagination.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,164 @@ | ||
| import React, { useState } from "react"; | ||
| import classnames from 'classnames' | ||
| import { globalProps } from '../utilities/globalProps' | ||
| import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props' | ||
| import Icon from '../pb_icon/_icon'; | ||
|
|
||
| type PaginationProps = { | ||
| aria?: { [key: string]: string }, | ||
| className?: string, | ||
| data?: { [key: string]: string }, | ||
| htmlOptions?: {[key: string]: string | number | boolean | (() => void)}, | ||
| id?: string, | ||
| current?: number; | ||
| onChange?: (pageNumber: number) => void; | ||
| range?: number; | ||
| total?: number; | ||
| }; | ||
|
|
||
| const Pagination = ( props: PaginationProps) => { | ||
| const { | ||
| aria = {}, | ||
| className, | ||
| data = {}, | ||
| htmlOptions = {}, | ||
| id, | ||
| current = 1, | ||
| onChange, | ||
| range = 5, | ||
| total = 1, | ||
| } = props | ||
| const [currentPage, setCurrentPage] = useState(current); | ||
|
|
||
| const handlePageChange = (pageNumber: number) => { | ||
| if (pageNumber >= 1 && pageNumber <= total) { | ||
| setCurrentPage(pageNumber); | ||
| if (onChange) { | ||
| onChange(pageNumber); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| const renderPageButtons = (): JSX.Element[] => { | ||
| const buttons: JSX.Element[] = []; | ||
|
|
||
| // Calculate pagination range with let | ||
| let rangeStart = Math.max(1, currentPage - Math.floor(range / 2)); | ||
| let rangeEnd = Math.min(total, rangeStart + range - 1); | ||
|
|
||
| // Adjust range if it's too short to fit the range | ||
| if (rangeEnd - rangeStart + 1 < range) { | ||
| if (rangeStart > 1) { | ||
| rangeStart = Math.max(1, rangeEnd - range + 1); | ||
| } else { | ||
| rangeEnd = Math.min(total, rangeStart + range - 1); | ||
| } | ||
| } | ||
|
|
||
| // Always display the first page button | ||
| if (rangeStart > 1) { | ||
| buttons.push( | ||
| <li | ||
| className="pagination-number" | ||
| key={1} | ||
| onClick={() => handlePageChange(1)} | ||
| > | ||
| 1 | ||
| </li> | ||
| ); | ||
| } | ||
|
|
||
| // Always display the second page button | ||
| if (rangeStart > 2) { | ||
| buttons.push( | ||
| <li | ||
| className="pagination-number" | ||
| key={2} | ||
| onClick={() => handlePageChange(2)} | ||
| > | ||
| 2 | ||
| </li> | ||
| ); | ||
| } | ||
|
|
||
| // Display page buttons within the calculated range | ||
| for (let i = rangeStart; i <= rangeEnd; i++) { | ||
| buttons.push( | ||
| <li | ||
| className={`pagination-number ${i === currentPage ? "active" : ""}`} | ||
| key={i} | ||
| onClick={() => handlePageChange(i)} | ||
| > | ||
| {i} | ||
| </li> | ||
| ); | ||
| } | ||
|
|
||
| // Always display the second-to-last page button | ||
| if (rangeEnd < total - 1) { | ||
| buttons.push( | ||
| <li | ||
| className={`pagination-number ${total - 1 === currentPage ? "active" : ""}`} | ||
| key={total - 1} | ||
| onClick={() => handlePageChange(total - 1)} | ||
| > | ||
| {total - 1} | ||
| </li> | ||
| ); | ||
| } | ||
|
|
||
| // Always display the last page button | ||
| if (rangeEnd < total) { | ||
| buttons.push( | ||
| <li | ||
| className={`pagination-number ${total === currentPage ? "active" : ""}`} | ||
| key={total} | ||
| onClick={() => handlePageChange(total)} | ||
| > | ||
| {total} | ||
| </li> | ||
| ); | ||
| } | ||
|
|
||
|
|
||
| return buttons; | ||
| }; | ||
|
|
||
|
|
||
| const ariaProps = buildAriaProps(aria) | ||
| const dataProps = buildDataProps(data) | ||
| const htmlProps = buildHtmlProps(htmlOptions) | ||
| const classes = classnames( | ||
| buildCss('pb_paginate'), | ||
| globalProps(props), | ||
| className | ||
| ) | ||
|
|
||
| return ( | ||
| <div | ||
| {...ariaProps} | ||
| {...dataProps} | ||
| {...htmlProps} | ||
| className={classes} | ||
| id={id} | ||
| > | ||
| <div className="pb_pagination"> | ||
| <li | ||
| className={`pagination-left ${currentPage === 1 ? 'disabled' : ''}`} | ||
| onClick={() => handlePageChange(currentPage - 1)} | ||
| > | ||
| <Icon icon="chevron-left" /> | ||
| </li> | ||
| {renderPageButtons()} | ||
| <li | ||
| className={`pagination-right ${currentPage === total ? 'disabled' : ''}`} | ||
| onClick={() => handlePageChange(currentPage + 1)} | ||
| > | ||
| <Icon icon="chevron-right" /> | ||
| </li> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Pagination; |
19 changes: 19 additions & 0 deletions
19
playbook/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import React from 'react' | ||
|
|
||
| import Pagination from '../_pagination' | ||
|
|
||
| const PaginationDefault = (props) => { | ||
|
|
||
| return ( | ||
| <> | ||
| <Pagination | ||
| current={1} | ||
| range={5} | ||
| total={10} | ||
| {...props} | ||
| /> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default PaginationDefault |
File renamed without changes.
1 change: 1 addition & 0 deletions
1
playbook/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop. |
62 changes: 62 additions & 0 deletions
62
playbook/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import React, { useState } from "react"; | ||
| import { Table, Pagination } from 'playbook-ui' | ||
|
|
||
|
|
||
| import { data } from "./data"; | ||
|
|
||
| const PaginationPageChange = (props) => { | ||
|
|
||
| const [activePage, setActivePage] = useState(1); | ||
| const rowsPerPage = 3; | ||
| const totalPages = Math.ceil(data.length / rowsPerPage); | ||
|
|
||
| const onPageChange = (pageNumber) => { | ||
| setActivePage(pageNumber); | ||
| }; | ||
|
|
||
| const currentData = data.slice( | ||
| (activePage - 1) * rowsPerPage, | ||
| activePage * rowsPerPage | ||
| ); | ||
|
|
||
|
|
||
| return ( | ||
| <div className="App"> | ||
| <Table | ||
| marginBottom="xs" | ||
| responsive="none" | ||
| size="sm" | ||
| {...props} | ||
| > | ||
| <Table.Head> | ||
| <Table.Row> | ||
| <Table.Header>{"Column 1"}</Table.Header> | ||
| <Table.Header>{"Column 2"}</Table.Header> | ||
| <Table.Header>{"Column 3"}</Table.Header> | ||
| <Table.Header>{"Column 4"}</Table.Header> | ||
| <Table.Header>{"Column 5"}</Table.Header> | ||
| </Table.Row> | ||
| </Table.Head> | ||
| <Table.Body> | ||
| {currentData.map((row, index) => ( | ||
| <Table.Row key={index}> | ||
| {row.map((cell, cellIndex) => ( | ||
| <Table.Cell key={cellIndex}>{cell}</Table.Cell> | ||
| ))} | ||
| </Table.Row> | ||
| ))} | ||
| </Table.Body> | ||
| </Table> | ||
|
|
||
| <Pagination | ||
| current={1} | ||
| onChange={onPageChange} | ||
| range={5} | ||
| total={totalPages} | ||
| {...props} | ||
| /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default PaginationPageChange |
1 change: 1 addition & 0 deletions
1
playbook/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| You can use the `onChange` prop to control the data of your table. This prop is callback function that will allow you control the state. |
Oops, something went wrong.