diff --git a/README.md b/README.md index d4a54fc..4c9db8a 100644 --- 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/react-paginating@1.2.1/dist/react-paginating.umd.min.js?compression=gzip&label=gzip%20size&style=flat-square)](https://unpkg.com/react-paginating@1.2.1/dist/) [![module formats](https://img.shields.io/badge/module%20formats-umd,%20cjs,%20es-green.svg?style=flat-square)](https://unpkg.com/react-paginating@1.2.1/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) -
-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. + +
@@ -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 =>
  • {item}
    • )} , document.getElementById('root')); Total results +### className + +> `string` + +Customizable style for pagination wrapper + ### limit > `number` diff --git a/flow-typed/npm/react-paginating_v1.x.x.js.flow b/flow-typed/react-paginating_v1.x.x.js.flow similarity index 54% rename from flow-typed/npm/react-paginating_v1.x.x.js.flow rename to flow-typed/react-paginating_v1.x.x.js.flow index 1d0ae41..abc7499 100644 --- a/flow-typed/npm/react-paginating_v1.x.x.js.flow +++ b/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 = Omit< + PaginationProps, + "children" +> & + React.HTMLAttributes; 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: ( + props: PaginationItemProps + ) => PaginationItemProps & { + 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; +declare var Pagination: React.ComponentType; declare export default typeof Pagination; diff --git a/src/Pagination/Pagination.js b/src/Pagination/Pagination.js index 0bec111..dd68599 100644 --- 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 ( -
    +
    {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 index 8e2181b..767515a 100644 --- 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( + + {({ + pages, + currentPage, + hasNextPage, + hasPreviousPage, + previousPage, + nextPage, + totalPages, + getPageItemProps + }) => ( +
    +
    + + first + + + {hasPreviousPage && ( + + {'<'} + + )} + + {pages.map(page => { + let activePage = null; + if (currentPage === page) { + activePage = { backgroundColor: '#fdce09' }; + } + return ( + + {page} + + ); + })} + + {hasNextPage && ( + + {'>'} + + )} + + + last + +
    +
    + )} +     + ) + .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 index e50f165..52104a9 100644 --- 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`] = `
    `; +exports[`Pagination render page items should render page items 2 -> 6 & contains className props 1`] = ` + +`; + exports[`Pagination render page items should render page items 2 -> 6 1`] = `
    diff --git a/typings/index.d.ts b/typings/index.d.ts index c7341f6..9ed5a5d 100644 --- 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;