ComponentTemplateBuilderModal

A full-screen modal that embeds a JsonBuilder for constructing or editing an array of component template objects. It tracks unsaved changes and only enables the save button when the data has been modified. On close it always reports the reason ('cancel' or 'save') and optionally the resulting data.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | isOpen | boolean | Yes | — | Controls whether the modal is visible. | | onClose | (reason: 'cancel' \| 'save', data?: object[]) => void | Yes | — | Called when the modal closes. Receives the close reason and, when saved, the updated array. | | title | string | Yes | — | Title displayed in the modal header. | | subtitle | string | No | — | Subtitle displayed below the title in the header. | | backdropStyle | React.CSSProperties | No | — | Inline styles for the modal backdrop. | | windowStyle | React.CSSProperties | No | — | Inline styles merged into the modal window. | | closeButtonStyle | React.CSSProperties | No | — | Styles for the close button. | | closeIcon | string | No | — | Icon name for the close button. | | closeIconPaths | any[] | No | — | Custom icon paths for the close button. | | closeIconSize | number | No | — | Icon size for the close button. | | zIndex | number | No | 99999 | CSS z-index of the modal overlay. | | id | string | No | — | HTML id for the modal element. | | fullScreen | boolean | No | true | When true, the modal occupies the full viewport. | | data | object[] \| null | No | — | Initial array of template objects to load into the builder. |

Usage

Basic

import React from 'react';
import ComponentTemplateBuilderModal from '@/components/modals/ComponentTemplateBuilderModal';

export default function Example() {
  const [open, setOpen] = React.useState(false);
  const [template, setTemplate] = React.useState([]);

  return (
    <>
      <button onClick={() => setOpen(true)}>Edit Template</button>
      <ComponentTemplateBuilderModal
        isOpen={open}
        onClose={(reason, data) => {
          if (reason === 'save' && data) setTemplate(data);
          setOpen(false);
        }}
        title="Component Template"
        subtitle="Define the structure of your component"
        data={template}
      />
    </>
  );
}