EditableRadioField

EditableRadioField muestra la opción seleccionada actualmente como un badge con estilo de píldora en modo lectura. Al hacer clic en el ícono de edición se renderizan todas las opciones como botones de píldora seleccionables. Soporta una función renderOption personalizada para renderizado completamente a medida. Al guardar, el valor de la opción seleccionada 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í | "" | Valor de la opción actualmente seleccionada. | | options | { label: string; value: string }[] | Sí | [] | Array de opciones seleccionables. | | updatePath | string | Sí | — | Ruta del endpoint API para persistir el cambio. | | label | string | No | — | Etiqueta mostrada sobre las opciones. | | description | string | No | — | Texto de ayuda mostrado debajo de la etiqueta. | | useCustomRender | boolean | No | false | Cuando es true, usa renderOption en lugar del botón de píldora por defecto. | | renderOption | (option, isClickable?, index?, isActive?) => React.ReactNode | No | — | Renderizador personalizado para cada opción en modo edición y para la opción seleccionada en modo lectura. | | 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. | | 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 EditableRadioField from '@/components/editable-fields/EditableRadioField';

const priorityOptions = [
  { label: 'Low', value: 'low' },
  { label: 'Medium', value: 'medium' },
  { label: 'High', value: 'high' },
];

export default function Example() {
  const [priority, setPriority] = useState('medium');

  return (
    <EditableRadioField
      label="Priority"
      name="priority"
      value={priority}
      options={priorityOptions}
      updatePath="/v1/tasks/20"
      apiBaseUrl="https://api.example.com"
      useAuthToken
      onEditSuccess={(updated) => setPriority(updated)}
    />
  );
}

Con renderizado personalizado

<EditableRadioField
  label="Status"
  name="status"
  value={status}
  options={statusOptions}
  updatePath="/v1/tasks/20"
  apiBaseUrl="https://api.example.com"
  useAuthToken
  useCustomRender
  renderOption={(option, isClickable, index, isActive) => (
    <span style={{
      padding: '4px 12px',
      borderRadius: 20,
      background: isActive ? '#0046BF' : '#eee',
      color: isActive ? '#fff' : '#333',
      cursor: isClickable ? 'pointer' : 'default',
    }}>
      {option?.label}
    </span>
  )}
  onEditSuccess={(updated) => setStatus(updated)}
/>