feat(Pagination): Avoir une valeur props pour la page courante. #206
Conversation
hdeschenes-equisoft
changed the title
| onPageChange={(page: number) => setCurrentPage(page)} | ||
| activePage={currentPage} | ||
| /> | ||
| <Pagination |
There was a problem hiding this comment.
Pourquoi la pagination est présente deux fois?
There was a problem hiding this comment.
C'est un use case dans les maquettes actuelle sur le projet Centralize, on veux avoir 2 paginations synchro en haut et en bas d'une Table.
There was a problem hiding this comment.
Bref j'ai enlevé le deuxième et changer le nom pour ControlledInput
| @@ -16,6 +16,27 @@ export const Normal: Story = () => ( | |||
| <Pagination totalPages={50} numberOfResults={1530} /> | |||
| </> | |||
| ); | |||
|
|
|||
| export const LinkedPagination: Story = () => { | |||
There was a problem hiding this comment.
Je mettrais ControlledPagination, pour faire référence aux controlled inputs
There was a problem hiding this comment.
Ça fais du sens je ferais la modification
There was a problem hiding this comment.
C'est fait !
| setCurrentPage(activePage); | ||
| } | ||
| }, [activePage]); | ||
|
|
||
| function changePage(page: number): void { | ||
| setCurrentPage(page); |
There was a problem hiding this comment.
Sinon, peut-être juste appeler setCurrentPage ici quand activePage n'est pas défini
There was a problem hiding this comment.
C'est fait !
| const [currentPage, setCurrentPage] = useState(1); | ||
|
|
||
| return ( | ||
| <> |
There was a problem hiding this comment.
C'est fait
| @@ -116,6 +121,7 @@ export function Pagination({ | |||
| defaultActivePage = 1, | |||
| pagesShown = 3, | |||
| onPageChange = () => undefined, | |||
| activePage, | |||
There was a problem hiding this comment.
Petit dernier détail, il faudrait changer la ligne 129 pour changer
const [currentPage, setCurrentPage] = useState(clamp(defaultActivePage, 1, totalPages));
pour
const [currentPage, setCurrentPage] = useState(clamp(activePage || defaultActivePage, 1, totalPages));
pour prendre en compte le activePage au premier render.
There was a problem hiding this comment.
C'est fait
…vePage is present
Cette PR ajoute la props "activePage" sur la pagination pour avoir plus de contrôle sur le state de celle-ci. J'ai ajouté un example dans le Storybook qui s'appelle LinkedPagination avec deux paginations qui partage le même state "activePage".
https://jira.equisoft.com/secure/RapidBoard.jspa?rapidView=786&projectKey=DS&view=detail&selectedIssue=DS-173&quickFilter=4537