feat(Pagination): replace page with pageNumber

dnbexperience · May 31, 2023 · 3d538da · 3d538da
1 parent 5a7de9d
commit 3d538da
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 92 deletions.
diff --git a/...-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md b/...-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md
@@ -97,6 +97,10 @@ $layout-large: map-get($breakpoints, 'large');
 
 1. The padding of the `teriary` button is removed. Please, check your application and add back the padding of `0.5rem` if needed.
 
+### [Pagination](/uilib/components/pagination) and [InfinityScroller](/uilib/components/pagination/infinity-scroller)
+
+1. Replace the deprecated event return parameter `page` with `pageNumber`.
+
 ### [Tooltip](/uilib/components/tooltip)
 
 1. Find the `target_element` property and replace it with `targetElement`.

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/Examples.tsx
@@ -36,8 +36,8 @@ export const PaginationExampleDefault = () => (
     <Pagination
       page_count={888}
       current_page={4}
-      on_change={({ page }) => {
-        console.log('on_change:', page)
+      on_change={({ pageNumber }) => {
+        console.log('on_change:', pageNumber)
       }}
     >
       <P>Current Page Content</P>
@@ -50,8 +50,8 @@ export const PaginationExampleWithCallback = () => (
     <Pagination
       page_count={5}
       startup_page={3}
-      on_change={({ page }) => {
-        console.log('on_change:', page)
+      on_change={({ pageNumber }) => {
+        console.log('on_change:', pageNumber)
       }}
     >
       {({ pageNumber }) => <P>Page {pageNumber}</P>}
@@ -62,10 +62,10 @@ export const PaginationExampleWithCallback = () => (
 export const PaginationExampleCentered = () => (
   <ComponentBox scope={{ LargePage }}>
     <Pagination align="center" page_count={30}>
-      {({ page, setContent }) => {
+      {({ pageNumber, setContent }) => {
         // simulate server communication delay
         const timeout = setTimeout(() => {
-          setContent(page, <LargePage>{page}</LargePage>)
+          setContent(pageNumber, <LargePage>{pageNumber}</LargePage>)
         }, Math.ceil(Math.random() * 500))
 
         return () => clearTimeout(timeout)
@@ -153,18 +153,18 @@ export const InfinityPaginationTable = ({ tableItems, ...props }) => {
   let serverDelayTimeout
   React.useEffect(() => () => clearTimeout(serverDelayTimeout))
 
-  const action = ({ page }) => {
-    console.log('on_change: with page', page)
+  const action = ({ pageNumber }) => {
+    console.log('on_change: with page', pageNumber)
 
     // simulate server delay
     clearTimeout(serverDelayTimeout)
     serverDelayTimeout = setTimeout(() => {
-      if (page === currentPage) {
+      if (pageNumber === currentPage) {
         // once we set current page, we force a re-render, and sync of data
         // but only if we are on the same page
         forceRerender(new Date().getTime())
       } else {
-        setLocalPage(page)
+        setLocalPage(pageNumber)
       }
     }, Math.ceil(Math.random() * 1e3)) // simulate random delay
   }

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/events.md b/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/events.md
@@ -4,12 +4,12 @@ showTabs: true
 
 ## Events
 
-| Events       | Description                                                                                                                                                                                                                                                                              |
-| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Events       | Description                                                                                                                                                                                                                                                                               |
+| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `on_change`  | _(optional)_ will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. See below for more details.                                                                                        |
 | `on_startup` | _(optional)_ Only on **infinity** mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. See below for more details. **NB:** Will be called again as soon as we reset the content by calling `resetContent()`. |
 | `on_load`    | _(optional)_ Only on **infinity** mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. See below for more details.                                                                         |
-| `on_end`     | _(optional)_ Only on **infinity** mode. Will be called once `page_count` is reached or `endInfinity` was called.                                                                                                                                                                         |
+| `on_end`     | _(optional)_ Only on **infinity** mode. Will be called once `page_count` is reached or `endInfinity` was called.                                                                                                                                                                          |
 
 ## Returned object
 
@@ -19,27 +19,27 @@ Events have several useful methods to change / manipulate the content.
 
 ```jsx
 <Pagination
-  on_change={({ page, ...methods }) => {
+  on_change={({ pageNumber, ...methods }) => {
     // ...
   }}
 />
 ```
 
-- `page` the current page number
+- `pageNumber` the current page number
 - `setContent` use it to add update a page including content: `setContent(pageNumber, ReactComponent)`
 
 ### Infinity mode
 
 ```jsx
 <Pagination
   mode="infinity"
-  on_change={({ page, ...methods }) => {
+  on_change={({ pageNumber, ...methods }) => {
     // ...
   }}
 />
 ```
 
-- `page` the current page number
+- `pageNumber` the current page number
 - `setContent` use it to add update a page including content: `setContent(pageNumber, ReactComponent, position = 'after')`
 - `endInfinity` use it to tell the infinity pagination to end the infinity scrolling interaction. Use this handler to end the infinity scrolling procedure, in case the page_count is unknown: `endInfinity(pageNumber)`
 - `resetContent` use it to invalidate all internal pages: `resetContent()`

diff --git a/...-design-system-portal/src/docs/uilib/components/pagination/infinity-scroller/Examples.tsx b/...-design-system-portal/src/docs/uilib/components/pagination/infinity-scroller/Examples.tsx
@@ -53,10 +53,10 @@ export const PaginationExampleInfinityLoadButton = () => (
         use_load_button
         startup_page={5}
         min_wait_time={0}
-        on_load={({ page, setContent }) => {
+        on_load={({ pageNumber, setContent }) => {
           // simulate server communication delay
           const timeout = setTimeout(() => {
-            setContent(page, <LargePage>{page}</LargePage>)
+            setContent(pageNumber, <LargePage>{pageNumber}</LargePage>)
           }, Math.ceil(Math.random() * 500))
 
           return () => clearTimeout(timeout)
@@ -77,16 +77,19 @@ export const PaginationExampleInfinityIndicator = () => (
         startup_page={3}
         page_count={10}
         min_wait_time={0}
-        on_load={({ page, setContent }) => {
+        on_load={({ pageNumber, setContent }) => {
           // simulate server communication delay
           const timeout = setTimeout(() => {
-            setContent(page, <LargePage>{page}</LargePage>)
+            setContent(pageNumber, <LargePage>{pageNumber}</LargePage>)
           }, Math.ceil(Math.random() * 500))
 
           return () => clearTimeout(timeout)
         }}
-        on_end={({ page, setContent }) => {
-          setContent(page, <LargePage color="lightgreen">End</LargePage>)
+        on_end={({ pageNumber, setContent }) => {
+          setContent(
+            pageNumber,
+            <LargePage color="lightgreen">End</LargePage>
+          )
         }}
       />
     </HeightLimit>
@@ -100,20 +103,23 @@ export const PaginationExampleInfinityUnknown = () => (
         mode="infinity"
         parallel_load_count={2}
         min_wait_time={0}
-        on_load={({ page, setContent, endInfinity }) => {
+        on_load={({ pageNumber, setContent, endInfinity }) => {
           // simulate server communication delay
           const timeout = setTimeout(() => {
-            if (page > 10) {
+            if (pageNumber > 10) {
               endInfinity()
             } else {
-              setContent(page, <LargePage>{page}</LargePage>)
+              setContent(pageNumber, <LargePage>{pageNumber}</LargePage>)
             }
           }, Math.ceil(Math.random() * 1e3))
 
           return () => clearTimeout(timeout)
         }}
-        on_end={({ page, setContent }) => {
-          setContent(page, <LargePage color="lightgreen">End</LargePage>)
+        on_end={({ pageNumber, setContent }) => {
+          setContent(
+            pageNumber,
+            <LargePage color="lightgreen">End</LargePage>
+          )
         }}
       />
     </HeightLimit>
@@ -229,18 +235,18 @@ export const InfinityPaginationTable = ({ tableItems, ...props }) => {
   let serverDelayTimeout
   React.useEffect(() => () => clearTimeout(serverDelayTimeout))
 
-  const action = ({ page }) => {
-    console.log('on_change: with page', page)
+  const action = ({ pageNumber }) => {
+    console.log('on_change: with page', pageNumber)
 
     // simulate server delay
     clearTimeout(serverDelayTimeout)
     serverDelayTimeout = setTimeout(() => {
-      if (page === currentPage) {
+      if (pageNumber === currentPage) {
         // once we set current page, we force a re-render, and sync of data
         // but only if we are on the same page
         forceRerender(new Date().getTime())
       } else {
-        setLocalPage(page)
+        setLocalPage(pageNumber)
       }
     }, Math.ceil(Math.random() * 1e3)) // simulate random delay
   }

diff --git a/...gn-system-portal/src/docs/uilib/components/pagination/infinity-scroller/info.md b/...gn-system-portal/src/docs/uilib/components/pagination/infinity-scroller/info.md
@@ -60,8 +60,8 @@ import { Pagination } from '@dnb/eufemia/components'
 render(
   <Pagination
     mode="infinity"
-    on_change={({ page, setContent }) => {
-      setContent(page, ReactComponent)
+    on_change={({ pageNumber, setContent }) => {
+      setContent(pageNumber, ReactComponent)
     }}
   />
 )
@@ -84,8 +84,8 @@ React.useEffect(() => {
 render(
   <InfinityScroller
     set_content_handler={(fn) => (setContent = fn)}
-    on_change={({ page }) => {
-      setLocalPage(page)
+    on_change={({ pageNumber }) => {
+      setLocalPage(pageNumber)
     }}
   />
 )

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/pagination/info.md
@@ -49,8 +49,8 @@ import { Pagination } from '@dnb/eufemia/components'
 
 render(
   <Pagination page_count={2}>
-    {({ page, setContent }) => {
-      setContent(page, ReactComponent)
+    {({ pageNumber, setContent }) => {
+      setContent(pageNumber, ReactComponent)
     }}
   </Pagination>
 )
@@ -66,8 +66,8 @@ import { Pagination } from '@dnb/eufemia/components'
 render(
   <Pagination
     page_count={2}
-    on_change={({ page, setContent }) => {
-      setContent(page, ReactComponent)
+    on_change={({ pageNumber, setContent }) => {
+      setContent(pageNumber, ReactComponent)
     }}
   />
 )
@@ -84,7 +84,7 @@ import { createPagination } from '@dnb/eufemia/components/Pagination'
 const { Pagination, setContent, resetContent } = createPagination()
 
 // Later we can do call this
-setContent(page, ReactComponent)
+setContent(pageNumber, ReactComponent)
 
 render(<Pagination page_count={2} />)
 ```

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.tsx
@@ -964,8 +964,8 @@ export function PaginationTable() {
             <Pagination
               page_count={data.length / amountPerPage}
               current_page={currentPage}
-              on_change={({ page }) => {
-                setCurrentPage(page)
+              on_change={({ pageNumber }) => {
+                setCurrentPage(pageNumber)
               }}
             >
               <MakeTable