move total items display into perPage component

eventespresso · Jan 2, 2024 · 4519451 · 4519451
1 parent 4fc6ece
commit 4519451
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 30 deletions.
diff --git a/packages/ui-components/src/Pagination/Pagination.tsx b/packages/ui-components/src/Pagination/Pagination.tsx
@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 
 import { Pagination as PaginationAdapter } from '@eventespresso/adapters';
-import { sprintf, __ } from '@eventespresso/i18n';
 import { DEFAULT_LOCALE, DEFAULT_PER_PAGE_OPTIONS } from './constants';
 import ItemRender from './ItemRender';
 import PerPage from './PerPage';
@@ -43,18 +42,8 @@ export const Pagination: React.FC<PaginationProps> = ({
 		/>
 	);
 
-	const totalItemsText =
-		perPage === 9999 || perPage >= total
-			? sprintf(/* translators: %d is total number of items */ __('showing all %d items'), total)
-			: sprintf(
-					/* translators: %1$d is per page value %2$d is total items*/ __('showing %1$d of %2$d items'),
-					perPage,
-					total
-			  );
-
 	return (
 		<div className={className}>
-			<div className='ee-pagination__total-items'>{totalItemsText}</div>
 			<PaginationAdapter
 				pageNumber={pageNumber}
 				defaultCurrent={defaultPageNumber}

diff --git a/packages/ui-components/src/Pagination/PerPage.tsx b/packages/ui-components/src/Pagination/PerPage.tsx
@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import { __ } from '@eventespresso/i18n';
+import { sprintf, __ } from '@eventespresso/i18n';
 import { Select, SelectProps } from '@eventespresso/adapters';
 import { PerPageProps } from './types';
 
@@ -32,21 +32,40 @@ const PerPage: React.FC<PerPageProps> = ({ onChangePerPage, pageNumber, perPage,
 		[onChangePerPage, pageNumber, perPage, total]
 	);
 
+	// Calculate the lower and upper limits of the items being displayed
+	// page 10 x 10 items per page
+	const maxLimit = pageNumber * perPage;
+	// cap if total is less than maxLimit
+	const upperLimit = maxLimit > total ? total : maxLimit;
+	const lowerLimit = maxLimit - perPage + 1;
+	const showingAll = perPage === 9999 || perPage >= total;
+
+	const totalItemsText = sprintf(
+		/* translators: %1$d is first item #, %2$d is last item #, %3$d is total items, ex: 20-30 of 100 items */
+		__('%1$d-%2$d of %3$d items'),
+		showingAll ? 1 : lowerLimit,
+		showingAll ? total : upperLimit,
+		total
+	);
+
 	return (
-		<Select
-			aria-label={__('items per page')}
-			className='ee-select ee-pagination__per-page'
-			onChangeValue={onChangeValue}
-			rootProps={selectRootProps}
-			value={perPage}
-			variant='unstyled'
-		>
-			{Object.entries(perPageOptions).map(([value, label]) => (
-				<option key={value} value={value}>
-					{label}
-				</option>
-			))}
-		</Select>
+		<div className='ee-pagination__per-page-wrapper'>
+			<Select
+				aria-label={__('items per page')}
+				className='ee-select ee-pagination__per-page'
+				onChangeValue={onChangeValue}
+				rootProps={selectRootProps}
+				value={perPage}
+				variant='unstyled'
+			>
+				{Object.entries(perPageOptions).map(([value, label]) => (
+					<option key={value} value={value}>
+						{label}
+					</option>
+				))}
+			</Select>
+			<div className='ee-pagination__total-items'>{totalItemsText}</div>
+		</div>
 	);
 };
 

diff --git a/packages/ui-components/src/Pagination/style.scss b/packages/ui-components/src/Pagination/style.scss
@@ -68,10 +68,6 @@ $border-radius: var(--ee-border-radius-tiny);
 		}
 	}
 
-	&__total-items {
-		margin-inline: var(--ee-margin-small);
-	}
-
 	ul.rc-pagination {
 		display: flex;
 		margin-right: var(--ee-margin-small);
@@ -211,6 +207,12 @@ $border-radius: var(--ee-border-radius-tiny);
 	&__per-page {
 		height: var(--ee-icon-button-size); // 42px
 
+		&-wrapper {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+		}
+
 		&-select-wrapper {
 			.ee-pagination & {
 				width: auto;
@@ -237,4 +239,8 @@ $border-radius: var(--ee-border-radius-tiny);
 			}
 		}
 	}
+
+	&__total-items {
+		margin-inline: var(--ee-margin-tiny);
+	}
 }