Merge pull request #17 from MaTeMaTuK/dev

grouping works for project only

README.md

@@ -68,16 +68,16 @@ npm start
 
 ### EventOption
 
-| Parameter Name     | Type                                                        | Description                                                                             |
-| :----------------- | :---------------------------------------------------------- | :-------------------------------------------------------------------------------------- |
-| onSelect           | (task: Task, isSelected: boolean) => void                   | Specifies the function to be executed on the taskbar select or unselect event.          |
-| onDoubleClick      | (task: Task) => void                                        | Specifies the function to be executed on the taskbar onDoubleClick event.               |
-| onDelete\*         | (task: Task) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed on the taskbar on Delete button press event.      |
-| onDateChange\*     | (task: Task) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar event on timeline has finished. |
-| onProgressChange\* | (task: Task) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar progress event has finished.    |
-| timeStep           | (task: Task) => number                                      | A time step value for onDateChange. Specify in milliseconds.                            |
+| Parameter Name     | Type                                                                          | Description                                                                             |
+| :----------------- | :---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- |
+| onSelect           | (task: Task, isSelected: boolean) => void                                     | Specifies the function to be executed on the taskbar select or unselect event.          |
+| onDoubleClick      | (task: Task) => void                                                          | Specifies the function to be executed on the taskbar onDoubleClick event.               |
+| onDelete\*         | (task: Task) => void/boolean/Promise<void>/Promise<boolean>                   | Specifies the function to be executed on the taskbar on Delete button press event.      |
+| onDateChange\*     | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar event on timeline has finished. |
+| onProgressChange\* | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar progress event has finished.    |
+| timeStep           | (task: Task) => number                                                        | A time step value for onDateChange. Specify in milliseconds.                            |
 
-\* Chart undoes operation if method return false or error.
+\* Chart undoes operation if method return false or error. Parameter children returns one level deep records.
 
 ### DisplayOption
 
@@ -135,7 +135,7 @@ npm start
 | isDisabled     | bool     | Disables all action for current task.                                                                 |
 | fontSize       | string   | Specifies the taskbar font size locally.                                                              |
 | project        | string   | Task project name                                                                                     |
-| hideChildren   | bool     | Hide children items.                                                                                  |
+| hideChildren   | bool     | Hide children items. Parameter works with project type only                                           |
 
 \*Required
 

example/src/helper.tsx

@@ -10,6 +10,8 @@ export function initTasks() {
       id: "ProjectSample",
       progress: 25,
       type: "project",
+
+      hideChildren: false,
     },
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "MaTeMaTuK <[email protected]>",
   "homepage": "https://github.com/MaTeMaTuK/gantt-task-react",

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.