Configuring toolbar

The widget provides two possible ways to configure the Toolbar:

• using the internal Toolbar component of Gantt (import from wx-react-gantt) and the defaultToolbarButtons array
• using the external Toolbar component with configurable data (import from wx-react-toolbar)

Adding the default toolbar

To add a toolbar, import the Toolbar component of Gantt, and add the Toolbar tag. You should also use the api object and pass it to the Toolbar.

import { getData } from "./common/data";
import { Gantt, Toolbar } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import { useRef } from "react";

function App() {
  const data = getData();

  const apiRef = useRef();

  return (
    <>
      <Toolbar api={apiRef.current} />

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

export default App;

Configuring the set of buttons in the toolbar

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 tag.

import { getData } from "../data";
import { Gantt, Toolbar } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import React, { useRef } from "react";

const Component = () => {
  const apiRef = useRef();
  const data = getData();

  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={apiRef.current} items={items} />
      <Gantt apiRef={apiRef} tasks={data.tasks} />
    </>
  );
};

export default Component;

You can also customize the Toolbar by importing and changing the defaultToolbarButtons array.

import { getData } from "../data";
import { Gantt, Toolbar, defaultToolbarButtons } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import { useRef } from "react";

function MyComponent() {
  const apiRef = useRef();

  const data = getData();

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

  return (
    <>
      <Toolbar apiRef={apiRef} items={items} />
      <Gantt apiRef={apiRef} tasks={data.tasks} />
    </>
  );
}

export default MyComponent;

Adding a custom toolbar

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

import React, { useRef, useEffect, useState } from "react";
import { getData } from "../data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import { Toolbar } from "wx-react-toolbar";

const GanttComponent = () => {
  const apiRef = useRef();
  const data = getData();
  const [selected, setSelected] = useState([]);
  const [items, setItems] = useState([]);

  useEffect(() => {
    if (apiRef.current) {
      setSelected(apiRef.current.getReactiveState().selected);
      setItems(selected.length ? allItems : [allItems[0]]);
    }
  }, [selected]);

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

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

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

  const getActionOrder = (changeDir) => {
    const tasks = selected
      .map(id => apiRef.current.getTask(id))
      .sort((a, b) => {
        return a.$level - b.$level || a.$y - b.$y;
      });
    const idOrder = tasks.map(o => o.id);

    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"),
    },
  ];

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

export default GanttComponent;

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