pagination logic is updated, and better READ.me

README.md

@@ -1,40 +1,65 @@
-##  pagination-with-react
+# Project Title
 
+React Pagination
 
-## Installation
-Run the following command:
-`npm install pagination-with-react`
+### Documentation
+Props
 
-## Usage
-  import { ReactPagination  } from 'pagination-with-react';
-# Props:
-```
-  totalItems [required]
-  numberOfItemsPerPage  [required]
-  numberOfPagesPerScreen [required]
-  totalNumberOfPages = round(totalItems / numberOfItemsPerPage); [required]
-  totalScreensNumber = round(totalNumberOfPages / numberOfPagesPerScreen); [required]
-  onPageButtonClick [required]
-  currentActiveIndex [required]
+ Prop | Type
+---------|---------
+currentActiveIndex | Number
+children | children app
+numberOfPagesPerScreen| Number, How many pages numbers should user see per screen?
+totalNumberOfPages | Number, Total number of pages
+onPageButtonClick| Function, callback function for onClick pagination button to get the current page number
+prefix | String or React Component, if you want to add anything before pagination buttons
+suffix| String or React Component, if you want to add anything after pagination buttons
+icons | Object with keys `left, leftMost, right, rightMost `  if you want to change the icons of a arrow
 
 ```
+Icons Default Values
+icons: {
+  left: <span>&larr;</span>,
+  leftMost: <span>&#8647;</span>,
+  right: <span>&rarr;</span>,
+  rightMost: <span>&#8649;</span>,
+}
+```
+
 
-# Basic Example
+### Installing
+
+npm install pagination-with-react
 
 ```
-  import { ReactPagination  } from 'pagination-with-react';
-  <ReactPagination 
-    totalScreensNumber={totalScreensNumber}
-    totalNumberOfPages={totalNumberOfPages}
-    numberOfPagesPerScreen={numberOfPagesPerScreen}
-    onPageButtonClick={(data) => {
-      this.setState({
-        data,
-      })
-    }}
-    currentActiveIndex={this.state.id}
-  >
-    {this.state.data}
-  </ReactPagination>
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ReactPagination  } from 'pagination-with-react';
+
+class App extends React.Component{
+  constructor(){
+    super()
+    this.state={
+      id: 1,
+    }
+  }
+  render() {
+    return (
+      <ReactPagination
+        totalNumberOfPages={50}
+        numberOfPagesPerScreen={10}
+        onPageButtonClick={(id) => {
+          this.setState({
+            id,
+          })
+          console.log(this.state)
+        }}
+        currentActiveIndex={this.state.id}
+      >
+        <h1>Children {this.state.id}</h1>
+      </ReactPagination>
+    )
+  }
+}
 
 ```

dist/components/ReactPagination.js

@@ -2,70 +2,131 @@ import React from 'react';
 import times from 'lodash.times';
 import classNames from 'classnames';
 
-class ReactPagination extends React.Component {
-  constructor(props) {
-    super(props);
-    let currentScreenNumber = 1;
-    const { totalScreensNumber, numberOfPagesPerScreen, currentActiveIndex } = props;
-    for (let i = 1; i <= totalScreensNumber; i += 1) {
-      if (i * numberOfPagesPerScreen >= currentActiveIndex) {
-        currentScreenNumber = i;
-        break;
-      }
-    }
-    this.state = {
-      currentScreenNumber
-    };
-  }
-  render() {
-    const {
-      currentActiveIndex,
-      children,
-      numberOfPagesPerScreen,
-      totalScreensNumber,
-      totalNumberOfPages,
-      onPageButtonClick
-    } = this.props;
-    const { currentScreenNumber } = this.state;
-    const offset = (currentScreenNumber - 1) * numberOfPagesPerScreen;
-    let currentNumberOfScreens = totalNumberOfPages - numberOfPagesPerScreen * currentScreenNumber;
-    currentNumberOfScreens = numberOfPagesPerScreen < currentNumberOfScreens ? numberOfPagesPerScreen : currentNumberOfScreens;
-    currentNumberOfScreens = currentNumberOfScreens <= 0 ? numberOfPagesPerScreen : currentNumberOfScreens;
+const ReactPagination = props => {
+  const {
+    currentActiveIndex,
+    children,
+    numberOfPagesPerScreen,
+    totalNumberOfPages,
+    onPageButtonClick,
+    prefix,
+    suffix,
+    icons
+  } = props;
+
+  if (!totalNumberOfPages || currentActiveIndex > totalNumberOfPages) {
     return React.createElement(
       'div',
-      { className: 'pagination-continer' },
-      children,
+      { className: 'center' },
       React.createElement(
-        'div',
-        { className: 'buttons-container' },
-        React.createElement(
-          'div',
-          null,
-          currentScreenNumber !== 1 && React.createElement(
-            'button',
-            { className: 'previous-btn', onClick: () => this.setState({ currentScreenNumber: this.state.currentScreenNumber - 1 }) },
-            ' Previous '
-          ),
-          times(currentNumberOfScreens, idx => React.createElement(
-            'button',
-            {
-              key: idx,
-              onClick: () => {
-                onPageButtonClick(idx + 1 + offset);
-              },
-              className: classNames({ active: currentActiveIndex === idx + 1 + offset })
-            },
-            idx + 1 + offset
-          )),
-          currentScreenNumber < totalScreensNumber && React.createElement(
-            'button',
-            { className: 'next-btn', onClick: () => this.setState({ currentScreenNumber: this.state.currentScreenNumber + 1 }) },
-            ' Next '
-          )
-        )
+        'h4',
+        null,
+        ' You are in wrong page '
       )
     );
   }
-}
+
+  const minPoint = 1;
+  const midPoint = Math.ceil(numberOfPagesPerScreen / 2);
+  let buttonsListStartAt = minPoint;
+  let buttonsListEndsAt = numberOfPagesPerScreen;
+  const lastScreenPagesMinNumber = totalNumberOfPages - numberOfPagesPerScreen;
+  const isCurrentNeartoEnd = lastScreenPagesMinNumber < currentActiveIndex < totalNumberOfPages;
+  const isCurrentAtMiddle = !(currentActiveIndex <= numberOfPagesPerScreen - midPoint) && !(totalNumberOfPages - midPoint < currentActiveIndex);
+
+  if (isCurrentAtMiddle && midPoint !== currentActiveIndex) {
+    // middle
+    buttonsListStartAt = currentActiveIndex - midPoint;
+    buttonsListEndsAt = currentActiveIndex + midPoint;
+  } else if (isCurrentNeartoEnd && totalNumberOfPages - midPoint < currentActiveIndex) {
+    // end
+    buttonsListStartAt = lastScreenPagesMinNumber;
+    buttonsListEndsAt = totalNumberOfPages;
+  }
+  buttonsListStartAt = buttonsListStartAt < minPoint ? minPoint : buttonsListStartAt;
+  buttonsListEndsAt = buttonsListEndsAt > totalNumberOfPages ? totalNumberOfPages : buttonsListEndsAt;
+  const ButtonsList = [];
+  for (let i = buttonsListStartAt; i <= buttonsListEndsAt; i += 1) {
+    const newButton = React.createElement(
+      'button',
+      {
+        onClick: () => {
+          onPageButtonClick(i);
+        },
+        className: classNames({ active: currentActiveIndex === i })
+      },
+      i
+    );
+    ButtonsList.push(newButton);
+  }
+  return React.createElement(
+    'div',
+    { className: 'pagination-continer' },
+    children,
+    React.createElement(
+      'div',
+      { className: 'buttons-container' },
+      React.createElement(
+        'div',
+        { activeIndex: currentActiveIndex, pagination: true },
+        prefix,
+        currentActiveIndex > midPoint + 1 && React.createElement(
+          'button',
+          { icon: true, className: 'previous-btn', onClick: () => onPageButtonClick(1) },
+          ' ',
+          icons.leftMost,
+          '  '
+        ),
+        currentActiveIndex > midPoint + 1 && React.createElement(
+          'button',
+          { icon: true, className: 'previous-btn', onClick: () => onPageButtonClick(currentActiveIndex - 1) },
+          ' ',
+          icons.left,
+          '  '
+        ),
+        ButtonsList,
+        !(totalNumberOfPages - midPoint < currentActiveIndex) && React.createElement(
+          'button',
+          { icon: true, className: 'next-btn', onClick: () => onPageButtonClick(currentActiveIndex + 1) },
+          ' ',
+          icons.right,
+          ' '
+        ),
+        !(totalNumberOfPages - midPoint < currentActiveIndex) && React.createElement(
+          'button',
+          { icon: true, className: 'next-btn', onClick: () => onPageButtonClick(totalNumberOfPages) },
+          '  ',
+          icons.rightMost,
+          ' '
+        ),
+        suffix
+      )
+    )
+  );
+};
+ReactPagination.defaultProps = {
+  icons: {
+    left: React.createElement(
+      'span',
+      null,
+      '\u2190'
+    ),
+    leftMost: React.createElement(
+      'span',
+      null,
+      '\u21C7'
+    ),
+    right: React.createElement(
+      'span',
+      null,
+      '\u2192'
+    ),
+    rightMost: React.createElement(
+      'span',
+      null,
+      '\u21C9'
+    )
+  }
+};
 
 export default ReactPagination;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pagination-with-react",
-  "version": "0.1.2",
+  "version": "1.0.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "files": [

src/index.js

@@ -12,16 +12,10 @@ class App extends React.Component{
     }
   }
   render() {
-    const totalItems = 500;
-    const numberOfItemsPerPage = 10;
-    const numberOfPagesPerScreen = 10;
-    const totalNumberOfPages = round(totalItems / numberOfItemsPerPage);
-    const totalScreensNumber = round(totalNumberOfPages / numberOfPagesPerScreen);
     return (
       <ReactPagination
-        totalScreensNumber={totalScreensNumber}
-        totalNumberOfPages={totalNumberOfPages}
-        numberOfPagesPerScreen={numberOfPagesPerScreen}
+        totalNumberOfPages={50}
+        numberOfPagesPerScreen={10}
         onPageButtonClick={(id) => {
           this.setState({
             id,