@levelcaptech/gantt-task-react-custom 0.1.0 → 0.4.1
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 +90 -77
- package/dist/components/gantt/task-gantt.d.ts +1 -0
- package/dist/components/other/horizontal-scroll.d.ts +7 -3
- package/dist/components/other/tooltip.d.ts +4 -1
- package/dist/components/task-list/overlay-editor.d.ts +19 -0
- package/dist/components/task-list/task-list-header.d.ts +5 -0
- package/dist/components/task-list/task-list-table.d.ts +11 -2
- package/dist/components/task-list/task-list.d.ts +40 -4
- package/dist/constants/taskOptions.d.ts +6 -0
- package/dist/helpers/task-helper.d.ts +11 -0
- package/dist/index.css +223 -12
- package/dist/index.d.ts +3 -1
- package/dist/index.js +2057 -862
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +2045 -865
- package/dist/index.modern.js.map +1 -1
- package/dist/test/overlay-editor.test.d.ts +1 -0
- package/dist/test/split-handle.test.d.ts +1 -0
- package/dist/test/task-helper.test.d.ts +1 -0
- package/dist/test/task-list-commit.test.d.ts +1 -0
- package/dist/test/task-list-editing.test.d.ts +1 -0
- package/dist/test/task-list-table-editing.test.d.ts +1 -0
- package/dist/test/task-model.test.d.ts +1 -0
- package/dist/types/public-types.d.ts +50 -1
- package/package.json +23 -6
package/README.md
CHANGED
|
@@ -1,32 +1,39 @@
|
|
|
1
1
|
# gantt-task-react
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## ライセンス
|
|
4
4
|
MIT
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
元になったプロジェクト:
|
|
7
7
|
https://github.com/MaTeMaTuK/gantt-task-react
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## TypeScript を用いた React 向けのインタラクティブなガントチャート。
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
## [
|
|
13
|
+
## [ライブデモ](https://levelcaptech.github.io/gantt-task-react-custom/)
|
|
14
14
|
|
|
15
|
-
##
|
|
15
|
+
## インストール
|
|
16
16
|
|
|
17
17
|
```
|
|
18
|
-
npm install gantt-task-react
|
|
18
|
+
npm install @levelcaptech/gantt-task-react-custom
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
##
|
|
21
|
+
## Requirements
|
|
22
|
+
|
|
23
|
+
- React: 18.x（必須）
|
|
24
|
+
- 本プロジェクトは `react` / `react-dom` の peerDependencies として `^18.0.0` を指定しています。
|
|
25
|
+
- **React 18 系のみを正式サポート**しています。
|
|
26
|
+
- React 17 / 16 は非サポートです。
|
|
27
|
+
|
|
28
|
+
## DevContainer（npm publish 対応）
|
|
22
29
|
|
|
23
30
|
VS Code Dev Containers で npmjs.com への publish を行う環境を用意しています。セットアップと利用方法は [docs/DEVCONTAINER.md](docs/DEVCONTAINER.md) を参照してください。
|
|
24
31
|
|
|
25
|
-
##
|
|
32
|
+
## 使い方
|
|
26
33
|
|
|
27
34
|
```javascript
|
|
28
|
-
import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react';
|
|
29
|
-
import "gantt-task-react/dist/index.css";
|
|
35
|
+
import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from '@levelcaptech/gantt-task-react-custom';
|
|
36
|
+
import "@levelcaptech/gantt-task-react-custom/dist/index.css";
|
|
30
37
|
|
|
31
38
|
let tasks: Task[] = [
|
|
32
39
|
{
|
|
@@ -44,7 +51,7 @@ let tasks: Task[] = [
|
|
|
44
51
|
<Gantt tasks={tasks} />
|
|
45
52
|
```
|
|
46
53
|
|
|
47
|
-
|
|
54
|
+
次のアクションを処理できます
|
|
48
55
|
|
|
49
56
|
```javascript
|
|
50
57
|
<Gantt
|
|
@@ -58,74 +65,80 @@ You may handle actions
|
|
|
58
65
|
/>
|
|
59
66
|
```
|
|
60
67
|
|
|
61
|
-
##
|
|
68
|
+
## example の起動方法
|
|
62
69
|
|
|
63
70
|
```
|
|
64
71
|
cd ./example
|
|
72
|
+
rm -rf node_modules
|
|
65
73
|
npm install
|
|
66
74
|
npm start
|
|
67
75
|
```
|
|
68
76
|
|
|
69
|
-
|
|
77
|
+
注意:
|
|
78
|
+
- このリポジトリでは `npm link` や手動 symlink を使用しないでください。React の二重読み込みが発生し、「Invalid hook call」を引き起こす可能性があります。
|
|
79
|
+
- ルートの `package.json` やビルド設定を変更した場合は、`docs/REBUILD.md` に従って全体のリビルド手順を実施してください。
|
|
80
|
+
|
|
81
|
+
## Gantt 設定
|
|
70
82
|
|
|
71
83
|
### GanttProps
|
|
72
84
|
|
|
73
|
-
|
|
|
85
|
+
| パラメーター名 | 型 | 説明 |
|
|
74
86
|
| :------------------------------ | :------------ | :------------------------------------------------- |
|
|
75
|
-
| tasks\* | [Task](#Task) |
|
|
76
|
-
| [EventOption](#EventOption) | interface |
|
|
77
|
-
| [DisplayOption](#DisplayOption) | interface |
|
|
78
|
-
| [StylingOption](#StylingOption) | interface |
|
|
87
|
+
| tasks\* | [Task](#Task) | タスク配列。 |
|
|
88
|
+
| [EventOption](#EventOption) | interface | ガントのイベントを指定します。 |
|
|
89
|
+
| [DisplayOption](#DisplayOption) | interface | 表示タイプとタイムライン表示言語を指定します。 |
|
|
90
|
+
| [StylingOption](#StylingOption) | interface | チャートとタスクのグローバルスタイルを指定します。 |
|
|
79
91
|
|
|
80
92
|
### EventOption
|
|
81
93
|
|
|
82
|
-
|
|
|
94
|
+
| パラメーター名 | 型 | 説明 |
|
|
83
95
|
| :----------------- | :---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- |
|
|
84
|
-
| onSelect | (task: Task, isSelected: boolean) => void |
|
|
85
|
-
| onDoubleClick | (task: Task) => void |
|
|
86
|
-
| onClick | (task: Task) => void |
|
|
87
|
-
| onDelete\* | (task: Task) => void/boolean/Promise<void>/Promise<boolean> |
|
|
88
|
-
| onDateChange\* | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> |
|
|
89
|
-
| onProgressChange\* | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> |
|
|
90
|
-
| onExpanderClick\* | onExpanderClick: (task: Task) => void; |
|
|
91
|
-
|
|
|
92
|
-
|
|
93
|
-
|
|
96
|
+
| onSelect | (task: Task, isSelected: boolean) => void | タスクバーの選択/選択解除時に実行する関数を指定します。 |
|
|
97
|
+
| onDoubleClick | (task: Task) => void | タスクバーの onDoubleClick イベント時に実行する関数を指定します。 |
|
|
98
|
+
| onClick | (task: Task) => void | タスクバーの onClick イベント時に実行する関数を指定します。 |
|
|
99
|
+
| onDelete\* | (task: Task) => void/boolean/Promise<void>/Promise<boolean> | タスクバーの削除ボタン押下時に実行する関数を指定します。 |
|
|
100
|
+
| onDateChange\* | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | タイムライン上でタスクバーをドラッグした後に実行する関数を指定します。 |
|
|
101
|
+
| onProgressChange\* | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | タスクバーの進捗をドラッグした後に実行する関数を指定します。 |
|
|
102
|
+
| onExpanderClick\* | onExpanderClick: (task: Task) => void; | テーブルの展開クリック時に実行する関数を指定します。 |
|
|
103
|
+
| onCellCommit | (payload: CellCommitPayload) => Promise<void> | セル編集を通知します。ホスト側で検証/保存し、タスクを更新して新しい props を渡すと UI が再描画されます。 |
|
|
104
|
+
| timeStep | number | onDateChange の時間ステップ値です。ミリ秒で指定します。 |
|
|
105
|
+
|
|
106
|
+
\* メソッドが false を返すかエラーの場合、チャートは操作を取り消します。パラメーター children は 1 階層分のレコードを返します。
|
|
94
107
|
|
|
95
108
|
### DisplayOption
|
|
96
109
|
|
|
97
|
-
|
|
|
110
|
+
| パラメーター名 | 型 | 説明 |
|
|
98
111
|
| :------------- | :------ | :---------------------------------------------------------------------------------------------------------- |
|
|
99
|
-
| viewMode | enum |
|
|
100
|
-
| viewDate | date |
|
|
101
|
-
| preStepsCount | number |
|
|
102
|
-
| locale | string |
|
|
103
|
-
| rtl | boolean |
|
|
112
|
+
| viewMode | enum | 時間スケールを指定します。Hour, Quarter Day, Half Day, Day, Week(ISO-8601 で 1 日目は月曜), Month, QuarterYear, Year。 |
|
|
113
|
+
| viewDate | date | 表示に使用する日時を指定します。 |
|
|
114
|
+
| preStepsCount | number | 最初のタスクの前の空白を指定します。 |
|
|
115
|
+
| locale | string | 月名の言語を指定します。利用可能な形式: ISO 639-2, Java Locale。 |
|
|
116
|
+
| rtl | boolean | rtl モードを設定します。 |
|
|
104
117
|
|
|
105
118
|
### StylingOption
|
|
106
119
|
|
|
107
|
-
|
|
|
120
|
+
| パラメーター名 | 型 | 説明 |
|
|
108
121
|
| :------------------------- | :----- | :--------------------------------------------------------------------------------------------- |
|
|
109
|
-
| headerHeight | number |
|
|
110
|
-
| ganttHeight | number |
|
|
111
|
-
| columnWidth | number |
|
|
112
|
-
| listCellWidth | string |
|
|
113
|
-
| rowHeight | number |
|
|
114
|
-
| barCornerRadius | number |
|
|
115
|
-
| barFill | number |
|
|
116
|
-
| handleWidth | number |
|
|
117
|
-
| fontFamily | string |
|
|
118
|
-
| fontSize | string |
|
|
119
|
-
| barProgressColor | string |
|
|
120
|
-
| barProgressSelectedColor | string |
|
|
121
|
-
| barBackgroundColor | string |
|
|
122
|
-
| barBackgroundSelectedColor | string |
|
|
123
|
-
| arrowColor | string |
|
|
124
|
-
| arrowIndent | number |
|
|
125
|
-
| todayColor | string |
|
|
126
|
-
| TooltipContent | |
|
|
127
|
-
| TaskListHeader | |
|
|
128
|
-
| TaskListTable | |
|
|
122
|
+
| headerHeight | number | ヘッダーの高さを指定します。 |
|
|
123
|
+
| ganttHeight | number | ヘッダーを除いたガントチャートの高さを指定します。既定は 0 で、高さ制限なしを意味します。 |
|
|
124
|
+
| columnWidth | number | 時間期間の幅を指定します。 |
|
|
125
|
+
| listCellWidth | string | タスクリストセルの幅を指定します。空文字列は「表示なし」を意味します。 |
|
|
126
|
+
| rowHeight | number | タスク行の高さを指定します。 |
|
|
127
|
+
| barCornerRadius | number | タスクバーの角丸を指定します。 |
|
|
128
|
+
| barFill | number | タスクバーの占有率を指定します。0〜100 のパーセントで設定します。 |
|
|
129
|
+
| handleWidth | number | 開始・終了日のドラッグ操作に使うタスクバーのハンドル幅を指定します。 |
|
|
130
|
+
| fontFamily | string | アプリケーションのフォントを指定します。 |
|
|
131
|
+
| fontSize | string | アプリケーションのフォントサイズを指定します。 |
|
|
132
|
+
| barProgressColor | string | タスクバーの進捗塗り色をグローバルに指定します。 |
|
|
133
|
+
| barProgressSelectedColor | string | 選択時のタスクバー進捗塗り色をグローバルに指定します。 |
|
|
134
|
+
| barBackgroundColor | string | タスクバー背景の塗り色をグローバルに指定します。 |
|
|
135
|
+
| barBackgroundSelectedColor | string | 選択時のタスクバー背景の塗り色をグローバルに指定します。 |
|
|
136
|
+
| arrowColor | string | 関係線の矢印の塗り色を指定します。 |
|
|
137
|
+
| arrowIndent | number | 関係線の矢印の右インデントを指定します。px で設定します。 |
|
|
138
|
+
| todayColor | string | 現在期間の列の塗り色を指定します。 |
|
|
139
|
+
| TooltipContent | | 選択したタスクバー用の Tooltip ビューを指定します。 |
|
|
140
|
+
| TaskListHeader | | タスクリストの Header ビューを指定します。 |
|
|
141
|
+
| TaskListTable | | タスクリストの Table ビューを指定します。 |
|
|
129
142
|
|
|
130
143
|
- TooltipContent: [`React.FC<{ task: Task; fontSize: string; fontFamily: string; }>;`](https://github.com/MaTeMaTuK/gantt-task-react/blob/main/src/components/other/tooltip.tsx#L56)
|
|
131
144
|
- TaskListHeader: `React.FC<{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string;}>;`
|
|
@@ -133,27 +146,27 @@ npm start
|
|
|
133
146
|
|
|
134
147
|
### Task
|
|
135
148
|
|
|
136
|
-
|
|
|
149
|
+
| パラメーター名 | 型 | 説明 |
|
|
137
150
|
| :------------- | :------- | :---------------------------------------------------------------------------------------------------- |
|
|
138
|
-
| id\* | string |
|
|
139
|
-
| name\* | string |
|
|
140
|
-
| type\* | string |
|
|
141
|
-
| start\* | Date |
|
|
142
|
-
| end\* | Date |
|
|
143
|
-
| progress\* | number |
|
|
144
|
-
| dependencies | string[] |
|
|
145
|
-
| styles | object |
|
|
146
|
-
| | | - **backgroundColor**: String
|
|
147
|
-
| | | - **backgroundSelectedColor**: String
|
|
148
|
-
| | | - **progressColor**: String
|
|
149
|
-
| | | - **progressSelectedColor**: String
|
|
150
|
-
| isDisabled | bool |
|
|
151
|
-
| fontSize | string |
|
|
152
|
-
| project | string |
|
|
153
|
-
| hideChildren | bool |
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
##
|
|
151
|
+
| id\* | string | タスク ID。 |
|
|
152
|
+
| name\* | string | タスクの表示名。 |
|
|
153
|
+
| type\* | string | タスクの表示タイプ: **task**, **milestone**, **project** |
|
|
154
|
+
| start\* | Date | タスク開始日。 |
|
|
155
|
+
| end\* | Date | タスク終了日。 |
|
|
156
|
+
| progress\* | number | タスクの進捗。0〜100 のパーセントで設定します。 |
|
|
157
|
+
| dependencies | string[] | 親依存関係の ID を指定します。 |
|
|
158
|
+
| styles | object | タスクバーのローカルスタイル設定を指定します。次の属性を持つオブジェクトを渡します: |
|
|
159
|
+
| | | - **backgroundColor**: String。タスクバー背景の塗り色をローカルに指定します。 |
|
|
160
|
+
| | | - **backgroundSelectedColor**: String。選択時のタスクバー背景の塗り色をローカルに指定します。 |
|
|
161
|
+
| | | - **progressColor**: String。タスクバー進捗の塗り色をローカルに指定します。 |
|
|
162
|
+
| | | - **progressSelectedColor**: String。選択時のタスクバー進捗の塗り色をグローバルに指定します。 |
|
|
163
|
+
| isDisabled | bool | 現在のタスクの全操作を無効にします。 |
|
|
164
|
+
| fontSize | string | タスクバーのフォントサイズをローカルに指定します。 |
|
|
165
|
+
| project | string | タスクのプロジェクト名 |
|
|
166
|
+
| hideChildren | bool | 子要素を非表示にします。パラメーターは project タイプのときのみ有効です。 |
|
|
167
|
+
|
|
168
|
+
\*必須
|
|
169
|
+
|
|
170
|
+
## ライセンス
|
|
158
171
|
|
|
159
172
|
[MIT](https://oss.ninja/mit/jaredpalmer/)
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
import React, { SyntheticEvent } from "react";
|
|
2
|
-
export declare
|
|
2
|
+
export declare type HorizontalScrollProps = {
|
|
3
3
|
scroll: number;
|
|
4
4
|
svgWidth: number;
|
|
5
|
-
|
|
5
|
+
scrollerWidth?: number;
|
|
6
6
|
rtl: boolean;
|
|
7
7
|
onScroll: (event: SyntheticEvent<HTMLDivElement>) => void;
|
|
8
|
-
|
|
8
|
+
"data-testid"?: string;
|
|
9
|
+
containerRef?: React.RefObject<HTMLDivElement>;
|
|
10
|
+
hidden?: boolean;
|
|
11
|
+
};
|
|
12
|
+
export declare const HorizontalScroll: React.FC<HorizontalScrollProps>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { Task } from "../../types/public-types";
|
|
2
|
+
import { EffortUnit, Task } from "../../types/public-types";
|
|
3
3
|
import { BarTask } from "../../types/bar-task";
|
|
4
4
|
export declare type TooltipProps = {
|
|
5
5
|
task: BarTask;
|
|
@@ -19,11 +19,14 @@ export declare type TooltipProps = {
|
|
|
19
19
|
task: Task;
|
|
20
20
|
fontSize: string;
|
|
21
21
|
fontFamily: string;
|
|
22
|
+
effortDisplayUnit?: EffortUnit;
|
|
22
23
|
}>;
|
|
24
|
+
effortDisplayUnit: EffortUnit;
|
|
23
25
|
};
|
|
24
26
|
export declare const Tooltip: React.FC<TooltipProps>;
|
|
25
27
|
export declare const StandardTooltipContent: React.FC<{
|
|
26
28
|
task: Task;
|
|
27
29
|
fontSize: string;
|
|
28
30
|
fontFamily: string;
|
|
31
|
+
effortDisplayUnit?: EffortUnit;
|
|
29
32
|
}>;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { CellCommitTrigger, VisibleField } from "../../types/public-types";
|
|
3
|
+
declare type EditingState = {
|
|
4
|
+
mode: "viewing" | "selected" | "editing";
|
|
5
|
+
rowId: string | null;
|
|
6
|
+
columnId: VisibleField | null;
|
|
7
|
+
pending: boolean;
|
|
8
|
+
errorMessage: string | null;
|
|
9
|
+
};
|
|
10
|
+
declare type OverlayEditorProps = {
|
|
11
|
+
editingState: EditingState;
|
|
12
|
+
taskListRef: React.RefObject<HTMLDivElement>;
|
|
13
|
+
headerContainerRef?: React.RefObject<HTMLDivElement>;
|
|
14
|
+
bodyContainerRef?: React.RefObject<HTMLDivElement>;
|
|
15
|
+
onCommit: (value: string, trigger: CellCommitTrigger) => Promise<void>;
|
|
16
|
+
onCancel: (reason: "escape" | "nochange-blur" | "unmounted") => void;
|
|
17
|
+
};
|
|
18
|
+
export declare const OverlayEditor: React.FC<OverlayEditorProps>;
|
|
19
|
+
export {};
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { ColumnsState, VisibleField } from "../../types/public-types";
|
|
2
3
|
export declare const TaskListHeaderDefault: React.FC<{
|
|
3
4
|
headerHeight: number;
|
|
4
5
|
rowWidth: string;
|
|
5
6
|
fontFamily: string;
|
|
6
7
|
fontSize: string;
|
|
8
|
+
visibleFields: VisibleField[];
|
|
9
|
+
columnsState?: ColumnsState;
|
|
10
|
+
setColumnsState?: React.Dispatch<React.SetStateAction<ColumnsState>>;
|
|
11
|
+
enableColumnDrag?: boolean;
|
|
7
12
|
}>;
|
|
@@ -1,13 +1,22 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { Task } from "../../types/public-types";
|
|
2
|
+
import { ColumnsState, EffortUnit, Task, VisibleField } from "../../types/public-types";
|
|
3
3
|
export declare const TaskListTableDefault: React.FC<{
|
|
4
4
|
rowHeight: number;
|
|
5
5
|
rowWidth: string;
|
|
6
6
|
fontFamily: string;
|
|
7
7
|
fontSize: string;
|
|
8
|
-
locale: string;
|
|
9
8
|
tasks: Task[];
|
|
10
9
|
selectedTaskId: string;
|
|
11
10
|
setSelectedTask: (taskId: string) => void;
|
|
12
11
|
onExpanderClick: (task: Task) => void;
|
|
12
|
+
visibleFields: VisibleField[];
|
|
13
|
+
onUpdateTask?: (taskId: string, updatedFields: Partial<Task>) => void;
|
|
14
|
+
onCellCommit?: (payload: {
|
|
15
|
+
rowId: string;
|
|
16
|
+
columnId: VisibleField;
|
|
17
|
+
value: string;
|
|
18
|
+
trigger: "enter";
|
|
19
|
+
}) => Promise<void>;
|
|
20
|
+
effortDisplayUnit: EffortUnit;
|
|
21
|
+
columnsState?: ColumnsState;
|
|
13
22
|
}>;
|
|
@@ -1,6 +1,22 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { SyntheticEvent } from "react";
|
|
2
2
|
import { BarTask } from "../../types/bar-task";
|
|
3
|
-
import { Task } from "../../types/public-types";
|
|
3
|
+
import { CellCommitPayload, ColumnsState, EffortUnit, Task, VisibleField } from "../../types/public-types";
|
|
4
|
+
export declare type EditingTrigger = "dblclick" | "enter" | "key";
|
|
5
|
+
declare type EditingMode = "viewing" | "selected" | "editing";
|
|
6
|
+
declare type EditingState = {
|
|
7
|
+
mode: EditingMode;
|
|
8
|
+
rowId: string | null;
|
|
9
|
+
columnId: VisibleField | null;
|
|
10
|
+
trigger: EditingTrigger | null;
|
|
11
|
+
pending: boolean;
|
|
12
|
+
errorMessage: string | null;
|
|
13
|
+
};
|
|
14
|
+
declare type EditingStateContextValue = {
|
|
15
|
+
editingState: EditingState;
|
|
16
|
+
selectCell: (rowId: string, columnId: VisibleField) => void;
|
|
17
|
+
startEditing: (rowId: string, columnId: VisibleField, trigger: EditingTrigger) => void;
|
|
18
|
+
};
|
|
19
|
+
export declare const TaskListEditingStateContext: React.Context<EditingStateContextValue | null>;
|
|
4
20
|
export declare type TaskListProps = {
|
|
5
21
|
headerHeight: number;
|
|
6
22
|
rowWidth: string;
|
|
@@ -9,29 +25,49 @@ export declare type TaskListProps = {
|
|
|
9
25
|
rowHeight: number;
|
|
10
26
|
ganttHeight: number;
|
|
11
27
|
scrollY: number;
|
|
12
|
-
|
|
28
|
+
horizontalScroll?: number;
|
|
29
|
+
visibleFields: VisibleField[];
|
|
30
|
+
effortDisplayUnit: EffortUnit;
|
|
13
31
|
tasks: Task[];
|
|
14
32
|
taskListRef: React.RefObject<HTMLDivElement>;
|
|
33
|
+
headerContainerRef?: React.RefObject<HTMLDivElement>;
|
|
34
|
+
bodyContainerRef?: React.RefObject<HTMLDivElement>;
|
|
15
35
|
horizontalContainerClass?: string;
|
|
16
36
|
selectedTask: BarTask | undefined;
|
|
17
37
|
setSelectedTask: (task: string) => void;
|
|
18
38
|
onExpanderClick: (task: Task) => void;
|
|
39
|
+
onHorizontalScroll?: (event: SyntheticEvent<HTMLDivElement>) => void;
|
|
40
|
+
onUpdateTask?: (taskId: string, updatedFields: Partial<Task>) => void;
|
|
41
|
+
onCellCommit?: (payload: CellCommitPayload) => Promise<void>;
|
|
19
42
|
TaskListHeader: React.FC<{
|
|
20
43
|
headerHeight: number;
|
|
21
44
|
rowWidth: string;
|
|
22
45
|
fontFamily: string;
|
|
23
46
|
fontSize: string;
|
|
47
|
+
visibleFields: VisibleField[];
|
|
48
|
+
columnsState?: ColumnsState;
|
|
49
|
+
setColumnsState?: React.Dispatch<React.SetStateAction<ColumnsState>>;
|
|
50
|
+
enableColumnDrag?: boolean;
|
|
24
51
|
}>;
|
|
25
52
|
TaskListTable: React.FC<{
|
|
26
53
|
rowHeight: number;
|
|
27
54
|
rowWidth: string;
|
|
28
55
|
fontFamily: string;
|
|
29
56
|
fontSize: string;
|
|
30
|
-
locale
|
|
57
|
+
locale?: string;
|
|
31
58
|
tasks: Task[];
|
|
32
59
|
selectedTaskId: string;
|
|
33
60
|
setSelectedTask: (taskId: string) => void;
|
|
34
61
|
onExpanderClick: (task: Task) => void;
|
|
62
|
+
visibleFields: VisibleField[];
|
|
63
|
+
onUpdateTask?: (taskId: string, updatedFields: Partial<Task>) => void;
|
|
64
|
+
onCellCommit?: (payload: CellCommitPayload) => Promise<void>;
|
|
65
|
+
effortDisplayUnit: EffortUnit;
|
|
66
|
+
columnsState?: ColumnsState;
|
|
35
67
|
}>;
|
|
68
|
+
enableColumnDrag?: boolean;
|
|
36
69
|
};
|
|
70
|
+
export declare const DEFAULT_MIN_WIDTH = 32;
|
|
71
|
+
export declare const getDefaultWidth: (field: VisibleField, rowWidth: string) => number;
|
|
37
72
|
export declare const TaskList: React.FC<TaskListProps>;
|
|
73
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export declare const TASK_PROCESS_OPTIONS: readonly ["設計", "開発", "テスト", "レビュー", "リリース", "その他"];
|
|
2
|
+
export declare const TASK_STATUS_OPTIONS: readonly ["未着手", "進行中", "完了", "保留"];
|
|
3
|
+
export declare type TaskProcessOption = (typeof TASK_PROCESS_OPTIONS)[number];
|
|
4
|
+
export declare type TaskStatusOption = (typeof TASK_STATUS_OPTIONS)[number];
|
|
5
|
+
export declare const TASK_STATUS_COLORS: Record<TaskStatusOption, string>;
|
|
6
|
+
export declare const TASK_STATUS_BADGE_TEXT: Record<TaskStatusOption, string>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { EffortUnit, VisibleField } from "../types/public-types";
|
|
2
|
+
export declare const DEFAULT_VISIBLE_FIELDS: VisibleField[];
|
|
3
|
+
export declare const formatDate: (date?: Date | undefined) => string;
|
|
4
|
+
export declare const parseDateFromInput: (value: string) => Date | undefined;
|
|
5
|
+
export declare const formatEffort: (effort?: number | undefined, unit?: EffortUnit) => string;
|
|
6
|
+
export declare const sanitizeEffortInput: (value: string) => number | undefined;
|
|
7
|
+
export declare const normalizeProcess: (process?: "設計" | "開発" | "テスト" | "レビュー" | "リリース" | "その他" | undefined) => "設計" | "開発" | "テスト" | "レビュー" | "リリース" | "その他";
|
|
8
|
+
export declare const normalizeStatus: (status?: "未着手" | "進行中" | "完了" | "保留" | undefined) => "未着手" | "進行中" | "完了" | "保留";
|
|
9
|
+
export declare const getStatusColor: (status?: "未着手" | "進行中" | "完了" | "保留" | undefined) => string;
|
|
10
|
+
export declare const getStatusBadgeText: (status?: "未着手" | "進行中" | "完了" | "保留" | undefined) => string;
|
|
11
|
+
export declare const resolveVisibleFields: (visibleFields?: VisibleField[] | undefined) => VisibleField[];
|