Componente de árbol de blueprint de ReactJS

BlueprintJS es un kit de herramientas de interfaz de usuario basado en React para la web. Esta biblioteca está muy optimizada y es popular para crear interfaces que son complejas y densas en datos para aplicaciones de escritorio. Tree Component proporciona una forma para que los usuarios muestren datos estructurados en árbol. Se utiliza para mostrar datos jerárquicos. Podemos usar el siguiente enfoque en ReactJS para usar el componente de árbol de blueprint de ReactJS.

Accesorios para árboles:

• className: se utiliza para denotar una lista delimitada por espacios de nombres de clase para pasar a un elemento secundario.
• contenidos: Se utiliza para denotar los datos que especifican el contenido y la apariencia del árbol.
• onNodeClick: es una función de devolución de llamada que se activa cuando se hace clic en un Node en cualquier lugar que no sea el signo de intercalación para expandir/contraer el Node.
• onNodeCollapse: es una función de devolución de llamada que se activa cuando se hace clic en el signo de intercalación de un Node expandido.
• onNodeContextMenu: es una función de devolución de llamada que se activa cuando se hace clic con el botón derecho en un Node o se presiona el botón del menú contextual en un Node enfocado.
• onNodeDoubleClick: es una función de devolución de llamada que se activa cuando se hace doble clic en un Node.
• onNodeExpand: es una función de devolución de llamada que se activa cuando se hace clic en el signo de intercalación de un Node colapsado.
• onNodeMouseEnter: es una función de devolución de llamada que se activa cuando se mueve el mouse sobre un Node.
• onNodeMouseLeave: es una función de devolución de llamada que se activa cuando el mouse se mueve fuera de un Node.

Accesorios de TreeNode:

• childNodes: se utiliza para indicar los Nodes del árbol hijo de este Node.
• children: Se utiliza para denotar el elemento children.
• className: se utiliza para denotar una lista delimitada por espacios de nombres de clase para pasar a un elemento secundario.
• contentRef: se utiliza para indicar el elemento de referencia de contenido.
• profundidad: Se utiliza para denotar la profundidad de los Nodes.
• disabled: Se utiliza para indicar si este Node del árbol es no interactivo.
• hasCaret: Se utiliza para indicar si se debe mostrar el símbolo de intercalación para expandir/colapsar un Node.
• icono: se utiliza para indicar el nombre de un icono o un elemento de icono para representar junto a la etiqueta del Node.
• id: se utiliza para denotar un identificador único para el Node.
• isExpanded: Se hereda de la propiedad ITreeNode.isExpanded .
• isSelected: Se utiliza para indicar si este Node está seleccionado.
• clave: se utiliza para denotar el atributo clave único.
• etiqueta: se utiliza para indicar la etiqueta principal del Node.
• nodeData: se utiliza para indicar un objeto de usuario personalizado opcional para asociarlo con el Node.
• onClick: es una función de devolución de llamada que se activa cuando se hace clic en TreeNode.
• onCollapse: es una función de devolución de llamada que se activa cuando el TreeNode colapsa.
• onContextMenu: es una función de devolución de llamada que se activa cuando se hace clic con el botón derecho en TreeNode o se presiona el botón del menú contextual en un TreeNode enfocado.
• onDoubleClick: es una función de devolución de llamada que se activa cuando el usuario hace doble clic en TreeNode.
• onExpand: es una función de devolución de llamada que se activa cuando el TreeNode se expande.
• onMouseEnter: es una función de devolución de llamada que se activa cuando el mouse ingresa al TreeNode.
• onMouseLeave: es una función de devolución de llamada que se activa cuando el mouse abandona el TreeNode.
• ruta: se utiliza para indicar el atributo de ruta para el Node del árbol.
• secondLabel: se utiliza para indicar una etiqueta/componente secundario que se muestra en el lado derecho del Node.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

cd foldername

Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install @blueprintjs/core

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo 1: ahora escriba el siguiente código en el archivo App.js. Aquí, Aquí hemos demostrado el Componente Árbol con el elemento Icono aplicado.

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import { Tree, Classes } from "@blueprintjs/core";
  
function App() {
  
    // Sample Tree Data
    const sampleData = [
        {
            id: 0,
            hasCaret: true,
            icon: "folder-close",
            label: "Folders"
        },
        {
            id: 1,
            hasCaret: true,
            icon: "user",
            label: "Profile"
        },
        {
            id: 2,
            hasCaret: true,
            icon: "folder-close",
            label: "Documents"
        },
    ];
  
    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Blueprint Tree Component</h4>
            <Tree
                contents={sampleData}
                className={Classes.ELEVATION_0}
            />
        </div>
    );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Ejemplo 2: ahora escriba el siguiente código en el archivo App.js. Aquí, Aquí hemos demostrado el Componente Árbol sin el elemento Icono aplicado.

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import { Tree, Classes } from "@blueprintjs/core";
  
function App() {
  
    // Sample Tree Data
    const sampleData = [
        { id: 0, label: "Songs" },
        { id: 1, label: "Pictures" },
        { id: 2, label: "Calendar" },
        { id: 4, label: "Album" },
        { id: 5, label: "Themes" },
    ];
  
    return (
        <div style={{
            display: 'block', width: 300, padding: 30
        }}>
            <h4>ReactJS Blueprint Tree Component</h4>
            <Tree
                contents={sampleData}
                className={Classes.ELEVATION_0}
            />
        </div>
    );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Ejemplo 3: Ahora escriba el siguiente código en el archivo App.js. Aquí, aquí hemos demostrado el componente de árbol anidado que se expande al hacer clic en el Node del árbol.

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import { Tree, Classes } from "@blueprintjs/core";
  
function App() {
  
    const [isOpen, setIsOpen] = React.useState(false)
  
    // Sample Tree Data
    const sampleData = [
        {
            id: 5, label: "Click to expand Folders",
            isExpanded: isOpen,
            childNodes: [
                {
                    id: 0,
                    icon: "folder-close",
                    label: "Folders"
                },
                {
                    id: 1,
                    icon: "user",
                    label: "Profile"
                },
                {
                    id: 2,
                    icon: "folder-close",
                    label: "Documents"
                }
            ]
        },
    ];
  
    return (
        <div style={{
            display: 'block', width: 300, padding: 30
        }}>
            <h4>ReactJS Blueprint Tree Component</h4>
            <Tree
                contents={sampleData}
                className={Classes.ELEVATION_0}
                onNodeClick={()=>setIsOpen(true)}
            />
        </div>
    );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://blueprintjs.com/docs/#core/components/tree