Update demo: latest Boostrap version, styled-component example

AdeleD · Nov 26, 2021 · 6ac34d0 · 6ac34d0
1 parent bac1a6e
commit 6ac34d0
Show file tree

Hide file tree

Showing 8 changed files with 361 additions and 106 deletions.
diff --git a/__tests__/PaginationBoxView-test.js b/__tests__/PaginationBoxView-test.js
@@ -2151,21 +2151,25 @@ describe('Test custom props', () => {
         ReactDOM.findDOMNode(pagination).querySelectorAll('.selected a').length
       ).toBe(1);
       expect(
-        ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent
+        ReactDOM.findDOMNode(pagination).querySelector('.selected a')
+          .textContent
       ).toBe('2');
 
       // Click to go to page 8.
       for (let i = 1; i < 7; i++) {
         ReactTestUtils.Simulate.click(next);
         expect(
-          ReactDOM.findDOMNode(pagination).querySelectorAll('.selected a').length
+          ReactDOM.findDOMNode(pagination).querySelectorAll('.selected a')
+            .length
         ).toBe(1);
         expect(
-          ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent
-        ).toBe(`${2+i}`);
+          ReactDOM.findDOMNode(pagination).querySelector('.selected a')
+            .textContent
+        ).toBe(`${2 + i}`);
       }
       expect(
-        ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent
+        ReactDOM.findDOMNode(pagination).querySelector('.selected a')
+          .textContent
       ).toBe('8');
 
       ReactTestUtils.Simulate.click(previous);
@@ -2174,7 +2178,8 @@ describe('Test custom props', () => {
         ReactDOM.findDOMNode(pagination).querySelectorAll('.selected a').length
       ).toBe(1);
       expect(
-        ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent
+        ReactDOM.findDOMNode(pagination).querySelector('.selected a')
+          .textContent
       ).toBe('7');
     });
   });

diff --git a/demo/index.html b/demo/index.html
@@ -6,44 +6,34 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>React-Paginate</title>
     <link
-      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
       rel="stylesheet"
-    />
-    <link href="styles/style.css" rel="stylesheet" />
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    >
     <style type="text/css">
       body {
         margin-top: 60px;
       }
     </style>
   </head>
   <body>
-    <nav class="navbar navbar-inverse navbar-fixed-top">
+    <nav class="navbar navbar-expand-lg bg-light mb-5">
       <div class="container">
-        <div class="navbar-header">
-          <button
-            type="button"
-            class="navbar-toggle collapsed"
-            data-toggle="collapse"
-            data-target="#navbar"
-            aria-expanded="false"
-            aria-controls="navbar"
-          >
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          <a class="navbar-brand" href="#">React-Paginate</a>
-        </div>
-        <div id="navbar" class="collapse navbar-collapse">
-          <ul class="nav navbar-nav">
-            <li><a href="#">Home</a></li>
-          </ul>
+        <a class="navbar-brand" href="#">React Paginate</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="#">Home</a>
+            </li>
         </div>
       </div>
     </nav>
     <div class="container">
-      <p>
+      <p class="mb-5">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
         veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea

diff --git a/demo/js/demo.js b/demo/js/demo.js
@@ -2,9 +2,48 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import ReactPaginate from 'react-paginate';
+import styled from 'styled-components';
 import $ from 'jquery';
 
-window.React = React;
+// You can style your pagination component
+// thanks to styled-components.
+// Use inner class names to style the controls.
+const MyPaginate = styled(ReactPaginate).attrs({
+  // You can redifine classes here, if you want.
+  activeClassName: 'active', // default to "disabled"
+})`
+  margin-bottom: 2rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  list-style-type: none;
+  padding: 0 5rem;
+
+  li a {
+    border-radius: 7px;
+    padding: 0.1rem 1rem;
+    border: gray 1px solid;
+    cursor: pointer;
+  }
+  li.previous a,
+  li.next a,
+  li.break a {
+    border-color: transparent;
+  }
+  li.active a {
+    background-color: #0366d6;
+    border-color: transparent;
+    color: white;
+    min-width: 32px;
+  }
+  li.disabled a {
+    color: grey;
+  }
+  li.disable,
+  li.disabled a {
+    cursor: default;
+  }
+`;
 
 export class CommentList extends Component {
   static propTypes = {
@@ -14,15 +53,18 @@ export class CommentList extends Component {
   render() {
     let commentNodes = this.props.data.map(function (comment, index) {
       return (
-        <div key={index}>
-          {comment.comment} and {comment.username}
-        </div>
+        <li key={index} className="list-group-item">
+          <div className="d-flex w-100 justify-content-between">
+            <h5 className="mb-1">{comment.comment}</h5>
+          </div>
+          <small>From {comment.username}.</small>
+        </li>
       );
     });
 
     return (
       <div id="project-comments" className="commentList">
-        <ul>{commentNodes}</ul>
+        <ul className="list-group">{commentNodes}</ul>
       </div>
     );
   }
@@ -78,32 +120,50 @@ export class App extends Component {
   };
 
   render() {
+    const currentPage = Math.round(this.state.offset / this.props.perPage);
     return (
       <div className="commentBox">
-        <CommentList data={this.state.data} />
-        <ReactPaginate
-          previousLabel="previous"
-          nextLabel="next"
-          breakLabel="..."
-          breakClassName="break-me"
+        <MyPaginate
           pageCount={20}
-          marginPagesDisplayed={2}
-          pageRangeDisplayed={5}
           onPageChange={this.handlePageClick}
-          containerClassName="pagination"
-          activeClassName="active"
-          // eslint-disable-next-line no-unused-vars
-          hrefBuilder={(page, pageCount, selected) =>
-            page >= 1 && page <= pageCount ? `/page/${page}` : '#'
-          }
-          hrefAllControls
+          forcePage={currentPage}
         />
+        <CommentList data={this.state.data} />
+        {/* Here the pagination component is styled thanks to Boostrap
+        classes. See https://getbootstrap.com/docs/5.1/components/pagination */}
+        <nav aria-label="Page navigation comments" className="mt-4">
+          <ReactPaginate
+            previousLabel="previous"
+            nextLabel="next"
+            breakLabel="..."
+            breakClassName="page-item"
+            breakLinkClassName="page-link"
+            pageCount={20}
+            marginPagesDisplayed={2}
+            pageRangeDisplayed={5}
+            onPageChange={this.handlePageClick}
+            containerClassName="pagination justify-content-center"
+            pageClassName="page-item"
+            pageLinkClassName="page-link"
+            previousClassName="page-item"
+            previousLinkClassName="page-link"
+            nextClassName="page-item"
+            nextLinkClassName="page-link"
+            activeClassName="active"
+            // eslint-disable-next-line no-unused-vars
+            hrefBuilder={(page, pageCount, selected) =>
+              page >= 1 && page <= pageCount ? `/page/${page}` : '#'
+            }
+            hrefAllControls
+            forcePage={currentPage}
+          />
+        </nav>
       </div>
     );
   }
 }
 
 ReactDOM.render(
-  <App url={'http://localhost:3000/comments'} author={'adele'} perPage={10} />,
+  <App url={'http://localhost:3000/comments'} author={'adele'} perPage={6} />,
   document.getElementById('react-paginate')
 );
diff --git a/demo/server.js b/demo/server.js
@@ -17,7 +17,6 @@ const STYLES_DIR = path.join(__dirname, 'styles');
 const DATA = path.join(__dirname, 'data', 'data.json');
 const NODE_PORT = process.env.NODE_PORT || 3000;
 const NODE_ENV = process.env.NODE_ENV || 'development';
-const PER_PAGE = 10;
 
 app.use(serveStatic(ROOT_DIR));
 app.use(serveStatic(STYLES_DIR));
@@ -31,27 +30,29 @@ app.use(
   })
 );
 
-function getPaginatedItems(items, offset) {
-  return items.slice(offset, offset + PER_PAGE);
+const ITEMS = JSON.parse(fs.readFileSync(DATA));
+
+function getPaginatedItems(items, offset, limit) {
+  return items.slice(offset, offset + limit);
 }
 
 app.get('/comments', function (req, res) {
-  const items = JSON.parse(fs.readFileSync(DATA));
-  const offset = req.query.offset ? parseInt(req.query.offset, 10) : 0;
-  const nextOffset = offset + PER_PAGE;
-  const previousOffset = offset - PER_PAGE < 1 ? 0 : offset - PER_PAGE;
+  const offset = req.query.offset ? parseInt(req.query.offset) : 0;
+  const limit = req.query.limit ? parseInt(req.query.limit) : 10;
+  const nextOffset = offset + limit;
+  const previousOffset = offset - limit < 1 ? 0 : offset - limit;
 
   const meta = {
-    limit: PER_PAGE,
-    next: util.format('?limit=%s&offset=%s', PER_PAGE, nextOffset),
+    limit: limit,
+    next: util.format('?limit=%d&offset=%d', limit, nextOffset),
     offset: req.query.offset,
-    previous: util.format('?limit=%s&offset=%s', PER_PAGE, previousOffset),
-    total_count: items.length,
+    previous: util.format('?limit=%d&offset=%', limit, previousOffset),
+    total_count: ITEMS.length,
   };
 
   const json = {
     meta: meta,
-    comments: getPaginatedItems(items, offset),
+    comments: getPaginatedItems(ITEMS, offset, limit),
   };
 
   return res.json(json);

diff --git a/demo/styles/style.css b/demo/styles/style.css
diff --git a/index.d.ts b/index.d.ts
@@ -37,9 +37,9 @@ export interface ReactPaginateProps {
   prevPageRel?: string | null | undefined;
 
   /**
-  * The `rel` property on the `a` tag for the prev page control.
-  * Default value `prev`. Set to `null` to disable.
-  */
+   * The `rel` property on the `a` tag for the prev page control.
+   * Default value `prev`. Set to `null` to disable.
+   */
   prevRel?: string | null | undefined;
 
   /**
@@ -59,9 +59,9 @@ export interface ReactPaginateProps {
   nextPageRel?: string | null | undefined;
 
   /**
-  * The `rel` property on the `a` tag for the next page control.
-  * Default value `next`. Set to `null` to disable.
-  */
+   * The `rel` property on the `a` tag for the next page control.
+   * Default value `next`. Set to `null` to disable.
+   */
   nextRel?: string | null | undefined;
 
   /**
@@ -171,15 +171,19 @@ export interface ReactPaginateProps {
   /**
    * The method is called to generate the href attribute value on tag a of each page element.
    */
-  hrefBuilder?(pageIndex: number, pageCount: number, selectedPage: number): void;
+  hrefBuilder?(
+    pageIndex: number,
+    pageCount: number,
+    selectedPage: number
+  ): void;
 
   /**
    * By default the `hrefBuilder` add `href` only to active controls.
    * Set this prop to `true` so `href` are generated on all controls
    * ([see](https://github.com/AdeleD/react-paginate/issues/242))
    * Default to `false`
    */
-   hrefAllControls?: boolean | undefined;
+  hrefAllControls?: boolean | undefined;
 
   /**
    * Extra context to add to the aria-label HTML attribute.
@@ -206,7 +210,7 @@ export interface ReactPaginateProps {
    * The `rel` propery on the `a` tag for the selected page.
    * Default value `canonical`. Set to `null` to disable.
    */
-   selectedPageRel?: string | null | undefined;
+  selectedPageRel?: string | null | undefined;
 }
 
 declare const ReactPaginate: React.ComponentClass<ReactPaginateProps>;