Skip to main content

add-task

Description​

Fires when adding a new task

Usage​

"add-task": ({
    id?: string | number,
    target: string | number,
    task: object,
    mode: "before" | "after" | "child"
}) => boolean | void;
info

For handling the actions you can use the Event Bus methods

Parameters​

The callback of the add-task action can take an object with the following parameters:

  • id - (optional) the id of a new task
  • target - (required) the task ID before or after which a new task will be added
  • task - (required) the task object. The list of parameters you can see here: tasks.
  • mode - (required) specifies where to place a task: before - before the task which id is specified, after it (after), or creates the child task for the target (child)

Example​

Use the api.exec method to trigger the action:

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

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

  function handleAdd() {
    if (apiRef.current) {
      apiRef.current.exec("add-task", { task: {} });
    }
  }

  return (
    <>
      <Toolbar>
        <Button type="primary" onClick={handleAdd}>Add task</Button>
      </Toolbar>
      <Gantt
        apiRef={apiRef}
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
        columns={data.columns}
      />
    </>
  );
}

export default App;

In the example below we use the api.intercept() method to change the task variable value replacing it with the relevant data from the add-task action:

import React, { useState, useEffect, useRef } from 'react';
import { getData } from './common/data';
import { Gantt } from 'wx-react-gantt';

function GanttComponent() {
  const [task, setTask] = useState(null);
  const apiRef = useRef(null);

  useEffect(() => {
    const data = getData();

    if (apiRef.current) {
      apiRef.current.intercept('add-task', data => {
        setTask(data.task);
      });
    }

  }, [apiRef]);

  return (
    <Gantt
      ref={apiRef}
      tasks={getData().tasks}
    />
  );
}

export default GanttComponent;

Related articles: How to access Gantt API