ComponentTemplateField

ComponentTemplateField muestra la cantidad de items configurados actualmente y un botón que abre el ComponentTemplateBuilderModal en pantalla completa. Cuando el usuario guarda el modal, se llama a onChange con el nuevo array de datos. Este campo se usa en contextos donde el usuario necesita componer visualmente una lista de items de plantilla de componentes.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | any | Sí | — | Valor actual (típicamente un array de items de plantilla). La cantidad de items se muestra dentro del campo. | | onChange | (value?: any) => void | Sí | — | Llamado con los nuevos datos cuando el usuario guarda el modal constructor. | | 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. | | modalZIndex | number | No | 99999999 | z-index aplicado al 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 ComponentTemplateField from '@/components/fields/ComponentTemplateField';

export default function Example() {
  const [template, setTemplate] = useState([]);

  return (
    <ComponentTemplateField
      label="Plantilla de visualización"
      value={template}
      onChange={setTemplate}
      modalTitle="Construir plantilla"
      modalSubtitle="Agregar y ordenar componentes"
    />
  );
}