ComponentTemplateField

ComponentTemplateField displays the number of items currently configured and a button that opens the ComponentTemplateBuilderModal in full-screen mode. When the user saves the modal, onChange is called with the new data array. This field is used in contexts where a user needs to visually compose a list of component-template items (e.g. defining display templates for dynamic views).

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | any | Yes | — | Current value (typically an array of template items). The item count is shown inside the field. | | onChange | (value?: any) => void | Yes | — | Called with the new data when the user saves the builder modal. | | label | string | No | — | Label rendered above the field. | | description | string | No | — | Helper text rendered below the field. | | modalTitle | string | No | '' | Title displayed in the builder modal. | | modalSubtitle | string | No | '' | Subtitle displayed in the builder modal. | | modalZIndex | number | No | 99999999 | z-index applied to the builder modal. | | containerStyle | React.CSSProperties | No | — | Styles applied to the outer FieldContainer. | | headerStyle | React.CSSProperties | No | — | Styles applied to the field header area. | | bodyStyle | React.CSSProperties | No | — | Styles applied to the field body area. | | labelStyle | React.CSSProperties | No | — | Styles applied to the label element. | | descriptionStyle | React.CSSProperties | No | — | Styles applied to the description paragraph. | | className | string | No | — | CSS class name applied to the outer container. |

Usage

Basic

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

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

  return (
    <ComponentTemplateField
      label="Display template"
      value={template}
      onChange={setTemplate}
      modalTitle="Build your template"
      modalSubtitle="Add and arrange components"
    />
  );
}