Feature: Animated Swipe to Delete

[jcuenod]

I'm wanting to have the swipe action remove items from the list. I want this removal to be animated.

Describe the solution you'd like
Ideally this would involve simply changing the <SwipeableListItem> children in a <SwipeableList> and having the children observed so that the component can automagically transition the deleted item away. That's the most developer friendly solution, to my mind, but I guess there are other options as well...

[marekrozmus]

Hi, thanks for feature request :) Do you need any specific API or event handlers?

[jcuenod]

Hey thanks for taking the time on this.

It depends on how you want to implement it. The challenge is that right now I feel like the <SwipeableList> is most likely rendered using something like

<SwipeableList>
    {myArray.map(a => `<SwipeableListItem>${a.content}</SwipeableListItem>`)}
</SwipeableList>

If that's how people are generating their swipeable lists, it will be hard to observe changes (I should think).

One option that comes to mind is to have

<SwipeableList
    list={myArray}
    renderFunction={a => `<SwipeableListItem>${a.content}</SwipeableListItem>`)}
/>

This would make it observable but that's a significant change to your current API. So I feel like whatever you think is best for current users is the direction you should go.

[marekrozmus]

@all-contributors please add @jcuenod for ideas

[allcontributors]

@marekrozmus

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

[jcuenod]

In hindsight, I guess you would want a flag that allows people to disable this. Something like:

<SwipeableList
    animateChanges={true} />

This makes me wonder whether there is a difference between animating deletions and animating additions (should there be two flags). It also makes me think that you probably don't want the list animated at the start.

Most importantly, it makes me think that you need to be able to track the key. So maybe the example above needs myArray to be something like:

const myArray = [{
    key: 1,
    content: "List Item 1"
}]

[marekrozmus]

I had simple solution for deletion but now I see that also addition would need to be implemented. To fix it fully and to make it configurable it will require some more reimplementation of the control. So please be patient, it will take some more (free) time :)

[marekrozmus]

Here is proposal #144 - usage of react-transition-group outside the swipeable items. This won't break any current functionality and solves both issues - adding and removing. I'll prepare later final fix with more exmaples.

[marekrozmus]

@jcuenod release with fixes is ready - enjoy 🎉

[jcuenod]

Thanks @marekrozmus, could you post code for the gif you posted in #144 somewhere?

[marekrozmus]

It is already there in examples folder:

• the code for the animations:
  https://github.com/sandstreamdev/react-swipeable-list/tree/master/examples/src/animations
• working example:
  https://sandstreamdev.github.io/react-swipeable-list/ (select "Animations" from dropdown)