Button component in content prop

[ziabskiK]

How is it possible to trigger onClick function on button which is located as a content of swipe element?

Any tip how to achieve this?

Thanks in advance.
Edit Code:
{({ className, ...rest }) => (

<SwipeableListItem key={id}
swipeLeft={{
content: <Button startIcon={} className={classes.addToCartBtn}
onClick={e => {
e.stopPropagation();
console.log('Test function call');
}}>
Add to cart
,
actionAnimation: ActionAnimations.NONE
}}
{...rest}>
///items

))}

[marekrozmus]

I assume you want to achieve the iphone functionality like showing few buttons after swipe?

It looks like you can so far do the thing you've mentioned above with the swipeRight prop. It currently does not work for the 'left' content as it is rendered 'under' the right content.
So a little fix would need to be done to not only change the opacity of the swipe content items but also the display style.

Let me know if this is needed and try if you can achieve the behavior you need with the swipeRight prop.

[marekrozmus]

@all-contributors please add @ziabskiK for bug

[allcontributors]

@marekrozmus

I've put up a pull request to add @ziabskiK! 🎉

[marekrozmus]

We have checked this issue and current architecture does not allow this. We will monitor this issue and get back to you if more users will be interested in such a feature. Most probably, a huge rewrite is needed to support your request as the inner node layout and positioning is pretty complicated.

[Ex0-Ghost]

well i searched everywhere for that functionality that you mention , when you swipe it reveals the content behind and stays like that for you to click on a button, like here , i don't want to use react-native-web just for that

[marekrozmus]

Hi, I'll try to make another try hopefully this weekend. Will let you know. 🙂

[derwaldgeist]

I would also love to see this feature. We're trying to mimic the behavior of a native swipeable iOS listview as much as possible, but this would require buttons that are revealed if you just swipe a bit (but not beyond a certain threshold). react-swipe-to-delete-ios supports this, but it has other issues (like rubber-banding of the enclosing web-page).

[marekrozmus]

@derwaldgeist, @Ex0-Ghost Please check this one and leave some comments there :) I have reimplemented all from scratch so still might have some issues.
https://github.com/marekrozmus/react-swipeable-list