@levelcaptech/gantt-task-react-custom 0.1.0 → 0.4.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 +148 -80
- package/dist/components/calendar/calendar.d.ts +2 -0
- package/dist/components/gantt/task-gantt.d.ts +1 -0
- package/dist/components/grid/grid-body.d.ts +2 -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/calendar-helper.d.ts +38 -0
- package/dist/helpers/jp-holidays.d.ts +14 -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 +2227 -858
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +2215 -861
- package/dist/index.modern.js.map +1 -1
- package/dist/test/calendar-helper.test.d.ts +1 -0
- 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 +93 -1
- package/package.json +23 -6
package/README.md
CHANGED
|
@@ -1,32 +1,43 @@
|
|
|
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
|
+
## 関連リンク
|
|
22
|
+
|
|
23
|
+
- npm: https://www.npmjs.com/package/@levelcaptech/gantt-task-react-custom
|
|
24
|
+
|
|
25
|
+
## Requirements
|
|
26
|
+
|
|
27
|
+
- React: 18.x（必須）
|
|
28
|
+
- 本プロジェクトは `react` / `react-dom` の peerDependencies として `^18.0.0` を指定しています。
|
|
29
|
+
- **React 18 系のみを正式サポート**しています。
|
|
30
|
+
- React 17 / 16 は非サポートです。
|
|
31
|
+
|
|
32
|
+
## DevContainer（npm publish 対応）
|
|
22
33
|
|
|
23
34
|
VS Code Dev Containers で npmjs.com への publish を行う環境を用意しています。セットアップと利用方法は [docs/DEVCONTAINER.md](docs/DEVCONTAINER.md) を参照してください。
|
|
24
35
|
|
|
25
|
-
##
|
|
36
|
+
## 使い方
|
|
26
37
|
|
|
27
|
-
```
|
|
28
|
-
import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react';
|
|
29
|
-
import "gantt-task-react/dist/index.css";
|
|
38
|
+
```typescript
|
|
39
|
+
import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from '@levelcaptech/gantt-task-react-custom';
|
|
40
|
+
import "@levelcaptech/gantt-task-react-custom/dist/index.css";
|
|
30
41
|
|
|
31
42
|
let tasks: Task[] = [
|
|
32
43
|
{
|
|
@@ -44,9 +55,9 @@ let tasks: Task[] = [
|
|
|
44
55
|
<Gantt tasks={tasks} />
|
|
45
56
|
```
|
|
46
57
|
|
|
47
|
-
|
|
58
|
+
次のアクションを処理できます
|
|
48
59
|
|
|
49
|
-
```
|
|
60
|
+
```typescript
|
|
50
61
|
<Gantt
|
|
51
62
|
tasks={tasks}
|
|
52
63
|
viewMode={view}
|
|
@@ -58,74 +69,131 @@ You may handle actions
|
|
|
58
69
|
/>
|
|
59
70
|
```
|
|
60
71
|
|
|
61
|
-
##
|
|
72
|
+
## example の起動方法
|
|
62
73
|
|
|
63
74
|
```
|
|
64
75
|
cd ./example
|
|
76
|
+
rm -rf node_modules
|
|
65
77
|
npm install
|
|
66
78
|
npm start
|
|
67
79
|
```
|
|
68
80
|
|
|
69
|
-
|
|
81
|
+
注意:
|
|
82
|
+
- このリポジトリでは `npm link` や手動 symlink を使用しないでください。React の二重読み込みが発生し、「Invalid hook call」を引き起こす可能性があります。
|
|
83
|
+
- ルートの `package.json` やビルド設定を変更した場合は、`docs/REBUILD.md` に従って全体のリビルド手順を実施してください。
|
|
84
|
+
|
|
85
|
+
## Gantt 設定
|
|
70
86
|
|
|
71
87
|
### GanttProps
|
|
72
88
|
|
|
73
|
-
|
|
|
89
|
+
| パラメーター名 | 型 | 説明 |
|
|
74
90
|
| :------------------------------ | :------------ | :------------------------------------------------- |
|
|
75
|
-
| tasks\* | [Task](#Task) |
|
|
76
|
-
| [EventOption](#EventOption) | interface |
|
|
77
|
-
| [DisplayOption](#DisplayOption) | interface |
|
|
78
|
-
| [StylingOption](#StylingOption) | interface |
|
|
91
|
+
| tasks\* | [Task](#Task) | タスク配列。 |
|
|
92
|
+
| [EventOption](#EventOption) | interface | ガントのイベントを指定します。 |
|
|
93
|
+
| [DisplayOption](#DisplayOption) | interface | 表示タイプとタイムライン表示言語を指定します。 |
|
|
94
|
+
| [StylingOption](#StylingOption) | interface | チャートとタスクのグローバルスタイルを指定します。 |
|
|
79
95
|
|
|
80
96
|
### EventOption
|
|
81
97
|
|
|
82
|
-
|
|
|
98
|
+
| パラメーター名 | 型 | 説明 |
|
|
83
99
|
| :----------------- | :---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- |
|
|
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
|
-
|
|
100
|
+
| onSelect | (task: Task, isSelected: boolean) => void | タスクバーの選択/選択解除時に実行する関数を指定します。 |
|
|
101
|
+
| onDoubleClick | (task: Task) => void | タスクバーの onDoubleClick イベント時に実行する関数を指定します。 |
|
|
102
|
+
| onClick | (task: Task) => void | タスクバーの onClick イベント時に実行する関数を指定します。 |
|
|
103
|
+
| onDelete\* | (task: Task) => void/boolean/Promise<void>/Promise<boolean> | タスクバーの削除ボタン押下時に実行する関数を指定します。 |
|
|
104
|
+
| onDateChange\* | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | タイムライン上でタスクバーをドラッグした後に実行する関数を指定します。 |
|
|
105
|
+
| onProgressChange\* | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | タスクバーの進捗をドラッグした後に実行する関数を指定します。 |
|
|
106
|
+
| onExpanderClick\* | onExpanderClick: (task: Task) => void; | テーブルの展開クリック時に実行する関数を指定します。 |
|
|
107
|
+
| onCellCommit | (payload: CellCommitPayload) => Promise<void> | セル編集を通知します。ホスト側で検証/保存し、タスクを更新して新しい props を渡すと UI が再描画されます。 |
|
|
108
|
+
| timeStep | number | onDateChange の時間ステップ値です。ミリ秒で指定します。 |
|
|
109
|
+
|
|
110
|
+
\* メソッドが false を返すかエラーの場合、チャートは操作を取り消します。パラメーター children は 1 階層分のレコードを返します。
|
|
94
111
|
|
|
95
112
|
### DisplayOption
|
|
96
113
|
|
|
97
|
-
|
|
|
98
|
-
| :------------- |
|
|
99
|
-
| viewMode | enum
|
|
100
|
-
| viewDate | date
|
|
101
|
-
| preStepsCount | number
|
|
102
|
-
| locale | string
|
|
103
|
-
| rtl | boolean
|
|
114
|
+
| パラメーター名 | 型 | 説明 |
|
|
115
|
+
| :------------- | :------------------------------ | :---------------------------------------------------------------------------------------------------------- |
|
|
116
|
+
| viewMode | enum | 時間スケールを指定します。Hour, Quarter Day, Half Day, Day, Week(ISO-8601 で 1 日目は月曜), Month, QuarterYear, Year。 |
|
|
117
|
+
| viewDate | date | 表示に使用する日時を指定します。 |
|
|
118
|
+
| preStepsCount | number | 最初のタスクの前の空白を指定します。 |
|
|
119
|
+
| locale | string | 月名の言語を指定します。利用可能な形式: ISO 639-2, Java Locale。 |
|
|
120
|
+
| rtl | boolean | rtl モードを設定します。 |
|
|
121
|
+
| calendar | [CalendarConfig](#calendarconfig) | 稼働日計算と日付表示のカレンダー設定を指定します。未指定の場合は従来の動作を維持します（オプトイン式）。 |
|
|
122
|
+
|
|
123
|
+
### CalendarConfig
|
|
124
|
+
|
|
125
|
+
日本カレンダー標準対応およびカスタム稼働日設定を提供します。`calendar` プロパティに設定を渡すことで有効化されます（オプトイン式）。
|
|
126
|
+
|
|
127
|
+
| パラメーター名 | 型 | デフォルト値 | 説明 |
|
|
128
|
+
| :----------------------- | :------- | :--------------------- | :------------------------------------------------------------------------------------------------------------------------------------ |
|
|
129
|
+
| locale | string | `"ja"` | 日付フォーマットのロケール。日本語の場合は `"ja"` を指定します。 |
|
|
130
|
+
| dateFormat | string | `"MM/dd(EEE)"` | 日付フォーマット識別子（レガシーフィールド）。現在はレンダリング上は `"MM/dd(EEE)"` 固定で、この値を変更しても表示は変わりません。将来拡張用です。 |
|
|
131
|
+
| enableJPHoliday | boolean | `true` | 日本の祝日を非稼働日として扱うかどうか。`true` で有効化されます。 |
|
|
132
|
+
| highlightNonWorkingDays | boolean | `true` | 非稼働日をグレー背景でハイライト表示するかどうか。 |
|
|
133
|
+
| workOnSaturday | boolean | `false` | 土曜日を稼働日として扱うかどうか。`true` にすると土曜日も稼働日になります。 |
|
|
134
|
+
| extraHolidays | string[] | `[]` | 独自の休業日を日付文字列の配列で指定します。`YYYY-MM-DD` 形式に加えて `YYYY-M-D` のようなゼロパディング無しも受け入れ、内部で正規化されます。 |
|
|
135
|
+
| extraWorkingDays | string[] | `[]` | 特別稼働日を日付文字列の配列で指定します。`YYYY-MM-DD` 形式に加えて `YYYY-M-D` のようなゼロパディング無しも受け入れ、内部で正規化されます。週末・祝日・`extraHolidays` より優先されます。 |
|
|
136
|
+
|
|
137
|
+
#### 使用例
|
|
138
|
+
|
|
139
|
+
```typescript
|
|
140
|
+
import { Gantt } from '@levelcaptech/gantt-task-react-custom';
|
|
141
|
+
import type { CalendarConfig } from '@levelcaptech/gantt-task-react-custom';
|
|
142
|
+
|
|
143
|
+
const calendarConfig: CalendarConfig = {
|
|
144
|
+
locale: "ja",
|
|
145
|
+
enableJPHoliday: true,
|
|
146
|
+
highlightNonWorkingDays: true,
|
|
147
|
+
workOnSaturday: false,
|
|
148
|
+
extraHolidays: ["2024-12-30", "2024-12-31"], // 年末特別休業
|
|
149
|
+
extraWorkingDays: ["2024-01-08"], // 祝日（成人の日）だが特別稼働日
|
|
150
|
+
};
|
|
151
|
+
|
|
152
|
+
<Gantt
|
|
153
|
+
tasks={tasks}
|
|
154
|
+
calendar={calendarConfig}
|
|
155
|
+
locale="ja-JP"
|
|
156
|
+
/>
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
#### 稼働日判定の優先順位
|
|
160
|
+
|
|
161
|
+
1. **最優先**: `extraWorkingDays` - 指定された日付は必ず稼働日になります
|
|
162
|
+
2. **次**: `extraHolidays` - 指定された日付は非稼働日になります
|
|
163
|
+
3. **標準**: 週末（日曜日、`workOnSaturday` が `false` の場合は土曜日も）と日本の祝日（`enableJPHoliday` が `true` の場合）
|
|
164
|
+
|
|
165
|
+
#### 注意事項
|
|
166
|
+
|
|
167
|
+
- `calendar` プロパティを指定しない場合、カレンダー機能は無効化され、従来の動作を維持します（後方互換性）。
|
|
168
|
+
- 日本の祝日データは 2024-2026 年分がライブラリに静的に含まれています。
|
|
169
|
+
- 無効な ISO 日付文字列は無視され、例外は投げられません。
|
|
170
|
+
- 日付表示は `Intl.DateTimeFormat` を使用して `MM/dd(曜)` 形式で表示されます（日本語ロケール時）。
|
|
171
|
+
|
|
104
172
|
|
|
105
173
|
### StylingOption
|
|
106
174
|
|
|
107
|
-
|
|
|
175
|
+
| パラメーター名 | 型 | 説明 |
|
|
108
176
|
| :------------------------- | :----- | :--------------------------------------------------------------------------------------------- |
|
|
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 | |
|
|
177
|
+
| headerHeight | number | ヘッダーの高さを指定します。 |
|
|
178
|
+
| ganttHeight | number | ヘッダーを除いたガントチャートの高さを指定します。既定は 0 で、高さ制限なしを意味します。 |
|
|
179
|
+
| columnWidth | number | 時間期間の幅を指定します。 |
|
|
180
|
+
| listCellWidth | string | タスクリストセルの幅を指定します。空文字列は「表示なし」を意味します。 |
|
|
181
|
+
| rowHeight | number | タスク行の高さを指定します。 |
|
|
182
|
+
| barCornerRadius | number | タスクバーの角丸を指定します。 |
|
|
183
|
+
| barFill | number | タスクバーの占有率を指定します。0〜100 のパーセントで設定します。 |
|
|
184
|
+
| handleWidth | number | 開始・終了日のドラッグ操作に使うタスクバーのハンドル幅を指定します。 |
|
|
185
|
+
| fontFamily | string | アプリケーションのフォントを指定します。 |
|
|
186
|
+
| fontSize | string | アプリケーションのフォントサイズを指定します。 |
|
|
187
|
+
| barProgressColor | string | タスクバーの進捗塗り色をグローバルに指定します。 |
|
|
188
|
+
| barProgressSelectedColor | string | 選択時のタスクバー進捗塗り色をグローバルに指定します。 |
|
|
189
|
+
| barBackgroundColor | string | タスクバー背景の塗り色をグローバルに指定します。 |
|
|
190
|
+
| barBackgroundSelectedColor | string | 選択時のタスクバー背景の塗り色をグローバルに指定します。 |
|
|
191
|
+
| arrowColor | string | 関係線の矢印の塗り色を指定します。 |
|
|
192
|
+
| arrowIndent | number | 関係線の矢印の右インデントを指定します。px で設定します。 |
|
|
193
|
+
| todayColor | string | 現在期間の列の塗り色を指定します。 |
|
|
194
|
+
| TooltipContent | | 選択したタスクバー用の Tooltip ビューを指定します。 |
|
|
195
|
+
| TaskListHeader | | タスクリストの Header ビューを指定します。 |
|
|
196
|
+
| TaskListTable | | タスクリストの Table ビューを指定します。 |
|
|
129
197
|
|
|
130
198
|
- 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
199
|
- TaskListHeader: `React.FC<{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string;}>;`
|
|
@@ -133,27 +201,27 @@ npm start
|
|
|
133
201
|
|
|
134
202
|
### Task
|
|
135
203
|
|
|
136
|
-
|
|
|
204
|
+
| パラメーター名 | 型 | 説明 |
|
|
137
205
|
| :------------- | :------- | :---------------------------------------------------------------------------------------------------- |
|
|
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
|
-
##
|
|
206
|
+
| id\* | string | タスク ID。 |
|
|
207
|
+
| name\* | string | タスクの表示名。 |
|
|
208
|
+
| type\* | string | タスクの表示タイプ: **task**, **milestone**, **project** |
|
|
209
|
+
| start\* | Date | タスク開始日。 |
|
|
210
|
+
| end\* | Date | タスク終了日。 |
|
|
211
|
+
| progress\* | number | タスクの進捗。0〜100 のパーセントで設定します。 |
|
|
212
|
+
| dependencies | string[] | 親依存関係の ID を指定します。 |
|
|
213
|
+
| styles | object | タスクバーのローカルスタイル設定を指定します。次の属性を持つオブジェクトを渡します: |
|
|
214
|
+
| | | - **backgroundColor**: String。タスクバー背景の塗り色をローカルに指定します。 |
|
|
215
|
+
| | | - **backgroundSelectedColor**: String。選択時のタスクバー背景の塗り色をローカルに指定します。 |
|
|
216
|
+
| | | - **progressColor**: String。タスクバー進捗の塗り色をローカルに指定します。 |
|
|
217
|
+
| | | - **progressSelectedColor**: String。選択時のタスクバー進捗の塗り色をグローバルに指定します。 |
|
|
218
|
+
| isDisabled | bool | 現在のタスクの全操作を無効にします。 |
|
|
219
|
+
| fontSize | string | タスクバーのフォントサイズをローカルに指定します。 |
|
|
220
|
+
| project | string | タスクのプロジェクト名 |
|
|
221
|
+
| hideChildren | bool | 子要素を非表示にします。パラメーターは project タイプのときのみ有効です。 |
|
|
222
|
+
|
|
223
|
+
\*必須
|
|
224
|
+
|
|
225
|
+
## ライセンス
|
|
158
226
|
|
|
159
227
|
[MIT](https://oss.ninja/mit/jaredpalmer/)
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ViewMode } from "../../types/public-types";
|
|
3
|
+
import { NormalizedCalendarConfig } from "../../helpers/calendar-helper";
|
|
3
4
|
import { DateSetup } from "../../types/date-setup";
|
|
4
5
|
export declare type CalendarProps = {
|
|
5
6
|
dateSetup: DateSetup;
|
|
@@ -10,5 +11,6 @@ export declare type CalendarProps = {
|
|
|
10
11
|
columnWidth: number;
|
|
11
12
|
fontFamily: string;
|
|
12
13
|
fontSize: string;
|
|
14
|
+
calendarConfig?: NormalizedCalendarConfig;
|
|
13
15
|
};
|
|
14
16
|
export declare const Calendar: React.FC<CalendarProps>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Task } from "../../types/public-types";
|
|
3
|
+
import { NormalizedCalendarConfig } from "../../helpers/calendar-helper";
|
|
3
4
|
export declare type GridBodyProps = {
|
|
4
5
|
tasks: Task[];
|
|
5
6
|
dates: Date[];
|
|
@@ -8,5 +9,6 @@ export declare type GridBodyProps = {
|
|
|
8
9
|
columnWidth: number;
|
|
9
10
|
todayColor: string;
|
|
10
11
|
rtl: boolean;
|
|
12
|
+
calendarConfig?: NormalizedCalendarConfig;
|
|
11
13
|
};
|
|
12
14
|
export declare const GridBody: React.FC<GridBodyProps>;
|
|
@@ -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,38 @@
|
|
|
1
|
+
import { CalendarConfig } from "../types/public-types";
|
|
2
|
+
/**
|
|
3
|
+
* Normalized calendar configuration with default values
|
|
4
|
+
*/
|
|
5
|
+
export interface NormalizedCalendarConfig {
|
|
6
|
+
locale: string;
|
|
7
|
+
dateFormat: string;
|
|
8
|
+
enableJPHoliday: boolean;
|
|
9
|
+
highlightNonWorkingDays: boolean;
|
|
10
|
+
workOnSaturday: boolean;
|
|
11
|
+
extraHolidays: Set<string>;
|
|
12
|
+
extraWorkingDays: Set<string>;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Normalize and validate calendar configuration
|
|
16
|
+
*/
|
|
17
|
+
export declare const normalizeCalendarConfig: (config: CalendarConfig) => NormalizedCalendarConfig;
|
|
18
|
+
/**
|
|
19
|
+
* Normalize ISO date string (YYYY-MM-DD) to valid date
|
|
20
|
+
* Returns canonical YYYY-MM-DD format or null if invalid
|
|
21
|
+
*/
|
|
22
|
+
export declare const normalizeISODate: (dateStr: string) => string | null;
|
|
23
|
+
/**
|
|
24
|
+
* Convert Date to ISO date string (YYYY-MM-DD)
|
|
25
|
+
*/
|
|
26
|
+
export declare const toISODateString: (date: Date) => string;
|
|
27
|
+
/**
|
|
28
|
+
* Check if a date is a working day according to calendar configuration
|
|
29
|
+
*/
|
|
30
|
+
export declare const isWorkingDay: (date: Date, config: NormalizedCalendarConfig) => boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Count working days between two dates (inclusive)
|
|
33
|
+
*/
|
|
34
|
+
export declare const countWorkingDays: (startDate: Date, endDate: Date, config: NormalizedCalendarConfig) => number;
|
|
35
|
+
/**
|
|
36
|
+
* Format date in MM/dd(曜) format using Intl.DateTimeFormat
|
|
37
|
+
*/
|
|
38
|
+
export declare const formatJapaneseDate: (date: Date) => string;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Japanese national holidays data
|
|
3
|
+
* Format: YYYY-MM-DD
|
|
4
|
+
* This data should be updated periodically with new releases
|
|
5
|
+
*/
|
|
6
|
+
export declare const JP_HOLIDAYS: Record<number, string[]>;
|
|
7
|
+
/**
|
|
8
|
+
* Get all Japanese holidays as a Set for fast lookup
|
|
9
|
+
*/
|
|
10
|
+
export declare const getJPHolidaySet: () => Set<string>;
|
|
11
|
+
/**
|
|
12
|
+
* Cached Japanese holidays set for performance
|
|
13
|
+
*/
|
|
14
|
+
export declare const JP_HOLIDAYS_SET: Set<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[];
|