EditableAutocompleteField

EditableAutocompleteField envuelve AutocompleteField en el patrón editable. En modo lectura el autocompletado se renderiza en un estado deshabilitado y atenuado. Al hacer clic en el ícono de edición se habilita para que el usuario pueda buscar y seleccionar un nuevo valor. Opcionalmente, se pueden crear nuevos registros inline a través de un popover de formulario integrado. Al guardar, el valor seleccionado se persiste mediante un request PATCH/PUT.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | name | string | Sí | — | Nombre del campo enviado como clave en el payload de actualización. | | value | any \| any[] | No | — | Valor actualmente seleccionado o array de valores (cuando multiple es true). | | updatePath | string | Sí | — | Ruta del endpoint API para persistir el cambio. | | apiBaseUrl | string | Sí | — | URL base usada tanto para los requests de búsqueda como para el de actualización. | | searchPath | string | Sí | — | Ruta API para la búsqueda de autocompletado (ej. "/v1/products/search"). | | label | string | No | — | Etiqueta mostrada sobre el campo. | | description | string | No | — | Texto de ayuda mostrado debajo de la etiqueta. | | multiple | boolean | No | false | Cuando es true, permite seleccionar múltiples ítems. | | placeholder | string | No | "Escriba para buscar..." | Placeholder dentro del input de búsqueda. | | useAuthToken | boolean | No | false | Cuando es true, los requests de búsqueda y actualización incluyen el token. | | searchParam | string | No | — | Nombre del parámetro de query usado para el término de búsqueda. | | noResultsText | string | No | "No results found" | Texto mostrado cuando la búsqueda no devuelve resultados. | | searchingText | string | No | "Searching..." | Texto mostrado mientras el request de búsqueda está en curso. | | itemLabelKey | string | No | "name" | Clave del objeto usada como etiqueta de cada resultado. | | itemDescriptionKey | string | No | — | Clave del objeto usada como descripción secundaria de cada resultado. | | itemImageKey | string | No | — | Clave del objeto usada para una URL de imagen junto a cada resultado. | | itemLabelStyle | React.CSSProperties | No | — | Estilo del texto de etiqueta dentro de cada resultado. | | itemDescriptionStyle | React.CSSProperties | No | — | Estilo del texto de descripción dentro de cada resultado. | | itemImageStyle | React.CSSProperties | No | — | Estilo de la imagen dentro de cada resultado. | | allowCreate | boolean | No | false | Cuando es true, muestra un botón para crear un nuevo registro inline. | | formFields | Field[] | No | [] | Definiciones de campo para el formulario de creación inline. | | formTitle | string | No | "Crear nuevo registro" | Título del formulario de creación inline. | | formButtonText | string | No | — | Etiqueta del botón de envío del formulario de creación. | | formButtonTitle | string | No | "Crear nuevo" | Tooltip/title del botón de creación. | | createPath | string | No | — | Ruta API usada para enviar el formulario de creación inline. | | createButtonType | "solid" \| "clear" \| "outline" | No | "solid" | Estilo del botón disparador de creación. | | createButtonSize | "sm" \| "md" \| "lg" | No | "sm" | Tamaño del botón disparador de creación. | | createButtonColor | string | No | — | Color personalizado para el botón de creación. | | createButtonTitle | string | No | — | Tooltip del botón de creación. | | createButtonIcon | string | No | "add" | Nombre del ícono del botón de creación. | | formWidth | number \| string | No | 500 | Ancho del popover del formulario de creación inline. | | onCreateSuccess | (newRecord: any) => void | No | — | Llamado tras crear un nuevo registro exitosamente de forma inline. | | onCreateError | (error: any) => void | No | — | Llamado cuando la creación inline de un registro falla. | | onEditStart | () => void | No | — | Llamado cuando comienza el modo edición. | | onEditSuccess | (updatedValue: any, newFormData: any) => void | No | — | Llamado tras un guardado exitoso. | | onEditError | (error: any) => void | No | — | Llamado al fallar el request; el valor se revierte. | | onEditCancel | () => void | No | — | Llamado al cancelar; el valor se revierte. | | editIcon | string | No | "pencil" | Nombre del ícono para el botón de edición. | | saveIcon | string | No | "check" | Nombre del ícono para el botón de guardar. | | cancelIcon | string | No | "close" | Nombre del ícono para el botón de cancelar. | | containerStyle | React.CSSProperties | No | — | Estilo del contenedor externo. | | labelStyle | React.CSSProperties | No | — | Estilo del elemento <label>. | | descriptionStyle | React.CSSProperties | No | — | Estilo del texto de descripción. | | popoverStyle | React.CSSProperties | No | — | Estilo del popover de resultados del autocompletado. |

Uso

Básico

import React, { useState } from 'react';
import EditableAutocompleteField from '@/components/editable-fields/EditableAutocompleteField';

export default function Example() {
  const [category, setCategory] = useState(null);

  return (
    <EditableAutocompleteField
      label="Category"
      name="category_id"
      value={category}
      apiBaseUrl="https://api.example.com"
      searchPath="/v1/categories/search"
      updatePath="/v1/products/7"
      itemLabelKey="name"
      useAuthToken
      onEditSuccess={(updated) => setCategory(updated)}
    />
  );
}

Multi-selección con creación inline

<EditableAutocompleteField
  label="Tags"
  name="tag_ids"
  value={tags}
  multiple
  apiBaseUrl="https://api.example.com"
  searchPath="/v1/tags/search"
  updatePath="/v1/articles/12"
  itemLabelKey="name"
  allowCreate
  createPath="/v1/tags"
  formTitle="New Tag"
  formFields={[{ type: 'text', name: 'name', label: 'Tag name' }]}
  useAuthToken
  onEditSuccess={(updated) => setTags(updated)}
/>