Merge 5d62e4a into b743069

inveniosoftware · Apr 14, 2020 · 63f5eb0 · 63f5eb0
2 parents b743069 + 5d62e4a
commit 63f5eb0
Show file tree

Hide file tree

Showing 13 changed files with 161 additions and 66 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/docs/docs/components/sort.md b/docs/docs/components/sort.md
@@ -39,6 +39,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 sort options.
+
+- **suffix** `String` _optional_
+
+  An optional string to be displayed after the sort options.
+
 ## Usage when overriding template
 
 ```jsx

diff --git a/docs/docs/components/sort_by.md b/docs/docs/components/sort_by.md
@@ -30,6 +30,14 @@ The component is **not** displayed while executing the search query or if there
 
   Value to use when executing a search with an empty query string. When searching with an empty query, users normally expect most recent results, while searching with a defined query string, best match or any other sorting field. Default value: the value of `defaultValue` prop.
 
+- **prefix** `String` _optional_
+
+  An optional string to be displayed before the sort options.
+
+- **suffix** `String` _optional_
+
+  An optional string to be displayed after the sort options.
+
 ## Usage when overriding template
 
 ```jsx

diff --git a/docs/docs/components/sort_order.md b/docs/docs/components/sort_order.md
@@ -26,6 +26,14 @@ The component is **not** displayed while executing the search query or if there
 
   The default value to pre-select when rendering the component. For example, `"desc"`.
 
+- **prefix** `String` _optional_
+
+  An optional string to be displayed before the sort order values.
+
+- **suffix** `String` _optional_
+
+  An optional string to be displayed after the sort order values.
+
 ## 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" />
-            <Sort values={this.sortValues} />
+            <Count prefix="Found" suffix="results" />
+            <Sort values={this.sortValues} prefix="sorted by" />
           </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" />
-            <Sort values={this.sortValues} />
+            <Count prefix="Found" suffix="results" />
+            <Sort values={this.sortValues} prefix="sorted by" />
           </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}>
+        {prefix && this.renderSpanWithMargin(prefix, 'right')}
         {this.renderElement(totalResults)}
+        {suffix && 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}
       >
+        {prefix && this.renderSpanWithMargin(prefix, 'right')}
         {this.renderElement(currentSize, this.options, this.onChange)}
+        {suffix && 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 = {

diff --git a/src/lib/components/Sort/Sort.js b/src/lib/components/Sort/Sort.js
@@ -100,12 +100,30 @@ export default class Sort extends Component {
     this.updateQuerySorting(selected.sortBy, selected.sortOrder);
   };
 
+  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 {
       currentSortBy,
       currentSortOrder,
       loading,
       totalResults,
+      prefix,
+      suffix,
     } = this.props;
     return (
       <ShouldRender
@@ -116,12 +134,14 @@ export default class Sort extends Component {
           totalResults > 0
         }
       >
+        {prefix && this.renderSpanWithMargin(prefix, 'right')}
         {this.renderElement(
           currentSortBy,
           currentSortOrder,
           this.options,
           this.onChange
         )}
+        {suffix && this.renderSpanWithMargin(suffix)}
       </ShouldRender>
     );
   }
@@ -136,6 +156,8 @@ Sort.propTypes = {
   updateQuerySorting: PropTypes.func.isRequired,
   setInitialState: PropTypes.func.isRequired,
   renderElement: PropTypes.func,
+  prefix: PropTypes.string,
+  suffix: PropTypes.string,
 };
 
 Sort.defaultProps = {

diff --git a/src/lib/components/SortBy/SortBy.js b/src/lib/components/SortBy/SortBy.js
@@ -53,13 +53,31 @@ export default class SortBy extends Component {
     this.updateQuerySortBy(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 { currentSortBy, loading, totalResults } = this.props;
+    const { currentSortBy, loading, totalResults, prefix, suffix } = this.props;
     return (
       <ShouldRender
         condition={currentSortBy !== null && !loading && totalResults > 0}
       >
+        {prefix && this.renderSpanWithMargin(prefix, 'right')}
         {this.renderElement(currentSortBy, this.options, this.onChange)}
+        {suffix && this.renderSpanWithMargin(suffix)}
       </ShouldRender>
     );
   }
@@ -76,6 +94,8 @@ SortBy.propTypes = {
   updateQuerySortBy: PropTypes.func.isRequired,
   setInitialState: PropTypes.func.isRequired,
   renderElement: PropTypes.func,
+  prefix: PropTypes.string,
+  suffix: PropTypes.string,
 };
 
 SortBy.defaultProps = {