@timelinekit/react 1.0.8 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -22
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -28,18 +28,25 @@ All types from `@timelinekit/core` are re-exported from this package for conveni
|
|
|
28
28
|
|
|
29
29
|
```tsx
|
|
30
30
|
import { useRef, useEffect } from 'react';
|
|
31
|
-
import { GanttChart, GanttChartRef
|
|
31
|
+
import { GanttChart, GanttChartRef } from '@timelinekit/react';
|
|
32
32
|
import '@timelinekit/core/styles';
|
|
33
33
|
|
|
34
|
+
const data = {
|
|
35
|
+
tasks: [
|
|
36
|
+
{ id: '1', name: 'Design', startTime: '2027-01-05', endTime: '2027-01-09', type: 'task', progress: 100 },
|
|
37
|
+
{ id: '2', name: 'Development', startTime: '2027-01-12', endTime: '2027-01-23', type: 'task' },
|
|
38
|
+
],
|
|
39
|
+
links: [
|
|
40
|
+
{ id: 'l1', from: '1', to: '2', type: 'finishToStart' },
|
|
41
|
+
],
|
|
42
|
+
};
|
|
43
|
+
|
|
34
44
|
function App() {
|
|
35
45
|
const ref = useRef<GanttChartRef>(null);
|
|
36
46
|
|
|
37
47
|
useEffect(() => {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
const taskB = gantt.list.addTask(new Task({ id: '2', name: 'Development', startTime: '2027-01-12', endTime: '2027-01-23' }));
|
|
41
|
-
gantt.list.addLink(new TaskLink({ id: 'l1', from: taskA, to: taskB, type: 'finishToStart' }));
|
|
42
|
-
gantt.zoomToFit();
|
|
48
|
+
ref.current!.load(JSON.stringify(data));
|
|
49
|
+
ref.current!.zoomToFit();
|
|
43
50
|
}, []);
|
|
44
51
|
|
|
45
52
|
return <GanttChart ref={ref} style={{ height: '600px' }} />;
|
|
@@ -58,14 +65,8 @@ function App() {
|
|
|
58
65
|
|
|
59
66
|
useEffect(() => {
|
|
60
67
|
const scheduler = ref.current!;
|
|
61
|
-
|
|
62
|
-
scheduler.data.addEvent(new SchedulerEvent(
|
|
63
|
-
id: 'e1',
|
|
64
|
-
resourceId: resource.id,
|
|
65
|
-
name: 'Meeting',
|
|
66
|
-
startTime: '2027-01-05T09:00',
|
|
67
|
-
endTime: '2027-01-05T10:30',
|
|
68
|
-
}));
|
|
68
|
+
scheduler.data.addResource(new SchedulerResource('1', 'Room A'));
|
|
69
|
+
scheduler.data.addEvent(new SchedulerEvent('e1', '1', 'Meeting', new Date('2027-01-05T09:00'), new Date('2027-01-05T10:30')));
|
|
69
70
|
}, []);
|
|
70
71
|
|
|
71
72
|
return <ResourceScheduler ref={ref} style={{ height: '600px' }} />;
|
|
@@ -76,7 +77,7 @@ function App() {
|
|
|
76
77
|
|
|
77
78
|
```tsx
|
|
78
79
|
import { useRef, useEffect } from 'react';
|
|
79
|
-
import { EventCalendar, EventCalendarRef
|
|
80
|
+
import { EventCalendar, EventCalendarRef } from '@timelinekit/react';
|
|
80
81
|
import '@timelinekit/core/styles';
|
|
81
82
|
|
|
82
83
|
function App() {
|
|
@@ -84,12 +85,10 @@ function App() {
|
|
|
84
85
|
|
|
85
86
|
useEffect(() => {
|
|
86
87
|
const calendar = ref.current!;
|
|
87
|
-
calendar.
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
endTime: '2027-01-05T09:30',
|
|
92
|
-
type: 'Meeting',
|
|
88
|
+
calendar.load(JSON.stringify({
|
|
89
|
+
items: [
|
|
90
|
+
{ id: '1', name: 'Team Standup', startTime: '2027-01-05T09:00', endTime: '2027-01-05T09:30', type: 'Meeting' },
|
|
91
|
+
],
|
|
93
92
|
}));
|
|
94
93
|
}, []);
|
|
95
94
|
|
|
@@ -104,7 +103,7 @@ Each component exposes its API through a ref:
|
|
|
104
103
|
```tsx
|
|
105
104
|
const ref = useRef<GanttChartRef>(null);
|
|
106
105
|
|
|
107
|
-
ref.current.
|
|
106
|
+
ref.current.load(JSON.stringify(data));
|
|
108
107
|
ref.current.zoomIn();
|
|
109
108
|
ref.current.undo();
|
|
110
109
|
ref.current.exportToImage();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@timelinekit/react",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -13,10 +13,10 @@
|
|
|
13
13
|
"peerDependencies": {
|
|
14
14
|
"react": ">=18.0.0",
|
|
15
15
|
"react-dom": ">=18.0.0",
|
|
16
|
-
"@timelinekit/core": "1.0.
|
|
16
|
+
"@timelinekit/core": "1.0.9"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@timelinekit/core": "1.0.
|
|
19
|
+
"@timelinekit/core": "1.0.9"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
22
|
"react": "^19.1.0",
|