cosmos icon indicating copy to clipboard operation
cosmos copied to clipboard

ResourceList.Item within renderItem does not render actions

Open jcenturion opened this issue 7 years ago • 1 comments

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

image

jcenturion avatar Jun 30 '18 13:06 jcenturion

@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?

siddharthkp avatar Jul 05 '18 08:07 siddharthkp