global: add prefix, suffix to sort components

inveniosoftware · Apr 14, 2020 · 5d62e4a · 5d62e4a
1 parent b50df2f
commit 5d62e4a
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 10 deletions.
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
@@ -78,8 +78,8 @@ export class Results extends Component {
         </Grid>
         <Grid relaxed verticalAlign="middle">
           <Grid.Column width={8}>
-            <Count prefix="Found" suffix="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">
             <ResultsPerPage

diff --git a/src/demos/zenodo/Results.js b/src/demos/zenodo/Results.js
@@ -77,8 +77,8 @@ export class Results extends Component {
         </Grid>
         <Grid relaxed verticalAlign="middle">
           <Grid.Column width={8}>
-            <Count prefix="Found" suffix="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">
             <ResultsPerPage

diff --git a/src/lib/components/Count/Count.js b/src/lib/components/Count/Count.js
@@ -41,9 +41,9 @@ export default class Count extends Component {
     const { loading, totalResults, prefix, suffix } = this.props;
     return (
       <ShouldRender condition={!loading && totalResults > 0}>
-        {this.renderSpanWithMargin(prefix, 'right')}
+        {prefix && this.renderSpanWithMargin(prefix, 'right')}
         {this.renderElement(totalResults)}
-        {this.renderSpanWithMargin(suffix)}
+        {suffix && this.renderSpanWithMargin(suffix)}
       </ShouldRender>
     );
   }

diff --git a/src/lib/components/ResultsPerPage/ResultsPerPage.js b/src/lib/components/ResultsPerPage/ResultsPerPage.js
@@ -71,9 +71,9 @@ export default class ResultsPerPage extends Component {
       <ShouldRender
         condition={!loading && totalResults > 0 && currentSize !== -1}
       >
-        {this.renderSpanWithMargin(prefix, 'right')}
+        {prefix && this.renderSpanWithMargin(prefix, 'right')}
         {this.renderElement(currentSize, this.options, this.onChange)}
-        {this.renderSpanWithMargin(suffix)}
+        {suffix && this.renderSpanWithMargin(suffix)}
       </ShouldRender>
     );
   }

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 = {

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