Upload queue
A queue of files that stays on screen: each row appears at once, says in words what it is doing, shows live progress while it works, and ends in a result chip; a non-blocking tray holds it.
import { UploadQueue, TaskTray, QueueStatus, tally } from "@krizaka/ui/upload-queue";Web uniquement — React, depuis @krizaka/ui/upload-queue. Bêta : son API peut encore changer à une version mineure.
- Mobile · ✗ à construire. The Expo apps get the same queue on @krizaka/ui/native. issue #511
Pourquoi il est là. Used by Yomizaka.
Quand l’utiliser
- Several files are checked, encoded or imported at once and the user keeps browsing.
- Progress comes from live events (Orazaka's run events): the row shows their words.
Quand ne pas l’utiliser
- One file in a form, with its own progress.À la place : File upload
- A task whose progress is a single percentage.À la place : Progress
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { UploadQueue, TaskTray, QueueStatus, tally } from "@krizaka/ui/upload-queue";Exemples
Queue
Checking, reading, done and failed rows.
Tray
The non-blocking tray that folds away.
Props
TaskTray
A non-blocking tray for a queue: the user keeps browsing. Bottom edge on a phone, bottom-right from sm.
| Prop | Type | Défaut | Description |
|---|---|---|---|
openLabelrequis | string | — | … and while folded (“Show”). |
summaryrequis | string | — | The tally in words (“1 running · 2 done”). |
titlerequis | string | — | The tray's name (“Checks”). |
toggleLabelrequis | string | — | The fold button's name while open (“Collapse”). |
defaultOpen | boolean | true | Starts open. |
UploadQueue
The files being checked, one row each. Changes are announced politely.
| Prop | Type | Défaut | Description |
|---|---|---|---|
itemsrequis | readonly UploadQueueItem[] | — | The rows, in the order they were added. |
labelrequis | string | — | The list's accessible name (“Checks in progress”) — passed translated. |
Accessibilité
- The list is named by
labeland announced politely. - A working row's progress is a
progressbarnamed by the file. - Failures are said in words, never by colour alone.
Clavier
| Touches | Action |
|---|---|
| Enter / Space | Folds or opens the tray. |
Bonnes pratiques
- Show the row at once (optimistic), then update it from the events: queued, reading, checking, done, failed.
- Say what it does in words (
statusText, translated): a bare spinner says nothing. - Put the result in
result(a chip) and one quiet action intrailing(keep, retry). - Only working rows move: the shimmer and the live progress stop with the work; reduced motion stops them.
TaskTrayis the container: a sheet on a phone, bottom-right fromsm.
Composants liés
Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub