cosmos
cosmos copied to clipboard
ResourceList.Item within renderItem does not render actions
Use case
As a developer, I would like to have the possibility to use dynamic data in actions. For example:
<ResourceList
items={[
{
id: 'idjd9j9djd9jddj9',
title: "Item 1",
subtitle: "Native",
message: "hello",
image: ""
}
]}
renderItem={(item, props, index) => (
<ResourceList.Item
key={index}
title={item.title}
subtitle={item.subtitle}
image={item.image}
actions={[
{ icon: "settings", handler: function() { history.push(`/items/${item.id}/settings` }, label: "Settings" }
]}
>
<Code>{item.message}</Code>
</ResourceList.Item>
)}
/>
Live code
https://codesandbox.io/s/l9yv3m62nm
Sample Code
<ResourceList
items={[
{
title: "Item 1",
subtitle: "Native",
message: "hello",
image: ""
}
]}
renderItem={(item, props, index) => (
<ResourceList.Item
key={index}
title={item.title}
subtitle={item.subtitle}
image={item.image}
actions={[
{ icon: "settings", handler: function() {}, label: "Settings" },
{ icon: "delete", handler: function() {}, label: "Delete" }
]}
>
<Code>{item.message}</Code>
</ResourceList.Item>
)}
/>
Screenshot

@jcenturion Fair request!
How about adding instead of adding actions prop to renderItem, we pass the item to each handler?
<ResourceList
items={[]}
actions={[
{
icon: 'settings',
label: 'Settings',
handler: (event, item) => history.push(`/items/${item.id}/settings`)
},
{
icon: 'delete',
label: 'Delete',
handler: (event, item) => {}
}
]}
/>
For me, the use case for allowing actions in renderItem is allowing different actions for each item based on the item. @landitus What do you think about this?