Todos los componentes (204)

Aviso de inactividad

Capas · IdleWarning

Qué es y cuándo usarlo

«Tu sesión está a punto de caducar»: sale antes de echar a nadie, con una cuenta atrás y dos salidas claras, seguir o cerrar la sesión. Al llegar a cero llama a onExit sola.

Cuándo usarlo

Una sesión que caduca por inactividad y donde se puede perder lo que se estaba escribiendo.
onContinue renueva la sesión contra el servidor; onExit la cierra y limpia. Las dos son de la aplicación.
seconds es lo que dura la cuenta (60 por defecto); title, continueText y exitText cambian los textos.
Lo que no hace: medir la inactividad ni cerrar la sesión. Sale cuando la aplicación pone visible.

Cuándo no

Una espera que no pide decidir nada (reenviar un código): Countdown.
Avisar de algo que ya ha pasado, sin cortar el paso: una notificación con useNotifications.

Teclado: al aparecer, el foco va a «Seguir aquí», así que Intro basta para quedarse. Tab pasa entre los dos botones y no sale del aviso. Es un alertdialog: pulsar fuera no lo cierra, y Escape responde la opción segura, «Seguir aquí» (llama a onContinue): nadie pulsa Escape para que le echen.

Accesibilidad: interrumpe a propósito (alertdialog), porque perder lo escrito sin avisar es peor que la interrupción. El título es su nombre y la frase de debajo («Por seguridad se cerrará sola dentro de 45 segundos») su descripción. La cuenta se ve cada segundo pero se anuncia cada announceEvery segundos (15 por defecto) en una región status oculta: un número hablado cada segundo no deja ni leer los botones.

Aspecto fino: sin variables propias. Es un Dialog de tono warning: se ajusta con sus clases, amset-dialog__*, y la cuenta con amset-idle__count.

Cómo se ve

El aviso sale cuando la persona lleva un rato sin tocar nada.

<IdleWarning
  visible={inactivo}
  seconds={60}
  title="Llevas un rato sin tocar el pedido"
  continueText="Seguir con el pedido"
  exitText="Salir"
  onContinue={seguir}
  onExit={cerrarSesion}
/>

Props

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

Prop	Tipo	Para qué sirve
`onContinue`obligatoria	`() => void`	Seguir aqui: normalmente renueva la sesion contra el servidor.
`onExit`obligatoria	`() => void`	Se llama al llegar a cero, y tambien desde el boton de salir.
`visible`obligatoria	`boolean`	Con `true` sale el aviso y empieza la cuenta atras.
`announceEvery`	`number`	Cada cuantos segundos se anuncia lo que queda. Por defecto 15.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`continueText`	`string`	—
`exitText`	`string`	—
`seconds`	`number`	Segundos que quedan cuando aparece. Por defecto 60.
`title`	`string`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

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