add pagination component

src/components/Pagination/Pagination.stories.tsx

@@ -0,0 +1,52 @@
+import { Pagination } from './Pagination';
+
+export default { title: 'Components/Pagination', component: Pagination };
+
+export const _Pagination = {
+ render: () => (
+ <>
+ <Pagination
+ pages={4}
+ currentPage={2}
+ onPageChange={(newPage: number) =>
+ console.log('move to page ' + newPage)
+ }
+ />
+
+ <br />
+ <br />
+ <Pagination
+ pages={40}
+ currentPage={1}
+ onPageChange={(newPage: number) =>
+ console.log('move to page ' + newPage)
+ }
+ />
+
+ <br />
+ <br />
+
+ <Pagination
+ pages={40}
+ currentPage={25}
+ onPageChange={(newPage: number) =>
+ console.log('move to page ' + newPage)
+ }
+ />
+
+ <br />
+ <br />
+
+ <Pagination
+ pages={40}
+ currentPage={38}
+ onPageChange={(newPage: number) =>
+ console.log('move to page ' + newPage)
+ }
+ />
+
+ <br />
+ <br />
+ </>
+ ),
+};

src/components/Pagination/Pagination.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import { Pagination } from './Pagination';
+
+describe('Components | Pagination', () => {
+ test('it should render', () => {
+ render(
+ <Pagination
+ pages={40}
+ currentPage={1}
+ onPageChange={(newPage: number) =>
+ console.log('move to page ' + newPage)
+ }
+ />,
+ );
+
+ let pagination = screen.getByTestId('pagination');
+
+ expect(pagination).toBeTruthy();
+ });
+});

src/components/Pagination/Pagination.tsx

@@ -0,0 +1,144 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import React from 'react';
+
+import { FiChevronRight } from 'react-icons/fi';
+
+function renderPagination(
+ pages: number,
+ currentPage: number,
+ onPageChange: (newPage: number) => void,
+ pageClass: string,
+ currentpageClass: string,
+): React.ReactNode[] {
+ const pagination: React.ReactNode[] = [];
+
+ const isFirstPage = currentPage === 1;
+ const isLastPage = currentPage === pages;
+
+ const addPageLink = (pageNumber: number, className: string): void => {
+ pagination.push(
+ <a
+ onClick={() => onPageChange(pageNumber)}
+ className={className}
+ key={pageNumber}
+ >
+ {pageNumber}
+ </a>,
+ );
+ };
+
+ const addEllipsis = (key: string): void => {
+ pagination.push(
+ <span className={pageClass} key={key}>
+ ...
+ </span>,
+ );
+ };
+
+ addPageLink(1, currentPage === 1 ? currentpageClass : pageClass);
+
+ const MAX_PAGES = 7;
+ const MIN_LEFT_PAGES = 3;
+ const MIN_RIGHT_PAGES = pages - 4;
+
+ if (pages > MAX_PAGES) {
+ if (currentPage > 2 && !isFirstPage) {
+ addEllipsis('startEllipsis');
+ }
+
+ if (isFirstPage) {
+ for (let i = 2; i < 4; i++) {
+ addPageLink(i, i === currentPage ? currentpageClass : pageClass);
+ }
+ } else if (currentPage < MIN_LEFT_PAGES) {
+ for (let i = currentPage; i <= currentPage + 1; i++) {
+ addPageLink(i, i === currentPage ? currentpageClass : pageClass);
+ }
+ } else if (currentPage < MIN_RIGHT_PAGES) {
+ for (let i = currentPage; i < currentPage + 3; i++) {
+ addPageLink(i, i === currentPage ? currentpageClass : pageClass);
+ }
+ } else if (currentPage >= MIN_RIGHT_PAGES) {
+ for (let i = MIN_RIGHT_PAGES; i < pages; i++) {
+ addPageLink(i, i === currentPage ? currentpageClass : pageClass);
+ }
+ }
+
+ if (
+ currentPage + 2 < pages - 1 &&
+ !isLastPage &&
+ currentPage < MIN_RIGHT_PAGES
+ ) {
+ addEllipsis('endEllipsis');
+ }
+
+ if (isFirstPage) {
+ for (let i = pages - 2; i < pages; i++) {
+ const className = i === currentPage ? currentpageClass : pageClass;
+ addPageLink(i, className);
+ }
+ } else if (currentPage < MIN_LEFT_PAGES) {
+ for (let i = pages - 2; i < pages; i++) {
+ const className = i === currentPage ? currentpageClass : pageClass;
+ addPageLink(i, className);
+ }
+ }
+ }
+ if (pages > 1 && pages <= MAX_PAGES) {
+ for (let i = 2; i < pages; i++) {
+ const className = i === currentPage ? currentpageClass : pageClass;
+ addPageLink(i, className);
+ }
+ }
+
+ addPageLink(pages, pages === currentPage ? currentpageClass : pageClass);
+
+ return pagination;
+}
+
+export interface PaginationProps {
+ pages: number;
+ currentPage: number;
+ customClass?: string;
+ onPageChange: (newPage: number) => void;
+}
+
+export function Pagination(props: PaginationProps) {
+ const { pages, currentPage, customClass, onPageChange } = props;
+ const pageClass = 'px-3 py-1 rounded-lg cursor-pointer';
+ const currentpageClass = `${pageClass} bg-f-primary text-f-secondary`;
+
+ const pagination = renderPagination(
+ pages,
+ currentPage,
+ onPageChange,
+ pageClass,
+ currentpageClass,
+ );
+
+ return (
+ <div
+ data-testid="pagination"
+ className={`bg-primary flex items-center text-f-primary ${customClass}`}
+ >
+ <a
+ onClick={() =>
+ currentPage !== 1 ? onPageChange(currentPage - 1) : undefined
+ }
+ className={currentPage !== 1 ? pageClass : 'px-3 py-1 rounded-lg'}
+ >
+ <FiChevronRight className="rotate-180" />
+ </a>
+ {pagination}
+ <a
+ onClick={() =>
+ currentPage !== pages ? onPageChange(currentPage + 1) : undefined
+ }
+ className={currentPage !== pages ? pageClass : 'px-3 py-1 rounded-lg'}
+ >
+ <FiChevronRight />
+ </a>
+ </div>
+ );
+}

src/components/Pagination/index.ts

@@ -0,0 +1 @@
+export * from './Pagination';

src/components/index.ts

@@ -16,3 +16,4 @@ export * from './Identicon';
 export * from './Transaction';
 export * from './Plugin';
 export * from './Description';
+export * from './Pagination';