EditableNumberField

EditableNumberField es un input numérico editable inline. En modo lectura el valor se muestra en un campo numérico deshabilitado. Al hacer clic en el ícono de edición se habilita el input, permitiendo al usuario cambiar el número. Soporta decimales, límites mínimo/máximo, incremento por paso y decoradores opcionales de prefijo/sufijo. Al guardar, el 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 | number | Sí | 0 | Valor numérico actual. | | updatePath | string | Sí | — | Ruta del endpoint API para persistir el cambio. | | label | string | No | — | Etiqueta mostrada sobre el input. | | description | string | No | — | Texto de ayuda mostrado debajo de la etiqueta. | | placeholder | string | No | — | Placeholder cuando el input está vacío. | | decimalPlaces | number | No | 0 | Número de decimales permitidos. Afecta el paso calculado si step no está definido. | | min | number | No | — | Valor mínimo permitido. | | max | number | No | — | Valor máximo permitido. | | step | number | No | — | Incremento de paso. Por defecto 1/(10^decimalPlaces) cuando decimalPlaces > 0. | | prepend | string | No | — | Texto mostrado antes del input (ej. símbolo de moneda). | | append | string | No | — | Texto mostrado después del input (ej. unidad como "kg"). | | 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: number, 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 <input>. | | 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 EditableNumberField from '@/components/editable-fields/EditableNumberField';

export default function Example() {
  const [price, setPrice] = useState(99.99);

  return (
    <EditableNumberField
      label="Price"
      name="price"
      value={price}
      decimalPlaces={2}
      prepend="$"
      updatePath="/v1/products/7"
      apiBaseUrl="https://api.example.com"
      useAuthToken
      onEditSuccess={(updated) => setPrice(updated)}
    />
  );
}

Entero con límites

<EditableNumberField
  label="Stock"
  name="stock"
  value={stock}
  min={0}
  max={9999}
  updatePath="/v1/products/7"
  apiBaseUrl="https://api.example.com"
  useAuthToken
  onEditSuccess={(updated) => setStock(updated)}
/>