TreeBuilderModal

A full-screen modal that embeds a TreeBuilder editor for creating and modifying nested tree structures. It can optionally fetch the initial tree from an API (fetchPath) and persist changes via a configurable HTTP method. A floating save button is enabled only when the tree has been modified. Errors and success states are communicated via a Toast.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | isOpen | boolean | Yes | — | Controls whether the modal is visible. | | onClose | (icon?: any) => void | Yes | — | Called when the modal closes. | | 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 | — | When true, the modal occupies the full viewport. | | title | string | No | "Armador de arbol" | Title displayed in the modal header. | | subtitle | string | No | — | Subtitle displayed in the modal header. | | data | TreeItem[] | No | — | Initial tree data. Each item has id, label, and optional children and extra fields. | | labelKey | string | No | — | Key in the tree item object used as its display label. | | itemFields | any[] | No | [] | Field definitions for the item edit form inside the tree builder. | | itemLabelTemplate | string | No | — | Template string for rendering item labels. | | apiBaseUrl | string | No | — | Base URL for the HTTP client. | | useAuthToken | boolean | No | — | When true, uses the authenticated HTTP client. | | fetchPath | string | No | — | API path to fetch the initial tree data. | | savePath | string | No | — | API path to persist the updated tree. | | saveMethod | 'POST' \| 'PUT' \| 'PATCH' | No | 'POST' | HTTP method used to save the tree. | | fetchDataKey | string | No | — | Key to extract the tree array from the fetch response. | | saveDataKey | string | No | — | Key under which the tree is wrapped in the save payload. Defaults to 'tree'. | | createFormTitle | string | No | — | Title for the create item form (reserved). | | editFormTitle | string | No | — | Title for the edit item form (reserved). | | payloadKey | string | No | — | Payload key override for the save request. |

Usage

Basic

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

const initialTree = [
  {
    id: 1,
    label: 'Root',
    children: [
      { id: 2, label: 'Child A' },
      { id: 3, label: 'Child B' },
    ],
  },
];

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

  return (
    <>
      <button onClick={() => setOpen(true)}>Edit Tree</button>
      <TreeBuilderModal
        isOpen={open}
        onClose={() => setOpen(false)}
        title="Action Group Tree"
        data={initialTree}
        labelKey="label"
        savePath="/v1/action-groups/tree"
        saveMethod="PUT"
        saveDataKey="groups"
        apiBaseUrl="https://api.example.com"
        useAuthToken
      />
    </>
  );
}