TreeBuilderModal

Modal a pantalla completa que embebe un editor TreeBuilder para crear y modificar estructuras de árbol anidadas. Puede obtener opcionalmentela el árbol inicial desde una API (fetchPath) y persistir los cambios mediante un método HTTP configurable. El botón flotante de guardar solo se habilita cuando el árbol ha sido modificado. Los errores y estados de éxito se comunican mediante un Toast.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | isOpen | boolean | Sí | — | Controla si el modal está visible. | | onClose | (icon?: any) => void | Sí | — | Se llama cuando el modal se cierra. | | backdropStyle | React.CSSProperties | No | — | Estilos en línea para el backdrop del modal. | | windowStyle | React.CSSProperties | No | — | Estilos en línea fusionados en la ventana del modal. | | closeButtonStyle | React.CSSProperties | No | — | Estilos para el botón de cierre. | | closeIcon | string | No | — | Nombre del ícono del botón de cierre. | | closeIconPaths | any[] | No | — | Rutas de ícono personalizadas para el botón de cierre. | | closeIconSize | number | No | — | Tamaño del ícono del botón de cierre. | | zIndex | number | No | 99999 | z-index CSS del overlay del modal. | | id | string | No | — | id HTML del elemento modal. | | fullScreen | boolean | No | — | Cuando es true, el modal ocupa toda la pantalla. | | title | string | No | "Armador de arbol" | Título mostrado en el encabezado del modal. | | subtitle | string | No | — | Subtítulo mostrado en el encabezado del modal. | | data | TreeItem[] | No | — | Datos iniciales del árbol. Cada ítem tiene id, label, y opcionalmente children y campos adicionales. | | labelKey | string | No | — | Clave en el objeto de ítem de árbol usada como etiqueta de display. | | itemFields | any[] | No | [] | Definiciones de campos para el formulario de edición de ítems en el constructor de árbol. | | itemLabelTemplate | string | No | — | Cadena de plantilla para renderizar etiquetas de ítems. | | apiBaseUrl | string | No | — | URL base del cliente HTTP. | | useAuthToken | boolean | No | — | Cuando es true, usa el cliente HTTP autenticado. | | fetchPath | string | No | — | Ruta de API para obtener los datos iniciales del árbol. | | savePath | string | No | — | Ruta de API para persistir el árbol actualizado. | | saveMethod | 'POST' \| 'PUT' \| 'PATCH' | No | 'POST' | Método HTTP para guardar el árbol. | | fetchDataKey | string | No | — | Clave para extraer el arreglo del árbol de la respuesta del fetch. | | saveDataKey | string | No | — | Clave bajo la cual se envuelve el árbol en el payload de guardado. Por defecto 'tree'. | | createFormTitle | string | No | — | Título para el formulario de creación de ítem (reservado). | | editFormTitle | string | No | — | Título para el formulario de edición de ítem (reservado). | | payloadKey | string | No | — | Override de clave de payload para la petición de guardado. |

Uso

Básico

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
      />
    </>
  );
}