Merge pull request #89 from makotot/pagination

pagination

cypress/integration/Pagination/config.ts

@@ -0,0 +1,11 @@
+export const TEST_ID = {
+  CURRENT_PAGE: '#currentPage',
+  TOTAL_PAGE: '#totalPage',
+  PAGE_ITEMS: '.pageItems',
+  HAS_PREV: '#hasPrev',
+  HAS_NEXT: '#hasNext',
+  FIRST_BOUNDARY: '.firstBoundary',
+  LAST_BOUNDARY: '.lastBoundary',
+  IS_PREV_TRUNCATED: '#isPrevTruncated',
+  IS_NEXT_TRUNCATED: '#isNextTruncated',
+} as const;

cypress/integration/Pagination/currentPage_10_totalPage_10.test.ts

@@ -0,0 +1,36 @@
+import { TEST_ID } from './config';
+
+describe('Pagination', () => {
+  describe('Current page: 10 / Total page: 10', () => {
+    beforeEach(() => {
+      cy.visit('/pagination/currentpage-10-totalpage-10');
+    });
+    it('renders current page as 10', () => {
+      cy.get(TEST_ID.CURRENT_PAGE).should('have.text', 10);
+    });
+    it('renders total page as 10', () => {
+      cy.get(TEST_ID.TOTAL_PAGE).should('have.text', 10);
+    });
+    it('renders 5 page items', () => {
+      cy.get(TEST_ID.PAGE_ITEMS).should('have.length', 5);
+    });
+    it('render prev link', () => {
+      cy.get(TEST_ID.HAS_PREV).should('exist');
+    });
+    it('does not render next link', () => {
+      cy.get(TEST_ID.HAS_NEXT).should('not.exist');
+    });
+    it('render first boundary', () => {
+      cy.get(TEST_ID.FIRST_BOUNDARY).should('have.length', 2);
+    });
+    it('does not render last boundary', () => {
+      cy.get(TEST_ID.LAST_BOUNDARY).should('not.exist');
+    });
+    it('render prev truncated', () => {
+      cy.get(TEST_ID.IS_PREV_TRUNCATED).should('exist');
+    });
+    it('does not render next truncated', () => {
+      cy.get(TEST_ID.IS_NEXT_TRUNCATED).should('not.exist');
+    });
+  });
+});

cypress/integration/Pagination/currentPage_1_totalPage_1.test.ts

@@ -0,0 +1,36 @@
+import { TEST_ID } from './config';
+
+describe('Pagination', () => {
+  describe('Current page: 1 / Total page: 1', () => {
+    beforeEach(() => {
+      cy.visit('/pagination/currentpage-1-totalpage-1');
+    });
+    it('renders current page as 1', () => {
+      cy.get(TEST_ID.CURRENT_PAGE).should('have.text', 1);
+    });
+    it('renders total page as 1', () => {
+      cy.get(TEST_ID.TOTAL_PAGE).should('have.text', 1);
+    });
+    it('renders 1 page item', () => {
+      cy.get(TEST_ID.PAGE_ITEMS).should('have.length', 1);
+    });
+    it('does not render prev link', () => {
+      cy.get(TEST_ID.HAS_PREV).should('not.exist');
+    });
+    it('does not render next link', () => {
+      cy.get(TEST_ID.HAS_NEXT).should('not.exist');
+    });
+    it('does not render first boundary', () => {
+      cy.get(TEST_ID.FIRST_BOUNDARY).should('not.exist');
+    });
+    it('does not render last boundary', () => {
+      cy.get(TEST_ID.LAST_BOUNDARY).should('not.exist');
+    });
+    it('does not render prev truncated', () => {
+      cy.get(TEST_ID.IS_PREV_TRUNCATED).should('not.exist');
+    });
+    it('does not render next truncated', () => {
+      cy.get(TEST_ID.IS_NEXT_TRUNCATED).should('not.exist');
+    });
+  });
+});

cypress/integration/Pagination/currentPage_1_totalPage_10.test.ts

@@ -0,0 +1,36 @@
+import { TEST_ID } from './config';
+
+describe('Pagination', () => {
+  describe('Current page: 1 / Total page: 10', () => {
+    beforeEach(() => {
+      cy.visit('/pagination/currentpage-1-totalpage-10');
+    });
+    it('renders current page as 1', () => {
+      cy.get(TEST_ID.CURRENT_PAGE).should('have.text', 1);
+    });
+    it('renders total page as 10', () => {
+      cy.get(TEST_ID.TOTAL_PAGE).should('have.text', 10);
+    });
+    it('renders 5 page items', () => {
+      cy.get(TEST_ID.PAGE_ITEMS).should('have.length', 5);
+    });
+    it('does not render prev link', () => {
+      cy.get(TEST_ID.HAS_PREV).should('not.exist');
+    });
+    it('render next link', () => {
+      cy.get(TEST_ID.HAS_NEXT).should('exist');
+    });
+    it('does not render first boundary', () => {
+      cy.get(TEST_ID.FIRST_BOUNDARY).should('not.exist');
+    });
+    it('render last boundary', () => {
+      cy.get(TEST_ID.LAST_BOUNDARY).should('have.length', 2);
+    });
+    it('does not render prev truncated', () => {
+      cy.get(TEST_ID.IS_PREV_TRUNCATED).should('not.exist');
+    });
+    it('render next truncated', () => {
+      cy.get(TEST_ID.IS_NEXT_TRUNCATED).should('exist');
+    });
+  });
+});

cypress/integration/Pagination/currentPage_1_totalPage_10_boundarySize_3.test.ts

@@ -0,0 +1,36 @@
+import { TEST_ID } from './config';
+
+describe('Pagination', () => {
+  describe('Current page: 1 / Total page: 10 / Boundary size: 3', () => {
+    beforeEach(() => {
+      cy.visit('/pagination/currentpage-1-totalpage-10-boundarysize-3');
+    });
+    it('renders current page as 1', () => {
+      cy.get(TEST_ID.CURRENT_PAGE).should('have.text', 1);
+    });
+    it('renders total page as 10', () => {
+      cy.get(TEST_ID.TOTAL_PAGE).should('have.text', 10);
+    });
+    it('renders 5 page items', () => {
+      cy.get(TEST_ID.PAGE_ITEMS).should('have.length', 5);
+    });
+    it('does not render prev link', () => {
+      cy.get(TEST_ID.HAS_PREV).should('not.exist');
+    });
+    it('render next link', () => {
+      cy.get(TEST_ID.HAS_NEXT).should('exist');
+    });
+    it('does not render first boundary', () => {
+      cy.get(TEST_ID.FIRST_BOUNDARY).should('not.exist');
+    });
+    it('render 3 last boundary items', () => {
+      cy.get(TEST_ID.LAST_BOUNDARY).should('have.length', 3);
+    });
+    it('does not render prev truncated', () => {
+      cy.get(TEST_ID.IS_PREV_TRUNCATED).should('not.exist');
+    });
+    it('render next truncated', () => {
+      cy.get(TEST_ID.IS_NEXT_TRUNCATED).should('exist');
+    });
+  });
+});

cypress/integration/Pagination/currentPage_1_totalPage_10_siblingSize_3.test.ts

@@ -0,0 +1,36 @@
+import { TEST_ID } from './config';
+
+describe('Pagination', () => {
+  describe('Current page: 1 / Total page: 10 / Sibling size: 3', () => {
+    beforeEach(() => {
+      cy.visit('/pagination/currentpage-1-totalpage-10-siblingsize-3');
+    });
+    it('renders current page as 1', () => {
+      cy.get(TEST_ID.CURRENT_PAGE).should('have.text', 1);
+    });
+    it('renders total page as 10', () => {
+      cy.get(TEST_ID.TOTAL_PAGE).should('have.text', 10);
+    });
+    it('renders 7 page items', () => {
+      cy.get(TEST_ID.PAGE_ITEMS).should('have.length', 7);
+    });
+    it('does not render prev link', () => {
+      cy.get(TEST_ID.HAS_PREV).should('not.exist');
+    });
+    it('render next link', () => {
+      cy.get(TEST_ID.HAS_NEXT).should('exist');
+    });
+    it('does not render first boundary', () => {
+      cy.get(TEST_ID.FIRST_BOUNDARY).should('not.exist');
+    });
+    it('render last boundary', () => {
+      cy.get(TEST_ID.LAST_BOUNDARY).should('have.length', 2);
+    });
+    it('does not render prev truncated', () => {
+      cy.get(TEST_ID.IS_PREV_TRUNCATED).should('not.exist');
+    });
+    it('render next truncated', () => {
+      cy.get(TEST_ID.IS_NEXT_TRUNCATED).should('exist');
+    });
+  });
+});

cypress/integration/Pagination/currentPage_5_totalPage_10.test.ts

@@ -0,0 +1,36 @@
+import { TEST_ID } from './config';
+
+describe('Pagination', () => {
+  describe('Current page: 5 / Total page: 10', () => {
+    beforeEach(() => {
+      cy.visit('/pagination/currentpage-5-totalpage-10');
+    });
+    it('renders current page as 5', () => {
+      cy.get(TEST_ID.CURRENT_PAGE).should('have.text', 5);
+    });
+    it('renders total page as 10', () => {
+      cy.get(TEST_ID.TOTAL_PAGE).should('have.text', 10);
+    });
+    it('renders 5 page items', () => {
+      cy.get(TEST_ID.PAGE_ITEMS).should('have.length', 5);
+    });
+    it('render prev link', () => {
+      cy.get(TEST_ID.HAS_PREV).should('exist');
+    });
+    it('render next link', () => {
+      cy.get(TEST_ID.HAS_NEXT).should('exist');
+    });
+    it('render first boundary', () => {
+      cy.get(TEST_ID.FIRST_BOUNDARY).should('have.length', 2);
+    });
+    it('render last boundary', () => {
+      cy.get(TEST_ID.LAST_BOUNDARY).should('have.length', 2);
+    });
+    it('does not render prev truncated', () => {
+      cy.get(TEST_ID.IS_PREV_TRUNCATED).should('not.exist');
+    });
+    it('render next truncated', () => {
+      cy.get(TEST_ID.IS_NEXT_TRUNCATED).should('exist');
+    });
+  });
+});

example/components/Pagination/Base.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { Pagination } from '../../../src';
+
+export const Base: React.FC<{
+  currentPage?: number;
+  totalPage?: number;
+  middlePagesSiblingCount?: number;
+  edgePageCount?: number;
+}> = ({
+  currentPage = 1,
+  totalPage = 10,
+  middlePagesSiblingCount,
+  edgePageCount,
+}) => {
+  const [currentPageState, updateCurrentPage] = useState(currentPage);
+  const handleChangeCurrentPage = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    const page = (e.currentTarget as HTMLElement).dataset.page;
+    updateCurrentPage(Number(page));
+  };
+  return (
+    <Pagination
+      currentPage={currentPageState}
+      totalPage={totalPage}
+      middlePagesSiblingCount={middlePagesSiblingCount}
+      edgePageCount={edgePageCount}
+    >
+      {props => (
+        <div>
+          <div>
+            currentpage: <div id="currentPage">{props.currentPage}</div>
+            totalpage: <div id="totalPage">{props.totalPage}</div>
+          </div>
+          <div
+            style={{
+              display: 'grid',
+              gridAutoFlow: 'column',
+            }}
+          >
+            {props.hasPreviousPage() && (
+              <a
+                href="#prev"
+                id="hasPrev"
+                data-page={props.currentPage - 1}
+                onClick={handleChangeCurrentPage}
+              >
+                prev
+              </a>
+            )}
+            {props.getPreviousPages().map(boundary => {
+              return (
+                <span key={boundary} className="firstBoundary">
+                  {boundary}
+                </span>
+              );
+            })}
+            {props.isPreviousTruncable() && <div id="isPrevTruncated">...</div>}
+            <div>
+              {props.getMiddlePages().map(page => {
+                return page === props.currentPage ? (
+                  <span
+                    key={page}
+                    style={{
+                      fontWeight: 'bold',
+                      fontSize: '120%',
+                    }}
+                    className="pageItems"
+                  >
+                    {page}
+                  </span>
+                ) : (
+                  <a
+                    href="#page"
+                    key={page}
+                    className="pageItems"
+                    data-page={page}
+                    onClick={handleChangeCurrentPage}
+                  >
+                    {page}
+                  </a>
+                );
+              })}
+            </div>
+            {props.isNextTruncable() && <div id="isNextTruncated">...</div>}
+            {props.getNextPages().map(boundary => {
+              return (
+                <span key={boundary} className="lastBoundary">
+                  {boundary}
+                </span>
+              );
+            })}
+            {props.hasNextPage() && (
+              <a
+                href="#next"
+                id="hasNext"
+                data-page={props.currentPage + 1}
+                onClick={handleChangeCurrentPage}
+              >
+                next
+              </a>
+            )}
+          </div>
+        </div>
+      )}
+    </Pagination>
+  );
+};

example/components/Pagination/CurrentPage_10_TotalPage_10.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Base } from './Base';
+
+export const CurrentPage10TotalPage10: React.FC = () => {
+  return <Base currentPage={10} totalPage={10} />;
+};

example/components/Pagination/CurrentPage_1_TotalPage_1.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Base } from './Base';
+
+export const CurrentPage1TotalPage1: React.FC = () => {
+  return <Base currentPage={1} totalPage={1} />;
+};

example/components/Pagination/CurrentPage_1_TotalPage_10.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Base } from './Base';
+
+export const CurrentPage1TotalPage10: React.FC = () => {
+  return <Base currentPage={1} totalPage={10} />;
+};

example/components/Pagination/CurrentPage_1_TotalPage_10_BoundarySize_3.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Base } from './Base';
+
+export const CurrentPage1TotalPage10BoundarySize3: React.FC = () => {
+  return <Base currentPage={1} totalPage={10} edgePageCount={3} />;
+};

example/components/Pagination/CurrentPage_1_TotalPage_10_SiblingSize_3.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Base } from './Base';
+
+export const CurrentPage1TotalPage10SiblingSize3: React.FC = () => {
+  return <Base currentPage={1} totalPage={10} middlePagesSiblingCount={3} />;
+};

example/components/Pagination/CurrentPage_5_TotalPage_10.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Base } from './Base';
+
+export const CurrentPage5TotalPage10: React.FC = () => {
+  return <Base currentPage={5} totalPage={10} />;
+};