Provide a way to click / touch an opened item, toggle all other items to close, including itself

[edwardfxiao]

Hi there,

1, In many cases, users are only allowed to select actions for a single item at a time. This prevents multiple items from showing actions simultaneously. (Should be closed automatically first one if user tries to open another one)

2, Asking the user to swipe to close an action can be a poor user experience. (Also allowing close by clicking)

Is there any way to improve these?

[marekrozmus]

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?

[edwardfxiao]

https://user-images.githubusercontent.com/11728228/233829277-d7099126-1f0e-4e52-9f1c-1d507feb7753.mov

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

[edwardfxiao]

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

[marekrozmus]

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

[edwardfxiao]

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

[edwardfxiao]

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>

https://user-images.githubusercontent.com/11728228/233897386-7026accb-0ca2-40a1-97cd-5b095ec8b281.mov

[edwardfxiao]

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.