SortableList

Ejemplos

import { SortableAddButton, SortableList } from "sebs7n-ui/sortable-list"
import { useState } from "react"

function InvoiceLines() {
  const [lines, setLines] = useState(LINES)
  const [editing, setEditing] = useState(false)
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <div className="flex items-center justify-end gap-1">
        {editing && (
          <SortableAddButton
            items={CATALOG.filter((line) => !lines.includes(line)).map((line) => ({ id: line.id, label: line.concept }))}
            onSelect={(id) => setLines([...lines, ...CATALOG.filter((line) => line.id === id)])}
            size="icon-sm"
          />
        )}
        <EditButton editing={editing} onEditingChange={setEditing} />
      </div>
      <SortableList
        aria-label="Líneas de la factura"
        editing={editing}
        getKey={(line) => line.id}
        getLabel={(line) => line.concept}
        items={lines}
        onEditingChange={setEditing}
        onRemove={(id) => setLines(lines.filter((line) => line.id !== id))}
        onReorder={setLines}
        renderItem={(line) => <LineRow line={line} />}
      />
    </div>
  )
}

import { SortableList } from "sebs7n-ui/sortable-list"
import { useState } from "react"

function Rollback() {
  const [editing, setEditing] = useState(false)
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <EditButton editing={editing} onEditingChange={setEditing} />
      <SortableList
        aria-label="Líneas de la factura, sin conexión"
        editing={editing}
        getKey={(line) => line.id}
        getLabel={(line) => line.concept}
        items={LINES}
        onEditingChange={setEditing}
        onReorder={() => new Promise((_, reject) => setTimeout(() => reject(new Error("Sin conexión")), 800))}
        renderItem={(line) => <LineRow line={line} />}
      />
    </div>
  )
}

import { SortableList } from "sebs7n-ui/sortable-list"
import { useState } from "react"

function Cards() {
  const [clients, setClients] = useState(CLIENTS)
  const [editing, setEditing] = useState(false)
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <EditButton editing={editing} onEditingChange={setEditing} />
      <SortableList
        aria-label="Clientes"
        className="gap-3"
        editing={editing}
        getKey={(client) => client.id}
        getLabel={(client) => client.name}
        itemClassName={(_client, state) => (state.dragging ? "rounded-surface" : undefined)}
        items={clients}
        onEditingChange={setEditing}
        onReorder={setClients}
        plain
        renderItem={(client) => (
          <div className="flex min-w-0 flex-1 flex-col gap-0.5 rounded-surface bg-surface px-4 py-3 shadow-widget">
            <span className="truncate text-body text-label">{client.name}</span>
            <span className="text-callout text-label-secondary">{client.pending}</span>
          </div>
        )}
      />
    </div>
  )
}

Props

Generadas del TypeScript del paquete. Las propias del componente, más las heredadas del primitivo que tienen algo que explicar —marcadas «heredada de Base UI»—. El resto está en la línea «hereda de».

Teclado

Tab

En edición, recorre los «−» y las manijas.

Espacio · Enter

Toma la fila; con la fila tomada, la suelta en el lugar nuevo.

↑ / ↓

Con la fila tomada, la mueven.

Escape

Con una fila tomada, cancela: vuelve a su lugar. Si no, sale de la edición.

Accesibilidad

• Cada fila es un ListRow de un <ul role="list">: nombrá la lista con aria-label.
• La manija es un <button> «Reordenar Factura 0012» (getLabel da el nombre) con las instrucciones en su aria-describedby. Fuera de edición no está: no hay paradas de Tab que no hagan nada.
• Tomar, mover, soltar y cancelar se anuncian en una región viva: «Tomaste Factura 0012, posición 2 de 5».
• El «−» es un <button> «Sacar Factura 0012»; al sacar se anuncia «Se sacó Factura 0012.» y el foco pasa al «−» que queda en su lugar.
• Con movimiento reducido las filas no se deslizan: saltan a su lugar.
• Entrar y salir de la edición se anuncia: «Modo edición. Arrastrá para ordenar.» y «Listo.» (labels.editing y labels.done). Si se saca la última fila, el foco queda en la lista.

Reglas de uso

• Solo se ordena en modo edición, como en iOS: editing + onEditingChange con un botón «Editar»/«Listo» de la app (o defaultEditing). El botón es obligatorio para el teclado: mantener apretado es solo de puntero, así que sin él quien usa teclado nunca entra en edición. También entra manteniendo apretada una fila ~0,5 s (mouse o dedo; un clic normal no), y sale con Esc o un clic afuera. En edición cada fila lleva el «−» adelante (con onRemove) y la manija al final.
• El «+» para agregar es SortableAddButton (del mismo subpath): va al lado del «Listo» de la app y abre un menú con lo que se puede agregar (items: { id, label, icon? }[], onSelect(id)); vacío, queda deshabilitado y dice «No hay más para agregar». Si el id es la clave del ítem, al aparecer el foco va a su «−» y se anuncia «Se agregó …».
• renderItem devuelve el contenido de la fila, no un <li> (un <li> adentro de otro rompe la hidratación). Recibe state.editing.
• itemClassName pone clases en el <li> de cada fila: un texto, o una función del ítem y su estado (index, dragging, editing). plain saca el separador y el padding de la fila, para un renderItem que dibuja su propia card (el espacio entre cards, className="gap-3"). Nunca [&>li] desde la app: la estructura de adentro puede cambiar.
• onReorder recibe los ítems en el orden nuevo, que se ve al soltar. Optimista: devolvé una promesa sin tocar items; si falla, vuelve el anterior y se anuncia «No se pudo guardar el orden». Si la app aplica el orden ella (cambia items), revertirlo y avisar si falla también es suyo: el componente no anuncia una vuelta atrás que no hizo.
• `@dnd-kit/core`, `@dnd-kit/sortable` y `@dnd-kit/utilities` son peers opcionales: npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities en la app que lo usa. Solo por subpath (sebs7n-ui/sortable-list).

Relacionados