Trees

General

Trees
Multiple-level structure list.

Show Code

import React from "react";
import Trees from "pocko-ui/Trees";
import "pocko-ui/Trees/index.css";
 
const treesData = [
  {
    title: "level_1",
    key: "level 1",
    active: false,
    child_count: 1,
    children: [
      {
        title: "level_1-1",
        key: "level 1-1",
        active: true,
        child_count: 1,
        children: [
          {
            title: "level_1-1-1",
            key: "level 1-1-1",
          },
          {
            title: "level_1-1-2",
            key: "level 1-1-2",
          },
        ],
      },
    ],
  },
  {
    title: "level_2",
    key: "level 2",
    active: false,
    child_count: 0,
  },
  {
    title: "level_3",
    key: "level 3",
    active: false,
    child_count: 0,
  },
];
 
return (
  <div className="mt-4">
    <Trees
      data={treesData}
      id="title"
      name="key"
      hasChildrenFn={(item: any) => {
        // You may replace child_count with your own indicator field.
        return (
          (item.child_count ?? 0) > 0 ||
          (Array.isArray(item.children) && item.children.length > 0)
        );
      }}
    ></Trees>
  </div>
);

Push some expansion buttons to each item of the tree

Show Code

import React from "react";
import Trees from "pocko-ui/Trees";
import "pocko-ui/Trees/index.css";
 
const treesData = [
  {
    title: "level_1",
    key: "level 1",
    active: false,
    child_count: 1,
    children: [
      {
        title: "level_1-1",
        key: "level 1-1",
        active: true,
        child_count: 1,
        children: [
          {
            title: "level_1-1-1",
            key: "level 1-1-1",
          },
          {
            title: "level_1-1-2",
            key: "level 1-1-2",
          },
        ],
      },
    ],
  },
  {
    title: "level_2",
    key: "level 2",
    active: false,
    child_count: 0,
  },
  {
    title: "level_3",
    key: "level 3",
    active: false,
    child_count: 0,
  },
];
 
const createCustomContent = (node: any) => (
  <div className="d-flex align-items-center gap-2 p-1 bg-body rounded">
    <i
      className="fa-solid fa-circle-plus text-info"
      onClick={() => {
        console.log(
          "You can add new node behind tree-node by your function",
          node
        );
      }}
    ></i>
 
    <i
      className="fa-solid fa-pen mx-2 text-warning"
      onClick={() => {
        console.log("You can edit this tree-node by your function", node);
      }}
    ></i>
 
    <i
      className="fa-regular fa-trash-can text-danger"
      onClick={() => {
        console.log("You can delete this tree-node by your function", node);
      }}
    ></i>
  </div>
);
 
return (
  <div className="mt-4">
    <Trees
      data={treesData}
      id="title"
      name="key"
      renderCustomContent={createCustomContent}
      wrapperClassName={"col-4"}
      hasChildrenFn={(item: any) => {
        // You may replace child_count with your own indicator field.
        return (
          (item.child_count ?? 0) > 0 ||
          (Array.isArray(item.children) && item.children.length > 0)
        );
      }}
    />
  </div>
 );

Using Another icon to Show Expand

Show Code

import React from "react";
import Trees from "pocko-ui/Trees";
import "pocko-ui/Trees/index.css";
 
const treesData = [
  {
    title: "level_1",
    key: "level 1",
    active: false,
    child_count: 1,
    children: [
      {
        title: "level_1-1",
        key: "level 1-1",
        active: true,
        child_count: 1,
        children: [
          {
            title: "level_1-1-1",
            key: "level 1-1-1",
          },
          {
            title: "level_1-1-2",
            key: "level 1-1-2",
          },
        ],
      },
    ],
  },
  {
    title: "level_2",
    key: "level 2",
    active: false,
    child_count: 0,
  },
  {
    title: "level_3",
    key: "level 3",
    active: false,
    child_count: 0,
  },
];
 
return (
  <div className="mt-4">
    <Trees
      data={treesData}
      id="title"
      name="key"
      wrapperClassName={"col-4"}
      hasChildrenFn={(item: any) => {
        // You may replace child_count with your own indicator field.
        return (
          (item.child_count ?? 0) > 0 ||
          (Array.isArray(item.children) && item.children.length > 0)
        );
      }}
      // The icon to display for nodes that do not have children
      leafIcon={
        <svg
          width="0.75em"
          height="0.75em"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
        >
          <path d="M313.4 32.9c26 5.2 42.9 30.5 37.7 56.5l-2.3 11.4c-5.3 26.7-15.1 52.1-28.8 75.2l144 0c26.5 0 48 21.5 48 48c0 18.5-10.5 34.6-25.9 42.6C497 275.4 504 288.9 504 304c0 23.4-16.8 42.9-38.9 47.1c4.4 7.3 6.9 15.8 6.9 24.9c0 21.3-13.9 39.4-33.1 45.6c.7 3.3 1.1 6.8 1.1 10.4c0 26.5-21.5 48-48 48l-97.5 0c-19 0-37.5-5.6-53.3-16.1l-38.5-25.7C176 420.4 160 390.4 160 358.3l0-38.3 0-48 0-24.9c0-29.2 13.3-56.7 36-75l7.4-5.9c26.5-21.2 44.6-51 51.2-84.2l2.3-11.4c5.2-26 30.5-42.9 56.5-37.7zM32 192l64 0c17.7 0 32 14.3 32 32l0 224c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32-14.3-32-32L0 224c0-17.7 14.3-32 32-32z" />
        </svg>
      }
      arrowIcons={[
        <svg
          width="0.75em"
          height="0.75em"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 576 512"
        >
          <path d="M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z" />
        </svg>,
        <svg
          width="0.75em"
          height="0.75em"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 448 512"
        >
          <path d="M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416l384 0c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8l0-18.8c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z" />
        </svg>,
      ]}
    />
  </div>
);

API

Trees

import Trees from "pocko-ui/Trees";
import "pocko-ui/Trees/index.css"

Property	Type	Default	Description	Required
`wrapperClassName`	string	-	The class name for the outer wrapper of the control.	-
`treesRef`	any	-	A reference to the component, which allows accessing and calling internal functions via `useImperativeHandle`.	-
`id`	string	-	The field name in each node that uniquely identifies it.	✔
`name`	string	-	The field name that holds the display label shown in the tree.	✔
`data`	any[]	-	An array of data objects associated with the tree nodes.	✔
`defaultId`	any	-	The ID of the default selected tree node.	-
`treeDataItemClick`	Function	-	A callback function triggered when a tree node is clicked.	-
`renderCustomContent`	Function	-	A function that renders custom content (such as buttons or additional information) for each tree node.	-
`dataService`	any	-	Add a service class as a parameter to interact with external data sources or APIs.	-
`dataServiceFunction`	string	-	The name of the function to be called from the service class.	-
`dataServiceFunctionParams`	any[]	-	An array of parameters for the function call. Important: If the array contains `$QUERY_STRING`, the entered value will be treated as a parameter and passed out.	-
`leafIcon`	React.ReactNode	-	The icon to display for nodes that do not have children (i.e., leaf nodes). If not provided, no icon is shown.	-
`arrowIcons`	React.ReactNode[]	-	An array containing one or two icons used to indicate node expand/collapse states. One icon will rotate; two icons toggle.	-
`hasChildrenFn`	(node: any) => boolean	-	A function used to determine whether a node has children. Should return `true` if the node is expandable.	-

Installation