ReadOnlyAutocompleteField

ReadOnlyAutocompleteField renderiza el resultado de una selección de autocomplete como salida no editable. Soporta selecciones únicas y múltiples, mostrando cada elemento como un chip con imagen opcional y descripción secundaria. Al montarse, llama a onChange con el valor actual para mantener sincronizado el estado del componente padre. Se usa en pantallas de detalle y visualización.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | any \| any[] | Sí | — | El objeto del elemento seleccionado, o un array de objetos cuando multiple es true. | | onChange | (selectedValue: any \| any[]) => void | Sí | — | Callback invocado al montarse con el valor actual (para sincronización de estado). | | multiple | boolean | No | false | Cuando es true, trata value como un array y renderiza cada elemento como un chip. | | label | string | No | — | Etiqueta mostrada encima del campo. | | description | string | No | — | Texto de ayuda mostrado debajo del campo en cursiva. | | placeholder | string | No | — | Aceptado pero no renderizado (reservado para consistencia de API). | | itemLabelKey | string | No | "name" | Clave del objeto usada para leer la etiqueta de visualización de cada elemento. | | itemDescriptionKey | string | No | — | Clave del objeto usada para leer una descripción secundaria de cada elemento. | | itemImageKey | string | No | — | Clave del objeto usada para leer una URL de imagen de cada elemento. Renderiza una miniatura circular cuando está presente. | | containerStyle | React.CSSProperties | No | {} | Estilos personalizados para el div contenedor externo. | | valueStyle | React.CSSProperties | No | {} | Estilos personalizados para el cuadro de visualización del valor. | | labelStyle | React.CSSProperties | No | {} | Estilos personalizados para el elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | {} | Estilos personalizados para el texto de descripción. | | itemLabelStyle | React.CSSProperties | No | {} | Estilos personalizados para el texto de etiqueta de cada elemento. | | itemDescriptionStyle | React.CSSProperties | No | {} | Estilos personalizados para el texto de descripción secundaria de cada elemento. | | itemImageStyle | React.CSSProperties | No | {} | Estilos personalizados para la imagen miniatura de cada elemento. |

Uso

Selección única

import ReadOnlyAutocompleteField from '@/components/read-only-fields/ReadOnlyAutocompleteField';

<ReadOnlyAutocompleteField
  label="Usuario asignado"
  value={{ name: 'Jane Doe' }}
  onChange={(v) => console.log(v)}
/>

Selección múltiple con imagen

<ReadOnlyAutocompleteField
  label="Miembros del equipo"
  value={[
    { name: 'Jane Doe', avatar: '/avatars/jane.png' },
    { name: 'John Smith', avatar: '/avatars/john.png' },
  ]}
  multiple
  itemLabelKey="name"
  itemImageKey="avatar"
  onChange={(v) => console.log(v)}
/>

Con descripción secundaria

<ReadOnlyAutocompleteField
  label="Producto"
  value={{ name: 'Widget Pro', sku: 'WGT-001' }}
  itemLabelKey="name"
  itemDescriptionKey="sku"
  onChange={(v) => console.log(v)}
/>