zidaneUI kit reference
hooks/useTabDrag
import { … } from 'zidane-ui'ui/src/hooks/useTabDrag.ts
Functions#
moveIdFunction#
Moves id by delta slots (keyboard reorder), clamped at the ends.
function moveId(ids: readonly string[], id: string, delta: number): string[]Parameters
| Name | Type | Description |
|---|---|---|
| ids | readonly string[] | The current order; not mutated. |
| id | string | The tab to move; a copy of |
| delta | number | Slots to move: negative is left, positive right. |
Returns
string[]useTabDragFunction#
Tracks one tab strip's drag: what to draw, the held tab, and the handlers
to pass to Reorder.Group and each Reorder.Item.
function useTabDrag(
ids: readonly string[],
commit: (order: readonly string[]) => void,
): { bounds: TabDragBounds | undefined; dragging: string | null; onDragEnd: () => void; onDragStart: (id: string) => void; onPointerDown: (e: PointerEvent<HTMLElement>) => void; onReorder: (next: string[]) => void; shown: string[]; wasDragged: () => boolean }Parameters
| Name | Type | Description |
|---|---|---|
| ids | readonly string[] | The owner's order, drawn while nothing is held. |
| commit | (order: readonly string[]) => void | Receives the new order once, on drop. |
Returns
{ bounds: TabDragBounds | undefined; dragging: string | null; onDragEnd: () => void; onDragStart: (id: string) => void; onPointerDown: (e: PointerEvent<HTMLElement>) => void; onReorder: (next: string[]) => void; shown: string[]; wasDragged: () => boolean }Interfaces#
TabDragBoundsInterface#
How far the held tab may travel (dragConstraints): the strip's edges, relative to the tab.
interface TabDragBoundsProperties
| Name | Type | Description |
|---|---|---|
| left | number | How far left the held tab may go, in px from where the press started (zero or negative). |
| right | number | How far right it may go, in px from where the press started (zero or positive). |