onPress/href for a CardView/Card

[prabirshrestha]

Provide a general summary of the feature here

Provide a mechanism to handle onPress or add links for cardview/card.

🤔 Expected Behavior?

allow callback for card or specify a link.

😯 Current Behavior

not possible

💁 Possible Solution

No response

🔦 Context

Implementing some sort of file explorer with Cards as shown here.

If it is a folder I would like to navigate to the folder and if a file I would like to show a larger preview.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Cards are not really released yet. That's why there are no docs yet.

If you're an adobe employee, please reach out internally. Otherwise, depending on what you're using in our library, we are trying to support links in collections and it will hopefully be in our next release #4993.

This means support for href on Items. We will not be exposing onPress though, for reasons cited here #5058 and we are unlikely to update the Cards packages for a while. You can still use our hooks to rebuild your own though. For instance, you could do something like this https://react-spectrum.adobe.com/react-aria/ListBox.html#vertical-grid

[prabirshrestha]

href seems like exactly what I'm looking for. I'm aware it is not officially released so currently trying out the alpha.

[prabirshrestha]

I was able to use href for Menu but seems like it is not implemented for Cards.

I was able to get basic grid using the react-aria ListBox but does seem lot of work on my side to get the all the features for CardView. It is probably faster and easier to implement href for Cards.

[snowystinger]

I'll discuss it with the team to see if we want to extend support.

In the meantime, it has occurred to me that you could also use Actions to do this. CardView allows onRowAction, which should behave the same as Table's onAction https://react-spectrum.adobe.com/react-spectrum/TableView.html#row-actions because table uses the same prop in its hook calls under the hood.

Before we added links, this was the recommended way to accomplish what you've asked for, so I do not view this as hacky.

[prabirshrestha]

onRowAction seems to work but is not available in typescript definitions. Would be good to have it there so it can be checked during compile time.

For now I'm using the following workaround to by pass type checking.

const onRowAction = useCallback((key: React.Key) => console.log(key), []);
const cardViewExtraProps = { onRowAction } as any;

return <CardView {...cardViewExtraProps} />