EditableConfigurationGroupField

EditableConfigurationGroupField gestiona arrays de configuración estructurados como campos de formulario, slots, filtros, acciones de encabezado, acciones de lista, grupos divisores, columnas de importación y columnas de exportación. En ambos modos (lectura y edición) el componente muestra la cantidad de ítems. En modo edición un botón "Abrir armador" abre un ConfigurationGroupBuilderModal de pantalla completa donde se pueden agregar, reordenar y configurar ítems. Al guardar, el array de configuración actualizado 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 | any | Sí | [] | Array de configuración actual. | | configurationGroup | "fields" \| "slots" \| "filters" \| "headerActions" \| "listActions" \| "dividerGroups" \| "importCols" \| "exportCols" | Sí | — | Tipo de grupo de configuración a editar. Determina qué constructor se renderiza dentro del modal. | | updatePath | string | Sí | — | Ruta del endpoint API para persistir el cambio. | | label | string | No | — | Etiqueta mostrada en el encabezado del campo. | | description | string | No | — | Texto de ayuda mostrado debajo de la etiqueta. | | modalTitle | string | No | "" | Título del modal del constructor de configuración. | | modalSubtitle | string | No | "" | Subtítulo del modal del constructor de configuració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. | | onChange | (items: any[]) => void | No | — | Llamado localmente cuando la configuración cambia. | | 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. | | headerStyle | React.CSSProperties | No | — | Estilo del encabezado del campo. | | bodyStyle | React.CSSProperties | No | — | Estilo del cuerpo del campo. | | itemStyle | React.CSSProperties | No | — | Estilo para cada ítem individual de la lista. | | labelStyle | React.CSSProperties | No | — | Estilo del elemento <label>. | | descriptionStyle | React.CSSProperties | No | — | Estilo del <p> de descripción. |

Uso

Básico — edición de campos de formulario

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

export default function Example() {
  const [fields, setFields] = useState([]);

  return (
    <EditableConfigurationGroupField
      label="Form Fields"
      name="fields"
      value={fields}
      configurationGroup="fields"
      updatePath="/v1/components/5"
      apiBaseUrl="https://api.example.com"
      modalTitle="Edit Form Fields"
      useAuthToken
      onEditSuccess={(updated) => setFields(updated)}
    />
  );
}

Edición de acciones de lista

<EditableConfigurationGroupField
  label="List Actions"
  name="listActions"
  value={listActions}
  configurationGroup="listActions"
  updatePath="/v1/components/5"
  apiBaseUrl="https://api.example.com"
  modalTitle="Edit List Actions"
  useAuthToken
  onEditSuccess={(updated) => setListActions(updated)}
/>