EditableCheckboxGroupField

EditableCheckboxGroupField muestra un grupo de checkboxes para selección múltiple. En modo lectura se presenta un resumen de los valores seleccionados. Al hacer clic en el ícono de edición se renderiza el grupo completo de checkboxes, permitiendo activar o desactivar opciones individuales. Soporta una función renderOption personalizada para renderizado completamente a medida. Al guardar, el array de valores seleccionados 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. | | selectedValues | (string \| number \| boolean)[] | Sí | — | Array de valores de opciones actualmente seleccionadas. | | options | { label: string; value: string \| number \| boolean }[] | Sí | — | Array de opciones disponibles como checkboxes. | | updatePath | string | Sí | — | Ruta del endpoint API para persistir el cambio. | | label | string | No | — | Etiqueta mostrada sobre el grupo de checkboxes. | | description | string | No | — | Texto de ayuda mostrado debajo de la etiqueta. | | 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. | | renderOption | (option, index, isChecked) => React.ReactNode | No | — | Renderizador personalizado para cada opción. Recibe el objeto de opción, su índice y si está marcada. | | onEditStart | () => void | No | — | Llamado cuando comienza el modo edición. | | onEditSuccess | (updatedValue: any, 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. | | optionContainerStyle | React.CSSProperties | No | — | Estilo aplicado al contenedor de cada fila de opción. | | optionLabelStyle | React.CSSProperties | No | — | Estilo aplicado al <span> de la etiqueta de cada opción. |

Uso

Básico

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

const roleOptions = [
  { label: 'Read', value: 'read' },
  { label: 'Write', value: 'write' },
  { label: 'Delete', value: 'delete' },
];

export default function Example() {
  const [permissions, setPermissions] = useState(['read']);

  return (
    <EditableCheckboxGroupField
      label="Permissions"
      name="permissions"
      selectedValues={permissions}
      options={roleOptions}
      updatePath="/v1/roles/5"
      apiBaseUrl="https://api.example.com"
      useAuthToken
      onEditSuccess={(updated) => setPermissions(updated)}
    />
  );
}

Con renderizado de opción personalizado

<EditableCheckboxGroupField
  label="Features"
  name="features"
  selectedValues={features}
  options={featureOptions}
  updatePath="/v1/plans/3"
  apiBaseUrl="https://api.example.com"
  useAuthToken
  renderOption={(option, index, isChecked) => (
    <div style={{ background: isChecked ? '#e0f7fa' : '#fff', padding: 8, borderRadius: 6 }}>
      {option.label}
    </div>
  )}
  onEditSuccess={(updated) => setFeatures(updated)}
/>