Prevent breaks to be displayed when both pageRangeDisplayed and `ma…

…rginPagesDisplayed` are 0

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 - Removed support for depecrated `extraAriaContext` (please use `ariaLabelBuilder` instead)
 
+## >= 8.1.0
+
+- Prevent breaks to be displayed when both `pageRangeDisplayed` and `marginPagesDisplayed` are 0
+
 ## >= 8.0.3
 
 - Fix bug on `marginPagesDisplayed={0}` (see: https://github.com/AdeleD/react-paginate/pull/396)

__tests__/PaginationBoxView-test.js

@@ -2183,4 +2183,45 @@ describe('Test custom props', () => {
       ).toBe('7');
     });
   });
+
+  describe('Prevent breaks when only one active page', () => {
+    it('does not show break', () => {
+      const pagination = ReactTestUtils.renderIntoDocument(
+        <PaginationBoxView
+          pageRangeDisplayed={0}
+          pageCount={12}
+          marginPagesDisplayed={0}
+        />
+      );
+
+      const elmts = ReactTestUtils.scryRenderedDOMComponentsWithTag(
+        pagination,
+        'a'
+      );
+      const next = elmts[elmts.length - 1];
+
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelectorAll('.break a').length
+      ).toBe(0);
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelectorAll('.selected a').length
+      ).toBe(1);
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('.selected a')
+          .textContent
+      ).toBe('1');
+
+      ReactTestUtils.Simulate.click(next);
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelectorAll('.break a').length
+      ).toBe(0);
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelectorAll('.selected a').length
+      ).toBe(1);
+      expect(
+        ReactDOM.findDOMNode(pagination).querySelector('.selected a')
+          .textContent
+      ).toBe('2');
+    });
+  });
 });

demo/js/demo.js

@@ -139,8 +139,8 @@ export class App extends Component {
             breakClassName="page-item"
             breakLinkClassName="page-link"
             pageCount={20}
+            pageRangeDisplayed={4}
             marginPagesDisplayed={2}
-            pageRangeDisplayed={5}
             onPageChange={this.handlePageClick}
             containerClassName="pagination justify-content-center"
             pageClassName="page-item"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-paginate",
-  "version": "8.0.3",
+  "version": "8.1.0",
   "description": "A ReactJS component that creates a pagination.",
   "main": "./dist/react-paginate.js",
   "repository": {

react_components/PaginationBoxView.js

@@ -413,7 +413,9 @@ export default class PaginationBoxView extends Component {
         if (
           breakLabel &&
           pagesBreaking.length > 0 &&
-          pagesBreaking[pagesBreaking.length - 1].display !== breakView
+          pagesBreaking[pagesBreaking.length - 1].display !== breakView &&
+          // We do not show break if only one active page is displayed.
+          (pageRangeDisplayed > 0 || marginPagesDisplayed > 0)
         ) {
           breakView = (
             <BreakView