EditableYearField

EditableYearField proporciona un selector de año editable inline. En modo lectura el año actual se muestra en un input numérico deshabilitado. Al hacer clic en el ícono de edición se habilita el campo, permitiendo al usuario escribir o girar hasta un nuevo año. Soporta límites de año mínimo/máximo y un paso configurable. Al guardar, el año numérico 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 | No | — | Año actualmente seleccionado (ej. 2024). | | 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. | | minYear | number | No | — | Año mínimo seleccionable. | | maxYear | number | No | — | Año máximo seleccionable. | | step | number | No | 1 | Incremento/decremento al usar el spinner. | | 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 EditableYearField from '@/components/editable-fields/EditableYearField';

export default function Example() {
  const [foundedYear, setFoundedYear] = useState(2010);

  return (
    <EditableYearField
      label="Founded Year"
      name="founded_year"
      value={foundedYear}
      updatePath="/v1/organizations/3"
      apiBaseUrl="https://api.example.com"
      useAuthToken
      onEditSuccess={(updated) => setFoundedYear(updated)}
    />
  );
}

Con límites de año

<EditableYearField
  label="Model Year"
  name="model_year"
  value={modelYear}
  minYear={1990}
  maxYear={2030}
  updatePath="/v1/vehicles/7"
  apiBaseUrl="https://api.example.com"
  useAuthToken
  onEditSuccess={(updated) => setModelYear(updated)}
/>