feat(@clayui/pagination-bar): Add the showDeltasDropDown prop

Adds the ability to render a `ClayPaginationBarWithBasicItems` with no DropDown when the `showDeltasDropDown` is passed as `false` Fixes #4175
liferay · Jul 26, 2021 · 6c65f43 · 6c65f43
1 parent 529c525
commit 6c65f43
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 16 deletions.
diff --git a/packages/clay-pagination-bar/src/PaginationBarWithBasicItems.tsx b/packages/clay-pagination-bar/src/PaginationBarWithBasicItems.tsx
@@ -96,6 +96,11 @@ interface IProps extends React.ComponentProps<typeof PaginationBar> {
 	 */
 	onPageChange?: (page: number) => void;
 
+	/**
+	 * Flags indicating if the DropDown should be rendered.
+	 */
+	showDeltasDropDown?: boolean;
+
 	/**
 	 * Path to spritemap from clay-css.
 	 */
@@ -123,6 +128,7 @@ export const ClayPaginationBarWithBasicItems: React.FunctionComponent<IProps> =
 	labels = DEFAULT_LABELS,
 	onDeltaChange,
 	onPageChange,
+	showDeltasDropDown = true,
 	spritemap,
 	totalItems,
 	...otherProps
@@ -162,22 +168,24 @@ export const ClayPaginationBarWithBasicItems: React.FunctionComponent<IProps> =
 
 	return (
 		<PaginationBar {...otherProps}>
-			<PaginationBar.DropDown
-				items={items}
-				trigger={
-					<ClayButton
-						data-testid="selectPaginationBar"
-						displayType="unstyled"
-					>
-						{sub(labels.perPageItems, [activeDelta])}
-
-						<ClayIcon
-							spritemap={spritemap}
-							symbol="caret-double-l"
-						/>
-					</ClayButton>
-				}
-			/>
+			{showDeltasDropDown && (
+				<PaginationBar.DropDown
+					items={items}
+					trigger={
+						<ClayButton
+							data-testid="selectPaginationBar"
+							displayType="unstyled"
+						>
+							{sub(labels.perPageItems, [activeDelta])}
+
+							<ClayIcon
+								spritemap={spritemap}
+								symbol="caret-double-l"
+							/>
+						</ClayButton>
+					}
+				/>
+			)}
 
 			<PaginationBar.Results>
 				{sub(labels.paginationResults, [

diff --git a/packages/clay-pagination-bar/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-pagination-bar/src/__tests__/__snapshots__/index.tsx.snap
@@ -127,3 +127,111 @@ exports[`ClayPaginationBar renders 1`] = `
   </div>
 </div>
 `;
+
+exports[`ClayPaginationBar renders without a DropDown 1`] = `
+<div>
+  <div
+    class="pagination-bar"
+  >
+    <div
+      class="pagination-results"
+    >
+      Showing 1 to 10 of 100
+    </div>
+    <ul
+      class="pagination pagination-root"
+    >
+      <li
+        class="page-item disabled"
+      >
+        <button
+          aria-label="Previous"
+          class="page-link"
+          data-testid="prevArrow"
+          disabled=""
+          type="button"
+        >
+          <svg
+            class="lexicon-icon lexicon-icon-angle-left"
+            role="presentation"
+          >
+            <use
+              xlink:href="path/to/spritemap#angle-left"
+            />
+          </svg>
+        </button>
+      </li>
+      <li
+        class="page-item active"
+      >
+        <button
+          class="page-link"
+          type="button"
+        >
+          1
+        </button>
+      </li>
+      <li
+        class="page-item"
+      >
+        <button
+          class="page-link"
+          type="button"
+        >
+          2
+        </button>
+      </li>
+      <li
+        class="page-item"
+      >
+        <button
+          class="page-link"
+          type="button"
+        >
+          3
+        </button>
+      </li>
+      <li
+        class="dropdown page-item"
+      >
+        <button
+          class="dropdown-toggle page-link btn btn-unstyled"
+          style=""
+          type="button"
+        >
+          ...
+        </button>
+      </li>
+      <li
+        class="page-item"
+      >
+        <button
+          class="page-link"
+          type="button"
+        >
+          10
+        </button>
+      </li>
+      <li
+        class="page-item"
+      >
+        <button
+          aria-label="Next"
+          class="page-link"
+          data-testid="nextArrow"
+          type="button"
+        >
+          <svg
+            class="lexicon-icon lexicon-icon-angle-right"
+            role="presentation"
+          >
+            <use
+              xlink:href="path/to/spritemap#angle-right"
+            />
+          </svg>
+        </button>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
diff --git a/packages/clay-pagination-bar/src/__tests__/index.tsx b/packages/clay-pagination-bar/src/__tests__/index.tsx
@@ -23,6 +23,18 @@ describe('ClayPaginationBar', () => {
 		expect(container).toMatchSnapshot();
 	});
 
+	it('renders without a DropDown', () => {
+		const {container} = render(
+			<ClayPaginationBarWithBasicItems
+				showDeltasDropDown={false}
+				spritemap={spritemap}
+				totalItems={100}
+			/>
+		);
+
+		expect(container).toMatchSnapshot();
+	});
+
 	it('calls onPageChange when arrow is clicked', () => {
 		const changeMock = jest.fn();
 

diff --git a/packages/clay-pagination-bar/stories/index.tsx b/packages/clay-pagination-bar/stories/index.tsx
@@ -81,4 +81,21 @@ storiesOf('Components|ClayPaginationBar', module)
 				totalItems={number('Number of items: ', 21)}
 			/>
 		);
+	})
+	.add('Without DropDown', () => {
+		const [activePage, setActivePage] = React.useState<number>(3);
+		const [delta, setDelta] = React.useState<number>(5);
+
+		return (
+			<ClayPaginationBarWithBasicItems
+				activeDelta={delta}
+				activePage={activePage}
+				ellipsisBuffer={number('Ellipsis Buffer: ', 3)}
+				onDeltaChange={setDelta}
+				onPageChange={setActivePage}
+				showDeltasDropDown={false}
+				spritemap={spritemap}
+				totalItems={number('Number of items: ', 21)}
+			/>
+		);
 	});