EditableLongTextField

EditableLongTextField es un área de texto multilínea que permite edición inline. En modo lectura el valor actual se muestra en un textarea deshabilitado. Al hacer clic en el ícono de edición se habilita la edición. Los controles de guardar y cancelar se posicionan a la derecha del textarea. Al guardar, el nuevo valor se persiste mediante la API.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | name | string | Sí | — | Nombre del campo enviado como clave en el payload de actualización. | | value | string | Sí | "" | Texto multilínea actual. | | updatePath | string | Sí | — | Ruta del endpoint API para persistir el cambio. | | label | string | No | — | Etiqueta mostrada sobre el textarea. | | description | string | No | — | Texto de ayuda mostrado debajo de la etiqueta. | | placeholder | string | No | — | Placeholder mostrado cuando el textarea está vacío. | | apiBaseUrl | string | No | — | URL base que se antepone a updatePath. | | useAuthToken | boolean | No | false | Cuando es true, el request incluye el token de autorización. | | onEditStart | () => void | No | — | Llamado cuando comienza el modo edición. | | onEditSuccess | (updatedValue: string, 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. | | inputStyle | React.CSSProperties | No | — | Estilo del elemento <textarea>. | | labelStyle | React.CSSProperties | No | — | Estilo del elemento <label>. | | descriptionStyle | React.CSSProperties | No | — | Estilo del <p> de descripción. |

Uso

Básico

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

export default function Example() {
  const [bio, setBio] = useState('Una breve biografía...');

  return (
    <EditableLongTextField
      label="Biography"
      name="bio"
      value={bio}
      updatePath="/v1/users/42"
      apiBaseUrl="https://api.example.com"
      useAuthToken
      onEditSuccess={(updated) => setBio(updated)}
    />
  );
}

Con placeholder y descripción

<EditableLongTextField
  label="Notes"
  description="Internal notes visible only to staff."
  placeholder="Add notes here..."
  name="notes"
  value={notes}
  updatePath="/v1/orders/99"
  apiBaseUrl="https://api.example.com"
  useAuthToken
  onEditSuccess={(updated) => setNotes(updated)}
/>