Saltar al contenido
EspañolEnglish
Todos los componentes (204)

Proveedor de confirmación

Capas · ConfirmProvider

Qué es y cuándo usarlo

Preguntar «¿seguro?» desde cualquier componente sin montar un diálogo y su estado en cada pantalla. Se pone una vez, arriba del árbol (AmsetProvider ya lo trae), y desde dentro:

const { confirm } = useConfirmation()
if (await confirm({ title: '¿Borrar el pedido 1042?' })) await borrar()

Cuándo usarlo

  • Confirmar una acción que se lanza desde código: una opción de menú, un atajo, la acción de una fila.
  • La promesa responde true solo al confirmar. Cancelar responde false, y también desmontar el proveedor o pedir otra confirmación con una abierta (la primera se da por cancelada): el await de quien preguntaba nunca se queda colgado.
  • tone es el del vocabulario común y va al botón de confirmar, como en ConfirmAction: 'error' (por defecto) para lo que borra; 'accent' para lo que no destruye nada. confirmText y cancelText cambian los textos de los botones («Confirmar» y «Cancelar» de serie).

Cuándo no

  • La pregunta pegada al botón que la provoca, sin tapar la página: ConfirmAction.
  • Si antes de decidir hay que leer algo largo, elegir o escribir: un Dialog con lo que haga falta dentro.
  • Dentro de AmsetProvider no hace falta ponerlo otra vez (withoutConfirm lo quita, si la aplicación trae el suyo).

Teclado: es un <dialog> modal: al abrir, el foco entra en él y no sale mientras está abierto. Es un alertdialog: pulsar fuera no lo cierra, y Escape es cancelar (responde false), como pide el patrón de WAI-ARIA. Tab pasa entre Cancelar y Confirmar; Intro o Espacio pulsan.

Accesibilidad: el diálogo se anuncia como alertdialog con title como nombre y description como descripción. Con uno de los cuatro que avisan ('error', el de serie, 'warning', 'info' u 'success') la cabecera lleva su icono y el botón de confirmar va en ese color; con 'accent' o 'neutral', sin icono. No hay cuerpo vacío: la pregunta va en el título y el detalle en la descripción.

Aspecto fino: sin variables propias. Es un Dialog de kind="alert": se ajusta con sus clases, amset-dialog__*.

Cómo se ve

La pregunta sale de un hook, sin montar un diálogo en esta pantalla.

<ConfirmProvider>
  <App />
</ConfirmProvider>

// Dentro:
const { confirm } = useConfirmation()
const seguro = await confirm({
  title: 'Dar de baja a Distribuciones Sur?',
  description: 'Deja de recibir pedidos y facturas.',
  confirmText: 'Dar de baja',
})

Props

Se importa con import { ConfirmProvider } from '@amset/ui'. Las obligatorias van marcadas.

PropTipoPara qué sirve
childrenobligatoriaReactNode—

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: