add menu select widget #2316
add menu select widget #2316
Conversation
iam4x
force-pushed
the
feat/2.2-menuSelect
branch
from
f269340
to
97571f9
Compare
|
Nice :) |
|
Deploy preview ready! Built with commit f269340 https://deploy-preview-2316--algolia-instantsearch.netlify.com |
|
Deploy preview ready! Built with commit 2c1ac30 https://deploy-preview-2316--algolia-instantsearch.netlify.com |
src/components/MenuSelect.js
Outdated
| templateProps: PropTypes.object.isRequired, | ||
| }; | ||
|
|
||
| get selectValue() { |
There was a problem hiding this comment.
This is not very idiomatic with the rest of the codebase. Do we want to move forward with that notation?
There was a problem hiding this comment.
Let's use the JavaScript features we are offered no? (When it makes sense).
I like JavaScript getters, and here it makes sense because I use this value more than once.
src/components/MenuSelect.js
Outdated
| templateProps: PropTypes.object.isRequired, | ||
| }; | ||
|
|
||
| get selectValue() { |
There was a problem hiding this comment.
In my head it was the value of the DOM element, so selectValue. But it works the other way around also.
src/components/MenuSelect.js
Outdated
| } | ||
|
|
||
| handleSelectChange = ({ target: { value } }) => { | ||
| this.props.refine(value === 'all' ? this.selectValue.value : value); |
There was a problem hiding this comment.
That's interesting. You implement a special value for the selection. I think it should be part of the connector API. I would go for undefined or null (or both) as refine(null) is semantically close to "refine nothing" which is what we want when implementing "no filter / all".
There was a problem hiding this comment.
For reference, this is what a user tried to do: https://stackoverflow.com/questions/46000184/algolia-instantsearch-connectmenu-refine-remove-current-refined-value
There was a problem hiding this comment.
Yes, I don't really know if it's the right time, we need to introduce this change a bit everywhere (according to the issue) like on the connectRefinementList connectHieararchicalMenu etc...
We can do this in the next step?
src/connectors/menu/connectMenu.js
Outdated
| @@ -139,6 +139,23 @@ export default function connectMenu(renderFn) { | |||
| return this.isShowingMore ? showMoreLimit : limit; | |||
| }, | |||
|
|
|||
| refine({ helper, items }) { | |||
| return facetValue => { | |||
There was a problem hiding this comment.
When working with @marielaures we found that actually you don't need to use items to figure out the refined value. You can get it using getHierarchicalFacetBreadcrumb (doc), the first item will be the one currently selected if any.
Using this, you can simplify the code by keeping the reference to the helper from the init call.
|
With pleasure 🙌 |
* feat(widgets): add menuSelect widget * feat(dev): add example menuSelect * doc(menu): minor fixes * doc(menuSelect): write documentation about menuSelect widget * feat(connectMenu): falsy values remove filter * refactor(MenuSelect): use falsy value to remove refined value * test(menuSelect): test widget & component * fix(connectMenu): correctly cache returned `refine` fn * fix(MenuSelect): templatesProps * refactor(connectMenu): dont re-instanciate a fn at every render * refactor(connectMenu): rename to `this._refine`
|
GG this has been a long discussed widget over time since the start of IS.js. Now we just did it, because we wanted it. 💥 |
* feat(widgets): add menuSelect widget * feat(dev): add example menuSelect * doc(menu): minor fixes * doc(menuSelect): write documentation about menuSelect widget * feat(connectMenu): falsy values remove filter * refactor(MenuSelect): use falsy value to remove refined value * test(menuSelect): test widget & component * fix(connectMenu): correctly cache returned `refine` fn * fix(MenuSelect): templatesProps * refactor(connectMenu): dont re-instanciate a fn at every render * refactor(connectMenu): rename to `this._refine`
* feat(widgets): add menuSelect widget * feat(dev): add example menuSelect * doc(menu): minor fixes * doc(menuSelect): write documentation about menuSelect widget * feat(connectMenu): falsy values remove filter * refactor(MenuSelect): use falsy value to remove refined value * test(menuSelect): test widget & component * fix(connectMenu): correctly cache returned `refine` fn * fix(MenuSelect): templatesProps * refactor(connectMenu): dont re-instanciate a fn at every render * refactor(connectMenu): rename to `this._refine`
* feat(widgets): add menuSelect widget * feat(dev): add example menuSelect * doc(menu): minor fixes * doc(menuSelect): write documentation about menuSelect widget * feat(connectMenu): falsy values remove filter * refactor(MenuSelect): use falsy value to remove refined value * test(menuSelect): test widget & component * fix(connectMenu): correctly cache returned `refine` fn * fix(MenuSelect): templatesProps * refactor(connectMenu): dont re-instanciate a fn at every render * refactor(connectMenu): rename to `this._refine`
Summary
Works like a menu widget but displays as a select DOM element.
Result
Fixes #1904