Merge pull request #121 from wpmudev/new/gowtham-pagination

✨ new(react-pagination): Create package.

packages/react-pagination/README.md

@@ -0,0 +1,47 @@
+[![License: GPLv3](https://img.shields.io/badge/License-GPL%20v3-blue.svg?color=green)](http://www.gnu.org/licenses/gpl-3.0)
+[![npm](https://img.shields.io/npm/v/@wpmudev/react-pagination)](https://www.npmjs.com/package/@wpmudev/react-pagination)
+![npm peer dependency version](https://img.shields.io/npm/dependency-version/@wpmudev/react-pagination/peer/react)
+
+# React Pagination
+[React Pagination](https://wpmudev.github.io/shared-ui-react/?path=/story/components-pagination--primary) allows you include to paginate your long-list items on your project.
+
+```
+npm i @wpmudev/react-pagination --save-dev
+```
+
+## Usage
+
+### Javascript Instantiation
+
+```js
+import React from 'react';
+
+import {
+  Pagination
+} from '@wpmudev/react-pagination';
+
+const MyApp = () => {
+  return (
+    <Pagination
+	  limit={5}
+	  results={true}
+	  skip={true}
+	  child={childrenArray}
+	>
+      <div>Element 1 could be here</div>
+      <div>Element 2 could be here</div>
+      <div>Element 3 could be here</div>
+    </Pagination>
+  );
+}
+```
+
+### Props
+
+Prop Name | Type | Description
+--- | --- | ---
+limit | Integer | Enter the elements limit per page.
+results | Boolean | Shows results section if `true`.
+skip | Boolean | Shows skip arrow buttons if `true`.
+child | Array | Pass an array here to render as elements.
+

packages/react-pagination/__tests__/react-pagination.test.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const reactPagination = require('..');
+
+describe('@wpmudev/react-pagination', () => {
+    it('needs tests');
+});

packages/react-pagination/docs/react-pagination.stories.js

@@ -0,0 +1,86 @@
+import React from "react";
+import { Pagination } from "../lib/react-pagination";
+
+export default {
+	title: "Components/Pagination",
+	component: Pagination,
+};
+
+let childrenArray = new Array();
+for (let i = 1; i <= 34 /* from here you can change the number of elements that can be inputed */; ++i)
+	childrenArray.push(<h5 key={i}>This is the sample data that I am working with. Id number is {i}</h5>);
+
+export const primary = args => (
+	<Pagination {...args}>
+		<div>This is sample child component 1</div>
+		<div>This is sample child component 2</div>
+		<div>This is sample child component 3</div>
+		<div>This is sample child component 4</div>
+		<div>This is sample child component 5</div>
+		<div>This is sample child component 6</div>
+		<div>This is sample child component 7</div>
+		<div>This is sample child component 8</div>
+		<div>This is sample child component 10</div>
+		<div>This is sample child component 11</div>
+		<div>This is sample child component 12</div>
+		<div>This is sample child component 13</div>
+		<div>This is sample child component 14</div>
+		<div>This is sample child component 15</div>
+	</Pagination>
+);
+
+primary.storyName = "Mixed";
+primary.args = {
+	limit: 5, //elements per page
+	results: true, //number of results
+	skip: true, //skip to last and first page buttons status
+	skipToFirstLabel:"",
+	previousLabel: "",
+	nextLabel: "",
+	skipToLastLabel:"",
+	child: childrenArray, //Array with child elements
+};
+primary.argTypes = {
+	limit: { type: "number" },
+	results: { type: "boolean" },
+	skip: { type: "boolean" },
+};
+
+export const secondary = args => (
+	<Pagination {...args}>
+		<div>This is sample child component 1</div>
+		<div>This is sample child component 2</div>
+		<div>This is sample child component 3</div>
+		<div>This is sample child component 4</div>
+		<div>This is sample child component 5</div>
+		<div>This is sample child component 6</div>
+		<div>This is sample child component 7</div>
+		<div>This is sample child component 8</div>
+		<div>This is sample child component 10</div>
+		<div>This is sample child component 11</div>
+		<div>This is sample child component 12</div>
+		<div>This is sample child component 13</div>
+		<div>This is sample child component 14</div>
+		<div>This is sample child component 15</div>
+	</Pagination>
+);
+
+secondary.storyName = "Children Components";
+secondary.args = {
+	...primary.args,
+	child: [],
+};
+secondary.argTypes = {
+	...primary.argsTypes,
+};
+
+export const thirtiary = args => <Pagination {...args} />;
+
+thirtiary.storyName = "Child Property";
+thirtiary.args = {
+	...primary.args,
+	child: childrenArray,
+};
+thirtiary.argTypes = {
+	...primary.argsTypes,
+};

packages/react-pagination/lib/react-pagination.js

@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from "react";
+
+export const Pagination = ({ limit, skip, results, skipToFirstLabel, previousLabel, nextLabel, skipToLastLabel, ...args }) => {
+	const childElements = args.children ? [...args.children, ...args.child] : [...args.child],
+		elements = childElements.length,
+		pages = elements / limit > parseInt(elements / limit) ? parseInt(elements / limit) + 1 : elements / limit,
+		[pagesArray, setPagesArray] = useState([]),
+		[selectedPage, setSelectedPage] = useState("1"),
+		[startIndex, setStartIndex] = useState(0),
+		[endIndex, setEndIndex] = useState(pages >= 5 ? 5 : pages),
+		[pageClickCounter, setPageClickCounter] = useState(0),
+		[elementsStartIndex, setElementsStartIndex] = useState(0),
+		[elementsEndIndex, setElementsEndIndex] = useState(limit);
+
+	useEffect(() => {
+		var pagesArray = [];
+		for (let i = 1; i <= pages; ++i) pagesArray.push(i);
+		setPagesArray(pagesArray);
+	}, []);
+
+	useEffect(() => {
+		selectedPage >= endIndex && incrementIndexes();
+		selectedPage <= startIndex + 1 && decrementIndexes();
+	}, [pageClickCounter]);
+
+	useEffect(() => {
+		if (selectedPage !== "1") {
+			setElementsStartIndex(selectedPage * limit - limit);
+			setElementsEndIndex(selectedPage * limit);
+		}
+	}, [selectedPage]);
+
+	const handleSkipToFirstPage = () => {
+		setSelectedPage(1);
+		setStartIndex(0);
+		setEndIndex(pages >= 5 ? 5 : pages);
+	};
+
+	const handleSkipToLastPage = () => {
+		setSelectedPage(pages);
+		setStartIndex(pages >= 5 ? pages - 5 : 0);
+		setEndIndex(pages);
+	};
+
+	const handlePreviousPage = () => {
+		selectedPage > 1 && setSelectedPage(selectedPage - 1);
+		decrementIndexes();
+	};
+
+	const handleNextPage = () => {
+		selectedPage < pages && setSelectedPage(parseInt(selectedPage) + 1);
+		incrementIndexes();
+	};
+
+	const decrementIndexes = () => {
+		if (selectedPage - 1 <= startIndex + 1 && startIndex !== 0) {
+			setStartIndex(startIndex - 1);
+			setEndIndex(endIndex - 1);
+		}
+	};
+	const incrementIndexes = () => {
+		if (selectedPage + 1 >= endIndex && endIndex !== pages) {
+			setStartIndex(startIndex + 1);
+			setEndIndex(endIndex + 1);
+		}
+	};
+
+	const handlePreviousEllipsis = () => {
+		setSelectedPage(startIndex >= 5 ? endIndex - 6 : endIndex - startIndex - 1);
+		setStartIndex(startIndex >= 5 ? startIndex - 5 : 0);
+		setEndIndex(startIndex >= 5 ? endIndex - 5 : endIndex - startIndex);
+	};
+	const handleNextEllipsis = () => {
+		setSelectedPage(pages - endIndex >= 5 ? startIndex + 7 : pages - endIndex + startIndex + 2);
+		setStartIndex(pages - endIndex >= 5 ? startIndex + 5 : pages - endIndex + startIndex);
+		setEndIndex(pages - endIndex >= 5 ? endIndex + 5 : pages);
+	};
+
+	const handlePageClick = async page => {
+		setSelectedPage(page);
+		setPageClickCounter(pageClickCounter + 1);
+	};
+
+	return (
+		<>
+			{/* {React.Children.map(childElements, child => React.cloneElement(child)).slice(elementsStartIndex, elementsEndIndex)} */}
+			<div className="sui-pagination-wrap">
+				{results && <span className="sui-pagination-results">{elements} results</span>}
+				<ul className="sui-pagination">
+					{skip && (
+						<li onClick={handleSkipToFirstPage}>
+							<a disabled={selectedPage <= 1}>
+								<span aria-hidden="false" className="sui-screen-reader-text">{skipToFirstLabel || "Go to first page"}</span>
+								<span aria-hidden="true" title={skipToFirstLabel || "Go to first page"} className="sui-icon-arrow-skip-back"></span>
+							</a>
+						</li>
+					)}
+					<li onClick={handlePreviousPage}>
+						<a disabled={selectedPage <= 1}>
+							<span aria-hidden="false" className="sui-screen-reader-text">{previousLabel || "Go to previous page"}</span>
+							<span aria-hidden="true" title={previousLabel || "Go to previous page"} className="sui-icon-chevron-left"></span>
+						</a>
+					</li>
+					{startIndex > 0 && (
+						<li onClick={handlePreviousEllipsis}>
+							<a>...</a>
+						</li>
+					)}
+					{pagesArray?.slice(startIndex, endIndex)?.map((data, index) => {
+						return (
+							<li onClick={() => handlePageClick(parseInt(data))} key={index}>
+								<a aria-selected={selectedPage === data} className={selectedPage === data ? "sui-active" : ""}>
+									{data}
+								</a>
+							</li>
+						);
+					})}
+					{endIndex < pages && (
+						<li onClick={handleNextEllipsis}>
+							<a>...</a>
+						</li>
+					)}
+					<li onClick={handleNextPage}>
+						<a disabled={selectedPage >= pages}>
+							<span aria-hidden="false" className="sui-screen-reader-text">{nextLabel || "Go to next page."}</span>
+							<span aria-hidden="true" title={nextLabel || "Go to next page."} className="sui-icon-chevron-right"></span>
+						</a>
+					</li>
+					{skip && (
+						<li onClick={handleSkipToLastPage}>
+							<a disabled={selectedPage >= pages}>
+								<span aria-hidden="false" className="sui-screen-reader-text">{skipToLastLabel || "Go to last page."}</span>
+								<span aria-hidden="true" title={skipToLastLabel || "Go to last page"} className="sui-icon-arrow-skip-forward"></span>
+							</a>
+						</li>
+					)}
+				</ul>
+			</div>
+			{React.Children.map(childElements, child => React.cloneElement(child)).slice(elementsStartIndex, elementsEndIndex)}
+		</>
+	);
+};

packages/react-pagination/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@wpmudev/react-pagination",
+  "version": "0.0.0",
+  "description": "WPMU DEV Shared UI React Pagination Component",
+  "keywords": [],
+  "author": "WPMU DEV (https://wpmudev.com/)",
+  "contributors": [
+    {
+      "name": "Leighton Sapir",
+      "email": "2328848+iamleigh@users.noreply.github.com",
+      "url": "https://iamleigh.com/"
+    },
+    {
+      "name": "Gowtham Ravipati",
+      "email": "66052144+Gowtham369@users.noreply.github.com",
+      "url": "https://gowtham369.github.io/Gowtham_Portfolio/"
+    }
+  ],
+  "license": "GPL-3.0",
+  "main": "dist/react-pagination.cjs.js",
+  "module": "dist/react-pagination.esm.js",
+  "src": "lib/react-pagination.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "dist",
+    "lib"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wpmudev/shared-ui-react.git",
+    "directory": "packages/react-pagination"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1",
+    "build": "sui-builder"
+  },
+  "bugs": {
+    "url": "https://github.com/wpmudev/shared-ui-react/issues"
+  },
+  "homepage": "https://github.com/wpmudev/shared-ui-react#readme",
+  "devDependencies": {
+    "@wpmudev/react-builder": "^0.0.0",
+	"react": "^17.0.1"
+  }
+}