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 "wx-react-gantt/dist/gantt.css";
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