dev temp changes

example/src/App.tsx

@@ -2,11 +2,12 @@ import React from "react";
 import "gantt-task-react/dist/index.css";
 import { Task, ViewMode, Gantt } from "gantt-task-react";
 import { ViewSwitcher } from "./components/view-switcher";
+import { initTasks } from "./helper";
 
 //Init
 const App = () => {
-  const currentDate = new Date();
   const [view, setView] = React.useState<ViewMode>(ViewMode.Day);
+  const [tasks, setTasks] = React.useState<Task[]>(initTasks());
   const [isChecked, setIsChecked] = React.useState(true);
   let columnWidth = 60;
   if (view === ViewMode.Month) {
@@ -14,85 +15,24 @@ const App = () => {
   } else if (view === ViewMode.Week) {
     columnWidth = 250;
   }
-  let tasks: Task[] = [
-    {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
-      end: new Date(
-        currentDate.getFullYear(),
-        currentDate.getMonth(),
-        2,
-        12,
-        28
-      ),
-      name: "Idea",
-      id: "Task 0",
-      progress: 45,
-    },
-    {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0),
-      name: "Research",
-      id: "Task 1",
-      progress: 25,
-      dependencies: ["Task 0"],
-    },
-    {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8, 0, 0),
-      name: "Discussion with team",
-      id: "Task 2",
-      progress: 10,
-      dependencies: ["Task 1"],
-    },
-    {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 9, 0, 0),
-      name: "Developing",
-      id: "Task 3",
-      progress: 2,
-      dependencies: ["Task 2"],
-    },
-    {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 10),
-      name: "Review",
-      id: "Task 4",
-      progress: 70,
-      dependencies: ["Task 2"],
-    },
-    {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 16),
-      name: "Release & Eat Pizza",
-      id: "Task 6",
-      progress: currentDate.getMonth(),
-      dependencies: ["Task 4"],
-      styles: { progressColor: "#ffbb54", progressSelectedColor: "#ff9e0d" },
-    },
-    {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 24),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 25),
-      name: "Closing",
-      id: "Task 9",
-      progress: 0,
-      isDisabled: true,
-    },
-  ];
 
-  const sleep = (milliseconds: number) => {
-    return new Promise(resolve => setTimeout(resolve, milliseconds));
-  };
   let onTaskChange = (task: Task) => {
     console.log("On date change Id:" + task.id);
+    debugger;
+    const newTasks = tasks.map(t => (t.id === task.id ? task : t));
+    setTasks(newTasks);
   };
 
   let onTaskDelete = (task: Task) => {
     const conf = window.confirm("Are you sure about " + task.name + " ?");
+    if (conf) {
+      setTasks(tasks.filter(t => t.id !== task.id));
+    }
     return conf;
   };
 
   let onProgressChange = async (task: Task) => {
-    await sleep(5000);
+    setTasks(tasks.map(t => (t.id === task.id ? task : t)));
     console.log("On progress change Id:" + task.id);
   };
 
@@ -123,6 +63,7 @@ const App = () => {
         listCellWidth={isChecked ? "155px" : ""}
         columnWidth={columnWidth}
       />
+      <h3 style={{ color: "#e56b6f" }}>Milestones are not available</h3>
       <h3>Gantt With Limited Height</h3>
       <Gantt
         tasks={tasks}

example/src/helper.tsx

@@ -0,0 +1,77 @@
+import { Task } from "../../dist/types/public-types";
+
+export function initTasks() {
+  const currentDate = new Date();
+  const tasks: Task[] = [
+    {
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
+      end: new Date(
+        currentDate.getFullYear(),
+        currentDate.getMonth(),
+        2,
+        12,
+        28
+      ),
+      name: "Idea",
+      id: "Task 0",
+      progress: 45,
+      type: "task",
+    },
+    {
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0),
+      name: "Research",
+      id: "Task 1",
+      progress: 25,
+      dependencies: ["Task 0"],
+      type: "task",
+    },
+    {
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8, 0, 0),
+      name: "Discussion with team",
+      id: "Task 2",
+      progress: 10,
+      dependencies: ["Task 1"],
+      type: "task",
+    },
+    {
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 9, 0, 0),
+      name: "Developing",
+      id: "Task 3",
+      progress: 2,
+      dependencies: ["Task 2"],
+      type: "task",
+    },
+    {
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 10),
+      name: "Review",
+      id: "Task 4",
+      type: "task",
+      progress: 70,
+      dependencies: ["Task 2"],
+    },
+    {
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 16),
+      name: "Release",
+      id: "Task 6",
+      progress: currentDate.getMonth(),
+      type: "milestone",
+      dependencies: ["Task 4"],
+      styles: { progressColor: "#ffbb54", progressSelectedColor: "#ff9e0d" },
+    },
+    {
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 24),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 25),
+      name: "Closing",
+      id: "Task 9",
+      progress: 0,
+      isDisabled: true,
+      type: "task",
+    },
+  ];
+  return tasks;
+}