diff --git a/.changeset/rude-scissors-peel.md b/.changeset/rude-scissors-peel.md new file mode 100644 index 0000000..3d2c38f --- /dev/null +++ b/.changeset/rude-scissors-peel.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-react": minor +--- + +make Pagination goto input optionnal diff --git a/packages/react/src/components/Pagination/_index.scss b/packages/react/src/components/Pagination/_index.scss index f1fd79f..6151751 100644 --- a/packages/react/src/components/Pagination/_index.scss +++ b/packages/react/src/components/Pagination/_index.scss @@ -3,6 +3,7 @@ .c__pagination { display: flex; gap: 2rem; + height: 3.5rem; &__list { display: flex; diff --git a/packages/react/src/components/Pagination/index.mdx b/packages/react/src/components/Pagination/index.mdx index 0816847..678dd6a 100644 --- a/packages/react/src/components/Pagination/index.mdx +++ b/packages/react/src/components/Pagination/index.mdx @@ -53,6 +53,13 @@ You can also set the page programmatically, for example, if you want to use a qu + +### Hide go to input + +You can also hide the go to input if you don't want to allow the user to go to a specific page or to have a simpler pagination. + + + ### Things to know - The pagination will never render if the number of pages is less than 2. @@ -65,4 +72,4 @@ You can also set the page programmatically, for example, if you want to use a qu ### `usePagination` hook - \ No newline at end of file + diff --git a/packages/react/src/components/Pagination/index.spec.tsx b/packages/react/src/components/Pagination/index.spec.tsx index 6ab0e5d..18f45ba 100644 --- a/packages/react/src/components/Pagination/index.spec.tsx +++ b/packages/react/src/components/Pagination/index.spec.tsx @@ -201,4 +201,20 @@ describe("", () => { screen.getByRole("button", { name: "You are currently on page 1" }), ); }); + it("can hide go to input", async () => { + const LocalWrapper = () => { + const pagination = usePagination({ + defaultPage: 50, + defaultPagesCount: 100, + }); + return ( + + + + ); + }; + + render(); + expect(document.querySelector(".c__pagination__goto")).toBeNull(); + }); }); diff --git a/packages/react/src/components/Pagination/index.stories.tsx b/packages/react/src/components/Pagination/index.stories.tsx index 36dedd3..b2fd72a 100644 --- a/packages/react/src/components/Pagination/index.stories.tsx +++ b/packages/react/src/components/Pagination/index.stories.tsx @@ -71,3 +71,11 @@ export const ForcePage = () => { }, []); return ; }; + +export const WithoutGoto = () => { + const pagination = usePagination({ + defaultPagesCount: 100, + defaultPage: 50, + }); + return ; +}; diff --git a/packages/react/src/components/Pagination/index.tsx b/packages/react/src/components/Pagination/index.tsx index f6c524b..1166567 100644 --- a/packages/react/src/components/Pagination/index.tsx +++ b/packages/react/src/components/Pagination/index.tsx @@ -13,6 +13,8 @@ export interface PaginationProps { /** Total number of items per page */ // eslint-disable-next-line react/no-unused-prop-types pageSize: number; + /** Display the goto input */ + displayGoto?: boolean; } export const usePagination = ({ @@ -43,6 +45,7 @@ export const Pagination = ({ page, onPageChange, pagesCount = 0, + displayGoto = true, }: PaginationProps) => { const { t } = useCunningham(); const [gotoValue, setGotoValue] = useState(""); @@ -148,27 +151,29 @@ export const Pagination = ({ size="small" /> - - { - e.preventDefault(); - gotoPage(); - }} - > - setGotoValue(e.target.value)} - min={1} - max={pagesCount} - onBlur={() => gotoPage()} - onFocus={(e) => e.target.select()} - /> - - + {displayGoto && ( + + { + e.preventDefault(); + gotoPage(); + }} + > + setGotoValue(e.target.value)} + min={1} + max={pagesCount} + onBlur={() => gotoPage()} + onFocus={(e) => e.target.select()} + /> + + + )} ); };