Svar Gantt Context Menu Issue

Extarlife

I am having issues rendering the gantt when I use ContextMenu. I have the following:

import React, { useRef, useEffect } from "react";
import { Willow, Gantt, ContextMenu } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
const GanttChart = () => {
    const apiRef = useRef(null);

    // Define your tasks, links, and scales
    const tasks = [
        {
            id: 20,
            text: "New Task",
            start: new Date(2024, 5, 11),
            end: new Date(2024, 6, 12),
            duration: 1,
            progress: 2,
            type: "task",
            lazy: false,
        },
        {
            id: 47,
            text: "[1] Master project",
            start: new Date(2024, 5, 12),
            end: new Date(2024, 7, 12),
            duration: 8,
            progress: 0,
            parent: 0,
            type: "summary",
        },
        {
            id: 22,
            text: "Task",
            start: new Date(2024, 7, 11),
            end: new Date(2024, 8, 12),
            duration: 8,
            progress: 0,
            parent: 47,
            type: "task",
        },
        {
            id: 21,
            text: "New Task 2",
            start: new Date(2024, 7, 10),
            end: new Date(2024, 8, 12),
            duration: 3,
            progress: 0,
            type: "task",
            lazy: false,
        },
    ];

    const links = [{ id: 1, source: 20, target: 21, type: "e2e" }];

    const scales = [
        { unit: "month", step: 1, format: "MMMM yyy" },
        { unit: "day", step: 1, format: "d" },
    ];

    return (
        <Willow>
            <link rel="stylesheet" href="https://cdn.svar.dev/fonts/wxi/wx-icons.css" />
            <ContextMenu api={apiRef.current}>
                <Gantt
                    init={(api) => {
                        apiRef.current = api; // Assign the api object to apiRef
                        console.log("API Object:", apiRef.current); // Debug the api object
                    }}
                    zoom={true}
                    tasks={tasks}
                    links={links}
                    scales={scales}
                />
            </ContextMenu>
        </Willow>
    );
};
export default GanttChart;

I get a blank page when rendered. If I remove <ContextMenu><ContextMenu/> then the gantt displays correctly. Have I done something wrong?

Thanks

tasha

Hello

To get access to the contex menu api you need to use useState hook const [api, setApi] = useState();
We initialize it in the init funtction: init={(a) => setApi(a)}
And then we pass this api to ContextMenu and get access to it after it will be initialized:

  <Willow>
      <div
        onContextMenu={(ev) => menuHandler.current(ev)}
        className="demo-rows"
      >
        <Gantt
          init={(a) => setApi(a)}
          tasks={tasks}
          links={links}
          scales={scales}
        />
        <ContextMenu
          api={api}
          init={(v) => (menuHandler.current = v)}
        ></ContextMenu>
      </div>
    </Willow>

Please check the example: https://stackblitz.com/edit/vitejs-vite-fg9bqptu?file=src%2FGantt.jsx,src%2FApp.css,index.html&terminal=dev

Extarlife

Thanks for the help Tasha. I've updated the code to the below:

import React, { useRef, useState, useEffect } from "react";
import { Willow, Gantt, ContextMenu } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const tasks = [
    {
        id: 20,
        text: 'New Task',
        start: new Date(2024, 5, 11),
        end: new Date(2024, 6, 12),
        duration: 1,
        progress: 2,
        type: 'task',
        lazy: false,
    },
    {
        id: 47,
        text: '[1] Master project',
        start: new Date(2024, 5, 12),
        end: new Date(2024, 7, 12),
        duration: 8,
        progress: 0,
        parent: 0,
        type: 'summary',
    },
    {
        id: 22,
        text: 'Task',
        start: new Date(2024, 7, 11),
        end: new Date(2024, 8, 12),
        duration: 8,
        progress: 0,
        parent: 47,
        type: 'task',
    },
    {
        id: 21,
        text: 'New Task 2',
        start: new Date(2024, 7, 10),
        end: new Date(2024, 8, 12),
        duration: 3,
        progress: 0,
        type: 'task',
        lazy: false,
    },
];

const links = [{ id: 1, source: 20, target: 21, type: 'e2e' }];

const scales = [
    { unit: 'month', step: 1, format: 'MMMM yyy' },
    { unit: 'day', step: 1, format: 'd' },
];

const GanttChart = () => {
    const [api, setApi] = useState();
    const menuHandler = useRef();

    return (
        <Willow>
            <div
                onContextMenu={(ev) => menuHandler.current(ev)}
                className="demo-rows"
            >
                <link rel="stylesheet" href="https://cdn.svar.dev/fonts/wxi/wx-icons.css" />
                <Gantt
                    init={(a) => setApi(a)}
                    zoom={true}
                    tasks={tasks}
                    links={links}
                    scales={scales}
                />
                <ContextMenu
                    api={api}
                    init={(v) => (menuHandler.current = v)}
                ></ContextMenu>
            </div>
        </Willow>
    );
};

export default GanttChart;

But I don't have any styling on the context menu. I've checked your example and I can't see anything obvious?

![https://ibb.co/ZxKn5B8]

tasha

Please add class="wx-willow-theme" to body in index.html file:

<body class="wx-willow-theme">
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>

Extarlife

Thanks Tasha, that resolved the issue :)

Thank you for your help.