Configuring toolbar

The widget provides two possible ways to configure the Toolbar:

using the internal Toolbar component of Gantt (import from @svar-ui/react-gantt) and the getToolbarButtons helper
using the external Toolbar component with configurable data (import from @svar-ui/react-toolbar)

To add a toolbar, import the Toolbar component of Gantt, and add the Toolbar element. You should also obtain the Gantt API reference (via a ref) and pass it to the Toolbar using the api prop.

import { useRef } from "react";
import { getData } from "./common/data";
import { Gantt, Toolbar } from "@svar-ui/react-gantt";

export default function Example() {
  const data = getData();
  const api = useRef(null);

  return (
    <>
      <Toolbar api={api} />

      <Gantt ref={api} tasks={data.tasks} />
    </>
  );
}

To configure the toolbar (the set of buttons in the toolbar and their appearance), import the Toolbar component of Gantt and make necessary changes to the items array. Do not forget to add the items attribute to the Toolbar element.

import { useRef } from "react";
import { getData } from "../data";
import { Gantt, Toolbar } from "@svar-ui/react-gantt";

export default function Example() {
  const data = getData();
  const api = useRef(null);

  const items = [
    {
      id: "add-task",
      comp: "button",
      icon: "wxi-plus",
      text: "Add task",
      type: "primary",
    },
    {
      id: "edit-task",
      comp: "button",
      icon: "wxi-edit",
      text: "edit",
      type: "link",
    },
  ];

  return (
    <>
      <Toolbar api={api} items={items} />

      <Gantt ref={api} tasks={data.tasks} />
    </>
  );
}

You can also customize the Toolbar using the getToolbarButtons helper to get the default array.

import { useRef } from "react";
import { getData } from "../data";
import { Gantt, Toolbar, getToolbarButtons } from "@svar-ui/react-gantt";

export default function Example() {
  const data = getData();
  const api = useRef(null);

  // remove indentation buttons
  const items = getToolbarButtons().filter((b) => {
    return b.id?.indexOf("indent") === -1;
  });

  return (
    <>
      <Toolbar api={api} items={items} />

      <Gantt ref={api} tasks={data.tasks} />
    </>
  );
}

The example below shows how to add a custom toolbar by applying the external Toolbar component. We import the external Toolbar component, add functions to handle the actions using the api.exec() method, and modify the items array.

import { useRef, useState } from "react";
import { getData } from "../data";
import { Gantt } from "@svar-ui/react-gantt";
import { Toolbar } from "@svar-ui/react-toolbar";

export default function CustomToolbarExample() {
  const data = getData();
  const apiRef = useRef(null);

  const [selected, setSelected] = useState([]);
  const [items, setItems] = useState([]);

  function handleAdd() {
    const api = apiRef.current;
    if (!api) return;
    api.exec("add-task", {
      task: {
        text: "New task",
      },
      target: selected[0],
      mode: "after",
    });
  }

  function handleDelete() {
    const api = apiRef.current;
    if (!api) return;
    const order = getActionOrder(true);
    order.forEach((id) => api.exec("delete-task", { id }));
  }

  function handleMove(mode) {
    const api = apiRef.current;
    if (!api) return;
    const changeDir = mode === "down";
    const order = getActionOrder(changeDir);
    order.forEach((id) => api.exec("move-task", { id, mode }));
  }

  function getActionOrder(changeDir) {
    const api = apiRef.current;
    if (!api) return [];
    // sort by visible order and level
    const tasks = selected
      .map((id) => api.getTask(id))
      .sort((a, b) => {
        return a.$level - b.$level || a.$y - b.$y;
      });
    const idOrder = tasks.map((o) => o.id);

    // reverse for deleting/moving tasks down
    if (changeDir) return idOrder.reverse();
    return idOrder;
  }

  const allItems = [
    {
      comp: "button",
      type: "primary",
      text: "Add task",
      handler: handleAdd,
    },
    {
      comp: "button",
      text: "Delete task",
      handler: handleDelete,
    },
    {
      comp: "button",
      type: "primary",
      text: "Move task down",
      handler: () => handleMove("down"),
    },
    {
      comp: "button",
      type: "primary",
      text: "Move task up",
      handler: () => handleMove("up"),
    },
  ];

  // `init` is called by Gantt with the API instance; we store the API ref
  // and derive toolbar items based on the current selection.
  function init(api) {
    apiRef.current = api;
    const sel = api.getReactiveState().selected || [];
    setSelected(sel);
    setItems(sel.length ? allItems : [allItems[0]]);
  }

  return (
    <>
      <Toolbar items={items} />
      <div className="gtcell">
        <Gantt
          tasks={data.tasks}
          links={data.links}
          scales={data.scales}
          init={init}
        />
      </div>
    </>
  );
}

CSS (separate file or global CSS):

.gtcell {
  height: calc(100% - 50px);
  border-top: var(--wx-gantt-border);
}

Related samples:

Adding the default toolbar​

Configuring the set of buttons in the toolbar​

Adding a custom toolbar​

Adding the default toolbar

Configuring the set of buttons in the toolbar

Adding a custom toolbar