1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
/*global gantt*/
import React, { Component } from 'react';
import 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
export default class Gantt extends Component {
setZoom(value){
switch (value){
case 'Hours':
gantt.config.scale_unit = 'day';
gantt.config.date_scale = '%d %M';
gantt.config.scale_height = 60;
gantt.config.min_column_width = 30;
gantt.config.subscales = [
{unit:'hour', step:1, date:'%H'}
];
break;
case 'Days':
gantt.config.min_column_width = 70;
gantt.config.scale_unit = "week";
gantt.config.date_scale = "#%W";
gantt.config.subscales = [
{unit: "day", step: 1, date: "%d %M"}
];
gantt.config.scale_height = 60;
break;
case 'Months':
gantt.config.min_column_width = 70;
gantt.config.scale_unit = "month";
gantt.config.date_scale = "%F";
gantt.config.scale_height = 60;
gantt.config.subscales = [
{unit:"week", step:1, date:"#%W"}
];
break;
default:
break;
}
}
shouldComponentUpdate(nextProps ){
return this.props.zoom !== nextProps.zoom;
}
componentDidUpdate() {
gantt.render();
}
componentDidMount() {
gantt.attachEvent('onAfterTaskAdd', (id, task) => {
if(this.props.onTaskUpdated) {
this.props.onTaskUpdated(id, 'inserted', task);
}
});
gantt.attachEvent('onAfterTaskUpdate', (id, task) => {
if(this.props.onTaskUpdated) {
this.props.onTaskUpdated(id, 'updated', task);
}
});
gantt.attachEvent('onAfterTaskDelete', (id) => {
if(this.props.onTaskUpdated) {
this.props.onTaskUpdated(id, 'deleted');
}
});
gantt.attachEvent('onAfterLinkAdd', (id, link) => {
if(this.props.onLinkUpdated) {
this.props.onLinkUpdated(id, 'inserted', link);
}
});
gantt.attachEvent('onAfterLinkUpdate', (id, link) => {
if(this.props.onLinkUpdated) {
this.props.onLinkUpdated(id, 'updated', link);
}
});
gantt.attachEvent('onAfterLinkDelete', (id, link) => {
if(this.props.onLinkUpdated) {
this.props.onLinkUpdated(id, 'deleted');
}
});
gantt.init(this.ganttContainer);
gantt.parse(this.props.tasks);
}
render() {
this.setZoom(this.props.zoom);
return (
<div
ref={(input) => { this.ganttContainer = input }}
style={{width: '100%', height: '100%'}}
></div>
);
}
}
|
