@xpyjs/gantt-react 0.0.1-alpha.1 → 0.0.1-alpha.2
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 +1 -6
- package/dist/index.cjs +6 -1
- package/dist/index.d.ts +13 -4
- package/dist/index.js +6 -1
- package/dist/style.css +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -134,8 +134,6 @@ function MyGantt() {
|
|
|
134
134
|
| getInstance | - | `XGantt \| null` | 获取甘特图核心实例,通过实例可调用所有核心方法 |
|
|
135
135
|
| jumpTo | `date?: any` | `boolean` | 跳转到指定日期(不传参数跳转到今天) |
|
|
136
136
|
|
|
137
|
-
> **注意**:为了简化API,`updateOptions` 和 `render` 方法已移除。options变化时会自动更新,其他操作请通过 `getInstance()` 获取核心实例进行操作。
|
|
138
|
-
|
|
139
137
|
### Hooks
|
|
140
138
|
|
|
141
139
|
#### useXGantt()
|
|
@@ -144,11 +142,8 @@ function MyGantt() {
|
|
|
144
142
|
|
|
145
143
|
- `ganttRef`: 甘特图组件引用
|
|
146
144
|
- `getInstance()`: 获取核心实例
|
|
147
|
-
- `jumpToToday()`: 跳转到今天
|
|
148
145
|
- `jumpTo(date)`: 跳转到指定日期
|
|
149
146
|
|
|
150
|
-
> **变更说明**:已移除 `updateGanttOptions()` 和 `renderGantt()` 方法,请通过 `getInstance()` 获取核心实例进行操作。
|
|
151
|
-
|
|
152
147
|
#### useGanttEvents()
|
|
153
148
|
|
|
154
149
|
提供事件处理的便捷方法:
|
|
@@ -173,7 +168,7 @@ function AdvancedGantt() {
|
|
|
173
168
|
const instance = getInstance();
|
|
174
169
|
if (instance) {
|
|
175
170
|
// 更新配置
|
|
176
|
-
instance.
|
|
171
|
+
instance.update({
|
|
177
172
|
unit: 'week',
|
|
178
173
|
primaryColor: '#007acc'
|
|
179
174
|
});
|
package/dist/index.cjs
CHANGED
|
@@ -9,6 +9,7 @@ const XGanttReact = react.forwardRef(
|
|
|
9
9
|
options,
|
|
10
10
|
className,
|
|
11
11
|
style,
|
|
12
|
+
onLoaded,
|
|
12
13
|
onError,
|
|
13
14
|
onUpdateLink,
|
|
14
15
|
onCreateLink,
|
|
@@ -28,6 +29,9 @@ const XGanttReact = react.forwardRef(
|
|
|
28
29
|
const registerEventListeners = react.useCallback(() => {
|
|
29
30
|
const instance = ganttInstanceRef.current;
|
|
30
31
|
if (!instance) return;
|
|
32
|
+
if (onLoaded) {
|
|
33
|
+
instance.on("loaded", onLoaded);
|
|
34
|
+
}
|
|
31
35
|
if (onError) {
|
|
32
36
|
instance.on("error", onError);
|
|
33
37
|
}
|
|
@@ -65,6 +69,7 @@ const XGanttReact = react.forwardRef(
|
|
|
65
69
|
instance.on("move", onMove);
|
|
66
70
|
}
|
|
67
71
|
}, [
|
|
72
|
+
onLoaded,
|
|
68
73
|
onError,
|
|
69
74
|
onUpdateLink,
|
|
70
75
|
onCreateLink,
|
|
@@ -107,7 +112,7 @@ const XGanttReact = react.forwardRef(
|
|
|
107
112
|
}, []);
|
|
108
113
|
react.useEffect(() => {
|
|
109
114
|
if (ganttInstanceRef.current) {
|
|
110
|
-
ganttInstanceRef.current.
|
|
115
|
+
ganttInstanceRef.current.update(options);
|
|
111
116
|
}
|
|
112
117
|
}, [options]);
|
|
113
118
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
package/dist/index.d.ts
CHANGED
|
@@ -12,6 +12,7 @@ import { IOptionConfig } from '@xpyjs/gantt-core';
|
|
|
12
12
|
import { IOptions } from '@xpyjs/gantt-core';
|
|
13
13
|
import { RefObject } from 'react';
|
|
14
14
|
import { XGantt } from '@xpyjs/gantt-core';
|
|
15
|
+
import { XGanttUnit } from '@xpyjs/gantt-core';
|
|
15
16
|
|
|
16
17
|
export { Colorjs }
|
|
17
18
|
|
|
@@ -52,17 +53,17 @@ export { IOptions }
|
|
|
52
53
|
* jumpTo(); // 没有参数,默认跳转到今天
|
|
53
54
|
* };
|
|
54
55
|
*
|
|
55
|
-
* const
|
|
56
|
+
* const handleUpdate = () => {
|
|
56
57
|
* const instance = getInstance();
|
|
57
58
|
* if (instance) {
|
|
58
|
-
* instance.
|
|
59
|
+
* instance.update({ unit: 'week' });
|
|
59
60
|
* }
|
|
60
61
|
* };
|
|
61
62
|
*
|
|
62
63
|
* return (
|
|
63
64
|
* <div>
|
|
64
65
|
* <button onClick={handleJumpToToday}>跳转到今天</button>
|
|
65
|
-
* <button onClick={
|
|
66
|
+
* <button onClick={handleUpdate}>切换到周视图</button>
|
|
66
67
|
* <XGanttReact
|
|
67
68
|
* ref={ganttRef}
|
|
68
69
|
* options={{ data: [] }}
|
|
@@ -147,6 +148,12 @@ export declare interface XGanttReactProps extends Omit<React.HTMLAttributes<HTML
|
|
|
147
148
|
* 容器的样式
|
|
148
149
|
*/
|
|
149
150
|
style?: React.CSSProperties;
|
|
151
|
+
/**
|
|
152
|
+
* 加载完成事件回调
|
|
153
|
+
*
|
|
154
|
+
* @description 当甘特图加载完成时触发
|
|
155
|
+
*/
|
|
156
|
+
onLoaded?: EventMap["loaded"];
|
|
150
157
|
/**
|
|
151
158
|
* 错误事件回调
|
|
152
159
|
*
|
|
@@ -263,7 +270,7 @@ export declare interface XGanttReactRef {
|
|
|
263
270
|
* const instance = ganttRef.current?.getInstance();
|
|
264
271
|
* if (instance) {
|
|
265
272
|
* // 调用核心实例的方法
|
|
266
|
-
* instance.
|
|
273
|
+
* instance.update({ unit: 'week' });
|
|
267
274
|
* instance.render();
|
|
268
275
|
* instance.destroy();
|
|
269
276
|
* }
|
|
@@ -300,4 +307,6 @@ export declare interface XGanttReactRef {
|
|
|
300
307
|
jumpTo: (date?: any) => boolean;
|
|
301
308
|
}
|
|
302
309
|
|
|
310
|
+
export { XGanttUnit }
|
|
311
|
+
|
|
303
312
|
export { }
|
package/dist/index.js
CHANGED
|
@@ -8,6 +8,7 @@ const XGanttReact = forwardRef(
|
|
|
8
8
|
options,
|
|
9
9
|
className,
|
|
10
10
|
style,
|
|
11
|
+
onLoaded,
|
|
11
12
|
onError,
|
|
12
13
|
onUpdateLink,
|
|
13
14
|
onCreateLink,
|
|
@@ -27,6 +28,9 @@ const XGanttReact = forwardRef(
|
|
|
27
28
|
const registerEventListeners = useCallback(() => {
|
|
28
29
|
const instance = ganttInstanceRef.current;
|
|
29
30
|
if (!instance) return;
|
|
31
|
+
if (onLoaded) {
|
|
32
|
+
instance.on("loaded", onLoaded);
|
|
33
|
+
}
|
|
30
34
|
if (onError) {
|
|
31
35
|
instance.on("error", onError);
|
|
32
36
|
}
|
|
@@ -64,6 +68,7 @@ const XGanttReact = forwardRef(
|
|
|
64
68
|
instance.on("move", onMove);
|
|
65
69
|
}
|
|
66
70
|
}, [
|
|
71
|
+
onLoaded,
|
|
67
72
|
onError,
|
|
68
73
|
onUpdateLink,
|
|
69
74
|
onCreateLink,
|
|
@@ -106,7 +111,7 @@ const XGanttReact = forwardRef(
|
|
|
106
111
|
}, []);
|
|
107
112
|
useEffect(() => {
|
|
108
113
|
if (ganttInstanceRef.current) {
|
|
109
|
-
ganttInstanceRef.current.
|
|
114
|
+
ganttInstanceRef.current.update(options);
|
|
110
115
|
}
|
|
111
116
|
}, [options]);
|
|
112
117
|
return /* @__PURE__ */ jsx(
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.x-gantt{--x-gantt-border-color: #e5e5e5}.x-gantt-table-container{flex-shrink:0;box-sizing:border-box;height:100%;overflow:hidden;display:flex;flex-direction:column;width:100%}.x-gantt-table-header{flex-shrink:0;box-sizing:border-box;border-bottom:1px solid var(--x-gantt-border-color)!important;display:flex;flex-direction:row;overflow:hidden;position:relative;flex-wrap:nowrap}.x-gantt-table-header .x-gantt-table-header-cell{position:relative;box-sizing:border-box;overflow:hidden;font-weight:var(--x-gantt-header-font-weight);flex-shrink:0;padding:0 8px}.x-gantt-table-header .x-gantt-table-header-cell.border{border-right:1px solid var(--x-gantt-border-color)!important}.x-gantt-table-header .x-gantt-table-header-cell .x-gantt-column-resize-handle{transition:background-color .2s ease}.x-gantt-table-header .x-gantt-table-header-cell .x-gantt-column-resize-handle:hover{background-color:#0000001a!important}.x-gantt-table-header>div:last-child.x-gantt-table-header-group.border>.x-gantt-table-header-cell.border{border-right:none}.x-gantt-table-header>div:last-child .x-gantt-table-header-group.border>.x-gantt-table-header-cell.border{border-right:none}.x-gantt-table-header>div:last-child.x-gantt-table-header-cell.border{border-right:none}.x-gantt-table-header-group{display:flex;flex-direction:column;box-sizing:border-box}.x-gantt-table-header-group>.x-gantt-table-header-cell{border-bottom:1px solid var(--x-gantt-border-color)!important}.x-gantt-table-header-group>.x-gantt-table-header-cell>.x-gantt-table-header-title{text-align:center}.x-gantt-table-header-children{display:flex;flex-direction:row}.x-gantt-table-body{flex:1;overflow:hidden;box-sizing:border-box;position:relative;width:100%;height:100%}.x-gantt-table-row{box-sizing:border-box}.x-gantt-table-row.hover>.x-gantt-table-cell{background-color:var(--x-gantt-row-hover-color, rgba(0, 0, 0, .05))!important}.x-gantt-table-row.selected>.x-gantt-table-cell{background-color:var(--x-gantt-row-selected-color, rgba(0, 0, 0, .1))!important}.x-gantt-table-cell{box-sizing:border-box;display:inline-block;border-bottom:1px solid var(--x-gantt-border-color)!important;padding:var(--x-gantt-cell-padding, 4px 8px)}.x-gantt-table-cell .x-gantt-table-cell__content{box-sizing:border-box}.x-gantt-table-cell.border{border-right:1px solid var(--x-gantt-border-color)!important}.x-gantt-content-wrapper{width:100%;height:100%;scrollbar-width:none}.x-gantt-content-wrapper::-webkit-scrollbar{display:none}.gantt-scrollbar{position:absolute;z-index:10;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.gantt-scrollbar.visible{opacity:1;pointer-events:auto}.gantt-scrollbar-thumb{position:absolute;cursor:pointer;transition:background-color .2s ease-in-out,height .1s ease-out,width .1s ease-out,transform .05s linear}.gantt-scrollbar-vertical{top:0;right:0;bottom:0}.gantt-scrollbar-vertical .gantt-scrollbar-thumb-vertical{top:0;left:0;right:0}.gantt-scrollbar-horizontal{left:0;bottom:0;right:0}.gantt-scrollbar-horizontal .gantt-scrollbar-thumb-horizontal{left:0;top:0;bottom:0}.x-gantt-checkbox{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--x-gantt-border-color);border-radius:3px;cursor:pointer;transition:all .15s ease-in-out;box-sizing:border-box;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.x-gantt-checkbox:focus{outline:none}.x-gantt-checkbox:focus-visible{outline:none}.x-gantt-checkbox__icon svg{transition:all .15s ease-in-out}.x-gantt-checkbox:hover{border-color:var(--x-gantt-primary-color)}.x-gantt{width:100%;height:100%;display:flex;box-sizing:border-box;flex-wrap:nowrap;padding:0;margin:0;overflow:hidden;position:relative}.x-gantt.border{border:1px solid var(--x-gantt-border-color)}
|
|
1
|
+
.x-gantt{--x-gantt-border-color: #e5e5e5}.x-gantt-table-container{flex-shrink:0;box-sizing:border-box;height:100%;overflow:hidden;display:flex;flex-direction:column;width:100%}.x-gantt-table-header{flex-shrink:0;box-sizing:border-box;border-bottom:1px solid var(--x-gantt-border-color)!important;display:flex;flex-direction:row;overflow:hidden;position:relative;flex-wrap:nowrap}.x-gantt-table-header .x-gantt-table-header-cell{position:relative;box-sizing:border-box;overflow:hidden;font-weight:var(--x-gantt-header-font-weight);flex-shrink:0;padding:0 8px}.x-gantt-table-header .x-gantt-table-header-cell.border{border-right:1px solid var(--x-gantt-border-color)!important}.x-gantt-table-header .x-gantt-table-header-cell .x-gantt-column-resize-handle{transition:background-color .2s ease}.x-gantt-table-header .x-gantt-table-header-cell .x-gantt-column-resize-handle:hover{background-color:#0000001a!important}.x-gantt-table-header>div:last-child.x-gantt-table-header-group.border>.x-gantt-table-header-cell.border{border-right:none}.x-gantt-table-header>div:last-child .x-gantt-table-header-group.border>.x-gantt-table-header-cell.border{border-right:none}.x-gantt-table-header>div:last-child.x-gantt-table-header-cell.border{border-right:none}.x-gantt-table-header-group{display:flex;flex-direction:column;box-sizing:border-box}.x-gantt-table-header-group>.x-gantt-table-header-cell{border-bottom:1px solid var(--x-gantt-border-color)!important}.x-gantt-table-header-group>.x-gantt-table-header-cell>.x-gantt-table-header-title{text-align:center}.x-gantt-table-header-children{display:flex;flex-direction:row}.x-gantt-table-body{flex:1;overflow:hidden;box-sizing:border-box;position:relative;width:100%;height:100%}.x-gantt-table-row{box-sizing:border-box}.x-gantt-table-row.hover>.x-gantt-table-cell{background-color:var(--x-gantt-row-hover-color, rgba(0, 0, 0, .05))!important}.x-gantt-table-row.selected>.x-gantt-table-cell{background-color:var(--x-gantt-row-selected-color, rgba(0, 0, 0, .1))!important}.x-gantt-table-cell{box-sizing:border-box;display:inline-block;border-bottom:1px solid var(--x-gantt-border-color)!important;padding:var(--x-gantt-cell-padding, 4px 8px)}.x-gantt-table-cell .x-gantt-table-cell__content{box-sizing:border-box}.x-gantt-table-cell.border{border-right:1px solid var(--x-gantt-border-color)!important}.x-gantt-content-wrapper{width:100%;height:100%;scrollbar-width:none}.x-gantt-content-wrapper::-webkit-scrollbar{display:none}.gantt-scrollbar{position:absolute;z-index:10;opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.gantt-scrollbar.visible{opacity:1;pointer-events:auto}.gantt-scrollbar-thumb{position:absolute;cursor:pointer;transition:background-color .2s ease-in-out,height .1s ease-out,width .1s ease-out,transform .05s linear}.gantt-scrollbar-vertical{top:0;right:0;bottom:0}.gantt-scrollbar-vertical .gantt-scrollbar-thumb-vertical{top:0;left:0;right:0}.gantt-scrollbar-horizontal{left:0;bottom:0;right:0}.gantt-scrollbar-horizontal .gantt-scrollbar-thumb-horizontal{left:0;top:0;bottom:0}.x-gantt-checkbox{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--x-gantt-border-color);border-radius:3px;cursor:pointer;transition:all .15s ease-in-out;box-sizing:border-box;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}.x-gantt-checkbox:focus{outline:none}.x-gantt-checkbox:focus-visible{outline:none}.x-gantt-checkbox__icon svg{transition:all .15s ease-in-out}.x-gantt-checkbox:hover{border-color:var(--x-gantt-primary-color)}.x-gantt{width:100%;height:100%;display:flex;box-sizing:border-box;flex-wrap:nowrap;padding:0;margin:0;overflow:hidden;position:relative}.x-gantt.border{border:1px solid var(--x-gantt-border-color)}.x-gantt-container{position:relative;height:100%;overflow:hidden}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xpyjs/gantt-react",
|
|
3
|
-
"version": "0.0.1-alpha.
|
|
3
|
+
"version": "0.0.1-alpha.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "React wrapper for x-gantt",
|
|
6
6
|
"author": "JeremyJone",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"README.md"
|
|
24
24
|
],
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@xpyjs/gantt-core": "0.0.1-alpha.
|
|
26
|
+
"@xpyjs/gantt-core": "0.0.1-alpha.2"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"react": ">=16.8.0",
|
|
@@ -67,6 +67,6 @@
|
|
|
67
67
|
"test": "vitest",
|
|
68
68
|
"test:ui": "vitest --ui",
|
|
69
69
|
"coverage": "vitest run --coverage",
|
|
70
|
-
"release": "pnpm publish --access public
|
|
70
|
+
"release": "pnpm publish --access public"
|
|
71
71
|
}
|
|
72
72
|
}
|