Reorder List

Usage

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

<ReorderList
  label='Project tasks'
  items={[
    { id: 'audit', label: 'Audit the current flows', meta: '2 days' },
    { id: 'sketch', label: 'Sketch three directions', meta: '3 days' },
    { id: 'brief', label: 'Write the brief', meta: '1 day' },
  ]}
  onReorder={(ids) => saveOrder(ids)}
/>

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

Props

itemsReorderListItem[]

The rows, in order. Each has an id, a label and a quieter meta beside it. Five sample tasks by default.

onReorder(ids: string[]) => void

Called with every id in the new order, each time a row is dropped somewhere new. Items passed back in that order carry on from there.

labelstring = 'Tasks'

Names the list for screen readers.

classNamestring

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

Notes

• Taken, a row rises to 102% in 200ms, its hairline darkening and its shadow lengthening, and follows the pointer exactly. The rows it passes slide a place on a 380ms spring, and letting go settles it home from wherever it was drawn on a 460ms one.
• It passes a row once its edge crosses that row’s middle, so a row carried to a place lands well inside it rather than on the line between two. Past either end it gives 14px at most.
• Space lifts the row whose handle has focus, the arrows, Home and End carry it, Space drops it and Escape puts it back, with focus staying on the handle. Each move is announced, as in Moved Write the brief to position 1 of 5.
• Only the handle starts a drag, so a thumb anywhere else on a row still scrolls the page. The meta hides when the list is under 300px wide.
• With reduced motion, rows change places without sliding, and nothing grows.