taskTemplate

Description

Defines your own template for tasks bars

Usage

taskTemplate?: any;

Parameters

• taskTemplate - the React component to be applied as a template to the content of the task bar

Below is an example of the component that uses the React dispatch to send the custom-click action to Gantt.

import React, { useState } from "react";

export default function SomeComponent({ data }) {
  const [clicked, setClicked] = useState(data.clicked);

  function doClick(ev) {
    ev.stopPropagation();
    setClicked(!clicked);
    // Handle custom dispatch logic here
    // Example: props.onAction({ action: "custom-click", data: { clicked: !clicked, id: data.id } });
  }

  return (
    <>
      {data.type !== "milestone" ? (
        <>
          <div className="wx-text-out text-right">{data.text || ""}</div>
          <button onClick={doClick}>
            {clicked ? "Was clicked" : "Click Me"}
          </button>
        </>
      ) : (
        <div className="wx-text-out text-left">{data.text || ""}</div>
      )}
    </>
  );
}

button {
  font-size: 10px;
  position: relative;
  z-index: 2;
  font: var(--wx-gantt-bar-font);
}

.text-right {
  left: 100%;
  top: -2px;
}

.text-left {
  right: 100%;
  top: -2px;
}

.text-right,
.text-left,
button {
  padding: 0 2px;
  font-size: 12px;
}

In the next example we import the component above and listen to the custom-click action to trigger the update-task action on click.

import { getData } from "../data";
import { Gantt } from "wx-react-gantt";
import MyTaskContent from "../custom/MyTaskContent.jsx";
import { useRef } from "react";

function GanttComponent() {
  const data = getData();
  const apiRef = useRef();

  function doClick(ev) {
    const data = ev;
    apiRef.current.exec("update-task", {
      id: data.id,
      task: {
        clicked: data.clicked,
      },
    });
  }

  return (
    <Gantt
      ref={apiRef}
      onCustomClick={doClick}
      taskTemplate={MyTaskContent}
      tasks={data.tasks}
      links={data.links}
      scales={data.scales}
    />
  );
}

export default GanttComponent;