Adding a custom editor dialog

For the instructions about applying a default editor component, refer to Configuring the task editor.

To add your custom editor, you should:

• Import the custom Form component for adding/editing tasks
• Use the api.intercept method to disable opening the default editor by blocking the show-editor action (return false)
• Add the Form component, define tasks and taskTypes, and add the action handler function that triggers the update-task or delete-task action. In React, pass the Gantt init callback to receive the API and keep the API in a ref; render the Form conditionally and handle its onAction event.

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

const data = getData();
const taskTypes = [
  { id: "task", label: "Task" },
  { id: "milestone", label: "Milestone" },
  { id: "summary", label: "Project" },
];

export default function CustomEditorExample() {
  const [task, setTask] = useState(null);
  const apiRef = useRef(null);
  const storeRef = useRef(null);

  // init is called by the Gantt component with its API instance
  function init(api) {
    apiRef.current = api;
    storeRef.current = api.getState().tasks;

    // Intercept the default editor opening and replace it with our custom form
    api.intercept("show-editor", (data) => {
      setTask(storeRef.current.byId(data.id));
      return false; // block default editor
    });
  }

  // Handler for actions coming from the custom Form component
  function formAction(ev) {
    const { action, data } = ev;

    switch (action) {
      case "close-form":
        setTask(null);
        break;

      default:
        // Forward other actions (e.g. "update-task", "delete-task") to the Gantt API
        apiRef.current.exec(action, data);
        break;
    }
  }

  return (
    <>
      <Gantt
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
        init={init}
        ref={apiRef}
      />

      {task && (
        <Form task={task} taskTypes={taskTypes} onAction={formAction} />
      )}
    </>
  );
}

---

Related sample: Custom edit form