diff --git a/.changeset/poor-dragons-dress.md b/.changeset/poor-dragons-dress.md new file mode 100644 index 0000000..39afdb7 --- /dev/null +++ b/.changeset/poor-dragons-dress.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-react": minor +--- + +improve Pagination behavior diff --git a/packages/react/src/components/Pagination/index.tsx b/packages/react/src/components/Pagination/index.tsx index 4f73e05..0db2e05 100644 --- a/packages/react/src/components/Pagination/index.tsx +++ b/packages/react/src/components/Pagination/index.tsx @@ -1,4 +1,4 @@ -import React, { Fragment, useState } from "react"; +import React, { Fragment, useEffect, useState } from "react"; import { Button } from ":/components/Button"; import { Input } from ":/components/Forms/Input"; import { useCunningham } from ":/components/Provider"; @@ -47,6 +47,10 @@ export const Pagination = ({ const { t } = useCunningham(); const [gotoValue, setGotoValue] = useState(""); + useEffect(() => { + setGotoValue(page + ""); + }, [page]); + if (pagesCount <= 1) { return null; } @@ -83,14 +87,13 @@ export const Pagination = ({ const gotoPage = () => { let value = +gotoValue; - if (value < 0) { + if (value < 0 || !value) { value = 1; } if (value > pagesCount) { value = pagesCount; } onPageChange(value); - setGotoValue(""); }; const canPrevious = page > 1; @@ -161,6 +164,8 @@ export const Pagination = ({ onChange={(e) => setGotoValue(e.target.value)} min={1} max={pagesCount} + onBlur={() => gotoPage()} + onFocus={(e) => e.target.select()} /> diff --git a/packages/react/src/locales/en-US.json b/packages/react/src/locales/en-US.json index c9291d2..7e04503 100644 --- a/packages/react/src/locales/en-US.json +++ b/packages/react/src/locales/en-US.json @@ -1,7 +1,7 @@ { "components": { "pagination": { - "goto_label": "Go to", + "goto_label": "Go to page", "goto_label_aria": "Go to any page", "next_aria": "Go to next page", "previous_aria": "Go to previous page",