update/pagination: documentation

wpmudev · May 2, 2024 · ac4df2f · ac4df2f
1 parent a1955f9
commit ac4df2f
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 26 deletions.
diff --git a/packages/ui/pagination/src/pagination.tsx b/packages/ui/pagination/src/pagination.tsx
@@ -6,13 +6,13 @@ import { PaginationNav } from "./pagination-nav"
 
 const Pagination: React.FC<PaginationProps> = ({
 	limit = 5,
-	skip,
+	skip = false,
 	previousLabel = "Previous label",
 	nextLabel = "Next label",
 	numberOfItems = 20,
 	onChange,
 	hideOnSinglePage = false,
-	selectedPage = 1,
+	page = 1,
 	_style,
 	_htmlProps,
 }) => {
@@ -39,19 +39,19 @@ const Pagination: React.FC<PaginationProps> = ({
 
 	// Decrement startIndex and endIndex upon page change
 	const decrementIndexes = useCallback(() => {
-		if (selectedPage - 1 <= startIndex + 1 && startIndex !== 0) {
+		if (page - 1 <= startIndex + 1 && startIndex !== 0) {
 			setStartIndex(startIndex - 1)
 			setEndIndex(endIndex - 1)
 		}
-	}, [selectedPage, startIndex, endIndex])
+	}, [page, startIndex, endIndex])
 
 	// Increment startIndex and endIndex upon page change
 	const incrementIndexes = useCallback(() => {
-		if (selectedPage + 1 >= endIndex && endIndex !== pages) {
+		if (page + 1 >= endIndex && endIndex !== pages) {
 			setStartIndex(startIndex + 1)
 			setEndIndex(endIndex + 1)
 		}
-	}, [selectedPage, startIndex, endIndex, pages])
+	}, [page, startIndex, endIndex, pages])
 
 	// Update the list of page numbers based on available pages
 	useEffect(() => {
@@ -62,30 +62,30 @@ const Pagination: React.FC<PaginationProps> = ({
 
 	useEffect(() => {
 		if (onChange) {
-			onChange(selectedPage)
+			onChange(page)
 		}
-	}, [onChange, selectedPage])
+	}, [onChange, page])
 
 	// Change indexes when page changes
 	useEffect(() => {
-		if (selectedPage >= endIndex) incrementIndexes()
-		if (selectedPage <= startIndex + 1) decrementIndexes()
+		if (page >= endIndex) incrementIndexes()
+		if (page <= startIndex + 1) decrementIndexes()
 	}, [
 		pageClickCounter,
 		incrementIndexes,
 		decrementIndexes,
 		endIndex,
 		startIndex,
-		selectedPage,
+		page,
 	])
 
 	// Change elements start and end index upon page or limit change
 	useEffect(() => {
-		if (selectedPage !== 1) {
-			setElementsStartIndex(selectedPage * limit - limit)
-			setElementsEndIndex(selectedPage * limit)
+		if (page !== 1) {
+			setElementsStartIndex(page * limit - limit)
+			setElementsEndIndex(page * limit)
 		}
-	}, [selectedPage, limit])
+	}, [page, limit])
 
 	// Go to the first page
 	const handleSkipToFirstPage = () => {
@@ -103,16 +103,16 @@ const Pagination: React.FC<PaginationProps> = ({
 
 	// Go to the previous page
 	const handlePreviousPage = () => {
-		if (selectedPage > 1) {
-			onChange?.(selectedPage - 1)
+		if (page > 1) {
+			onChange?.(page - 1)
 		}
 		decrementIndexes()
 	}
 
 	// Go to the next page
 	const handleNextPage = () => {
-		if (selectedPage < pages) {
-			onChange?.(selectedPage + 1)
+		if (page < pages) {
+			onChange?.(page + 1)
 		}
 		incrementIndexes()
 	}
@@ -149,8 +149,8 @@ const Pagination: React.FC<PaginationProps> = ({
 	}
 
 	// Handle clicking on a page number
-	const handlePageClick = (page?: number) => {
-		onChange?.(page ?? 1)
+	const handlePageClick = (clickedPage?: number) => {
+		onChange?.(clickedPage ?? 1)
 		setPageClickCounter(pageClickCounter + 1)
 	}
 
@@ -166,7 +166,7 @@ const Pagination: React.FC<PaginationProps> = ({
 		handleSkipToLastPage,
 		handleSkipToFirstPage,
 		pagesArray,
-		selectedPage,
+		selectedPage: page,
 		startIndex,
 		endIndex,
 		pages,

diff --git a/packages/ui/pagination/src/pagination.types.ts b/packages/ui/pagination/src/pagination.types.ts
@@ -50,7 +50,7 @@ interface PaginationProps extends PaginationCommonProps {
 	/**
 	 * The currently Selected Page
 	 */
-	selectedPage?: number
+	page?: number
 	/**
 	 * number of items in a page.
 	 */

diff --git a/packages/ui/pagination/stories/ReactPagination.stories.tsx b/packages/ui/pagination/stories/ReactPagination.stories.tsx
@@ -64,7 +64,7 @@ export const Pagination = (args: PaginationProps): React.ReactNode => {
 						</ul>
 						<SuiPagination
 							{...args}
-							selectedPage={page}
+							page={page}
 							numberOfItems={records.length}
 							onChange={setPage}
 						/>

diff --git a/packages/ui/pagination/stories/tabs/Examples/Examples.tsx b/packages/ui/pagination/stories/tabs/Examples/Examples.tsx
@@ -44,7 +44,7 @@ export const BasicPagination = ({ skip = false }: PaginationProps) => {
 					))}
 				</ul>
 				<Pagination
-					selectedPage={page}
+					page={page}
 					skip={skip}
 					limit={limit}
 					numberOfItems={records.length}

diff --git a/packages/ui/pagination/stories/tabs/TabCode.mdx b/packages/ui/pagination/stories/tabs/TabCode.mdx
@@ -19,10 +19,14 @@ import { Section, Row, Col, Table, List, Code, Tag, PackageInstallGuide, PropSec
     	<p>The screen reader text for the next button</p>
     </PropSection>
 
-    <PropSection title="skip" type="boolean" defaultValue={false}>
+    <PropSection title="skip" type="boolean" defaultValue="false">
     	<p>Whether to allow for skip navigation or not</p>
     </PropSection>
 
+    <PropSection title="page" type="boolean" defaultValue="1">
+    	<p>Currently selected page</p>
+    </PropSection>
+
     <PropSection title="onChange" type="function">
     	<p>A callback function to be invoked when the page gets changed, the first parameter represents the new selected page </p>
     </PropSection>