Support for onClick and target properties in <Page> actions for EmbeddedApp

[jimmyn]

It would be great if <Page> component can support all the attributes that ShopifyApp.Bar.initialize supports in the embedded app SDK.

Something like:
<Page secondaryActions={[{content: 'About', url: '/about', target: 'app'}]}>

Or
<Page secondaryActions={[{content: 'About', onClick: () => history.push('/about')}]}>

[lemonmade]

Hi @jimmyn. The onClick use is supported, although we use the property onAction instead of onClick. So, change you example to:

<Page secondaryActions={[{content: 'About', onAction: () => history.push('/about')}]}>

and it should work fine. The first one does not work currently, but it's one of the things we are actively working on. That should be part of our first minor release. I'll close this issue once we've actually shipped the feature.

[jimmyn]

@lemonmade thanks for the explanation, great job with polaris!

[RaduDragomir]

Hi,

can i add onClick to ResourceList.Item ? I want to open a modal instead of going to a specific page.

[hallenmaia]

@Korfos see my code:

<ResourceList items={this.props.data.map((campaign, index) => ( { url: this.modal({action: 'edit', id: campaign.id}), attributeOne: campaign.name, actions: [ {content: "Delete", onClick: () => this.handleDestroy(campaign.id)} ], persistActions: true, exceptions: [], } ))} renderItem={(item, index) => { return <ResourceList.Item key={index} {...item} />; }} />

If you want use url prop, call a function with:
url: this.my_function(params),

If you want use actions, call same function with:
onClick: () => this.my_function(params )

[RaduDragomir]

@hallenmaia I tried adding my own function like bellow, but it doesn't seem to trigger. Am i doing something wrong?

<ResourceList items={this.props.data.map((campaign, index) => ( { url: this.my_function(index), attributeOne: campaign.name, actions: [ {content: "Delete", onClick: () => this.handleDestroy(campaign.id)} ], persistActions: true, exceptions: [], } ))} renderItem={(item, index) => { return <ResourceList.Item key={index} {...item} />; }} />

[RaduDragomir]

I used onAction in the actions section and it worked like this. Thanks for the pointers.

[hallenmaia]

@Korfos the url prop only accepts string (URL). I'm sorry for incorrect aswer.

See complete test code: https://codesandbox.io/s/zp8J4AAx7

[lemonmade]

Yeah, if it's an action on the item, we recommend using actions on ResourceList.Item. @hallenmaia, just one recommendation: don't map over your data before passing it to items, instead, just pass the raw data to items and process it in renderItem. Mapping ahead of time means you do it for every render; mapping in renderItem means you only do it when we find we actually need to render an item to the screen (in the future, this may be optimized for you).

[hallenmaia]

@lemonmade very nice code. Living and learning.

[lemonmade]

Should be fixed by v1.1.0 (we now automatically infer the target based on the url you pass)