react-laravel-paginex

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

.gitignore

@@ -0,0 +1,3 @@
+.idea
+node_modules
+dist

README.md

@@ -0,0 +1,108 @@
+# Laravel Pagination with ReactJS (customizable)
+[![](https://img.shields.io/npm/dt/react-laravel-paginex.svg)](https://www.npmjs.com/package/react-laravel-paginex)
+[![](https://img.shields.io/npm/v/react-laravel-paginex.svg)](https://www.npmjs.com/package/react-laravel-paginex)
+
+`react-laravel-paginex` will provide you ability to easily
+create pagination from Laravel Pagination object.
+
+## Installation
+
+`npm i react-laravel-paginex`
+
+or
+
+`yarn add react-laravel-paginex`
+
+## Usage
+
+First import the Pagination component inside 
+your React component.
+```react
+import {Pagination} from 'react-laravel-paginex'
+```
+
+Then you'll be able to use pagination component.
+
+#### Example:
+
+```html
+<Pagination changePage="getData" data="data"/>
+```
+`changePage` prop will run the function 
+( in our case is `getData()`) when new page selected.
+##### getData() function example with axios.
+```javascript
+    getData=(data)=>{
+        axios.get('getDataEndpoint?page=' + data.page).then(response => {
+            this.setState({data:data});
+        });
+    }
+```
+`data` object must be Laravel Pagination object.
+##### Example:
+```javascript
+{
+    current_page: 1
+    data: [{id: 25600, brand_id: 14, number: "47609-253286", name: "Mall of Africa", type: "Licensed",…},…]
+    first_page_url: "http://example.com/getDataEndpoint?page=1"
+    from: 1
+    last_page: 10
+    last_page_url: "http://example.com/getDataEndpoint?page=10"
+    next_page_url: "http://example.com/getDataEndpoint?page=2"
+    path: "http://example.com/getDataEndpoint"
+    per_page: 20
+    prev_page_url: null
+    to: 20
+    total: 200
+}
+```
+
+## Customizations
+
+You can customize your pagination styles by overwriting default values.
+Available props for component:
+
+Prop Name           | Default Value
+-------------       | -------------
+containerClass      | pagination
+prevButtonClass     | page-item
+prevButtonText      | Prev
+nextButtonClass     | page-item
+nextButtonText      | Next
+numberButtonClass   | page-item
+numberClass         | page-link
+numbersCountForShow | 2
+activeClass         | active
+
+##### Example:
+`<Pagination changePage={this.getData} data={data} containerClass={"pagination-container"}/>`
+
+You can use `options` prop by passing options object into it.
+
+##### Example:
+You have to define here only props which you want to overwrite.
+```javascript
+options:{
+    containerClass: "pagination-container",
+    prevButtonClass: "prev-button-class",
+    nextButtonText: "Next Page"
+    ...
+}
+```
+`<Pagination changePage={this.getData} data={data} options={options}/>`
+
+##### Example:
+You can set your own request params for request
+```javascript
+params=()=>{
+    return {
+       keyword:this.state.keyword
+    }
+}
+```
+`<Pagination changePage={this.getData} data={data} options={options} requestParams={this.params()}/>`
+
+## Credits
+
+- [Garik Harutyunyan](https://github.com/GHarutyunyan)
+- [Lionix Team](https://github.com/lionix-team)

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "react-laravel-paginex",
+  "version": "1.0.0",
+  "description": "Laravel Pagination with ReactJS (customizable)",
+  "main": "dist/index.js",
+  "scripts": {
+    "prepublishOnly": "babel ./src --out-dir ./dist -s inline"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lionix-team/react-laravel-paginex.git"
+  },
+  "keywords": [
+    "laravel",
+    "pagination",
+    "reactjs",
+    "react",
+    "paginate",
+    "lionix"
+  ],
+  "authors": [
+    {
+      "name": "Lionix Team",
+      "email": "[email protected]"
+    },
+    {
+      "name": "Garik Harutyunyan",
+      "email": "[email protected]"
+    }
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/preset-env": "^7.4.5",
+    "@babel/preset-react": "^7.0.0",
+    "prop-types": "^15.7.2"
+  }
+}

src/Pagination.jsx

@@ -0,0 +1,148 @@
+import React, {Component} from "react";
+import PropTypes from 'prop-types';
+
+class Pagination extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            options: {},
+            paginationData: {}
+        };
+    }
+
+    componentDidMount() {
+        this.setState({options: this.props.options, paginationData: this.props.data});
+        this.getProps(this.props);
+    }
+
+    componentWillReceiveProps(props, nextContext) {
+        this.setState({options: props.options, paginationData: props.data});
+        this.getProps(props);
+    }
+
+    // Transform props
+    getProps = (props) => {
+        let defaultProps = Pagination.defaultProps.options;
+        let options = this.state.options;
+        Object.keys(defaultProps).forEach(function (key) {
+            if (!options[key]) {
+                options[key] = props[key] ? props[key] : defaultProps[key];
+            }
+        });
+        this.setState({options: options, paginationData: props.data});
+    };
+
+    // Check if page is active
+    isCurrent = (page) => {
+        return this.state.paginationData.current_page === page;
+    };
+
+    // Handle pagination buttons click event
+    handleClick = (page) => {
+        let parameters = {};
+        if (this.props.requestParams) {
+            parameters = this.props.requestParams;
+        }
+        parameters.page = page;
+        this.props.changePage(parameters);
+    };
+
+    // Generate pagination buttons
+    generatePagination = () => {
+        let paginationData = this.state.paginationData;
+        let options = this.state.options;
+        let current = paginationData.current_page,
+            last = paginationData.last_page,
+            delta = parseInt(options.numbersCountForShow),
+            left = current - delta,
+            right = current + delta + 1,
+            range = [],
+            rangeWithDots = [],
+            l;
+        for (let i = 1; i <= last; i++) {
+            if ((i === 1 || i === last) || (i >= left && i < right)) {
+                range.push(i);
+            }
+        }
+        for (let i of range) {
+            if (l) {
+                if (i - l === 2) {
+                    rangeWithDots.push(l + 1);
+                } else if (i - l !== 1) {
+                    rangeWithDots.push('...');
+                }
+            }
+            rangeWithDots.push(i);
+            l = i;
+        }
+        return (
+            <ul className={options.containerClass}>
+                {paginationData.prev_page_url ?
+                    <li className={options.prevButtonClass}
+                        onClick={() => this.handleClick(paginationData.current_page - 1)}>
+                        <button type="button" className={options.numberButtonClass}>{options.prevButtonText}</button>
+                    </li> : ""}
+                {rangeWithDots.map((page, index) =>
+                    this.generateNumber(page, index)
+                )}
+                {paginationData.next_page_url ?
+                    <li className={options.nextButtonClass}
+                        onClick={() => this.handleClick(paginationData.current_page + 1)}>
+                        <button type="button"
+                                className={options.numberButtonClass}>{options.nextButtonText}</button>
+                    </li>
+                    : ""}
+            </ul>
+        )
+    };
+
+    generateNumber(page, index) {
+        let options = this.state.options;
+        return (
+            <li className={this.isCurrent(page) ? options.numberButtonClass + " " + options.activeClass :
+                options.numberButtonClass}
+                onClick={() => this.handleClick(page === '...' ? index + 1 : page)} key={index}>
+                <button type="button" className={options.numberClass}>{page}</button>
+            </li>
+        );
+    }
+
+    render() {
+        return (
+            <div>
+                {this.generatePagination()}
+            </div>
+        );
+    }
+}
+
+Pagination.defaultProps = {
+    options: {
+        containerClass: "pagination",
+        prevButtonClass: "page-item",
+        prevButtonText: "Prev",
+        nextButtonClass: "page-item",
+        nextButtonText: "Next",
+        numberButtonClass: "page-item",
+        numberClass: "page-link",
+        numbersCountForShow: 2,
+        activeClass: 'active'
+    },
+    data: {}
+};
+
+Pagination.propTypes = {
+    options: PropTypes.shape({
+        containerClass: PropTypes.string,
+        nextButtonClass: PropTypes.string,
+        nextButtonText: PropTypes.string,
+        prevButtonClass: PropTypes.string,
+        prevButtonText: PropTypes.string,
+        numberButtonClass: PropTypes.string,
+        numberClass: PropTypes.string,
+        numberCountForShow: PropTypes.number,
+        activeClass: PropTypes.string
+    }),
+    data: PropTypes.object
+};
+export default Pagination;

src/index.js

@@ -0,0 +1,5 @@
+import Pagination from './Pagination';
+
+export {
+    Pagination
+}