pnpm dlx shadcn@latest add @audio-ui/use-track-reorder
import { useTrackReorder } from "@/hooks/use-track-reorder";| Files | hooks/use-track-reorder.ts, components/audio-ui/track-grip.tsx |
|---|---|
| Depends on | sortable-drag |
| npm | Nothing |
| Used by | arrangement-editor, arrangement-view, block-timeline |
| Export | Kind | What it is |
|---|---|---|
TrackGhost | interface | The copy of a track's header that follows the pointer: draw it fixed, at this box, with ref on it. |
useTrackReorder | function | Reorders the tracks of a timeline: drag a track's grip to move it, or press Up or Down on it. |
Usage
useTrackReorder moves tracks: give each track a grip, and drag the grip, or press Up or Down on it. The copy of the dragged track's header follows the pointer, the others slide aside, and the view scrolls at its edges, with no render while it moves (sortable-drag). The grip and the copy are TrackGrip and TrackReorderGhost, installed with it.
It is one of the parts the Arrangement composes.
API
Props · 7
The tracks' ids, top to bottom.
A track was dropped at
index.For a track's grip: its pointer and key handlers.
The track dragged.
The copy to draw under the pointer, and the ref it takes.
The grip, down the left edge of a track's header.
The copy of the dragged track's header under the pointer.