Reactivesearch: Hide filter components if no terms found

[aol-nnov]

Let's imagine an ES index of books: title, genre.
Also, we'll add a field scareRating for books of genre horror.

Now, we add Multilist for genre and RangeSlider for scareRating.

So, I'd like RangeSlider to be visible only if genre "horror" is selected in Multilist.

@metagrover could you please tell if it is possible to achieve such behavior? Ideally I do not want custom rendering, just hide the component completely.

Seems it's somehow related to #174, but I'm not completely sure.

[siddharthlatest]

I think you can achieve this using onValueChange prop of MultiList to find when the value horror is selected, save that as a boolean flag in your component's state and render the RangeSlider component when this flag is set. Have you tried this?

[aol-nnov]

@siddharthlatest unfortunately I need a more generic way. This example was oversimplified for the sake of brevity.

If I handle all sorts of combinations in onValueChange it'll gonna be a monstrous construction! :)

[aol-nnov]

OFFTOPIC: Also I wonder how come I can't summon @metagrover to any issue? What's the special magic for that? :-D

[metagrover]

I've a wild idea that you can try:

Use ReactiveComponent to wrap your RangeSlider - this will give you access to the reactivesearch-redux-store and now monitor the selectedValues to check for the MultiList values that interest you and then conditionally render the RangeSlider when it seems appropriate.

If you see any complications here, feel free to summon me here 🤘

[aol-nnov]

Deepak, I was thinking about another approach: Multilist filters are applied to query that is used to set up RangeSlider controls. If that query returns no results, RangeSlider is hidden.

I do not want to be bound to certain values of any filters (as it was proposed earlier by @siddharthlatest ).

I'm thinking of some patch to render function of the components:
for example, in MultiList:

if(itemsToRender.length == 0 && this.props.hideWhenEmpty) return null;
// the rest of render() goes here

Would anyone except me benefit from it, after all? :)

P.S.: okay, RangeSlider was not the best example. Let it be DynamicRangeSlider, so range.start and range.end are calculated from query.

Sorry if the explanation is confusing. I'll try to clarify it if you need...

[metagrover]

I think, in that case, react prop should work ideally. You can add MultiList's componentId to the react prop of DynamicRangeSlider.

Let me know if that helps.

[aol-nnov]

Gosh, it's me!... I did not have correct data in the ES index...
And I knew about react prop and was using it!

Sorry for disturbing. Everything works like a charm! :)