Merge pull request #71 from ChoTotOSS/add-className-prop

Add className props
ChoTotOSS · Feb 16, 2020 · 656f3a4 · 656f3a4
2 parents 6f5dfa2 + ec7015b
commit 656f3a4
Show file tree

Hide file tree

Showing 6 changed files with 199 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -1,18 +1,19 @@
-
 # React Paginating
 
 [![Build Status](https://travis-ci.org/ChoTotOSS/react-paginating.svg?branch=master)](https://travis-ci.org/ChoTotOSS/react-paginating) [![CircleCI](https://circleci.com/gh/davidnguyen179/react-paginating.svg?style=svg)](https://circleci.com/gh/davidnguyen179/react-paginating) [![cypress](https://img.shields.io/badge/cypress-dashboard-brightgreen.svg)](https://dashboard.cypress.io/#/projects/qncx9e/runs)
 
-
 [![CircleCI](https://img.shields.io/npm/dm/react-paginating.svg)](https://img.shields.io/npm/dm/react-paginating.svg) [![codecov](https://codecov.io/gh/ChoTotOSS/react-paginating/branch/master/graph/badge.svg)](https://codecov.io/gh/ChoTotOSS/react-paginating) [![npm version](https://img.shields.io/npm/v/react-paginating.svg?style=flat-square)](https://badge.fury.io/js/react-paginating) [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/ChoTotOSS/react-paginating/blob/master/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
 [![gzip size](http://img.badgesize.io/https://unpkg.com/[email protected]/dist/react-paginating.umd.min.js?compression=gzip&label=gzip%20size&style=flat-square)](https://unpkg.com/[email protected]/dist/) [![module formats](https://img.shields.io/badge/module%20formats-umd,%20cjs,%20es-green.svg?style=flat-square)](https://unpkg.com/[email protected]/dist/) [![Greenkeeper badge](https://badges.greenkeeper.io/ChoTotOSS/react-paginating.svg)](https://greenkeeper.io/) [![Package Quality](https://npm.packagequality.com/shield/react-paginating.svg)](https://packagequality.com/#?package=react-paginating)
 
 [![Package Quality](https://npm.packagequality.com/badge/react-paginating.png)](http://packagequality.com/#?package=react-paginating) 
 
-<hr />
 
-Simple lightweight pagination component.
+## Motivation
+
+During development, we were facing problems supporting server-rendering of our web app & SEO (require pagination links). To solve that, we had to add 2 snippets of code, one to support the server-side and another to support the client-side which lead to being hard for maintenance. Most of the pagination libraries only support client-rendering by attaching event handlers on the pagination button to redirect. Because of that, we created this library which allows flexibly to customize behaviors (attaching event handlers or href attribute) and user interface.
+
+<hr />
 
 <div align="center">
   <img src="https://user-images.githubusercontent.com/6290720/33229010-d65daf4a-d1f8-11e7-851a-7d3e0d454b48.gif" />
@@ -57,6 +58,12 @@ You can check out the basic demo here:
 - Typescript: [https://codesandbox.io/s/9252p34v8r](https://codesandbox.io/s/9252p34v8r)
 - Server-Side Rendering: [https://codesandbox.io/s/vq40kw1yn5](https://codesandbox.io/s/vq40kw1yn5)
 
+```css
+.bg-red {
+  background-color: red;
+}
+```
+
 ```js
 import React from 'react';
 import { render } from 'react-dom';
@@ -95,6 +102,7 @@ class App extends React.Component {
           {fruits[currentPage - 1].map(item => <li key={item}>{item}</li>)}
         </ul>
         <Pagination
+          className="bg-red"
           total={total}
           limit={limit}
           pageCount={pageCount}
@@ -193,6 +201,12 @@ render(<App />, document.getElementById('root'));
 
 Total results
 
+### className
+
+> `string`
+
+Customizable style for pagination wrapper
+
 ### limit
 
 > `number`

diff --git a/...typed/npm/react-paginating_v1.x.x.js.flow → flow-typed/react-paginating_v1.x.x.js.flow b/...typed/npm/react-paginating_v1.x.x.js.flow → flow-typed/react-paginating_v1.x.x.js.flow
@@ -1,12 +1,15 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.5.8
- * Author: [Joar Wilk](http://twitter.com/joarwilk)
- * Repo: http://github.com/joarwilk/flowgen
+ * Flowgen v1.10.0
  */
 
 import * as React from "react";
+export type PaginationItemProps<T: HTMLElement = HTMLElement> = Omit<
+  PaginationProps,
+  "children"
+> &
+  React.HTMLAttributes<T>;
 export interface PaginationState {
   pages: number[];
   previousPage: number;
@@ -15,16 +18,22 @@ export interface PaginationState {
   currentPage: number;
   hasNextPage: boolean;
   hasPreviousPage: boolean;
-  getPageItemProps: (props: any) => void;
+  getPageItemProps: <T: HTMLElement>(
+    props: PaginationItemProps<T>
+  ) => PaginationItemProps<T> & {
+    onClick: (event: React.MouseEvent) => void,
+    ...
+  };
 }
 export interface PaginationProps {
   total: number;
   children: (props: PaginationState) => React.ReactNode;
+  className?: string;
   limit?: number;
   pageCount?: number;
   currentPage?: number;
   pageValue?: number;
-  onPageChange?: (page?: number) => void;
+  onPageChange?: (page?: number, event?: React.MouseEvent) => void;
 }
-declare function Pagination(props: any): React.SFC<PaginationProps>;
+declare var Pagination: React.ComponentType<PaginationProps>;
 declare export default typeof Pagination;
diff --git a/src/Pagination/Pagination.js b/src/Pagination/Pagination.js
@@ -25,7 +25,7 @@ function Pagination(props) {
     };
   };
 
-  const { total, limit, pageCount } = props;
+  const { total, limit, pageCount, className } = props;
 
   const pageInfo = getPageInfo({
     limit,
@@ -39,7 +39,7 @@ function Pagination(props) {
   const pages = total > 0 ? getRange(firstPage, lastPage) : [];
 
   return (
-    <div>
+    <div className={className}>
       {props.children({
         pages,
         previousPage,
@@ -56,6 +56,7 @@ function Pagination(props) {
 
 Pagination.propTypes = {
   total: PropTypes.number.isRequired,
+  className: PropTypes.string,
   limit: PropTypes.number,
   pageCount: PropTypes.number,
   currentPage: PropTypes.number,

diff --git a/src/Pagination/__tests__/Pagination.snapshot.test.js b/src/Pagination/__tests__/Pagination.snapshot.test.js
@@ -178,4 +178,92 @@ describe('Pagination render page items', () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  it('should render page items 2 -> 6 & contains className props', () => {
+    const total = 90;
+    const limit = 10;
+    const currentPage = 4;
+    const tree = renderer
+      .create(
+        <Pagination
+          className='bg-red'
+          total={total}
+          limit={limit}
+          pageCount={5}
+          currentPage={currentPage}
+        >
+          {({
+            pages,
+            currentPage,
+            hasNextPage,
+            hasPreviousPage,
+            previousPage,
+            nextPage,
+            totalPages,
+            getPageItemProps
+          }) => (
+            <div>
+              <div>
+                <a
+                  {...getPageItemProps({ pageValue: 1 })}
+                  id="page_first"
+                  href="1"
+                >
+                  first
+                </a>
+
+                {hasPreviousPage && (
+                  <a
+                    {...getPageItemProps({
+                      pageValue: previousPage
+                    })}
+                    id="page_prev"
+                    href={`${previousPage}`}
+                  >
+                    {'<'}
+                  </a>
+                )}
+
+                {pages.map(page => {
+                  let activePage = null;
+                  if (currentPage === page) {
+                    activePage = { backgroundColor: '#fdce09' };
+                  }
+                  return (
+                    <a
+                      id={`page_${page}`}
+                      key={page}
+                      href={`${page}`}
+                      {...getPageItemProps({ pageValue: page })}
+                    >
+                      {page}
+                    </a>
+                  );
+                })}
+
+                {hasNextPage && (
+                  <a
+                    {...getPageItemProps({ pageValue: nextPage })}
+                    id="page_next"
+                    href={`${nextPage}`}
+                  >
+                    {'>'}
+                  </a>
+                )}
+
+                <a
+                  {...getPageItemProps({ pageValue: totalPages })}
+                  id="page_last"
+                  href={`${totalPages}`}
+                >
+                  last
+                </a>
+              </div>
+            </div>
+          )}
+        </Pagination>
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/src/Pagination/__tests__/__snapshots__/Pagination.snapshot.test.js.snap b/src/Pagination/__tests__/__snapshots__/Pagination.snapshot.test.js.snap
@@ -65,6 +65,80 @@ exports[`Pagination render page items should render page items 1 -> 5 1`] = `
 </div>
 `;
 
+exports[`Pagination render page items should render page items 2 -> 6 & contains className props 1`] = `
+<div
+  className="bg-red"
+>
+  <div>
+    <div>
+      <a
+        href="1"
+        id="page_first"
+        onClick={[Function]}
+      >
+        first
+      </a>
+      <a
+        href="3"
+        id="page_prev"
+        onClick={[Function]}
+      >
+        &lt;
+      </a>
+      <a
+        href="2"
+        id="page_2"
+        onClick={[Function]}
+      >
+        2
+      </a>
+      <a
+        href="3"
+        id="page_3"
+        onClick={[Function]}
+      >
+        3
+      </a>
+      <a
+        href="4"
+        id="page_4"
+        onClick={[Function]}
+      >
+        4
+      </a>
+      <a
+        href="5"
+        id="page_5"
+        onClick={[Function]}
+      >
+        5
+      </a>
+      <a
+        href="6"
+        id="page_6"
+        onClick={[Function]}
+      >
+        6
+      </a>
+      <a
+        href="5"
+        id="page_next"
+        onClick={[Function]}
+      >
+        &gt;
+      </a>
+      <a
+        href="9"
+        id="page_last"
+        onClick={[Function]}
+      >
+        last
+      </a>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Pagination render page items should render page items 2 -> 6 1`] = `
 <div>
   <div>

diff --git a/typings/index.d.ts b/typings/index.d.ts
@@ -19,6 +19,7 @@ export interface PaginationState {
 export interface PaginationProps {
   total: number;
   children: (props: PaginationState) => React.ReactNode;
+  className?: string;
   limit?: number;
   pageCount?: number;
   currentPage?: number;