Arbol Tree

Storybooks aqui

Este componente de árbol permite integrar facilmente un árbol de componentes React en su aplicación. El árbol de componentes es una estructura de datos jerárquica que permite a los usuarios navegar a través de una lista de elementos con una estructura de árbol, donde los items pueden tener hijos que a su vez pueden tener hijos, desplegando y ocultando los elementos de la lista.

Este componente es compatible con tooltips, menu contextual, y puede ser personalizado con iconos y estilos.

Instalación

npm i mecatron-react-tree

Uso

import React from "react";
import { Tree } from "mecatron-react-tree";

const data = [
 {
  content: <span>Node 1</span>,
  id: "1",
  childrens: [
   {
    content: <span>Node 1.1</span>,
    id: "1.1",
    childrens: [
     {
      content: <span>Node 1.1.1</span>,
      id: "1.1.1",
     },
     {
      content: <span>Node 1.1.2</span>,
      id: "1.1.2",
     },
    ],
   },
   {
    content: <span>Node 1.2</span>,
    id: "1.2",
   },
  ],
 },
];

const App = () => {
 return <Tree nodes={data} />;
};

export default App;

Docs

export interface NodeTree {
 /**
  * The string identifier for the node
  */
 id: string;
 /**
  * content of the node is a react component
  */
 content: React.ReactNode;
 /**
  * Array of children nodes, when is undefined the node is a leaf node
  */
 childrens?: NodeTree[];
 /**
  * The node is expanded or not
  * @type boolean
  * @default false
  */
 expanded?: boolean;

 /**
  * The tooltip label
  * @default ""
  * @type string
  * @example "This is a tooltip"
  */
 tooltipLabel?: string;
 /**
  * Context menu items
  */
 contextMenuItems?: ContextMenuItem[];
 /**
  * The onOpenClose event of the node
  */
 onOpenClose?: (
  expanded: boolean,
  node: NodeTree,
  event: React.MouseEvent
 ) => void;
 /**
  * The onClick event of the node
  */
 onClick?: (node: NodeTree, event: React.MouseEvent) => void;
}

La interfaz NodeTree define la estructura de los nodos del árbol. Cada nodo tiene un identificador único, un contenido que es un componente React, un array de nodos hijos, un booleano que indica si el nodo está expandido o no, un tooltip y un array de items para el menú contextual.

export interface ContextMenuItem {
 /**
  * The content of the context menu item
  * @type React.ReactNode
  * @example <span>Item 1</span>
  * @default null
  * @required
  * @description The content of the context menu item
  */
 content: React.ReactNode;
 /**
  * The onClick event of the context menu item
  * @type () => void
  * @example () => console.log("Item 1 clicked")
  * @default null
  * @required
  * @description The onClick event of the context menu item
  */
 onClick: () => void;
 /**
  * Ignore the default style of the context menu item
  * @type boolean
  * @example true
  * @default false
  * @description Ignore the default style of the context menu item
  */
 ignoreDefaultStyle?: boolean;
}

La interfaz ContextMenuItem define la estructura de los items del menú contextual. Cada item tiene un contenido que es un componente React, un evento onClick y un booleano que indica si se debe ignorar el estilo por defecto del item.

export interface TreeProps {
 /**
  * Array of nodes
  */
 nodes: NodeTree[];
}

La interfaz TreeProps define las propiedades del componente Tree. El componente Tree recibe un array de nodos.

TODO

• [ ] Permitir submenus en el menu contextual
• [ ] Permitir personalizar el menu contextual
• [ ] Permitir personalizar los iconos de desplegar y ocultar
• [ ] Agregar drang and drop
• [ ] Agregar soporte para teclado
• [ ] Agregar soporte para accesibilidad
• [ ] Agregar soporte para temas
• [ ] Agregar soporte para estilos personalizados
• [ ] Agregar soporte para personalizar los tooltips
• [ ] Agregar tests unitarios