widenarrow-ui 1.0.48 → 1.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "widenarrow-ui",
-	"version": "1.0.48",
+	"version": "1.0.49",
 	"description": "A storybook 6 typeScript component library used for Wide Narrow by infodesk",
 	"main": "lib/index.js",
 	"module": "lib/index.esm.js",

package/src/components/Pagination/Pagination.tsx

@@ -21,15 +21,19 @@ const s = classNames.bind(styles);
 const Pagination: FC<PaginationProps> = ({
 	className,
 	pagination,
-	onPaginate,
 	slim,
-	onPageSizeChange,
+	onChange,
 	buttonType = HierarchyTypes.SECONDARY,
-	tablePagination,
+	pageSizeOptions = [10, 20, 30, 40, 50, 80, 100],
+	firstPageTitle,
 	previousPageTitle,
 	nextPageTitle,
+	lastPageTitle,
 	pageSizeTitleCallback,
-	tableIntervalTitleCallback
+	tableIntervalTitleCallback,
+	withTablePagination,
+	withFastForwardButtons,
+	withPageSizeChange
 }) => {
 	if (!pagination) {
 		return null;
@@ -41,6 +45,7 @@ const Pagination: FC<PaginationProps> = ({
 		: is(Number, pagination.numberOfPages)
 		? pagination.numberOfPages
 		: 0;
+
 	const isLastPage = pagination.currentPage >= numberOfPages;
 
 	const itemClassName = s('item', { item_slim: slim });
@@ -48,10 +53,6 @@ const Pagination: FC<PaginationProps> = ({
 	const buttonClassName = (additionalClassName?: string) =>
 		s('button', { button_slim: slim, [additionalClassName as string]: additionalClassName });
 
-	if (numberOfPages < 2) {
-		return null;
-	}
-
 	if (pagination.fetching && !numberOfPages) {
 		return (
 			<ul className={s('container', { [className as string]: className })}>
@@ -82,40 +83,79 @@ const Pagination: FC<PaginationProps> = ({
 		);
 	};
 
+	const firstPageButton = withFastForwardButtons ? (
+		<li>
+			<button
+				title={firstPageTitle || 'First page'}
+				className={buttonClassName(isFirstPage ? 'button_disabled' : undefined)}
+				onClick={() => {
+					onChange({ ...pagination, currentPage: 1 });
+				}}
+				disabled={isFirstPage}
+			>
+				<Icon icon={IconTypes.ARROW_FIRST_PAGE} />
+			</button>
+		</li>
+	) : null;
+
+	const previousPageButton = (
+		<li className={itemClassName}>
+			<button
+				title={previousPageTitle || 'Previous page'}
+				className={buttonClassName(isFirstPage ? 'button_disabled' : undefined)}
+				onClick={() => {
+					!isFirstPage && onChange({ ...pagination, currentPage: pagination.currentPage - 1 });
+				}}
+				disabled={isFirstPage}
+			>
+				<Icon icon={IconTypes.CHEVRON_LEFT} />
+			</button>
+		</li>
+	);
+
+	const nextPageButton = (
+		<li className={itemClassName}>
+			<button
+				title={nextPageTitle || 'Next page'}
+				className={buttonClassName(isLastPage ? 'button_disabled' : undefined)}
+				onClick={() => {
+					onChange({ ...pagination, currentPage: pagination.currentPage + 1 });
+				}}
+				disabled={isLastPage}
+			>
+				<Icon icon={IconTypes.CHEVRON_RIGHT} />
+			</button>
+		</li>
+	);
+
+	const lastPageButton = withFastForwardButtons ? (
+		<li>
+			<button
+				title={lastPageTitle || 'Last page'}
+				className={buttonClassName(isLastPage ? 'button_disabled' : undefined)}
+				onClick={() => {
+					onChange({ ...pagination, currentPage: pagination.numberOfPages });
+				}}
+				disabled={isLastPage}
+			>
+				<Icon icon={IconTypes.ARROW_LAST_PAGE} />
+			</button>
+		</li>
+	) : null;
+
 	/*
 		paginationMarkup
 	*/
 	const paginationMarkup = () => {
-		if (tablePagination) {
+		if (withTablePagination) {
 			return (
 				<Box alignItems={'center'}>
 					<ul className={s('container', { [className as string]: className })}>
-						<li className={itemClassName}>
-							<button
-								title={previousPageTitle || 'Previous page'}
-								className={buttonClassName(isFirstPage ? 'button_disabled' : undefined)}
-								onClick={() => {
-									!isFirstPage && onPaginate(pagination.currentPage - 1);
-								}}
-								disabled={isFirstPage}
-							>
-								<Icon icon={IconTypes.CHEVRON_LEFT} />
-							</button>
-						</li>
-						<li className={itemClassName}>
-							<button
-								title={nextPageTitle || 'Next page'}
-								className={buttonClassName(isLastPage ? 'button_disabled' : undefined)}
-								onClick={() => {
-									onPaginate(pagination.currentPage + 1);
-								}}
-								disabled={isLastPage}
-							>
-								<Icon icon={IconTypes.CHEVRON_RIGHT} />
-							</button>
-						</li>
+						{firstPageButton}
+						{previousPageButton}
+						{nextPageButton}
+						{lastPageButton}
 					</ul>
-
 					{getPageInfoText()}
 				</Box>
 			);
@@ -123,18 +163,8 @@ const Pagination: FC<PaginationProps> = ({
 
 		return (
 			<ul className={s('container', { [className as string]: className })}>
-				<li className={itemClassName}>
-					<button
-						title={previousPageTitle || 'Previous page'}
-						className={buttonClassName(isFirstPage ? 'button_disabled' : undefined)}
-						onClick={() => {
-							!isFirstPage && onPaginate(pagination.currentPage - 1);
-						}}
-						disabled={isFirstPage}
-					>
-						<Icon icon={IconTypes.CHEVRON_LEFT} />
-					</button>
-				</li>
+				{firstPageButton}
+				{previousPageButton}
 				{getPaginationArray(pagination).map((pageObject, index) => {
 					if (pageObject.type === 'dots') {
 						return (
@@ -149,7 +179,7 @@ const Pagination: FC<PaginationProps> = ({
 								title={`Go to page ${pageObject.page}`}
 								className={buttonClassName(pageObject.page === pagination.currentPage ? 'button_isActive' : undefined)}
 								onClick={() => {
-									onPaginate(pageObject.page);
+									onChange({ ...pagination, currentPage: pageObject.page });
 								}}
 							>
 								{pageObject.page}
@@ -157,38 +187,25 @@ const Pagination: FC<PaginationProps> = ({
 						</li>
 					);
 				})}
-				<li className={itemClassName}>
-					<button
-						title={nextPageTitle || 'Next page'}
-						className={buttonClassName(isLastPage ? 'button_disabled' : undefined)}
-						onClick={() => {
-							onPaginate(pagination.currentPage + 1);
-						}}
-						disabled={isLastPage}
-					>
-						<Icon icon={IconTypes.CHEVRON_RIGHT} />
-					</button>
-				</li>
+				{nextPageButton}
+				{lastPageButton}
 			</ul>
 		);
 	};
 
-	/*
-	pageSizeMarkup
-	*/
 	const sizeTitle = pageSizeTitleCallback ? pageSizeTitleCallback({ pageSize: pagination.pageSize }) : `Page size: ${pagination.pageSize}`;
 
 	const pageSizeMarkup = () =>
-		onPageSizeChange ? (
+		withPageSizeChange ? (
 			<Fragment>
 				<Separator marginX={'15'} />
 				<DropDown buttonComponent={<InlineButton type={buttonType} text={sizeTitle} />} title={sizeTitle}>
-					{[10, 20, 30, 40, 50, 80, 100]
+					{pageSizeOptions
 						.filter((pageSize) => pageSize < pagination.numberOfHits)
 						.map((pageSize) => (
 							<DropDownItem
 								text={pageSize.toString()}
-								onClickCallback={() => onPageSizeChange(pageSize)}
+								onClickCallback={() => onChange({ ...pagination, pageSize })}
 								active={pagination.pageSize === pageSize}
 								closeDropDownOnClick
 								withEllipsis

package/src/components/Pagination/Pagination.types.ts

@@ -3,14 +3,18 @@ import { SearchResultInterface } from '../../types/common.types';
 
 export interface PaginationProps {
 	pagination: SearchResultInterface;
-	onPaginate: (page: number) => void;
-	onPageSizeChange?: (pageSize: number) => void;
+	onChange: (searchResult: SearchResultInterface) => void;
 	slim?: boolean;
-	tablePagination?: boolean;
+	withPageSizeChange?: boolean;
+	withTablePagination?: boolean;
+	withFastForwardButtons: boolean;
+	pageSizeOptions?: Array<number>;
 	buttonType?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
 	className?: string;
 	nextPageTitle?: string;
 	previousPageTitle?: string;
+	firstPageTitle?: string;
+	lastPageTitle?: string;
 	pageSizeTitleCallback?: (args: { pageSize: number }) => string;
 	tableIntervalTitleCallback?: (args: { start: number; end: number; total: number }) => string;
 }