Todos los componentes (204)

Buscar en la conversación

IA · FindBar

Qué es y cuándo usarlo

La barra de buscar DENTRO de algo -una conversación larga, un documento-: el campo, el contador de coincidencias, siguiente, anterior y cerrar. Existe porque la del navegador solo ve lo que se ha cargado, y en una conversación con cientos de mensajes eso da «sin resultados» para algo que sí se habló.

Cuándo usarla

Para buscar en un contenido que carga el servidor por partes, donde la búsqueda del navegador se queda corta.
Con useHotkeys para abrirla con Ctrl/Cmd+F en vez de dejar la del navegador.

Cuándo no

Para filtrar una lista: es un SearchField o el filtro de una Table.
Para buscar entre opciones al elegir: es un ComboBox.

Qué hace y qué no: no busca ni se mueve por el contenido. Avisa de lo que se teclea (onChange) y se pulsa (onNext, onPrevious, onClose), y quien la usa pone count y current, lleva la coincidencia a la vista y la marca (por ejemplo con highlighted de ChatMessage). Ponla FUERA de la zona que se desplaza, como hermana suya: dentro, se iría hacia arriba al moverse por las coincidencias.

Teclado: al abrirla, el foco va al campo y su texto queda seleccionado (autoFocus={false} lo evita). Intro va a la siguiente, Mayús+Intro a la anterior y Escape cierra; mientras se compone con un IME no hacen nada. Los botones anuncian su atajo con aria-keyshortcuts.

Accesibilidad: es una zona role="search" con el nombre que se pase en label (obligatorio). El contador es una región status: «3 de 12», «5 coincidencias», «Sin resultados» y «Buscando…» se anuncian sin quitar el foco del campo. Anterior y siguiente se apagan sin coincidencias.

Aspecto fino: no tiene variables propias: hereda la superficie y los tokens de campo, y se coloca con className.

Cómo se ve

¿Cuántos pedidos tengo pendientes?

Coincidencia de la búsqueda

Tienes tres pedidos pendientes: el #1042, el #1043 y el #1047.

¿Alguno tiene el pago sin revisar?

Sí, el pedido #1047: el pago está sin revisar desde el lunes.

<FindBar
  label="Buscar en la conversación"
  placeholder="Buscar en esta conversación…"
  value={texto}
  onChange={buscar}
  count={coincidencias.length}
  current={posicion + 1}
  onNext={siguiente}
  onPrevious={anterior}
  onClose={cerrar}
/>
<ChatMessage from={mensaje.de} highlighted={mensaje.id === resaltado}>
  {mensaje.texto}
</ChatMessage>

Props

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

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Que busca, para quien no ve la caja: «Buscar en la conversación». Obligatorio.
`onChange`obligatoria	`(value: string) => void`	—
`onClose`obligatoria	`() => void`	Escape, o la equis. Quien la abrio la cierra: aqui solo se avisa.
`onNext`obligatoria	`() => void`	Intro, o el boton de abajo.
`onPrevious`obligatoria	`() => void`	Mayus+Intro, o el boton de arriba.
`value`obligatoria	`string`	—
`autoFocus`	`boolean`	Al abrirla, el foco va al campo y su texto queda seleccionado, como en un buscador de pagina. Por defecto, si.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`count`	`number`	Cuantas coincidencias hay. Sin esto no se dice nada (todavia no se ha buscado, o no se sabe).
`current`	`number`	La coincidencia en la que se esta, de 1 a `count`. Sin ella, solo el total.
`hasMore`	`boolean`	Hay mas coincidencias sin cargar (solo se ha traido una parte de la conversacion): el total se escribe «12+» en vez de «12», para no prometer que es el definitivo.
`inputRef`	`Ref<HTMLInputElement>`	El campo, para volver a enfocarlo desde fuera (al repetir el atajo que la abre).
`loading`	`boolean`	Se esta buscando: el contador dice «Buscando…».
`placeholder`	`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: