EditableCounterField

EditableCounterField envuelve CounterField (un stepper numérico con botones +/−) en el patrón editable. En modo lectura el contador muestra el valor actual pero sus botones están deshabilitados. Al hacer clic en el ícono de edición se habilita el stepper, permitiendo al usuario incrementar o decrementar el valor. Al guardar, el número 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 contador. | | description | string | No | — | Texto de ayuda mostrado debajo de la etiqueta. | | minValue | number | No | — | Valor mínimo permitido. | | maxValue | number | No | — | Valor máximo permitido. | | step | number | No | — | Cantidad sumada o restada por clic de botón. | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | No | "md" | Variante de tamaño para los botones del contador. | | buttonType | "clear" \| "outline" \| "solid" | No | "clear" | Estilo visual de los botones de incremento/decremento. | | buttonColor | string | No | — | Color personalizado para los botones del contador. | | disabled | boolean | No | false | Cuando es true, el contador está permanentemente deshabilitado. | | readOnly | boolean | No | false | Cuando es true, el valor no puede cambiarse incluso en modo edición. | | 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. | | 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 EditableCounterField from '@/components/editable-fields/EditableCounterField';

export default function Example() {
  const [quantity, setQuantity] = useState(5);

  return (
    <EditableCounterField
      label="Quantity"
      name="quantity"
      value={quantity}
      minValue={1}
      maxValue={100}
      updatePath="/v1/order-items/9"
      apiBaseUrl="https://api.example.com"
      useAuthToken
      onEditSuccess={(updated) => setQuantity(updated)}
    />
  );
}