grouping works for project only

src/components/gantt/gantt.tsx

@@ -85,7 +85,12 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
 
   // task change events
   useEffect(() => {
-    const filteredTasks = removeHiddenTasks(tasks);
+    let filteredTasks: Task[];
+    if (onExpanderClick) {
+      filteredTasks = removeHiddenTasks(tasks);
+    } else {
+      filteredTasks = tasks;
+    }
     const [startDate, endDate] = ganttDateRange(filteredTasks, viewMode);
     let newDates = seedDates(startDate, endDate, viewMode);
     if (rtl) {
@@ -137,6 +142,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     milestoneBackgroundSelectedColor,
     rtl,
     scrollX,
+    onExpanderClick,
   ]);
 
   useEffect(() => {

src/components/gantt/task-gantt-content.tsx

@@ -134,7 +134,10 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
         isNotLikeOriginal
       ) {
         try {
-          const result = await onDateChange(newChangedTask);
+          const result = await onDateChange(
+            newChangedTask,
+            newChangedTask.barChildren
+          );
           if (result !== undefined) {
             operationSuccess = result;
           }
@@ -143,7 +146,10 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
         }
       } else if (onProgressChange && isNotLikeOriginal) {
         try {
-          const result = await onProgressChange(newChangedTask);
+          const result = await onProgressChange(
+            newChangedTask,
+            newChangedTask.barChildren
+          );
           if (result !== undefined) {
             operationSuccess = result;
           }
@@ -254,9 +260,9 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
           return task.barChildren.map(child => {
             return (
               <Arrow
-                key={`Arrow from ${task.id} to ${tasks[child].id}`}
+                key={`Arrow from ${task.id} to ${tasks[child.index].id}`}
                 taskFrom={task}
-                taskTo={tasks[child]}
+                taskTo={tasks[child.index]}
                 rowHeight={rowHeight}
                 taskHeight={taskHeight}
                 arrowIndent={arrowIndent}

src/helpers/bar-helper.ts

@@ -53,26 +53,13 @@ export const convertToBarTasks = (
   });
 
   // set dependencies
-  barTasks = barTasks.map((task, i) => {
+  barTasks = barTasks.map(task => {
     const dependencies = task.dependencies || [];
     for (let j = 0; j < dependencies.length; j++) {
       const dependence = barTasks.findIndex(
         value => value.id === dependencies[j]
       );
-      if (dependence !== -1) barTasks[dependence].barChildren.push(i);
-    }
-    return task;
-  });
-  // normalize flags for hideChildren
-  barTasks = barTasks.map(task => {
-    if (task.barChildren.length > 0) {
-      if (!task.hideChildren) {
-        task.hideChildren = false;
-      }
-    } else if (!task.hideChildren && task.type === "project") {
-      task.hideChildren = false;
-    } else if (!task.hideChildren) {
-      task.hideChildren = undefined;
+      if (dependence !== -1) barTasks[dependence].barChildren.push(task);
     }
     return task;
   });
@@ -197,6 +184,7 @@ const convertToBar = (
     rtl
   );
   const y = taskYCoordinate(index, rowHeight, taskHeight);
+  const hideChildren = task.type === "project" ? task.hideChildren : undefined;
 
   const styles = {
     backgroundColor: barBackgroundColor,
@@ -216,6 +204,7 @@ const convertToBar = (
     progressWidth,
     barCornerRadius,
     handleWidth,
+    hideChildren,
     height: taskHeight,
     barChildren: [],
     styles,
@@ -263,6 +252,7 @@ const convertToMilestone = (
     typeInternal: task.type,
     progress: 0,
     height: rotatedHeight,
+    hideChildren: undefined,
     barChildren: [],
     styles,
   };

src/helpers/other-helper.ts

@@ -18,7 +18,9 @@ export function isBarTask(task: Task | BarTask): task is BarTask {
 }
 
 export function removeHiddenTasks(tasks: Task[]) {
-  const groupedTasks = tasks.filter(t => t.hideChildren);
+  const groupedTasks = tasks.filter(
+    t => t.hideChildren && t.type === "project"
+  );
   if (groupedTasks.length > 0) {
     for (let i = 0; groupedTasks.length > i; i++) {
       const groupedTask = groupedTasks[i];

src/types/bar-task.ts

@@ -11,7 +11,7 @@ export interface BarTask extends Task {
   progressWidth: number;
   barCornerRadius: number;
   handleWidth: number;
-  barChildren: number[];
+  barChildren: BarTask[];
   styles: {
     backgroundColor: string;
     backgroundSelectedColor: string;

src/types/public-types.ts

@@ -46,13 +46,15 @@ export interface EventOption {
    * Invokes on end and start time change. Chart undoes operation if method return false or error.
    */
   onDateChange?: (
-    task: Task
+    task: Task,
+    children: Task[]
   ) => void | boolean | Promise<void> | Promise<boolean>;
   /**
    * Invokes on progress change. Chart undoes operation if method return false or error.
    */
   onProgressChange?: (
-    task: Task
+    task: Task,
+    children: Task[]
   ) => void | boolean | Promise<void> | Promise<boolean>;
   /**
    * Invokes on delete selected task. Chart undoes operation if method return false or error.