Adding a custom editor dialog

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 tag, define tasks and taskTypes, and add the action handler function that triggers the update-task or delete-task action.

import { useEffect, useState, useRef } from "react";
import { getData } from "../data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import { Form } from "../custom/Form.jsx";

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

  const [task, setTask] = useState(null);
  const apiRef = useRef(null);
  const [store, setStore] = useState(null);

  useEffect(() => {
    if (apiRef.current) {
      const api = apiRef.current;
      setStore(api.getState().tasks);

      api.intercept("show-editor", (data) => {
        setTask(store.byId(data.id));
        return false;
      });
    }
  }, [apiRef.current, store]);

  const formAction = (ev) => {
    const { action, data } = ev;

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

      default:
        apiRef.current.exec(action, data); // "update-task", "delete-task" actions
        break;
    }
  };

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

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

export default MyComponent;