ConfigurationGroupField

ConfigurationGroupField muestra la cantidad de items configurados actualmente y un botón para abrir el ConfigurationGroupBuilderModal. El tipo de modal está controlado por la prop configurationGroup, que determina qué tipo de items maneja el constructor (campos, slots, filtros, acciones de encabezado, acciones de lista, grupos divisores, columnas de importación o columnas de exportación).

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | any | Sí | — | Datos de configuración actuales (típicamente un array de items). | | onChange | (value?: any) => void | Sí | — | Llamado con los datos actualizados cuando el modal cierra con datos guardados. | | configurationGroup | 'fields' \| 'slots' \| 'filters' \| 'headerActions' \| 'listActions' \| 'dividerGroups' \| 'importCols' \| 'exportCols' | Sí | — | Determina qué constructor de configuración se abre en el modal. | | label | string | No | — | Etiqueta mostrada sobre el campo. | | description | string | No | — | Texto de ayuda mostrado debajo del campo. | | modalTitle | string | No | '' | Título mostrado en el modal constructor. | | modalSubtitle | string | No | '' | Subtítulo mostrado en el modal constructor. | | containerStyle | React.CSSProperties | No | — | Estilos del FieldContainer exterior. | | headerStyle | React.CSSProperties | No | — | Estilos del área de encabezado del campo. | | bodyStyle | React.CSSProperties | No | — | Estilos del área de cuerpo del campo. | | labelStyle | React.CSSProperties | No | — | Estilos del elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos del párrafo de descripción. | | className | string | No | — | Clase CSS del contenedor exterior. |

Uso

Básico

import React, { useState } from 'react';
import ConfigurationGroupField from '@/components/fields/ConfigurationGroupField';

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

  return (
    <ConfigurationGroupField
      label="Campos del formulario"
      configurationGroup="fields"
      value={fields}
      onChange={setFields}
      modalTitle="Configurar campos"
    />
  );
}

Configurando columnas de exportación

<ConfigurationGroupField
  label="Columnas de exportación"
  configurationGroup="exportCols"
  value={exportCols}
  onChange={setExportCols}
  modalTitle="Seleccionar columnas a exportar"
  modalSubtitle="Arrastra para reordenar"
/>