Provide a way to click / touch an opened item, toggle all other items to close, including itself about react-swipeable-list HOT 7 CLOSED

Alternatively, would it be possible for you to provide a reset API that would allow us to manually close the <SwipeableListItem> components?

This could be very useful for users who want to leave multiple items open at once, or for those who prefer to have only one item open at a time.

from react-swipeable-list.

Hi,

Please describe it in more detail - do you mean that if user will open list item and then tries to open another one then the first one should be closed automatically?

from react-swipeable-list.

Like this, always open one at a time, and can be closed by clicking

from react-swipeable-list.

Hi @marekrozmus,
I've revised my comment, and now it should make more sense to understand.

from react-swipeable-list.

@edwardfxiao let me know if the fix is OK for you. Just released 1.8.0 :)

from react-swipeable-list.

@marekrozmus
Yes it worked. However, one thing that can still be improved is the ability to close the current item by clicking on it.

On 1.8.0, Currently, if I open an item and click on it again, it does not close. Instead, it only closes when I click on a different item (which is good). Is there a way to allow the user to close an item by clicking on it again?

from react-swipeable-list.

Okay, I think there are three things that need to be improved:

1, When there is only one <SwipeableListItem> in one <SwipeableList>on the page, I am unable to close it by clicking on it again.

2, When there are multiple <SwipeableList> on the page, the actions of each <SwipeableListItem> cannot affect the others.

3, Allow the user to click anywhere else on the page to close (like the video shows)

The second issue may be outside your scope, though.

In my case

<SwipeableList>
{R.filter(i => R.prop('pinned')(i) === true)(conversations).map((item, key)=>{
return <SwipeableListItem key={key}>{item.name}</SwipeableListItem>
})}
</SwipeableList>

<SwipeableList>
{R.filter(i => R.prop('pinned')(i) === false)(conversations).map((item, key)=>{
return <SwipeableListItem key={key}>{item.name}</SwipeableListItem>
})}
</SwipeableList>

from react-swipeable-list.