Result Card/List UI+Ux Issues

[siddharthlatest]

I'm submitting a ...

• bug report

Current behavior:

• Returning a null result throws typeError and crashes ResultCard / ResultList: Ignore rendering null objects returned from onData(..) #158
• It should be possible to render a markup for the title prop
• desc should be called description
• url prop when present opens links in the same tab. Is there a way to control this? Ideally, there should be - sometimes it makes sense to open them in the same tab, other times as an external link in a new tab
• In innerClass prop, the already specified CSS properties by the lib can only be overridden by a !important suffix. (An example of fail case: The TodoMVC class-injection, or any time the classes are written by an external lib will fail) without a normal cascade behavior. This will be handled by css-specificity.
• Default font-size of resultStats text should be similar to the default font-size of sort dropdown text. 12px or its equivalent in rem works well imo.
• In ResultCard, on hovering over a card - the shadow disappears. It is hard to tell that the card is clickable. In the following image, left card is in hover state.
  
  Ideally, the shadow should subtly increase to highlight a current selection.

[siddharthlatest]

@metagrover How can the url prop be opened in a new tab?

[metagrover]

We have added the support for target prop here.

target is same as that of native attribute on a tag.

[aol-nnov]

sorry to bumping a closed ticket, but could you please give me some guides on how to use ResultCard with react-router? (I know, it's on the list in #143, but it'd be awesome if you shed some light on it)
Also I'm wondering if it'd be handy to create some component, that would represent a result item and pass it as a property to ResultCard component, where it will be rendered for each result?
It seems to me, that it will make result item way more customisable.

Thanks in advance!

[divyanshu013]

Hi @aol-nnov. ResultCard works like any other react component if you wish to use it with react-router. Are you trying to use different ResultCard components on different routes or is there anything else you're trying? Let me know.

You can use the onData prop and use it to render your own component with the data. For example,

// in the parent react component
renderData(res) {
  return {
    description: <MyCustomComponent data={res} />
  }
}

// inside render function
<ResultCard
  ...
  onData={this.renderData}}
/>

Then in your MyCustomComponent you can render the data in your own way. Hope this helps 🙂

[aol-nnov]

@divyanshu013 thanks for the snippet, but the way you propose only allows to modify description part of an item.
But I was proposing to somehow make the whole Card https://github.com/appbaseio/reactivesearch/blob/dev/packages/web/src/components/result/ResultCard.js#L343 customisable by allowing to replace it with custom component passed from outside, which will bring result item customisation to the new level.

As for my ResultCard usage, my idea was to navigate to another react route (not another page) on result item click.
So, I was hoping that I could wrap each result item into react-router's Link component.

May be there is another way around, I've just started with it! :)

[divyanshu013]

@aol-nnov the way ResultCard works is if you only pass description then it would take the entire space in the Card. So, here the Card provides only the layout and the CSS for card.

If you wish to have your own component instead of Card, you can try ReactiveList which lets you roll out your own result item. The usage is pretty similar to ResultCard but you return a JSX (or a react component) in the onData method. Here is an example where I'm using ReactiveList to render my custom card component.

Note that in ReactiveList it needs you to specify the layout styles. There is also a blog post for the above usage of ReactiveList if you would like to know about it in more detail here.

As for the usage with Link component, yes you can just wrap the result item and it would work fine :)

[aol-nnov]

@divyanshu013 thank you for all the hints!