feat(clay-pagination): allow disabling ellipsis button in pagination

liferay · Feb 3, 2022 · 4e4e84c · 4e4e84c
1 parent d7340f8
commit 4e4e84c
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 7 deletions.
diff --git a/packages/clay-pagination/src/Ellipsis.tsx b/packages/clay-pagination/src/Ellipsis.tsx
@@ -11,6 +11,7 @@ export interface IPaginationEllipsisProps {
 	alignmentPosition?: React.ComponentProps<
 		typeof ClayDropDownWithItems
 	>['alignmentPosition'];
+	disabled?: boolean;
 	disabledPages?: Array<number>;
 	hrefConstructor?: (page?: number) => string;
 	items?: Array<number>;
@@ -20,17 +21,20 @@ export interface IPaginationEllipsisProps {
 const ClayPaginationEllipsis: React.FunctionComponent<IPaginationEllipsisProps> =
 	({
 		alignmentPosition,
+		disabled = false,
 		disabledPages = [],
 		hrefConstructor,
 		items = [],
 		onPageChange,
 	}: IPaginationEllipsisProps) => {
-		const pages = items.map((page) => ({
-			disabled: disabledPages.includes(page),
-			href: hrefConstructor ? hrefConstructor(page) : undefined,
-			label: String(page),
-			onClick: () => onPageChange && onPageChange(page),
-		}));
+		const pages = disabled
+			? []
+			: items.map((page) => ({
+					disabled: disabledPages.includes(page),
+					href: hrefConstructor ? hrefConstructor(page) : undefined,
+					label: String(page),
+					onClick: () => onPageChange && onPageChange(page),
+			  }));
 
 		return (
 			<ClayDropDownWithItems
@@ -39,7 +43,11 @@ const ClayPaginationEllipsis: React.FunctionComponent<IPaginationEllipsisProps>
 				containerElement="li"
 				items={pages}
 				trigger={
-					<ClayButton className="page-link" displayType="unstyled">
+					<ClayButton
+						className="page-link"
+						disabled={disabled}
+						displayType="unstyled"
+					>
 						...
 					</ClayButton>
 				}

diff --git a/packages/clay-pagination/src/PaginationWithBasicItems.tsx b/packages/clay-pagination/src/PaginationWithBasicItems.tsx
@@ -39,6 +39,11 @@ interface IProps extends React.ComponentProps<typeof Pagination> {
 	 */
 	ellipsisBuffer?: number;
 
+	/**
+	 * Flag to disable ellipsis button
+	 */
+	disableEllipsis?: boolean;
+
 	/**
 	 * The page numbers that should be disabled. For example, `[2,5,6]`.
 	 */
@@ -75,6 +80,7 @@ const ClayPaginationWithBasicItems = React.forwardRef<HTMLUListElement, IProps>(
 				next: 'Next',
 				previous: 'Previous',
 			},
+			disableEllipsis = false,
 			disabledPages = [],
 			ellipsisBuffer = ELLIPSIS_BUFFER,
 			hrefConstructor,
@@ -113,6 +119,7 @@ const ClayPaginationWithBasicItems = React.forwardRef<HTMLUListElement, IProps>(
 								EllipsisComponent: Pagination.Ellipsis,
 								ellipsisProps: {
 									alignmentPosition,
+									disabled: disableEllipsis,
 									disabledPages,
 									hrefConstructor,
 									onPageChange,

diff --git a/packages/clay-pagination/src/__tests__/index.tsx b/packages/clay-pagination/src/__tests__/index.tsx
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+import '@testing-library/jest-dom/extend-expect';
 import {ClayPaginationWithBasicItems} from '..';
 import {cleanup, fireEvent, getByText, render} from '@testing-library/react';
 import React from 'react';
@@ -76,6 +77,21 @@ describe('ClayPagination', () => {
 		expect(changeMock).toHaveBeenLastCalledWith(25);
 	});
 
+	it('disable ellipsis when disableEllipsis prop is passed', () => {
+		const {getAllByText} = render(
+			<ClayPaginationWithBasicItems
+				activePage={12}
+				disableEllipsis
+				spritemap={spritemap}
+				totalPages={25}
+			/>
+		);
+
+		getAllByText('...').forEach((ellipsisButton) =>
+			expect(ellipsisButton).toBeDisabled()
+		);
+	});
+
 	it('shows dropdown when ellipsis is clicked', () => {
 		const {getAllByText} = render(
 			<ClayPaginationWithBasicItems