Function Placeable

Creates a card board.

Draws the cells the layout given asks for wherever it places them, so headings, sticky panes, folding and scrolling stay the consumer's own, and fills each with the cards standing in it, in the order they are given. A card is moved by its handle: the grip beside its content or, with surface set, the card itself, dragged by its whole surface and drawn without a grip. Either way the content is free to hold controls of its own, which keep the clicks and the keys pressed on them. On a card dragged by its whole surface, a drag starting on a button or a link moves the card, while fields taking text or a value keep the pointer to themselves. A card is dragged into another cell with the pointer, by touch after a brief hold, so that the board can still be scrolled, or with the keyboard, Space or Enter picking up the card whose handle has the focus, the arrow keys carrying it to the next cell in their direction and the same keys dropping it, or Escape sending it back. Cards keep no order of their own within a cell, so a card is dropped onto a cell rather than between two cards. A dropped card glides into the cell it lands in.

The board is a single stop for Tab, landing on the handle the keyboard last stood on, and the arrow keys move from handle to handle in the order the cards are laid out, Home and End reaching the first and the last.

A card dropped into another cell is handed to onMove. A consumer refusing the move outright returns false, and the card never leaves its cell. Otherwise the card stays where it was dropped, marked as waiting, until the promise onMove returns settles, while no other card can be picked up. The board then shows the cards given again, so the move stays on screen only once the consumer gives the card back in its new cell: a consumer refusing the move once the store has answered, or failing to settle it, sees the card go back where it was picked up from. A card carried from the keyboard keeps the focus wherever it goes, so a reader is told where it stands by the cell around it.

<Placeable name="Issues" items={issues} card={issue => issue.title} onMove={move => store.update(move)}>{cell =>

    <div class="grid">{types.flatMap(type => states.map(state =>
        <Fragment key={`${type} ${state}`}>{cell({ row: type, column: state }, `${type}, ${state}`)}</Fragment>
    ))}</div>

}</Placeable>
Copy