WuJi/gantt-task-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

grouping works for project only

Browse Source
This commit is contained in:
VikariiCGI 2021-08-11 11:28:19 +03:00
parent 49c013f3d7
commit 679557c703
9 changed files with 43 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
README.md
View File

@ -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

2
example/src/helper.tsx
View File

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

2
package.json
View File

@ -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 <maksym.vikarii@gmail.com>",
"homepage": "https://github.com/MaTeMaTuK/gantt-task-react",

8
src/components/gantt/gantt.tsx
View File

@ -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(() => {

14
src/components/gantt/task-gantt-content.tsx
View File

@ -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}

20
src/helpers/bar-helper.ts
View File

@ -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,
};

4
src/helpers/other-helper.ts
View File

@ -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];

2
src/types/bar-task.ts
View File

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

6
src/types/public-types.ts
View File

@ -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.