gra-ui

Component

CheckpointQueue

It makes you drag a seal through three checkpoints. Each checkpoint moves the first child to the back of the queue, leaving the content in a new order when the filing is complete.

Possible use

It could be used to make a reviewer file the fields of a handoff card one checkpoint at a time, or to force a presenter to ceremonially rotate an agenda before discussing it.

Reasonable alternative

A reasonable local alternative is an array and one queue rotation per button click, or simply rendering the intended order. Publishing a drag-operated filing queue is difficult to defend when the items already had an order.

01 / Preview

Try it yourself.

Preview Interactive
Checkpoint queue0 / 3 checks
  1. Title
  2. Status
  3. Owner
  4. Date

Drag the seal past each mark. Every mark sends the first child to the back.

Drag the seal through three marks. Each mark sends the first field to the back.

Mechanism
1
Start with four ordinary fields waiting in a queue.
2
Drag the seal past the first mark, or use the arrow keys on the track.
3
Each reached checkpoint moves the first field to the end of the queue.
4
Restore the queue when the three-checkpoint filing is complete.

02 / Usage

Put it somewhere.

example.tsxTSX
import { CheckpointQueue } from "gra-ui";
import "gra-ui/styles.css";

export function FiledFields() {
  return (
    <CheckpointQueue>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
      <span>Date</span>
    </CheckpointQueue>
  );
}

03 / API

Small surface area.

PropTypeDescription
childrenReactNodeThe content rotated through the queue as checkpoints are reached.