SortableGrid

Ejemplos

import { SortableGrid } from "sebs7n-ui/sortable-grid"
import { useState } from "react"

function Widgets() {
  const [widgets, setWidgets] = useState(WIDGETS)
  const [editing, setEditing] = useState(false)
  return (
    <div className="flex w-full max-w-lg flex-col gap-3">
      <EditButton editing={editing} onEditingChange={setEditing} />
      <SortableGrid
        aria-label="Resumen"
        columns={2}
        editing={editing}
        getKey={(widget) => widget.id}
        getLabel={(widget) => widget.title}
        items={widgets}
        onEditingChange={setEditing}
        onReorder={setWidgets}
        renderItem={(widget) => <WidgetCardDemo widget={widget} />}
      />
    </div>
  )
}

import { SortableAddButton, SortableGrid } from "sebs7n-ui/sortable-grid"
import { useState } from "react"

function EditMode() {
  const [widgets, setWidgets] = useState(WIDGETS)
  const [editing, setEditing] = useState(true)
  const removed = WIDGETS.filter((widget) => !widgets.includes(widget))
  return (
    <div className="flex w-full max-w-lg flex-col gap-3">
      <div className="flex items-center justify-end gap-1">
        {editing && (
          <SortableAddButton
            items={removed.map((widget) => ({ id: widget.id, label: widget.title }))}
            onSelect={(id) => setWidgets([...widgets, ...WIDGETS.filter((widget) => widget.id === id)])}
            size="icon-sm"
          />
        )}
        <EditButton editing={editing} onEditingChange={setEditing} />
      </div>
      <SortableGrid
        aria-label="Resumen editable"
        columns={2}
        editing={editing}
        getKey={(widget) => widget.id}
        getLabel={(widget) => widget.title}
        items={widgets}
        onEditingChange={setEditing}
        onRemove={(id) => setWidgets(widgets.filter((widget) => widget.id !== id))}
        onReorder={setWidgets}
        renderItem={(widget) => <WidgetCardDemo widget={widget} />}
      />
    </div>
  )
}

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "sebs7n-ui"
import { SortableGrid } from "sebs7n-ui/sortable-grid"
import { useState } from "react"

function WithHandle() {
  const [widgets, setWidgets] = useState(WIDGETS)
  const [editing, setEditing] = useState(false)
  return (
    <div className="flex w-full max-w-lg flex-col gap-3">
      <EditButton editing={editing} onEditingChange={setEditing} />
      <SortableGrid
        aria-label="Resumen con manija"
        columns={2}
        editing={editing}
        getKey={(widget) => widget.id}
        getLabel={(widget) => widget.title}
        handle
        items={widgets}
        onEditingChange={setEditing}
        onReorder={setWidgets}
        renderItem={(widget, state) => (
          <Card size="sm">
            <CardHeader>
              <CardTitle>{widget.title}</CardTitle>
              <CardDescription>{widget.value}</CardDescription>
            </CardHeader>
            {state.handle && <CardContent className="flex justify-end">{state.handle}</CardContent>}
          </Card>
        )}
      />
    </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 las tarjetas (o las manijas, con handle), sus «−» y lo interactivo de adentro.

Espacio · Enter

Sobre la tarjeta, la toma; tomada, la suelta. En un botón de adentro es del botón.

← → ↑ ↓

Con la tarjeta tomada, la mueven en la grilla.

Escape

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

Accesibilidad

• Es un <ul role="list"> de <li>: sin handle, cada <li> es la parada de Tab (con el anillo de foco por fuera) y lleva las instrucciones en aria-describedby; tomada, su descripción empieza con «En movimiento» (un listitem no puede llevar el aria-pressed de la manija).
• Fuera de edición la tarjeta no es parada de Tab ni tiene instrucciones: el arrastre no existe.
• Los anuncios son los de SortableList: «Tomaste Facturas, posición 1 de 4». El «−» es un <button> «Sacar Facturas» y al sacar se anuncia «Se sacó Facturas.».
• Con movimiento reducido las tarjetas no se deslizan ni tiemblan: en edición llevan un contorno punteado sutil.
• Entrar y salir de la edición se anuncia («Modo edición. Arrastrá para ordenar.» · «Listo.»). Si la app saca una tarjeta tarde (después de guardar), el foco espera en su «−» y pasa al siguiente cuando se fue.

Reglas de uso

• Solo se ordena en modo edición: 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. Se edita una grilla por vez: entrar en otra saca a la que estaba. También entra manteniendo apretada una tarjeta ~0,5 s (mouse o dedo; un clic normal no, y el clic que sigue no abre nada), y sale con Esc o un clic en un espacio vacío. En edición las tarjetas tiemblan (±1°, menos en las anchas para que el borde no se corra más de ~2 px; la que se arrastra no).
• onRemove(key) pone en cada tarjeta el «−» de iOS, arriba a la izquierda: saca sin confirmar y la app la saca de items. 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ó …». Hay que dejar lugar arriba a la izquierda: el «−» sobresale 8 px.
• Sin `handle` se arrastra la tarjeta entera: con el mouse arranca a los 8 px, así un click en un botón de adentro sigue siendo un click; con el dedo, después de 250 ms apretado, así deslizar sigue scrolleando.
• Con handle, renderItem recibe la manija en state.handle y la pone donde vaya (en la cabecera de la tarjeta).
• columns fija las columnas; sin columns, las pone className (@2xl:grid-cols-2). itemClassName para una tarjeta más ancha (col-span-2).
• onReorder es optimista, con vuelta atrás si su promesa falla y la app no tocó items (el mismo contrato que SortableList). Si la app cambia items a mitad del arrastre, lo nuevo se ve y el orden al soltar sale de ahí. Peers opcionales @dnd-kit/*, como SortableList. Solo por subpath (sebs7n-ui/sortable-grid).

Relacionados