Skip to content

Commit dfdf58e

Browse files
authored
Pagination and ResultsPerPage can be hidden when few results (#268)
* allow for Pagination and ResultsPerPage to be hidden on few results
1 parent 8839262 commit dfdf58e

File tree

4 files changed

+35
-4
lines changed

4 files changed

+35
-4
lines changed

docs/docs/components/pagination.md

+6
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,9 @@ const overriddenComponents = {
6767
* **options** `object`
6868

6969
The options prop passed to the component.
70+
71+
* **showWhenOnlyOnePage** `Boolean`
72+
73+
Allows to configure whether or not the component will render when there is only one page of results available. Default value: `true`.
74+
75+

docs/docs/components/results_per_page.md

+4
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,7 @@ const overriddenComponents = {
6363
* **selectOnNavigation** `Boolean`
6464

6565
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.
66+
67+
* **showWhenOnlyOnePage** `Boolean`
68+
69+
Allows to configure whether or not the component will render when there is only one page of results available. Default value: `true`.

src/lib/components/Pagination/Pagination.js

+15-3
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,21 @@ class Pagination extends Component {
4040
};
4141

4242
render() {
43-
const { loading, totalResults, currentPage, currentSize, overridableId } =
44-
this.props;
43+
const {
44+
loading,
45+
totalResults,
46+
currentPage,
47+
currentSize,
48+
overridableId,
49+
showWhenOnlyOnePage,
50+
} = this.props;
4551
return (
4652
<ShouldRender
47-
condition={!loading && currentPage > -1 && currentSize > -1 && totalResults > 0}
53+
condition={
54+
!loading && currentPage > -1 && currentSize > -1 && showWhenOnlyOnePage
55+
? totalResults > 0
56+
: totalResults > currentSize
57+
}
4858
>
4959
<Element
5060
currentPage={currentPage}
@@ -73,6 +83,7 @@ Pagination.propTypes = {
7383
maxTotalResults: PropTypes.number,
7484
}),
7585
overridableId: PropTypes.string,
86+
showWhenOnlyOnePage: PropTypes.bool,
7687
/* REDUX */
7788
currentPage: PropTypes.number.isRequired,
7889
currentSize: PropTypes.number.isRequired,
@@ -84,6 +95,7 @@ Pagination.propTypes = {
8495
Pagination.defaultProps = {
8596
options: {},
8697
overridableId: "",
98+
showWhenOnlyOnePage: true,
8799
};
88100

89101
const Element = ({

src/lib/components/ResultsPerPage/ResultsPerPage.js

+10-1
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,16 @@ class ResultsPerPage extends Component {
3636
overridableId,
3737
ariaLabel,
3838
selectOnNavigation,
39+
showWhenOnlyOnePage,
3940
} = this.props;
4041
return (
41-
<ShouldRender condition={!loading && totalResults > 0 && currentSize !== -1}>
42+
<ShouldRender
43+
condition={
44+
!loading && currentSize !== -1 && showWhenOnlyOnePage
45+
? totalResults > 0
46+
: totalResults > currentSize
47+
}
48+
>
4249
{label(
4350
<Element
4451
currentSize={currentSize}
@@ -60,6 +67,7 @@ ResultsPerPage.propTypes = {
6067
overridableId: PropTypes.string,
6168
ariaLabel: PropTypes.string,
6269
selectOnNavigation: PropTypes.bool,
70+
showWhenOnlyOnePage: PropTypes.bool,
6371
/* REDUX */
6472
currentSize: PropTypes.number.isRequired,
6573
loading: PropTypes.bool.isRequired,
@@ -72,6 +80,7 @@ ResultsPerPage.defaultProps = {
7280
overridableId: "",
7381
ariaLabel: "Results per page",
7482
selectOnNavigation: false,
83+
showWhenOnlyOnePage: true,
7584
};
7685

7786
const Element = ({

0 commit comments

Comments
 (0)