diff --git a/docs/docs/components/count.md b/docs/docs/components/count.md
index fb0d215d..65da2b91 100644
--- a/docs/docs/components/count.md
+++ b/docs/docs/components/count.md
@@ -21,6 +21,14 @@ The component is **not** displayed while executing the search query or if there
An optional function to override the default rendered component.
+- **prefix** `String` _optional_
+
+ An optional string to be displayed before the number of results.
+
+- **suffix** `String` _optional_
+
+ An optional string to be displayed after the number of results.
+
## Usage when overriding template
```jsx
diff --git a/docs/docs/components/results_per_page.md b/docs/docs/components/results_per_page.md
index 2fb96d14..1f90c6a1 100644
--- a/docs/docs/components/results_per_page.md
+++ b/docs/docs/components/results_per_page.md
@@ -30,6 +30,14 @@ The component is **not** displayed while executing the search query or if there
An optional function to override the default rendered component.
+- **prefix** `String` _optional_
+
+ An optional string to be displayed before the number of results.
+
+- **suffix** `String` _optional_
+
+ An optional string to be displayed after the number of results.
+
## Usage when overriding template
```jsx
diff --git a/src/demos/cern-videos/Results.js b/src/demos/cern-videos/Results.js
index 9356402d..fe1b7f77 100644
--- a/src/demos/cern-videos/Results.js
+++ b/src/demos/cern-videos/Results.js
@@ -21,22 +21,6 @@ import {
Sort,
} from '../../lib/components';
-const SpanWithMargin = ({ text, margin }) => {
- const size = '0.5em';
- let style;
- switch (margin) {
- case 'left':
- style = { marginLeft: size };
- break;
- case 'right':
- style = { marginRight: size };
- break;
- default:
- style = { margin: `0 ${size}` };
- }
- return {text};
-};
-
export class Results extends Component {
constructor(props) {
super(props);
@@ -94,18 +78,16 @@ export class Results extends Component {
-
-
-
+
-
-
diff --git a/src/demos/elasticsearch/Results.js b/src/demos/elasticsearch/Results.js
index 7b15a0b2..928f63ed 100644
--- a/src/demos/elasticsearch/Results.js
+++ b/src/demos/elasticsearch/Results.js
@@ -19,22 +19,6 @@ import {
ResultsGrid,
} from '../../lib/components';
-const SpanWithMargin = ({ text, margin }) => {
- const size = '0.5em';
- let style;
- switch (margin) {
- case 'left':
- style = { marginLeft: size };
- break;
- case 'right':
- style = { marginRight: size };
- break;
- default:
- style = { margin: `0 ${size}` };
- }
- return {text};
-};
-
class Tags extends Component {
onClick = (event, value) => {
window.history.push({
@@ -113,8 +97,7 @@ export class Results extends Component {
-
-
+
diff --git a/src/demos/zenodo/Results.js b/src/demos/zenodo/Results.js
index d87e1acc..cc329824 100644
--- a/src/demos/zenodo/Results.js
+++ b/src/demos/zenodo/Results.js
@@ -21,22 +21,6 @@ import {
Sort,
} from '../../lib/components';
-const SpanWithMargin = ({ text, margin }) => {
- const size = '0.5em';
- let style;
- switch (margin) {
- case 'left':
- style = { marginLeft: size };
- break;
- case 'right':
- style = { marginRight: size };
- break;
- default:
- style = { margin: `0 ${size}` };
- }
- return {text};
-};
-
export class Results extends Component {
constructor(props) {
super(props);
@@ -93,18 +77,16 @@ export class Results extends Component {
-
-
-
+
-
-
diff --git a/src/lib/components/Count/Count.js b/src/lib/components/Count/Count.js
index bf5aa974..1220d83c 100644
--- a/src/lib/components/Count/Count.js
+++ b/src/lib/components/Count/Count.js
@@ -21,11 +21,29 @@ export default class Count extends Component {
return ;
}
+ renderSpanWithMargin = (text, margin) => {
+ const size = '0.5em';
+ let style;
+ switch (margin) {
+ case 'left':
+ style = { marginLeft: size };
+ break;
+ case 'right':
+ style = { marginRight: size };
+ break;
+ default:
+ style = { margin: `0 ${size}` };
+ }
+ return {text};
+ };
+
render() {
- const { loading, totalResults } = this.props;
+ const { loading, totalResults, prefix, suffix } = this.props;
return (
0}>
+ {this.renderSpanWithMargin(prefix, 'right')}
{this.renderElement(totalResults)}
+ {this.renderSpanWithMargin(suffix)}
);
}
@@ -35,6 +53,8 @@ Count.propTypes = {
loading: PropTypes.bool.isRequired,
totalResults: PropTypes.number.isRequired,
renderElement: PropTypes.func,
+ prefix: PropTypes.string,
+ suffix: PropTypes.string,
};
Count.defaultProps = {
diff --git a/src/lib/components/ResultsPerPage/ResultsPerPage.js b/src/lib/components/ResultsPerPage/ResultsPerPage.js
index b798a026..d59192c1 100644
--- a/src/lib/components/ResultsPerPage/ResultsPerPage.js
+++ b/src/lib/components/ResultsPerPage/ResultsPerPage.js
@@ -49,13 +49,31 @@ export default class ResultsPerPage extends Component {
this.updateQuerySize(value);
};
+ renderSpanWithMargin = (text, margin) => {
+ const size = '0.5em';
+ let style;
+ switch (margin) {
+ case 'left':
+ style = { marginLeft: size };
+ break;
+ case 'right':
+ style = { marginRight: size };
+ break;
+ default:
+ style = { margin: `0 ${size}` };
+ }
+ return {text};
+ };
+
render() {
- const { loading, currentSize, totalResults } = this.props;
+ const { loading, currentSize, totalResults, prefix, suffix } = this.props;
return (
0 && currentSize !== -1}
>
+ {this.renderSpanWithMargin(prefix, 'right')}
{this.renderElement(currentSize, this.options, this.onChange)}
+ {this.renderSpanWithMargin(suffix)}
);
}
@@ -70,6 +88,8 @@ ResultsPerPage.propTypes = {
updateQuerySize: PropTypes.func.isRequired,
setInitialState: PropTypes.func.isRequired,
renderElement: PropTypes.func,
+ prefix: PropTypes.string,
+ suffix: PropTypes.string,
};
ResultsPerPage.defaultProps = {