ReorderController

A Reorder group on the DOM: the group, its items' drags, its keyboard and its announcements, one controller a group. make builds one over the context's Projection system and Announcer; a binding attaches its group element, gets a driver for each item, and closing the Scope ends the controller. A server render gets inert.

import * as ReorderController from "@wardic/dom/ReorderController"

const controller = yield* ReorderController.make({ values: () => items, onReorder: (next) => (items = next) })
controller.attach(list)
const driver = controller.item(item, () => Option.some(element))

Its exports also name types the module doesn't export: its internal types.

Interfaces

End

A user's reorder that changed the order, at its end: a pointer drag released, or a keyboard lift dropped, with the item at another index than at its start. What an app saves: the whole order, or the one item that moved and where.

Extended by

HoldEnd

Type Parameters

V

V

Properties

from

readonly from: number;

Its index at the gesture's start.

to

readonly to: number;

Its index at the end.

value

readonly value: V;

The item the user moved: the one dragged, or lifted.

values

readonly values: V[];

The order at the end.

HoldEnd

A Reorder hold's end, whatever ended it, once: the order then, the item, its index at the start and now (-1 once it's out of the values), and how. After onReorderEnd, in the same task, when the order changed.

Extends

End<V>

Type Parameters

V

V

Properties

from

readonly from: number;

Its index at the gesture's start.

Inherited from

End.from

how

readonly how: HoldHow;

How it ended.

to

readonly to: number;

Its index at the end.

Inherited from

End.to

value

readonly value: V;

The item the user moved: the one dragged, or lifted.

Inherited from

End.value

values

readonly values: V[];

The order at the end.

Inherited from

End.values

HoldStart

A Reorder hold's start: the item taken in hand, by its drag's start or a keyboard lift, and its index then.

Type Parameters

V

V

Properties

from

readonly from: number;

Its index at the start.

value

readonly value: V;

The item taken in hand.

ItemDriver

One item of a ReorderController: its binding feeds it the item's handle, drag samples, keys, focus and presses.

Properties

dispose

readonly dispose: () => void;

The item is going away: end a gesture or a lift still in progress.

Returns

void

dragAxis

readonly dragAxis: () => Axis;

The axis the item's drag takes, read at each gesture's start.

Returns

Axis

onBlur

readonly onBlur: () => void;

Focus left the item: a lift drops where it is, unless focus is back on the item.

Returns

void

onKey

readonly onKey: (event) => void;

A key at the item or inside it, inside its dispatch: a keyboard reorder's.

Parameters

event

KeyboardLikeEvent

Returns

void

onPress

readonly onPress: () => void;

A press on the item: a lift drops where it is, before any drag.

Returns

void

onSample

readonly onSample: (sample) => void;

The item's drag samples, as the drag delivers them.

Parameters

sample

Sample

Returns

void

register

readonly register: (handle) => () => void;

Parameters

handle

NodeHandle

Returns

() => void

Type Aliases

HoldHow

type HoldHow = "drop" | "cancel" | "unmount";

How a Reorder hold ended: "drop", released or dropped where it is (a pointer's release or cancel, a drop key, focus leaving, a press, the app's values, another hold); "cancel", Escape, the order put back; "unmount", its item went away.

Options

type Options<V> = ReorderControllerOptions<V>;

What a binding hands its group: the app's values, its axis, its keyboard and its announcements.

Type Parameters

V

V

ReorderController

type ReorderController<V> = Omit<ReorderController<V>, "dispose">;

A Reorder group on the DOM: what a binding attaches its group element and items to.

Type Parameters

V

V

Services

type Services = 
  | ProjectionSystem
  | PassEnds
  | Announcer.Announcer;

The services a controller takes from its context: the projection system its items are nodes of, with what tells it each Measure pass's end (DomProjectionSystem's Layer provides both), and the Environment's Announcer.

Variables

DEFAULT_INSTRUCTIONS

const DEFAULT_INSTRUCTIONS: string;

A Reorder item's default instructions on the web: core's keys, and focus mode. A screen reader in browse mode (NVDA's, JAWS's) keeps Space and the arrows for itself until its user switches to focus mode, and it doesn't switch by itself on a list item.

GROUP_STYLE

const GROUP_STYLE: Readonly<{
  "overflow-anchor": "none";
}>;

The group element's style: no scroll anchoring, so the browser doesn't shift the page as items move (Motion's Group.tsx:187-195 at 16c6122). The user's style goes over it.

inert

const inert: ReorderController<never> = internal.INERT_REORDER_CONTROLLER;

The controller a server render gets: its group has no values, so every operation on it does nothing, its axis is "y", and an item's driver does nothing too.

make

const make: <V>(options) => Effect.Effect<ReorderController<V>, never, Services | Scope.Scope>;

Build a group's controller over the context's projection system, announcing through its Announcer, in the current Scope: closing it ends the controller.