From 679557c7031a722e5ba60e8bf5c76ffff8bea01e Mon Sep 17 00:00:00 2001 From: VikariiCGI Date: Wed, 11 Aug 2021 11:28:19 +0300 Subject: [PATCH] grouping works for project only --- README.md | 20 ++++++++++---------- example/src/helper.tsx | 2 ++ package.json | 2 +- src/components/gantt/gantt.tsx | 8 +++++++- src/components/gantt/task-gantt-content.tsx | 14 ++++++++++---- src/helpers/bar-helper.ts | 20 +++++--------------- src/helpers/other-helper.ts | 4 +++- src/types/bar-task.ts | 2 +- src/types/public-types.ts | 6 ++++-- 9 files changed, 43 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index d7ba52f6f..87767b384 100644 --- a/README.md +++ b/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/Promise | Specifies the function to be executed on the taskbar on Delete button press event. | -| onDateChange\* | (task: Task) => void/boolean/Promise/Promise | Specifies the function to be executed when drag taskbar event on timeline has finished. | -| onProgressChange\* | (task: Task) => void/boolean/Promise/Promise | 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/Promise | Specifies the function to be executed on the taskbar on Delete button press event. | +| onDateChange\* | (task: Task, children: Task[]) => void/boolean/Promise/Promise | Specifies the function to be executed when drag taskbar event on timeline has finished. | +| onProgressChange\* | (task: Task, children: Task[]) => void/boolean/Promise/Promise | 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 diff --git a/example/src/helper.tsx b/example/src/helper.tsx index 1b1c64d96..4e516df48 100644 --- a/example/src/helper.tsx +++ b/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), diff --git a/package.json b/package.json index 3db256793..b85da5092 100644 --- a/package.json +++ b/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 ", "homepage": "https://github.com/MaTeMaTuK/gantt-task-react", diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx index 53cd30e52..955307ec1 100644 --- a/src/components/gantt/gantt.tsx +++ b/src/components/gantt/gantt.tsx @@ -85,7 +85,12 @@ export const Gantt: React.FunctionComponent = ({ // 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 = ({ milestoneBackgroundSelectedColor, rtl, scrollX, + onExpanderClick, ]); useEffect(() => { diff --git a/src/components/gantt/task-gantt-content.tsx b/src/components/gantt/task-gantt-content.tsx index a8022571a..7f0bbdf4d 100644 --- a/src/components/gantt/task-gantt-content.tsx +++ b/src/components/gantt/task-gantt-content.tsx @@ -134,7 +134,10 @@ export const TaskGanttContent: React.FC = ({ 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 = ({ } } 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 = ({ return task.barChildren.map(child => { return ( { + 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, }; diff --git a/src/helpers/other-helper.ts b/src/helpers/other-helper.ts index 4718857a4..b22bd74ab 100644 --- a/src/helpers/other-helper.ts +++ b/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]; diff --git a/src/types/bar-task.ts b/src/types/bar-task.ts index 4f3f783fd..1be75e84b 100644 --- a/src/types/bar-task.ts +++ b/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; diff --git a/src/types/public-types.ts b/src/types/public-types.ts index b405bb8d6..aaa9e5d8b 100644 --- a/src/types/public-types.ts +++ b/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 | Promise; /** * Invokes on progress change. Chart undoes operation if method return false or error. */ onProgressChange?: ( - task: Task + task: Task, + children: Task[] ) => void | boolean | Promise | Promise; /** * Invokes on delete selected task. Chart undoes operation if method return false or error.