From 5d62e4aca17c7a1f71fb028b1684e1607b2f013c Mon Sep 17 00:00:00 2001 From: KonstantinaStoikou Date: Tue, 14 Apr 2020 11:41:43 +0200 Subject: [PATCH] global: add prefix, suffix to sort components --- docs/docs/components/sort.md | 8 ++++++ docs/docs/components/sort_by.md | 8 ++++++ docs/docs/components/sort_order.md | 8 ++++++ src/demos/cern-videos/Results.js | 4 +-- src/demos/zenodo/Results.js | 4 +-- src/lib/components/Count/Count.js | 4 +-- .../ResultsPerPage/ResultsPerPage.js | 4 +-- src/lib/components/Sort/Sort.js | 22 +++++++++++++++ src/lib/components/SortBy/SortBy.js | 22 ++++++++++++++- src/lib/components/SortOrder/SortOrder.js | 28 ++++++++++++++++++- 10 files changed, 102 insertions(+), 10 deletions(-) diff --git a/docs/docs/components/sort.md b/docs/docs/components/sort.md index fed01171..ef5d1c87 100644 --- 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 index 422f3aa9..a4243d7f 100644 --- 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 index 56e9cc68..3f244023 100644 --- 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 index fe1b7f77..532dcae0 100644 --- a/src/demos/cern-videos/Results.js +++ b/src/demos/cern-videos/Results.js @@ -78,8 +78,8 @@ export class Results extends Component { - - + + - - + + 0}> - {this.renderSpanWithMargin(prefix, 'right')} + {prefix && this.renderSpanWithMargin(prefix, 'right')} {this.renderElement(totalResults)} - {this.renderSpanWithMargin(suffix)} + {suffix && this.renderSpanWithMargin(suffix)} ); } diff --git a/src/lib/components/ResultsPerPage/ResultsPerPage.js b/src/lib/components/ResultsPerPage/ResultsPerPage.js index d59192c1..40a50986 100644 --- a/src/lib/components/ResultsPerPage/ResultsPerPage.js +++ b/src/lib/components/ResultsPerPage/ResultsPerPage.js @@ -71,9 +71,9 @@ export default class ResultsPerPage extends Component { 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)} ); } diff --git a/src/lib/components/Sort/Sort.js b/src/lib/components/Sort/Sort.js index 6e270fd1..2d68b5d9 100644 --- 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 {text}; + }; + render() { const { currentSortBy, currentSortOrder, loading, totalResults, + prefix, + suffix, } = this.props; return ( 0 } > + {prefix && this.renderSpanWithMargin(prefix, 'right')} {this.renderElement( currentSortBy, currentSortOrder, this.options, this.onChange )} + {suffix && this.renderSpanWithMargin(suffix)} ); } @@ -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 index bde0eaed..d76e57bf 100644 --- 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 {text}; + }; + render() { - const { currentSortBy, loading, totalResults } = this.props; + const { currentSortBy, loading, totalResults, prefix, suffix } = this.props; return ( 0} > + {prefix && this.renderSpanWithMargin(prefix, 'right')} {this.renderElement(currentSortBy, this.options, this.onChange)} + {suffix && this.renderSpanWithMargin(suffix)} ); } @@ -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 index 5a336202..d8d6f1b2 100644 --- 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 {text}; + }; + render() { - const { currentSortOrder, loading, totalResults } = this.props; + const { + currentSortOrder, + loading, + totalResults, + prefix, + suffix, + } = this.props; return ( 0} > + {prefix && this.renderSpanWithMargin(prefix, 'right')} {this.renderElement(currentSortOrder, this.options, this.onChange)} + {suffix && this.renderSpanWithMargin(suffix)} ); } @@ -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 = {