Swipe Actions

Usage

import { SwipeActions } from '@wdzyi/ui';

<SwipeActions
  label='Inbox'
  items={messages}
  onAction={(id, action) => {
    if (action === 'archive' || action === 'delete') remove(id);
    if (action === 'read' || action === 'unread') toggleRead(id);
  }}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

itemsSwipeActionsItem[]

The rows, in order. Each has an id, a title, a quieter line under it, a meta across from it such as the time, and whether it’s unread.

actionsSwipeActionsSet | ((item) => SwipeActionsSet) = Delete and Archive, Read

What swiping left and right shows, nearest the row first, each with an id, a short label, a 16px icon, a tone, and whether it takes the row away. Every action has the same quiet plate, and a tone of danger draws its icon and label in pink. A function gives each row its own.

onAction(id: string, action: string) => void

Called with the row’s id and the action’s as soon as it’s chosen. For an action that takes the row away, drop the item from items here.

labelstring = 'Inbox'

Names the list for screen readers.

classNamestring

Added to the list, for its width. It fills whatever it’s in.

Notes

• The actions are one family: equal square cells the row’s full height, each an icon over a short label on the same quiet plate, a hairline apart, with Delete’s in pink. Let go past halfway, or with a flick faster than 0.45px a ms, and a row opens; short of that it shuts, either way on a 440ms spring. Past its actions it follows at 42% of the pointer’s travel. Icons come in as the room opens, and the words only once each cell is nearly square.
• Carried past 62% of its width, the furthest action fills the room on a deeper plate in 220ms, its icon going to the row’s edge, and letting go there does it. A row it takes away slides off in 260ms, the icon carried with it, and the list closes the gap in 320ms. Pressed, an action gives to 92% and its plate darkens, and Delete fills with a pink tint instead.
• Delete sits nearest the row and Archive furthest out, so a full swipe archives, which can be undone, rather than deletes. Only one row is open at a time, and a tap shuts it. It sends open and close as a row opens and shuts, tick as a full swipe arms, whoosh as a row is swiped away, and select for a pressed action, then success, or erase for a danger one, once it’s done.
• More opens every action in the same place, then steps aside while they show, so it never crowds them, and focus goes on to the first. Escape shuts the row and hands focus back to More, and when a row goes, focus moves to the next one’s More.
• With reduced motion, rows open, shut and go without sliding, and nothing gives when it’s pressed.