EditableTextField

EditableTextField es un campo de texto de una sola línea que permite edición inline. En modo lectura el valor actual se muestra dentro de un input deshabilitado. Al hacer clic en el ícono de edición el campo se activa, permitiendo al usuario escribir un nuevo valor y confirmar con guardar o descartar con cancelar. Al guardar, el nuevo valor se envía a un endpoint REST.

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í | "" | Valor actual mostrado en modo lectura y prellenado en modo edición. | | updatePath | string | Sí | — | Ruta del endpoint API para persistir el cambio (ej. "/v1/products/123"). | | label | string | No | — | Etiqueta mostrada sobre el input. | | description | string | No | — | Texto de ayuda mostrado debajo de la etiqueta. | | placeholder | string | No | — | Texto de placeholder dentro del input cuando está vacío. | | apiBaseUrl | string | No | — | URL base que se antepone a updatePath al hacer el request. | | useAuthToken | boolean | No | false | Cuando es true, el request incluye el token de autorización. | | onEditStart | () => void | No | — | Llamado cuando el usuario hace clic en editar y comienza el modo edición. | | onEditSuccess | (updatedValue: string, newFormData: any) => void | No | — | Llamado tras una respuesta exitosa de la API con el valor guardado. | | onEditError | (error: any) => void | No | — | Llamado cuando el request a la API falla. El valor se revierte. | | onEditCancel | () => void | No | — | Llamado cuando el usuario hace clic en 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 aplicado al div contenedor externo. | | inputStyle | React.CSSProperties | No | — | Estilo aplicado al elemento <input>. | | labelStyle | React.CSSProperties | No | — | Estilo aplicado al elemento <label>. | | descriptionStyle | React.CSSProperties | No | — | Estilo aplicado al <p> de descripción. |

Uso

Básico

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

export default function Example() {
  const [username, setUsername] = useState('john.doe');

  return (
    <EditableTextField
      label="Username"
      name="username"
      value={username}
      updatePath="/v1/users/42"
      apiBaseUrl="https://api.example.com"
      useAuthToken
      onEditSuccess={(updated) => setUsername(updated)}
    />
  );
}

Con callbacks

<EditableTextField
  label="Email"
  name="email"
  value={email}
  updatePath="/v1/users/42"
  apiBaseUrl="https://api.example.com"
  useAuthToken
  onEditStart={() => console.log('editing started')}
  onEditSuccess={(updated, formData) => {
    setEmail(updated);
    showToast('Email actualizado');
  }}
  onEditError={(err) => showToast('Error al actualizar email', 'error')}
  onEditCancel={() => console.log('edit cancelled')}
/>