global: add prefix and suffix props to relevant components

inveniosoftware · Apr 13, 2020 · b50df2f · b50df2f
1 parent b743069
commit b50df2f
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 62 deletions.
diff --git 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
@@ -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
@@ -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 <span style={style}>{text}</span>;
-};
-
 export class Results extends Component {
   constructor(props) {
     super(props);
@@ -94,18 +78,16 @@ export class Results extends Component {
         </Grid>
         <Grid relaxed verticalAlign="middle">
           <Grid.Column width={8}>
-            <SpanWithMargin text="Found" margin="right" />
-            <Count />
-            <SpanWithMargin text="results sorted by" />
+            <Count prefix="Found" suffix="results sorted by" />
             <Sort values={this.sortValues} />
           </Grid.Column>
           <Grid.Column width={8} textAlign="right">
-            <SpanWithMargin text="Show" margin="right" />
             <ResultsPerPage
+              prefix="Show"
+              suffix="results per page"
               values={this.resultsPerPageValues}
               defaultValue={10}
             />
-            <SpanWithMargin text="results per page" />
             <LayoutSwitcher defaultLayout="grid" />
           </Grid.Column>
         </Grid>

diff --git 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 <span style={style}>{text}</span>;
-};
-
 class Tags extends Component {
   onClick = (event, value) => {
     window.history.push({
@@ -113,8 +97,7 @@ export class Results extends Component {
         </Grid>
         <Grid relaxed verticalAlign="middle">
           <Grid.Column width={8}>
-            <SpanWithMargin text="Found" margin="right" />
-            <Count />
+            <Count prefix="Found" />
           </Grid.Column>
           <Grid.Column width={8} textAlign="right">
             <LayoutSwitcher defaultLayout="grid" />

diff --git 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 <span style={style}>{text}</span>;
-};
-
 export class Results extends Component {
   constructor(props) {
     super(props);
@@ -93,18 +77,16 @@ export class Results extends Component {
         </Grid>
         <Grid relaxed verticalAlign="middle">
           <Grid.Column width={8}>
-            <SpanWithMargin text="Found" margin="right" />
-            <Count />
-            <SpanWithMargin text="results sorted by" />
+            <Count prefix="Found" suffix="results sorted by" />
             <Sort values={this.sortValues} />
           </Grid.Column>
           <Grid.Column width={8} textAlign="right">
-            <SpanWithMargin text="Show" margin="right" />
             <ResultsPerPage
+              prefix="Show"
               values={this.resultsPerPageValues}
               defaultValue={10}
+              suffix="results per page"
             />
-            <SpanWithMargin text="results per page" />
             <LayoutSwitcher defaultLayout="list" />
           </Grid.Column>
         </Grid>

diff --git 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 <Label color={'blue'}>{totalResults}</Label>;
   }
 
+  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 <span style={style}>{text}</span>;
+  };
+
   render() {
-    const { loading, totalResults } = this.props;
+    const { loading, totalResults, prefix, suffix } = this.props;
     return (
       <ShouldRender condition={!loading && totalResults > 0}>
+        {this.renderSpanWithMargin(prefix, 'right')}
         {this.renderElement(totalResults)}
+        {this.renderSpanWithMargin(suffix)}
       </ShouldRender>
     );
   }
@@ -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
@@ -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 <span style={style}>{text}</span>;
+  };
+
   render() {
-    const { loading, currentSize, totalResults } = this.props;
+    const { loading, currentSize, totalResults, prefix, suffix } = this.props;
     return (
       <ShouldRender
         condition={!loading && totalResults > 0 && currentSize !== -1}
       >
+        {this.renderSpanWithMargin(prefix, 'right')}
         {this.renderElement(currentSize, this.options, this.onChange)}
+        {this.renderSpanWithMargin(suffix)}
       </ShouldRender>
     );
   }
@@ -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 = {