-
Notifications
You must be signed in to change notification settings - Fork 516
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(connectors): connectSortBySelector (iteration 2)
- Loading branch information
Showing
3 changed files
with
116 additions
and
96 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
121 changes: 50 additions & 71 deletions
121
src/connectors/sort-by-selector/connectSortBySelector.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,87 +1,66 @@ | ||
| import findIndex from 'lodash/findIndex'; | ||
| import map from 'lodash/map'; | ||
| import { | ||
| bemHelper, | ||
| getContainerNode, | ||
| } from '../../lib/utils.js'; | ||
| import cx from 'classnames'; | ||
| import {checkRendering} from '../../lib/utils.js'; | ||
|
|
||
| const bem = bemHelper('ais-sort-by-selector'); | ||
| /** | ||
| * Instantiate a dropdown element to choose the current targeted index | ||
| * @function sortBySelector | ||
| * @param {string|DOMElement} options.container CSS Selector or DOMElement to insert the widget | ||
| * @function connectSortBySelector | ||
| * @param {Array} options.indices Array of objects defining the different indices to choose from. | ||
| * @param {string} options.indices[0].name Name of the index to target | ||
| * @param {string} options.indices[0].label Label displayed in the dropdown | ||
| * @param {boolean} [options.autoHideContainer=false] Hide the container when no results match | ||
| * @param {Object} [options.cssClasses] CSS classes to be added | ||
| * @param {string|string[]} [options.cssClasses.root] CSS classes added to the parent <select> | ||
| * @param {string|string[]} [options.cssClasses.item] CSS classes added to each <option> | ||
| * @return {Object} | ||
| */ | ||
| const usage = `Usage: | ||
| sortBySelector({ | ||
| container, | ||
| indices, | ||
| [cssClasses.{root,item}={}], | ||
| [autoHideContainer=false] | ||
| })`; | ||
| const connectSortBySelector = sortBySelectorRendering => ({ | ||
| container, | ||
| indices, | ||
| cssClasses: userCssClasses = {}, | ||
| autoHideContainer = false, | ||
| } = {}) => { | ||
| if (!container || !indices) { | ||
| throw new Error(usage); | ||
| } | ||
| var customSortBySelector = connectSortBySelector(function render(params, isFirstRendering) { | ||
| // params = { | ||
| // currentValue, | ||
| // options, | ||
| // setValue, | ||
| // nbHits, | ||
| // } | ||
| }); | ||
| search.addWidget( | ||
| customSortBySelector({ indices }) | ||
| ); | ||
| Full documentation available at https://community.algolia.com/instantsearch.js/connectors/connectSortBySelector.html | ||
| `; | ||
| export default function connectSortBySelector(renderFn) { | ||
| checkRendering(renderFn, usage); | ||
|
|
||
| const containerNode = getContainerNode(container); | ||
| return ({indices}) => { | ||
| if (!indices) { | ||
| throw new Error(usage); | ||
| } | ||
|
|
||
| // in order to fit the component parameters, name has to be mapped to value | ||
| const selectorOptions = map( | ||
| indices, | ||
| index => ({label: index.label, value: index.name}) | ||
| ); | ||
| const selectorOptions = indices.map(({label, name}) => ({label, value: name})); | ||
|
|
||
| const cssClasses = { | ||
| root: cx(bem(null), userCssClasses.root), | ||
| item: cx(bem('item'), userCssClasses.item), | ||
| }; | ||
| return { | ||
| init({helper}) { | ||
| const currentIndex = helper.getIndex(); | ||
| const isIndexInList = indices.find(({name}) => name === currentIndex); | ||
|
|
||
| return { | ||
| init({helper}) { | ||
| const currentIndex = helper.getIndex(); | ||
| const isIndexInList = findIndex(indices, {name: currentIndex}) !== -1; | ||
| if (!isIndexInList) { | ||
| throw new Error(`[sortBySelector]: Index ${currentIndex} not present in \`indices\``); | ||
| } | ||
| this.setIndex = indexName => helper | ||
| .setIndex(indexName) | ||
| .search(); | ||
| if (!isIndexInList) { | ||
| throw new Error(`[sortBySelector]: Index ${currentIndex} not present in \`indices\``); | ||
| } | ||
|
|
||
| sortBySelectorRendering({ | ||
| cssClasses, | ||
| currentValue: helper.getIndex(), | ||
| options: selectorOptions, | ||
| setValue: this.setIndex, | ||
| shouldAutoHideContainer: autoHideContainer, | ||
| containerNode, | ||
| }, true); | ||
| }, | ||
| this.setIndex = indexName => helper | ||
| .setIndex(indexName) | ||
| .search(); | ||
|
|
||
| render({helper, results}) { | ||
| sortBySelectorRendering({ | ||
| cssClasses, | ||
| currentValue: helper.getIndex(), | ||
| options: selectorOptions, | ||
| setValue: this.setIndex, | ||
| shouldAutoHideContainer: autoHideContainer && results.nbHits === 0, | ||
| containerNode, | ||
| }, false); | ||
| }, | ||
| }; | ||
| }; | ||
| renderFn({ | ||
| currentValue: currentIndex, | ||
| options: selectorOptions, | ||
| setValue: this.setIndex, | ||
| nbHits: 0, | ||
| }, true); | ||
| }, | ||
|
|
||
| export default connectSortBySelector; | ||
| render({helper, results}) { | ||
| renderFn({ | ||
| currentValue: helper.getIndex(), | ||
| options: selectorOptions, | ||
| setValue: this.setIndex, | ||
| nbHits: results.nbHits, | ||
| }, false); | ||
| }, | ||
| }; | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters