Pagination and ResultsPerPage can be hidden when few results (#268)

* allow for Pagination and ResultsPerPage to be hidden on few results
inveniosoftware · May 6, 2024 · dfdf58e · dfdf58e
1 parent 8839262
commit dfdf58e
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 4 deletions.
diff --git a/docs/docs/components/pagination.md b/docs/docs/components/pagination.md
@@ -67,3 +67,9 @@ const overriddenComponents = {
 * **options** `object`
 
   The options prop passed to the component.
+
+* **showWhenOnlyOnePage** `Boolean`
+
+  Allows to configure whether or not the component will render when there is only one page of results available. Default value: `true`.
+
+
diff --git a/docs/docs/components/results_per_page.md b/docs/docs/components/results_per_page.md
@@ -63,3 +63,7 @@ const overriddenComponents = {
 * **selectOnNavigation** `Boolean`
 
   When using a dropdown, set if the `onValueChange` should be called when the new dropdown item is selected with arrow keys, or only on click or on enter.
+
+* **showWhenOnlyOnePage** `Boolean`
+
+  Allows to configure whether or not the component will render when there is only one page of results available. Default value: `true`.
diff --git a/src/lib/components/Pagination/Pagination.js b/src/lib/components/Pagination/Pagination.js
@@ -40,11 +40,21 @@ class Pagination extends Component {
   };
 
   render() {
-    const { loading, totalResults, currentPage, currentSize, overridableId } =
-      this.props;
+    const {
+      loading,
+      totalResults,
+      currentPage,
+      currentSize,
+      overridableId,
+      showWhenOnlyOnePage,
+    } = this.props;
     return (
       <ShouldRender
-        condition={!loading && currentPage > -1 && currentSize > -1 && totalResults > 0}
+        condition={
+          !loading && currentPage > -1 && currentSize > -1 && showWhenOnlyOnePage
+            ? totalResults > 0
+            : totalResults > currentSize
+        }
       >
         <Element
           currentPage={currentPage}
@@ -73,6 +83,7 @@ Pagination.propTypes = {
     maxTotalResults: PropTypes.number,
   }),
   overridableId: PropTypes.string,
+  showWhenOnlyOnePage: PropTypes.bool,
   /* REDUX */
   currentPage: PropTypes.number.isRequired,
   currentSize: PropTypes.number.isRequired,
@@ -84,6 +95,7 @@ Pagination.propTypes = {
 Pagination.defaultProps = {
   options: {},
   overridableId: "",
+  showWhenOnlyOnePage: true,
 };
 
 const Element = ({

diff --git a/src/lib/components/ResultsPerPage/ResultsPerPage.js b/src/lib/components/ResultsPerPage/ResultsPerPage.js
@@ -36,9 +36,16 @@ class ResultsPerPage extends Component {
       overridableId,
       ariaLabel,
       selectOnNavigation,
+      showWhenOnlyOnePage,
     } = this.props;
     return (
-      <ShouldRender condition={!loading && totalResults > 0 && currentSize !== -1}>
+      <ShouldRender
+        condition={
+          !loading && currentSize !== -1 && showWhenOnlyOnePage
+            ? totalResults > 0
+            : totalResults > currentSize
+        }
+      >
         {label(
           <Element
             currentSize={currentSize}
@@ -60,6 +67,7 @@ ResultsPerPage.propTypes = {
   overridableId: PropTypes.string,
   ariaLabel: PropTypes.string,
   selectOnNavigation: PropTypes.bool,
+  showWhenOnlyOnePage: PropTypes.bool,
   /* REDUX */
   currentSize: PropTypes.number.isRequired,
   loading: PropTypes.bool.isRequired,
@@ -72,6 +80,7 @@ ResultsPerPage.defaultProps = {
   overridableId: "",
   ariaLabel: "Results per page",
   selectOnNavigation: false,
+  showWhenOnlyOnePage: true,
 };
 
 const Element = ({