pds-dev-kit-web 2.2.204 → 2.2.206
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/dist/src/common/hooks/useParentResizeObserver.d.ts +2 -0
- package/dist/src/common/hooks/useParentResizeObserver.js +20 -0
- package/dist/src/common/hooks/useResizeObserver.d.ts +3 -0
- package/dist/src/common/hooks/useResizeObserver.js +27 -0
- package/dist/src/common/hooks/useWindowSize.d.ts +4 -0
- package/dist/src/common/hooks/useWindowSize.js +22 -0
- package/dist/src/common/services/i18n/resources/en.json +9 -7
- package/dist/src/common/services/i18n/resources/es.json +9 -7
- package/dist/src/common/services/i18n/resources/fil.json +9 -7
- package/dist/src/common/services/i18n/resources/index.d.ts +15 -0
- package/dist/src/common/services/i18n/resources/ja.json +9 -7
- package/dist/src/common/services/i18n/resources/ko.json +10 -7
- package/dist/src/common/services/i18n/resources/zh-cn.json +9 -7
- package/dist/src/common/services/i18n/resources/zh-tw.json +9 -7
- package/dist/src/desktop/components/Calendar/Calendar.js +2 -2
- package/dist/src/desktop/components/Calendar/DailyView.js +1 -1
- package/dist/src/desktop/components/Calendar/MonthlyView.js +139 -101
- package/dist/src/desktop/components/Calendar/MultiWeekSchedulesLayer.js +20 -38
- package/dist/src/desktop/components/Calendar/TimeBasedScheduleItem.js +1 -1
- package/dist/src/desktop/components/Calendar/WeeklyView.js +1 -1
- package/dist/src/desktop/components/Calendar/timeFormatUtils.d.ts +4 -2
- package/dist/src/desktop/components/Calendar/timeFormatUtils.js +28 -14
- package/dist/src/desktop/panels/MultilingualModal/MultilingualModal.js +1 -1
- package/package.json +1 -1
- package/release-note.md +2 -2
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useParentResizeObserver = void 0;
|
|
4
|
+
var react_1 = require("react");
|
|
5
|
+
var useResizeObserver_1 = require("./useResizeObserver");
|
|
6
|
+
function useParentResizeObserver(ref, callback, delay) {
|
|
7
|
+
if (delay === void 0) { delay = 100; }
|
|
8
|
+
(0, react_1.useLayoutEffect)(function () {
|
|
9
|
+
var _a;
|
|
10
|
+
var parent = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
|
|
11
|
+
if (!parent)
|
|
12
|
+
return;
|
|
13
|
+
var debouncedCallback = (0, useResizeObserver_1.debounce)(callback, delay);
|
|
14
|
+
var resizeObserver = new ResizeObserver(debouncedCallback);
|
|
15
|
+
resizeObserver.observe(parent);
|
|
16
|
+
callback();
|
|
17
|
+
return function () { return resizeObserver.disconnect(); };
|
|
18
|
+
}, [ref, callback]);
|
|
19
|
+
}
|
|
20
|
+
exports.useParentResizeObserver = useParentResizeObserver;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useResizeObserver = exports.debounce = void 0;
|
|
4
|
+
var react_1 = require("react");
|
|
5
|
+
var debounce = function (fn, delay) {
|
|
6
|
+
var timer = null;
|
|
7
|
+
return function () {
|
|
8
|
+
if (timer)
|
|
9
|
+
clearTimeout(timer);
|
|
10
|
+
timer = setTimeout(fn, delay);
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
exports.debounce = debounce;
|
|
14
|
+
function useResizeObserver(ref, callback, delay) {
|
|
15
|
+
if (delay === void 0) { delay = 100; }
|
|
16
|
+
(0, react_1.useLayoutEffect)(function () {
|
|
17
|
+
var target = ref.current;
|
|
18
|
+
if (!target)
|
|
19
|
+
return;
|
|
20
|
+
var debouncedCallback = (0, exports.debounce)(callback, delay);
|
|
21
|
+
var resizeObserver = new ResizeObserver(debouncedCallback);
|
|
22
|
+
resizeObserver.observe(target);
|
|
23
|
+
callback();
|
|
24
|
+
return function () { return resizeObserver.disconnect(); };
|
|
25
|
+
}, [ref, callback, delay]);
|
|
26
|
+
}
|
|
27
|
+
exports.useResizeObserver = useResizeObserver;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useWindowSize = void 0;
|
|
4
|
+
var react_1 = require("react");
|
|
5
|
+
function useWindowSize() {
|
|
6
|
+
var _a = (0, react_1.useState)({
|
|
7
|
+
width: window.innerWidth,
|
|
8
|
+
height: window.innerHeight
|
|
9
|
+
}), size = _a[0], setSize = _a[1];
|
|
10
|
+
(0, react_1.useEffect)(function () {
|
|
11
|
+
var handleResize = function () {
|
|
12
|
+
setSize({
|
|
13
|
+
width: window.innerWidth,
|
|
14
|
+
height: window.innerHeight
|
|
15
|
+
});
|
|
16
|
+
};
|
|
17
|
+
window.addEventListener('resize', handleResize);
|
|
18
|
+
return function () { return window.removeEventListener('resize', handleResize); };
|
|
19
|
+
}, []);
|
|
20
|
+
return size;
|
|
21
|
+
}
|
|
22
|
+
exports.useWindowSize = useWindowSize;
|
|
@@ -51,6 +51,8 @@
|
|
|
51
51
|
"calendar_month_12": "Dec",
|
|
52
52
|
"str_fm_datetime_am": "{{hour}} AM",
|
|
53
53
|
"str_fm_datetime_pm": "{{hour}} PM",
|
|
54
|
+
"str_fm_am": "AM",
|
|
55
|
+
"str_fm_pm": "PM",
|
|
54
56
|
"calendar_duration_hour": " hour",
|
|
55
57
|
"calendar_duration_hours": " hours",
|
|
56
58
|
"str_fm_datetime_noon": "Noon",
|
|
@@ -71,13 +73,13 @@
|
|
|
71
73
|
"str_fm_day": "Day",
|
|
72
74
|
"str_fm_week": "Week",
|
|
73
75
|
"multilingual_settings": "Multilingual Settings",
|
|
74
|
-
"str_multilingual_ko": "Korean",
|
|
75
|
-
"str_multilingual_en": "English",
|
|
76
|
-
"str_multilingual_ja": "Japanese",
|
|
77
|
-
"str_multilingual_zh_cn": "Chinese - Simplified",
|
|
78
|
-
"str_multilingual_zh_tw": "Chinese - Traditional",
|
|
79
|
-
"str_multilingual_fr": "French",
|
|
80
|
-
"str_multilingual_es": "Spanish",
|
|
76
|
+
"str_multilingual_ko": "Korean (ko)",
|
|
77
|
+
"str_multilingual_en": "English (en)",
|
|
78
|
+
"str_multilingual_ja": "Japanese (ja)",
|
|
79
|
+
"str_multilingual_zh_cn": "Chinese - Simplified (zh-cn)",
|
|
80
|
+
"str_multilingual_zh_tw": "Chinese - Traditional (zh-tw)",
|
|
81
|
+
"str_multilingual_fr": "French (fr)",
|
|
82
|
+
"str_multilingual_es": "Spanish (es)",
|
|
81
83
|
"str_9071": "Please enter the text in the appropriate language for your country.",
|
|
82
84
|
"str_original_text": "Original Text",
|
|
83
85
|
"str_apply": "Apply",
|
|
@@ -51,6 +51,8 @@
|
|
|
51
51
|
"calendar_month_12": "Dic",
|
|
52
52
|
"str_fm_datetime_am": "{{hour}} AM",
|
|
53
53
|
"str_fm_datetime_pm": "{{hour}} PM",
|
|
54
|
+
"str_fm_am": "AM",
|
|
55
|
+
"str_fm_pm": "PM",
|
|
54
56
|
"calendar_duration_hour": " hora",
|
|
55
57
|
"calendar_duration_hours": " horas",
|
|
56
58
|
"str_fm_datetime_noon": "Mediodía",
|
|
@@ -71,13 +73,13 @@
|
|
|
71
73
|
"str_fm_day": "Día",
|
|
72
74
|
"str_fm_week": "Principal",
|
|
73
75
|
"multilingual_settings": "Configuración Multiidioma",
|
|
74
|
-
"str_multilingual_ko": "Coreano",
|
|
75
|
-
"str_multilingual_en": "Inglés",
|
|
76
|
-
"str_multilingual_ja": "Japonés",
|
|
77
|
-
"str_multilingual_zh_cn": "Chino - Simplificado",
|
|
78
|
-
"str_multilingual_zh_tw": "Chino - Tradicional",
|
|
79
|
-
"str_multilingual_fr": "Francés",
|
|
80
|
-
"str_multilingual_es": "Español",
|
|
76
|
+
"str_multilingual_ko": "Coreano (ko)",
|
|
77
|
+
"str_multilingual_en": "Inglés (en)",
|
|
78
|
+
"str_multilingual_ja": "Japonés (ja)",
|
|
79
|
+
"str_multilingual_zh_cn": "Chino - Simplificado (zh-cn)",
|
|
80
|
+
"str_multilingual_zh_tw": "Chino - Tradicional (zh-tw)",
|
|
81
|
+
"str_multilingual_fr": "Francés (fr)",
|
|
82
|
+
"str_multilingual_es": "Español (es)",
|
|
81
83
|
"str_9071": "Por favor, ingrese el texto en el idioma apropiado para su país.",
|
|
82
84
|
"str_original_text": "Texto Original",
|
|
83
85
|
"str_apply": "Aplicar",
|
|
@@ -51,6 +51,8 @@
|
|
|
51
51
|
"calendar_month_12": "Dis",
|
|
52
52
|
"str_fm_datetime_am": "{{hour}} NU",
|
|
53
53
|
"str_fm_datetime_pm": "{{hour}} NH",
|
|
54
|
+
"str_fm_am": "NU",
|
|
55
|
+
"str_fm_pm": "NH",
|
|
54
56
|
"calendar_duration_hour": " oras",
|
|
55
57
|
"calendar_duration_hours": " oras",
|
|
56
58
|
"str_fm_datetime_noon": "Tanghali",
|
|
@@ -71,13 +73,13 @@
|
|
|
71
73
|
"str_fm_day": "Araw",
|
|
72
74
|
"str_fm_week": "Linggo",
|
|
73
75
|
"multilingual_settings": "Multilingual Settings",
|
|
74
|
-
"str_multilingual_ko": "Korean",
|
|
75
|
-
"str_multilingual_en": "English",
|
|
76
|
-
"str_multilingual_ja": "Japanese",
|
|
77
|
-
"str_multilingual_zh_cn": "Chinese - Simplified",
|
|
78
|
-
"str_multilingual_zh_tw": "Chinese - Traditional",
|
|
79
|
-
"str_multilingual_fr": "French",
|
|
80
|
-
"str_multilingual_es": "Spanish",
|
|
76
|
+
"str_multilingual_ko": "Korean (ko)",
|
|
77
|
+
"str_multilingual_en": "English (en)",
|
|
78
|
+
"str_multilingual_ja": "Japanese (ja)",
|
|
79
|
+
"str_multilingual_zh_cn": "Chinese - Simplified (zh-cn)",
|
|
80
|
+
"str_multilingual_zh_tw": "Chinese - Traditional (zh-tw)",
|
|
81
|
+
"str_multilingual_fr": "French (fr)",
|
|
82
|
+
"str_multilingual_es": "Spanish (es)",
|
|
81
83
|
"str_9071": "Mangyaring ilagay ang teksto sa naaangkop na wika para sa inyong bansa.",
|
|
82
84
|
"str_original_text": "Orihinal na Teksto",
|
|
83
85
|
"str_apply": "Apply",
|
|
@@ -52,6 +52,9 @@ declare const locale: {
|
|
|
52
52
|
calendar_month_12: string;
|
|
53
53
|
str_fm_datetime_am: string;
|
|
54
54
|
str_fm_datetime_pm: string;
|
|
55
|
+
str_fm_am: string;
|
|
56
|
+
str_fm_pm: string;
|
|
57
|
+
str_fm_datetime_pm_only: string;
|
|
55
58
|
calendar_duration_hour: string;
|
|
56
59
|
calendar_duration_hours: string;
|
|
57
60
|
str_fm_datetime_noon: string;
|
|
@@ -148,6 +151,8 @@ declare const locale: {
|
|
|
148
151
|
calendar_month_12: string;
|
|
149
152
|
str_fm_datetime_am: string;
|
|
150
153
|
str_fm_datetime_pm: string;
|
|
154
|
+
str_fm_am: string;
|
|
155
|
+
str_fm_pm: string;
|
|
151
156
|
calendar_duration_hour: string;
|
|
152
157
|
calendar_duration_hours: string;
|
|
153
158
|
str_fm_datetime_noon: string;
|
|
@@ -244,6 +249,8 @@ declare const locale: {
|
|
|
244
249
|
calendar_month_12: string;
|
|
245
250
|
str_fm_datetime_am: string;
|
|
246
251
|
str_fm_datetime_pm: string;
|
|
252
|
+
str_fm_am: string;
|
|
253
|
+
str_fm_pm: string;
|
|
247
254
|
calendar_duration_hour: string;
|
|
248
255
|
calendar_duration_hours: string;
|
|
249
256
|
str_fm_datetime_noon: string;
|
|
@@ -340,6 +347,8 @@ declare const locale: {
|
|
|
340
347
|
calendar_month_12: string;
|
|
341
348
|
str_fm_datetime_am: string;
|
|
342
349
|
str_fm_datetime_pm: string;
|
|
350
|
+
str_fm_am: string;
|
|
351
|
+
str_fm_pm: string;
|
|
343
352
|
calendar_duration_hour: string;
|
|
344
353
|
calendar_duration_hours: string;
|
|
345
354
|
str_fm_datetime_noon: string;
|
|
@@ -436,6 +445,8 @@ declare const locale: {
|
|
|
436
445
|
calendar_month_12: string;
|
|
437
446
|
str_fm_datetime_am: string;
|
|
438
447
|
str_fm_datetime_pm: string;
|
|
448
|
+
str_fm_am: string;
|
|
449
|
+
str_fm_pm: string;
|
|
439
450
|
calendar_duration_hour: string;
|
|
440
451
|
calendar_duration_hours: string;
|
|
441
452
|
str_fm_datetime_noon: string;
|
|
@@ -532,6 +543,8 @@ declare const locale: {
|
|
|
532
543
|
calendar_month_12: string;
|
|
533
544
|
str_fm_datetime_am: string;
|
|
534
545
|
str_fm_datetime_pm: string;
|
|
546
|
+
str_fm_am: string;
|
|
547
|
+
str_fm_pm: string;
|
|
535
548
|
calendar_duration_hour: string;
|
|
536
549
|
calendar_duration_hours: string;
|
|
537
550
|
str_fm_datetime_noon: string;
|
|
@@ -628,6 +641,8 @@ declare const locale: {
|
|
|
628
641
|
calendar_month_12: string;
|
|
629
642
|
str_fm_datetime_am: string;
|
|
630
643
|
str_fm_datetime_pm: string;
|
|
644
|
+
str_fm_am: string;
|
|
645
|
+
str_fm_pm: string;
|
|
631
646
|
calendar_duration_hour: string;
|
|
632
647
|
calendar_duration_hours: string;
|
|
633
648
|
str_fm_datetime_noon: string;
|
|
@@ -51,6 +51,8 @@
|
|
|
51
51
|
"calendar_month_12": "12月",
|
|
52
52
|
"str_fm_datetime_am": "午前{{hour}}時",
|
|
53
53
|
"str_fm_datetime_pm": "午後{{hour}}時",
|
|
54
|
+
"str_fm_am": "午前",
|
|
55
|
+
"str_fm_pm": "午後",
|
|
54
56
|
"calendar_duration_hour": "時間",
|
|
55
57
|
"calendar_duration_hours": "時間",
|
|
56
58
|
"str_fm_datetime_noon": "昼",
|
|
@@ -71,13 +73,13 @@
|
|
|
71
73
|
"str_fm_day": "日",
|
|
72
74
|
"str_fm_week": "週",
|
|
73
75
|
"multilingual_settings": "多言語設定",
|
|
74
|
-
"str_multilingual_ko": "韓国語",
|
|
75
|
-
"str_multilingual_en": "英語",
|
|
76
|
-
"str_multilingual_ja": "日本語",
|
|
77
|
-
"str_multilingual_zh_cn": "中国語 - 簡体",
|
|
78
|
-
"str_multilingual_zh_tw": "中国語 - 繁体",
|
|
79
|
-
"str_multilingual_fr": "フランス語",
|
|
80
|
-
"str_multilingual_es": "スペイン語",
|
|
76
|
+
"str_multilingual_ko": "韓国語 (ko)",
|
|
77
|
+
"str_multilingual_en": "英語 (en)",
|
|
78
|
+
"str_multilingual_ja": "日本語 (ja)",
|
|
79
|
+
"str_multilingual_zh_cn": "中国語 - 簡体 (zh-cn)",
|
|
80
|
+
"str_multilingual_zh_tw": "中国語 - 繁体 (zh-tw)",
|
|
81
|
+
"str_multilingual_fr": "フランス語 (fr)",
|
|
82
|
+
"str_multilingual_es": "スペイン語 (es)",
|
|
81
83
|
"str_9071": "国に適した言語を入力してください。",
|
|
82
84
|
"str_original_text": "原文",
|
|
83
85
|
"str_apply": "適用",
|
|
@@ -51,6 +51,9 @@
|
|
|
51
51
|
"calendar_month_12": "12월",
|
|
52
52
|
"str_fm_datetime_am": "오전 {{hour}}시",
|
|
53
53
|
"str_fm_datetime_pm": "오후 {{hour}}시",
|
|
54
|
+
"str_fm_am": "오전",
|
|
55
|
+
"str_fm_pm": "오후",
|
|
56
|
+
"str_fm_datetime_pm_only": "오후",
|
|
54
57
|
"calendar_duration_hour": "시간",
|
|
55
58
|
"calendar_duration_hours": "시간",
|
|
56
59
|
"str_fm_datetime_noon": "정오",
|
|
@@ -71,13 +74,13 @@
|
|
|
71
74
|
"str_fm_day": "일",
|
|
72
75
|
"str_fm_week": "주",
|
|
73
76
|
"multilingual_settings": "다국어 설정",
|
|
74
|
-
"str_multilingual_ko": "한국어",
|
|
75
|
-
"str_multilingual_en": "영어",
|
|
76
|
-
"str_multilingual_ja": "일본어",
|
|
77
|
-
"str_multilingual_zh_cn": "중국어 - 간체",
|
|
78
|
-
"str_multilingual_zh_tw": "중국어 - 번체",
|
|
79
|
-
"str_multilingual_fr": "프랑스어",
|
|
80
|
-
"str_multilingual_es": "스페인어",
|
|
77
|
+
"str_multilingual_ko": "한국어 (ko)",
|
|
78
|
+
"str_multilingual_en": "영어 (en)",
|
|
79
|
+
"str_multilingual_ja": "일본어 (ja)",
|
|
80
|
+
"str_multilingual_zh_cn": "중국어 - 간체 (zh-cn)",
|
|
81
|
+
"str_multilingual_zh_tw": "중국어 - 번체 (zh-tw)",
|
|
82
|
+
"str_multilingual_fr": "프랑스어 (fr)",
|
|
83
|
+
"str_multilingual_es": "스페인어 (es)",
|
|
81
84
|
"str_9071": "국가에 맞는 언어를 입력해 주세요.",
|
|
82
85
|
"str_original_text": "원문",
|
|
83
86
|
"str_apply": "적용",
|
|
@@ -51,6 +51,8 @@
|
|
|
51
51
|
"calendar_month_12": "12月",
|
|
52
52
|
"str_fm_datetime_am": "上午{{hour}}时",
|
|
53
53
|
"str_fm_datetime_pm": "下午{{hour}}时",
|
|
54
|
+
"str_fm_am": "上午",
|
|
55
|
+
"str_fm_pm": "下午",
|
|
54
56
|
"calendar_duration_hour": "小时",
|
|
55
57
|
"calendar_duration_hours": "小时",
|
|
56
58
|
"str_fm_datetime_noon": "中午",
|
|
@@ -71,13 +73,13 @@
|
|
|
71
73
|
"str_fm_day": "日",
|
|
72
74
|
"str_fm_week": "周",
|
|
73
75
|
"multilingual_settings": "多语言设置",
|
|
74
|
-
"str_multilingual_ko": "韩语",
|
|
75
|
-
"str_multilingual_en": "英语",
|
|
76
|
-
"str_multilingual_ja": "日语",
|
|
77
|
-
"str_multilingual_zh_cn": "中文 - 简体",
|
|
78
|
-
"str_multilingual_zh_tw": "中文 - 繁体",
|
|
79
|
-
"str_multilingual_fr": "法语",
|
|
80
|
-
"str_multilingual_es": "西班牙语",
|
|
76
|
+
"str_multilingual_ko": "韩语 (ko)",
|
|
77
|
+
"str_multilingual_en": "英语 (en)",
|
|
78
|
+
"str_multilingual_ja": "日语 (ja)",
|
|
79
|
+
"str_multilingual_zh_cn": "中文 - 简体 (zh-cn)",
|
|
80
|
+
"str_multilingual_zh_tw": "中文 - 繁体 (zh-tw)",
|
|
81
|
+
"str_multilingual_fr": "法语 (fr)",
|
|
82
|
+
"str_multilingual_es": "西班牙语 (es)",
|
|
81
83
|
"str_9071": "请输入适合您国家的语言。",
|
|
82
84
|
"str_original_text": "原文",
|
|
83
85
|
"str_apply": "应用",
|
|
@@ -51,6 +51,8 @@
|
|
|
51
51
|
"calendar_month_12": "12月",
|
|
52
52
|
"str_fm_datetime_am": "上午{{hour}}時",
|
|
53
53
|
"str_fm_datetime_pm": "下午{{hour}}時",
|
|
54
|
+
"str_fm_am": "上午",
|
|
55
|
+
"str_fm_pm": "下午",
|
|
54
56
|
"calendar_duration_hour": "小時",
|
|
55
57
|
"calendar_duration_hours": "小時",
|
|
56
58
|
"str_fm_datetime_noon": "中午",
|
|
@@ -71,13 +73,13 @@
|
|
|
71
73
|
"str_fm_day": "日",
|
|
72
74
|
"str_fm_week": "週",
|
|
73
75
|
"multilingual_settings": "多語言設置",
|
|
74
|
-
"str_multilingual_ko": "韓語",
|
|
75
|
-
"str_multilingual_en": "英語",
|
|
76
|
-
"str_multilingual_ja": "日語",
|
|
77
|
-
"str_multilingual_zh_cn": "中文 - 簡體",
|
|
78
|
-
"str_multilingual_zh_tw": "中文 - 繁體",
|
|
79
|
-
"str_multilingual_fr": "法語",
|
|
80
|
-
"str_multilingual_es": "西班牙語",
|
|
76
|
+
"str_multilingual_ko": "韓語 (ko)",
|
|
77
|
+
"str_multilingual_en": "英語 (en)",
|
|
78
|
+
"str_multilingual_ja": "日語 (ja)",
|
|
79
|
+
"str_multilingual_zh_cn": "中文 - 簡體 (zh-cn)",
|
|
80
|
+
"str_multilingual_zh_tw": "中文 - 繁體 (zh-tw)",
|
|
81
|
+
"str_multilingual_fr": "法語 (fr)",
|
|
82
|
+
"str_multilingual_es": "西班牙語 (es)",
|
|
81
83
|
"str_9071": "請輸入適合您國家的語言。",
|
|
82
84
|
"str_original_text": "原文",
|
|
83
85
|
"str_apply": "應用",
|
|
@@ -388,11 +388,11 @@ var Calendar = function (_a) {
|
|
|
388
388
|
// 유틸리티 함수
|
|
389
389
|
getSchedulesForDate: getSchedulesForDate, isToday: isToday, isPastDate: isPastDate, getDayTextByDate: getDayTextByDate,
|
|
390
390
|
// 상태값
|
|
391
|
-
isDragOverDate: isDragOverDate, selectedDate: selectedDate, displayAllDayScheduleMode: displayAllDayScheduleMode }, { children: (0, jsx_runtime_1.jsxs)(S_CalendarContainer, __assign({ "x-pds-name": "Calendar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onKeyDown: handleKeyDown, tabIndex: 0 }, { children: [(0, jsx_runtime_1.jsxs)(S_CalendarHeader, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "headingBold", textAlign: "center", text: (0, calendarUtils_1.getHeaderText)(currentViewType, selectedDate, t) }), (0, jsx_runtime_1.jsxs)(S_LeftContainer, { children: [(0, jsx_runtime_1.jsx)(
|
|
391
|
+
isDragOverDate: isDragOverDate, selectedDate: selectedDate, displayAllDayScheduleMode: displayAllDayScheduleMode }, { children: (0, jsx_runtime_1.jsxs)(S_CalendarContainer, __assign({ "x-pds-name": "Calendar", "x-pds-element-type": "component", "x-pds-device-type": "desktop", onKeyDown: handleKeyDown, tabIndex: 0 }, { children: [(0, jsx_runtime_1.jsxs)(S_CalendarHeader, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "headingBold", textAlign: "center", text: (0, calendarUtils_1.getHeaderText)(currentViewType, selectedDate, t) }), (0, jsx_runtime_1.jsxs)(S_LeftContainer, { children: [(0, jsx_runtime_1.jsx)(S_NavigationButtonContainer, __assign({ onClick: function () { return navigateDate('prev'); } }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_arrow_left", baseSize: "small", iconSize: 16, baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_icon_sys_grey_01" }) })), todayBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: t('str_calendar_today'), size: "small", colorTheme: "grey_01", onClick: handleTodayClick })), (0, jsx_runtime_1.jsx)(S_NavigationButtonContainer, __assign({ onClick: function () { return navigateDate('next'); } }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_arrow_right", baseSize: "small", iconSize: 16, baseColorKey: "ui_cpnt_button_fill_base_transparent", iconColorKey: "ui_cpnt_icon_sys_grey_01" }) })), (0, jsx_runtime_1.jsx)(Dropdown_1.Dropdown, { size: "small", valueArray: viewTypeOptions, value: viewTypeOptions.find(function (option) { return option.value === currentViewType; }), onChange: handleViewTypeChange, customWidth: "120px" })] })] }), (0, jsx_runtime_1.jsx)(S_CalendarContent, { children: renderCalendarContent() })] })) })));
|
|
392
392
|
};
|
|
393
393
|
var S_CalendarContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 400px;\n outline: 0px;\n overflow: hidden;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 400px;\n outline: 0px;\n overflow: hidden;\n width: 100%;\n"])));
|
|
394
394
|
var S_CalendarHeader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n gap: 16px;\n padding: 0px 0px 8px 0px;\n"], ["\n align-items: center;\n display: flex;\n gap: 16px;\n padding: 0px 0px 8px 0px;\n"])));
|
|
395
|
-
var
|
|
395
|
+
var S_NavigationButtonContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n background: none;\n border: none;\n cursor: pointer;\n display: flex;\n height: 32px;\n justify-content: center;\n width: 32px;\n"], ["\n align-items: center;\n background: none;\n border: none;\n cursor: pointer;\n display: flex;\n height: 32px;\n justify-content: center;\n width: 32px;\n"])));
|
|
396
396
|
var S_LeftContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n gap: 8px;\n margin-left: auto;\n"], ["\n align-items: center;\n display: flex;\n gap: 8px;\n margin-left: auto;\n"])));
|
|
397
397
|
var S_CalendarContent = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n flex: 1;\n overflow: auto;\n"], ["\n flex: 1;\n overflow: auto;\n"])));
|
|
398
398
|
exports.default = Calendar;
|
|
@@ -61,7 +61,7 @@ var DailyView = function () {
|
|
|
61
61
|
return ((0, jsx_runtime_1.jsxs)(S_DailyContainer, { children: [(0, jsx_runtime_1.jsx)(AllDaySchedulesSection_1.AllDaySchedulesSection, { calendarDates: [selectedDate], displayAllDayScheduleMode: displayAllDayScheduleMode, getSchedulesForDate: getSchedulesForDate, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop }), (0, jsx_runtime_1.jsxs)(S_DailyTimeGrid, __assign({ "$displayAllDayScheduleMode": displayAllDayScheduleMode }, { children: [(0, jsx_runtime_1.jsx)(CurrentTimeIndicator_1.CurrentTimeIndicator, { show: true, leftOffset: "80px" }), HOURS_IN_DAY.map(function (hour) {
|
|
62
62
|
var timeSlotDate = getTimeSlotDate(currentDateForDaily, hour);
|
|
63
63
|
var isDragOver = (isDragOverDate === null || isDragOverDate === void 0 ? void 0 : isDragOverDate.getTime()) === timeSlotDate.getTime();
|
|
64
|
-
return ((0, jsx_runtime_1.jsxs)(S_DailyTimeRow, { children: [(0, jsx_runtime_1.jsx)(S_DailyTimeLabel, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", text: (0, timeFormatUtils_1.formatHour)(hour, i18n.language), colorTheme: "sysTextTertiary" }) }), (0, jsx_runtime_1.jsx)(S_DailyTimeSlot, __assign({ "$isDragOver": isDragOver, onClick: function () { return handleDateClick(timeSlotDate, {}); }, onDragOver: function (e) { return handleDateDragOver(timeSlotDate, e); }, onDragLeave: handleDateDragLeave, onDrop: function (e) { return handleDateDrop(timeSlotDate, e); } }, { children: hour === 0 && ((0, jsx_runtime_1.jsx)(TimeBasedScheduleItem_1.TimeBasedScheduleItem, { schedules: getSchedulesForDate(currentDateForDaily), selectedSchedules: selectedSchedules, onClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd })) }))] }, hour));
|
|
64
|
+
return ((0, jsx_runtime_1.jsxs)(S_DailyTimeRow, { children: [(0, jsx_runtime_1.jsx)(S_DailyTimeLabel, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", text: (0, timeFormatUtils_1.formatHour)(hour, 0, i18n.language), colorTheme: "sysTextTertiary" }) }), (0, jsx_runtime_1.jsx)(S_DailyTimeSlot, __assign({ "$isDragOver": isDragOver, onClick: function () { return handleDateClick(timeSlotDate, {}); }, onDragOver: function (e) { return handleDateDragOver(timeSlotDate, e); }, onDragLeave: handleDateDragLeave, onDrop: function (e) { return handleDateDrop(timeSlotDate, e); } }, { children: hour === 0 && ((0, jsx_runtime_1.jsx)(TimeBasedScheduleItem_1.TimeBasedScheduleItem, { schedules: getSchedulesForDate(currentDateForDaily), selectedSchedules: selectedSchedules, onClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd })) }))] }, hour));
|
|
65
65
|
})] }))] }));
|
|
66
66
|
};
|
|
67
67
|
exports.DailyView = DailyView;
|
|
@@ -31,6 +31,8 @@ exports.MonthlyView = void 0;
|
|
|
31
31
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
32
32
|
var react_1 = require("react");
|
|
33
33
|
var react_i18next_1 = require("react-i18next");
|
|
34
|
+
var useResizeObserver_1 = require("../../../common/hooks/useResizeObserver");
|
|
35
|
+
var useWindowSize_1 = require("../../../common/hooks/useWindowSize");
|
|
34
36
|
var dateHelper_1 = require("../../../common/utils/dateHelper");
|
|
35
37
|
var components_1 = require("../../../hybrid/components");
|
|
36
38
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
@@ -42,9 +44,10 @@ var MonthlyView = function (_a) {
|
|
|
42
44
|
var getDayTextByDate = _a.getDayTextByDate, startOfWeek = _a.startOfWeek, selectedDate = _a.selectedDate, selectedDates = _a.selectedDates, selectedSchedules = _a.selectedSchedules, dragStartDate = _a.dragStartDate, dragEndDate = _a.dragEndDate, isDragOverDate = _a.isDragOverDate, schedules = _a.schedules, getSchedulesForDate = _a.getSchedulesForDate, isToday = _a.isToday, isPastDate = _a.isPastDate, handleDateClick = _a.handleDateClick, handleScheduleClick = _a.handleScheduleClick, handleMouseUp = _a.handleMouseUp, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd, _b = _a.isDraggable, isDraggable = _b === void 0 ? false : _b, onSwitchToWeeklyView = _a.onSwitchToWeeklyView;
|
|
43
45
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
44
46
|
var renderScheduleItem = (0, CalendarContext_1.useCalendarContext)().renderScheduleItem;
|
|
47
|
+
var height = (0, useWindowSize_1.useWindowSize)().height;
|
|
45
48
|
var calendarCellRef = (0, react_1.useRef)(null);
|
|
46
49
|
var _c = (0, react_1.useState)(3), maxSchedulesPerDay = _c[0], setMaxSchedulesPerDay = _c[1];
|
|
47
|
-
var scheduleItemHeight =
|
|
50
|
+
var scheduleItemHeight = 22; // 스케줄 아이템 대략 높이
|
|
48
51
|
var days = (0, react_1.useMemo)(function () {
|
|
49
52
|
var monthDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
|
|
50
53
|
return dateHelper_1.DateHelper.getCalendarDatesForCalendar(monthDate, startOfWeek);
|
|
@@ -55,48 +58,31 @@ var MonthlyView = function (_a) {
|
|
|
55
58
|
return;
|
|
56
59
|
var cellHeight = calendarCellRef.current.clientHeight;
|
|
57
60
|
var dateLabelHeight = 20; // 날짜 텍스트 영역
|
|
58
|
-
var
|
|
59
|
-
var
|
|
60
|
-
var
|
|
61
|
-
var maxSchedulesWithMore = Math.floor((availableHeight - moreTextHeight) / scheduleItemHeight);
|
|
61
|
+
var moreTextHeight = scheduleItemHeight;
|
|
62
|
+
var availableHeight = cellHeight - dateLabelHeight - moreTextHeight;
|
|
63
|
+
var maxSchedulesWithMore = Math.floor(availableHeight / scheduleItemHeight);
|
|
62
64
|
// 최소 1개는 보여주되, 더보기를 고려한 개수로 설정
|
|
63
65
|
var calculatedMax = Math.max(1, maxSchedulesWithMore);
|
|
64
66
|
setMaxSchedulesPerDay(calculatedMax);
|
|
65
67
|
}, [scheduleItemHeight]);
|
|
66
68
|
// ResizeObserver로 크기 변경 감지
|
|
67
|
-
(0,
|
|
68
|
-
if (!calendarCellRef.current)
|
|
69
|
-
return;
|
|
70
|
-
var resizeObserver = new ResizeObserver(function () {
|
|
71
|
-
calculateMaxSchedules();
|
|
72
|
-
});
|
|
73
|
-
resizeObserver.observe(calendarCellRef.current);
|
|
74
|
-
// 초기 계산
|
|
75
|
-
calculateMaxSchedules();
|
|
76
|
-
return function () {
|
|
77
|
-
resizeObserver.disconnect();
|
|
78
|
-
};
|
|
79
|
-
}, [calculateMaxSchedules]);
|
|
69
|
+
(0, useResizeObserver_1.useResizeObserver)(calendarCellRef, calculateMaxSchedules, 100);
|
|
80
70
|
// 창 크기 변경 시에도 재계산
|
|
81
71
|
(0, react_1.useLayoutEffect)(function () {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
return function () { return window.removeEventListener('resize', handleResize); };
|
|
87
|
-
}, [calculateMaxSchedules]);
|
|
88
|
-
// 다중 이벤트 계산
|
|
89
|
-
var getMultiWeekSchedules = (0, react_1.useMemo)(function () {
|
|
90
|
-
// 개선: 날짜별(row, col) -> 사용중인 row set을 관리
|
|
91
|
-
var rowColUsedRows = {};
|
|
92
|
-
var multiWeekSchedules = [];
|
|
93
|
-
var allSchedules = new Map();
|
|
94
|
-
var processedScheduleIds = new Set();
|
|
95
|
-
// 캘린더에 표시되는 전체 날짜 범위 계산
|
|
72
|
+
calculateMaxSchedules();
|
|
73
|
+
}, [height]);
|
|
74
|
+
// 캘린더 범위 계산
|
|
75
|
+
var getCalendarDateRange = (0, react_1.useCallback)(function (days) {
|
|
96
76
|
var calendarStart = new Date(days[0]);
|
|
97
77
|
var calendarEnd = new Date(days[days.length - 1]);
|
|
98
78
|
calendarStart.setHours(0, 0, 0, 0);
|
|
99
79
|
calendarEnd.setHours(0, 0, 0, 0);
|
|
80
|
+
return { calendarStart: calendarStart, calendarEnd: calendarEnd };
|
|
81
|
+
}, []);
|
|
82
|
+
// 다중일 스케줄 수집 및 필터링
|
|
83
|
+
var collectMultiDaySchedules = (0, react_1.useCallback)(function (days, getSchedulesForDate, calendarStart, calendarEnd) {
|
|
84
|
+
var allSchedules = new Map();
|
|
85
|
+
var processedScheduleIds = new Set();
|
|
100
86
|
days.forEach(function (date) {
|
|
101
87
|
var schedulesForDate = getSchedulesForDate(date);
|
|
102
88
|
schedulesForDate.forEach(function (schedule) {
|
|
@@ -122,8 +108,11 @@ var MonthlyView = function (_a) {
|
|
|
122
108
|
}
|
|
123
109
|
});
|
|
124
110
|
});
|
|
125
|
-
|
|
126
|
-
|
|
111
|
+
return Array.from(allSchedules.values());
|
|
112
|
+
}, []);
|
|
113
|
+
// 스케줄 정렬 (시작일 기준 오름차순, 기간 오름차순)
|
|
114
|
+
var sortSchedulesByStartAndDuration = (0, react_1.useCallback)(function (schedules) {
|
|
115
|
+
return schedules.sort(function (a, b) {
|
|
127
116
|
var aStart = new Date(a.startDate).getTime();
|
|
128
117
|
var bStart = new Date(b.startDate).getTime();
|
|
129
118
|
if (aStart !== bStart)
|
|
@@ -132,88 +121,137 @@ var MonthlyView = function (_a) {
|
|
|
132
121
|
var bDur = new Date(b.endDate).getTime() - bStart;
|
|
133
122
|
return aDur - bDur;
|
|
134
123
|
});
|
|
135
|
-
|
|
136
|
-
|
|
124
|
+
}, []);
|
|
125
|
+
// 스케줄의 그리드 위치 계산
|
|
126
|
+
var calculateScheduleGridPosition = (0, react_1.useCallback)(function (schedule, days, calendarStart, calendarEnd) {
|
|
127
|
+
var scheduleStart = new Date(schedule.startDate);
|
|
128
|
+
var scheduleEnd = new Date(schedule.endDate);
|
|
129
|
+
scheduleStart.setHours(0, 0, 0, 0);
|
|
130
|
+
scheduleEnd.setHours(0, 0, 0, 0);
|
|
131
|
+
// 캘린더 범위 내에서 표시할 실제 시작/끝 날짜 계산
|
|
132
|
+
var displayStart = new Date(Math.max(scheduleStart.getTime(), calendarStart.getTime()));
|
|
133
|
+
var displayEnd = new Date(Math.min(scheduleEnd.getTime(), calendarEnd.getTime()));
|
|
134
|
+
// 캘린더 그리드에서 시작과 끝 위치 찾기
|
|
135
|
+
var startIndex = days.findIndex(function (date) {
|
|
136
|
+
var d = new Date(date);
|
|
137
|
+
d.setHours(0, 0, 0, 0);
|
|
138
|
+
return d.getTime() === displayStart.getTime();
|
|
139
|
+
});
|
|
140
|
+
var endIndex = days.findIndex(function (date) {
|
|
141
|
+
var d = new Date(date);
|
|
142
|
+
d.setHours(0, 0, 0, 0);
|
|
143
|
+
return d.getTime() === displayEnd.getTime();
|
|
144
|
+
});
|
|
145
|
+
if (startIndex === -1 || endIndex === -1) {
|
|
146
|
+
return null;
|
|
147
|
+
}
|
|
148
|
+
return { startIndex: startIndex, endIndex: endIndex };
|
|
149
|
+
}, []);
|
|
150
|
+
// 행별 세그먼트 정보 계산
|
|
151
|
+
var calculateRowSegments = (0, react_1.useCallback)(function (startIndex, endIndex) {
|
|
152
|
+
var startRow = Math.floor(startIndex / 7) + 2;
|
|
153
|
+
var endRow = Math.floor(endIndex / 7) + 2;
|
|
154
|
+
var segments = [];
|
|
155
|
+
var getSegmentBounds = function (row, startRow, endRow, startIndex, endIndex) {
|
|
156
|
+
if (row === startRow && row === endRow) {
|
|
157
|
+
return [(startIndex % 7) + 1, (endIndex % 7) + 1];
|
|
158
|
+
}
|
|
159
|
+
if (row === startRow) {
|
|
160
|
+
return [(startIndex % 7) + 1, 7];
|
|
161
|
+
}
|
|
162
|
+
if (row === endRow) {
|
|
163
|
+
return [1, (endIndex % 7) + 1];
|
|
164
|
+
}
|
|
165
|
+
return [1, 7];
|
|
166
|
+
};
|
|
167
|
+
for (var row = startRow; row <= endRow; row += 1) {
|
|
168
|
+
var _a = getSegmentBounds(row, startRow, endRow, startIndex, endIndex), startCol = _a[0], endCol = _a[1];
|
|
169
|
+
segments.push({ row: row, startCol: startCol, endCol: endCol });
|
|
170
|
+
}
|
|
171
|
+
return segments;
|
|
172
|
+
}, []);
|
|
173
|
+
// 사용중인 행 정보를 수집
|
|
174
|
+
var collectUsedRows = (0, react_1.useCallback)(function (segments, rowColUsedRows) {
|
|
175
|
+
var usedRows = new Set();
|
|
176
|
+
segments.forEach(function (_a) {
|
|
177
|
+
var row = _a.row, startCol = _a.startCol, endCol = _a.endCol;
|
|
178
|
+
for (var col = startCol; col <= endCol; col += 1) {
|
|
179
|
+
var key = "".concat(row, "_").concat(col);
|
|
180
|
+
if (rowColUsedRows[key]) {
|
|
181
|
+
rowColUsedRows[key].forEach(function (r) { return usedRows.add(r); });
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
});
|
|
185
|
+
return usedRows;
|
|
186
|
+
}, []);
|
|
187
|
+
// 가장 작은 빈 행 인덱스 찾기
|
|
188
|
+
var findAvailableRowIndex = (0, react_1.useCallback)(function (usedRows) {
|
|
189
|
+
var scheduleIndex = 0;
|
|
190
|
+
while (usedRows.has(scheduleIndex)) {
|
|
191
|
+
scheduleIndex += 1;
|
|
192
|
+
}
|
|
193
|
+
return scheduleIndex;
|
|
194
|
+
}, []);
|
|
195
|
+
// 행-열 사용 정보 업데이트
|
|
196
|
+
var updateRowColUsage = (0, react_1.useCallback)(function (segments, scheduleIndex, rowColUsedRows) {
|
|
197
|
+
segments.forEach(function (_a) {
|
|
198
|
+
var row = _a.row, startCol = _a.startCol, endCol = _a.endCol;
|
|
199
|
+
for (var col = startCol; col <= endCol; col += 1) {
|
|
200
|
+
var key = "".concat(row, "_").concat(col);
|
|
201
|
+
if (!rowColUsedRows[key])
|
|
202
|
+
rowColUsedRows[key] = new Set();
|
|
203
|
+
rowColUsedRows[key].add(scheduleIndex);
|
|
204
|
+
}
|
|
205
|
+
});
|
|
206
|
+
}, []);
|
|
207
|
+
// 다중 이벤트 계산
|
|
208
|
+
var getMultiWeekSchedules = (0, react_1.useMemo)(function () {
|
|
209
|
+
var _a = getCalendarDateRange(days), calendarStart = _a.calendarStart, calendarEnd = _a.calendarEnd;
|
|
210
|
+
var multiDaySchedules = collectMultiDaySchedules(days, getSchedulesForDate, calendarStart, calendarEnd);
|
|
211
|
+
var sortedSchedules = sortSchedulesByStartAndDuration(multiDaySchedules);
|
|
212
|
+
var rowColUsedRows = {};
|
|
213
|
+
var multiWeekSchedules = [];
|
|
214
|
+
sortedSchedules.forEach(function (schedule) {
|
|
137
215
|
var scheduleStart = new Date(schedule.startDate);
|
|
138
216
|
var scheduleEnd = new Date(schedule.endDate);
|
|
139
217
|
scheduleStart.setHours(0, 0, 0, 0);
|
|
140
218
|
scheduleEnd.setHours(0, 0, 0, 0);
|
|
141
219
|
if (scheduleStart.getTime() !== scheduleEnd.getTime()) {
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
var endIndex = days.findIndex(function (date) {
|
|
152
|
-
var d = new Date(date);
|
|
153
|
-
d.setHours(0, 0, 0, 0);
|
|
154
|
-
return d.getTime() === displayEnd_1.getTime();
|
|
155
|
-
});
|
|
156
|
-
if (startIndex !== -1 && endIndex !== -1) {
|
|
157
|
-
var startRow = Math.floor(startIndex / 7) + 2;
|
|
158
|
-
var endRow = Math.floor(endIndex / 7) + 2;
|
|
159
|
-
var _loop_1 = function (row) {
|
|
160
|
-
var isFirstRow = row === startRow;
|
|
161
|
-
var isLastRow = row === endRow;
|
|
162
|
-
var segmentStartCol = void 0;
|
|
163
|
-
var segmentEndCol = void 0;
|
|
164
|
-
if (isFirstRow && isLastRow) {
|
|
165
|
-
segmentStartCol = (startIndex % 7) + 1;
|
|
166
|
-
segmentEndCol = (endIndex % 7) + 1;
|
|
167
|
-
}
|
|
168
|
-
else if (isFirstRow) {
|
|
169
|
-
segmentStartCol = (startIndex % 7) + 1;
|
|
170
|
-
segmentEndCol = 7;
|
|
171
|
-
}
|
|
172
|
-
else if (isLastRow) {
|
|
173
|
-
segmentStartCol = 1;
|
|
174
|
-
segmentEndCol = (endIndex % 7) + 1;
|
|
175
|
-
}
|
|
176
|
-
else {
|
|
177
|
-
segmentStartCol = 1;
|
|
178
|
-
segmentEndCol = 7;
|
|
179
|
-
}
|
|
180
|
-
// 개선: 이 스케줄이 차지하는 날짜(row, col) 전체에서 사용중인 row set을 합침
|
|
181
|
-
var usedRows = new Set();
|
|
182
|
-
for (var col = segmentStartCol; col <= segmentEndCol; col += 1) {
|
|
183
|
-
var key = "".concat(row, "_").concat(col);
|
|
184
|
-
if (rowColUsedRows[key]) {
|
|
185
|
-
rowColUsedRows[key].forEach(function (r) { return usedRows.add(r); });
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
// 가장 작은 빈 row를 찾음
|
|
189
|
-
var scheduleIndex = 0;
|
|
190
|
-
while (usedRows.has(scheduleIndex)) {
|
|
191
|
-
scheduleIndex += 1;
|
|
192
|
-
}
|
|
193
|
-
// 이 스케줄이 차지하는 모든 날짜(row, col)에 scheduleIndex를 기록
|
|
194
|
-
for (var col = segmentStartCol; col <= segmentEndCol; col += 1) {
|
|
195
|
-
var key = "".concat(row, "_").concat(col);
|
|
196
|
-
if (!rowColUsedRows[key])
|
|
197
|
-
rowColUsedRows[key] = new Set();
|
|
198
|
-
rowColUsedRows[key].add(scheduleIndex);
|
|
199
|
-
}
|
|
220
|
+
var gridPosition = calculateScheduleGridPosition(schedule, days, calendarStart, calendarEnd);
|
|
221
|
+
if (gridPosition) {
|
|
222
|
+
var startIndex = gridPosition.startIndex, endIndex = gridPosition.endIndex;
|
|
223
|
+
var segments = calculateRowSegments(startIndex, endIndex);
|
|
224
|
+
segments.forEach(function (_a) {
|
|
225
|
+
var row = _a.row, startCol = _a.startCol, endCol = _a.endCol;
|
|
226
|
+
var usedRows = collectUsedRows([{ row: row, startCol: startCol, endCol: endCol }], rowColUsedRows);
|
|
227
|
+
var scheduleIndex = findAvailableRowIndex(usedRows);
|
|
228
|
+
updateRowColUsage([{ row: row, startCol: startCol, endCol: endCol }], scheduleIndex, rowColUsedRows);
|
|
200
229
|
multiWeekSchedules.push({
|
|
201
230
|
schedule: schedule,
|
|
202
231
|
startRow: row,
|
|
203
232
|
endRow: row,
|
|
204
|
-
startCol:
|
|
205
|
-
endCol:
|
|
233
|
+
startCol: startCol,
|
|
234
|
+
endCol: endCol,
|
|
206
235
|
scheduleIndex: scheduleIndex
|
|
207
236
|
});
|
|
208
|
-
};
|
|
209
|
-
for (var row = startRow; row <= endRow; row += 1) {
|
|
210
|
-
_loop_1(row);
|
|
211
|
-
}
|
|
237
|
+
});
|
|
212
238
|
}
|
|
213
239
|
}
|
|
214
240
|
});
|
|
215
241
|
return multiWeekSchedules;
|
|
216
|
-
}, [
|
|
242
|
+
}, [
|
|
243
|
+
days,
|
|
244
|
+
getSchedulesForDate,
|
|
245
|
+
schedules,
|
|
246
|
+
getCalendarDateRange,
|
|
247
|
+
collectMultiDaySchedules,
|
|
248
|
+
sortSchedulesByStartAndDuration,
|
|
249
|
+
calculateScheduleGridPosition,
|
|
250
|
+
calculateRowSegments,
|
|
251
|
+
collectUsedRows,
|
|
252
|
+
findAvailableRowIndex,
|
|
253
|
+
updateRowColUsage
|
|
254
|
+
]);
|
|
217
255
|
var getCalendarCellData = function (date, index) {
|
|
218
256
|
var daySchedules = getSchedulesForDate(date);
|
|
219
257
|
var row = Math.floor(index / 7) + 2; // 헤더 고려
|
|
@@ -30,6 +30,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
30
30
|
exports.MultiWeekSchedulesLayer = void 0;
|
|
31
31
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
32
32
|
var react_1 = require("react");
|
|
33
|
+
var useParentResizeObserver_1 = require("../../../common/hooks/useParentResizeObserver");
|
|
34
|
+
var useWindowSize_1 = require("../../../common/hooks/useWindowSize");
|
|
33
35
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
34
36
|
var TextLabel_1 = require("../TextLabel");
|
|
35
37
|
var ScheduleItem_1 = require("./ScheduleItem");
|
|
@@ -38,6 +40,7 @@ var MultiWeekSchedulesLayer = function (_a) {
|
|
|
38
40
|
var containerRef = (0, react_1.useRef)(null);
|
|
39
41
|
var _d = (0, react_1.useState)([]), cellPositions = _d[0], setCellPositions = _d[1];
|
|
40
42
|
var _e = (0, react_1.useState)([]), hiddenSchedules = _e[0], setHiddenSchedules = _e[1];
|
|
43
|
+
var height = (0, useWindowSize_1.useWindowSize)().height;
|
|
41
44
|
// 캘린더 셀들의 실제 위치를 계산하는 함수
|
|
42
45
|
var calculateCellPositions = (0, react_1.useCallback)(function () {
|
|
43
46
|
if (!containerRef.current)
|
|
@@ -73,30 +76,11 @@ var MultiWeekSchedulesLayer = function (_a) {
|
|
|
73
76
|
setCellPositions(positions);
|
|
74
77
|
}, []);
|
|
75
78
|
// ResizeObserver로 크기 변경 감지
|
|
79
|
+
(0, useParentResizeObserver_1.useParentResizeObserver)(containerRef, calculateCellPositions, 100);
|
|
80
|
+
// 창 크기 변경 시 재계산
|
|
76
81
|
(0, react_1.useLayoutEffect)(function () {
|
|
77
|
-
if (!containerRef.current)
|
|
78
|
-
return;
|
|
79
|
-
var gridContainer = containerRef.current.parentElement;
|
|
80
|
-
if (!gridContainer)
|
|
81
|
-
return;
|
|
82
|
-
var resizeObserver = new ResizeObserver(function () {
|
|
83
|
-
calculateCellPositions();
|
|
84
|
-
});
|
|
85
|
-
resizeObserver.observe(gridContainer);
|
|
86
|
-
// 초기 계산
|
|
87
82
|
calculateCellPositions();
|
|
88
|
-
|
|
89
|
-
resizeObserver.disconnect();
|
|
90
|
-
};
|
|
91
|
-
}, [calculateCellPositions]);
|
|
92
|
-
// 창 크기 변경 시에도 재계산
|
|
93
|
-
(0, react_1.useLayoutEffect)(function () {
|
|
94
|
-
var handleResize = function () {
|
|
95
|
-
setTimeout(calculateCellPositions, 0);
|
|
96
|
-
};
|
|
97
|
-
window.addEventListener('resize', handleResize);
|
|
98
|
-
return function () { return window.removeEventListener('resize', handleResize); };
|
|
99
|
-
}, [calculateCellPositions]);
|
|
83
|
+
}, [height, calculateCellPositions]);
|
|
100
84
|
(0, react_1.useEffect)(function () {
|
|
101
85
|
// 각 row별로 스케줄 개수와 높이 제한 확인
|
|
102
86
|
var schedulesByRow = {};
|
|
@@ -109,18 +93,13 @@ var MultiWeekSchedulesLayer = function (_a) {
|
|
|
109
93
|
schedulesByRow[row].push(scheduleInfo);
|
|
110
94
|
}
|
|
111
95
|
});
|
|
112
|
-
// 각 row에서 높이 제한 확인 (실제로 보이는 줄 수와 전체 스케줄 수 모두 출력)
|
|
96
|
+
// 각 row(주)에서 높이 제한 확인 (실제로 보이는 줄 수와 전체 스케줄 수 모두 출력)
|
|
113
97
|
Object.keys(schedulesByRow).forEach(function (rowStr) {
|
|
114
98
|
var row = parseInt(rowStr, 10);
|
|
115
99
|
var schedules = schedulesByRow[row];
|
|
116
|
-
|
|
117
|
-
var rowIndexMap = {};
|
|
118
|
-
schedules.forEach(function (s) {
|
|
119
|
-
rowIndexMap[s.scheduleIndex] = s;
|
|
120
|
-
});
|
|
121
|
-
var rowSchedules = Object.values(rowIndexMap);
|
|
100
|
+
var rowSchedules = __spreadArray([], schedules, true);
|
|
122
101
|
if (rowSchedules.length > maxSchedulesPerDay) {
|
|
123
|
-
// row를 날짜로 변환 (row 2가 첫 번째 주, row 3이 두 번째 주...)
|
|
102
|
+
// row(주)를 날짜로 변환 (row 2가 첫 번째 주, row 3이 두 번째 주...)
|
|
124
103
|
var weekIndex = row - 2; // 헤더 제외
|
|
125
104
|
var today = new Date();
|
|
126
105
|
var startOfWeek = new Date(today);
|
|
@@ -129,11 +108,18 @@ var MultiWeekSchedulesLayer = function (_a) {
|
|
|
129
108
|
weekStart.setDate(startOfWeek.getDate() + weekIndex * 7);
|
|
130
109
|
var weekEnd = new Date(weekStart);
|
|
131
110
|
weekEnd.setDate(weekStart.getDate() + 6);
|
|
132
|
-
|
|
111
|
+
// 최대 스케줄 개수를 초과하는 스케줄은 숨김 처리 (scheduleIndex기준, 0부터 시작)
|
|
112
|
+
setHiddenSchedules(__spreadArray([], rowSchedules, true).filter(function (rowSchedule) { return rowSchedule.scheduleIndex > maxSchedulesPerDay - 1; })
|
|
133
113
|
.map(function (s) { return s.schedule.id.toString(); }));
|
|
134
114
|
}
|
|
135
115
|
});
|
|
136
116
|
}, [maxSchedulesPerDay]);
|
|
117
|
+
// 드래그 시작 핸들러를 함수로 분리
|
|
118
|
+
var handleDragStart = function (schedule, e) {
|
|
119
|
+
if (handleScheduleDragStart) {
|
|
120
|
+
handleScheduleDragStart(schedule, e);
|
|
121
|
+
}
|
|
122
|
+
};
|
|
137
123
|
return ((0, jsx_runtime_1.jsx)(S_Layer, __assign({ ref: containerRef }, { children: multiWeekSchedules
|
|
138
124
|
.filter(function (s) { return !hiddenSchedules.includes(s.schedule.id.toString()); })
|
|
139
125
|
.map(function (_a) {
|
|
@@ -142,11 +128,7 @@ var MultiWeekSchedulesLayer = function (_a) {
|
|
|
142
128
|
var isSelected = selectedSchedules.some(function (s) { return s.id === schedule.id; });
|
|
143
129
|
var uniqueKey = "multi-".concat(schedule.id, "-").concat(startRow, "-").concat(startCol, "-").concat(endCol);
|
|
144
130
|
if (isSameRow) {
|
|
145
|
-
return ((0, jsx_runtime_1.jsxs)(S_MultiWeekSchedule, __assign({ "$color": schedule.color, "$startRow": startRow, "$endRow": endRow, "$startCol": startCol, "$endCol": endCol, "$scheduleIndex": scheduleIndex, "$isSelected": isSelected, "$isDraggable": isDraggable, "$cellPositions": cellPositions, draggable: isDraggable, onDragStart: isDraggable
|
|
146
|
-
? function (e) {
|
|
147
|
-
handleScheduleDragStart === null || handleScheduleDragStart === void 0 ? void 0 : handleScheduleDragStart(schedule, e);
|
|
148
|
-
}
|
|
149
|
-
: undefined, onDragEnd: isDraggable ? handleScheduleDragEnd : undefined, onClick: function (e) {
|
|
131
|
+
return ((0, jsx_runtime_1.jsxs)(S_MultiWeekSchedule, __assign({ "$color": schedule.color, "$startRow": startRow, "$endRow": endRow, "$startCol": startCol, "$endCol": endCol, "$scheduleIndex": scheduleIndex, "$isSelected": isSelected, "$isDraggable": isDraggable, "$cellPositions": cellPositions, draggable: isDraggable, onDragStart: isDraggable ? function (e) { return handleDragStart(schedule, e); } : undefined, onDragEnd: isDraggable ? handleScheduleDragEnd : undefined, onClick: function (e) {
|
|
150
132
|
e.stopPropagation();
|
|
151
133
|
handleScheduleClick === null || handleScheduleClick === void 0 ? void 0 : handleScheduleClick(schedule, e);
|
|
152
134
|
} }, { children: [(0, jsx_runtime_1.jsx)(ScheduleItem_1.S_Dot, { "$isSelected": isSelected }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", text: schedule.title, ellipsisMode: "use", colorTheme: isSelected ? 'sysTextWhite' : undefined })] }), uniqueKey));
|
|
@@ -172,7 +154,7 @@ var MultiWeekSchedulesLayer = function (_a) {
|
|
|
172
154
|
};
|
|
173
155
|
exports.MultiWeekSchedulesLayer = MultiWeekSchedulesLayer;
|
|
174
156
|
var S_Layer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n left: 0;\n pointer-events: none;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 10;\n\n & > * {\n pointer-events: auto;\n }\n"], ["\n height: 100%;\n left: 0;\n pointer-events: none;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 10;\n\n & > * {\n pointer-events: auto;\n }\n"])));
|
|
175
|
-
var S_MultiWeekSchedule = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 4px;\n color: white;\n cursor: ", ";\n display: flex;\n font-size: 12px;\n height:
|
|
157
|
+
var S_MultiWeekSchedule = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-radius: 4px;\n color: white;\n cursor: ", ";\n display: flex;\n font-size: 12px;\n height: 17px;\n left: ", ";\n padding: 2px 6px;\n position: absolute;\n top: ", ";\n user-select: none;\n width: ", ";\n z-index: 10;\n\n &:active {\n background: ", ";\n cursor: ", ";\n }\n"], ["\n align-items: center;\n background-color: ", ";\n border-radius: 4px;\n color: white;\n cursor: ", ";\n display: flex;\n font-size: 12px;\n height: 17px;\n left: ", ";\n padding: 2px 6px;\n position: absolute;\n top: ", ";\n user-select: none;\n width: ", ";\n z-index: 10;\n\n &:active {\n background: ", ";\n cursor: ", ";\n }\n"])), function (props) {
|
|
176
158
|
return props.$isSelected ? props.theme.ui_cpnt_sheet_base_06 : props.theme.ui_cpnt_sheet_base;
|
|
177
159
|
}, function (_a) {
|
|
178
160
|
var $isDraggable = _a.$isDraggable;
|
|
@@ -191,7 +173,7 @@ var S_MultiWeekSchedule = styled_components_1.default.div(templateObject_2 || (t
|
|
|
191
173
|
}
|
|
192
174
|
var cellPosition = $cellPositions[rowIndex];
|
|
193
175
|
var scheduleHeight = 16;
|
|
194
|
-
var scheduleSpacing = ($scheduleIndex || 0) * (scheduleHeight + 7);
|
|
176
|
+
var scheduleSpacing = ($scheduleIndex || 0) * (scheduleHeight + 7);
|
|
195
177
|
var calculatedTop = cellPosition.top + scheduleSpacing;
|
|
196
178
|
return "".concat(calculatedTop, "px");
|
|
197
179
|
}, function (props) { return "calc((".concat(props.$endCol - props.$startCol + 1, ") * (100% / 7) - 21px)"); }, function (_a) {
|
|
@@ -142,7 +142,7 @@ var TimeBasedScheduleItem = function (_a) {
|
|
|
142
142
|
return ((0, jsx_runtime_1.jsx)(S_ScheduleItem, __assign({ "$top": top, "$height": height, "$gridColumn": schedule.gridColumn, "$totalColumns": schedule.totalColumns, "$isSelected": isSelected, "$isDraggable": isDraggable, draggable: isDraggable, onClick: function (e) {
|
|
143
143
|
e.stopPropagation();
|
|
144
144
|
onClick === null || onClick === void 0 ? void 0 : onClick(schedule, e);
|
|
145
|
-
}, onDragStart: function (e) { return handleScheduleDragStart === null || handleScheduleDragStart === void 0 ? void 0 : handleScheduleDragStart(schedule, e); }, onDragEnd: function () { return handleScheduleDragEnd === null || handleScheduleDragEnd === void 0 ? void 0 : handleScheduleDragEnd(); } }, { children: (0, jsx_runtime_1.jsxs)(S_ScheduleContent, { children: [(0, jsx_runtime_1.jsx)(S_ScheduleTime, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Regular", text: "".concat((0, timeFormatUtils_1.formatTimeWithLocale)(localStartHour, i18n.language, t)), ellipsisMode: "use", singleLineMode: "use", colorTheme: isSelected ? 'sysTextWhite' : undefined }) }), (0, jsx_runtime_1.jsx)(S_ScheduleTitle, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", text: schedule.title, ellipsisMode: "use", singleLineMode: "use", colorTheme: isSelected ? 'sysTextWhite' : undefined }) })] }) }), schedule.id));
|
|
145
|
+
}, onDragStart: function (e) { return handleScheduleDragStart === null || handleScheduleDragStart === void 0 ? void 0 : handleScheduleDragStart(schedule, e); }, onDragEnd: function () { return handleScheduleDragEnd === null || handleScheduleDragEnd === void 0 ? void 0 : handleScheduleDragEnd(); } }, { children: (0, jsx_runtime_1.jsxs)(S_ScheduleContent, { children: [(0, jsx_runtime_1.jsx)(S_ScheduleTime, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Regular", text: "".concat((0, timeFormatUtils_1.formatTimeWithLocale)(localStartHour, localStartMinutes, i18n.language, t)), ellipsisMode: "use", singleLineMode: "use", colorTheme: isSelected ? 'sysTextWhite' : undefined }) }), (0, jsx_runtime_1.jsx)(S_ScheduleTitle, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", text: schedule.title, ellipsisMode: "use", singleLineMode: "use", colorTheme: isSelected ? 'sysTextWhite' : undefined }) })] }) }), schedule.id));
|
|
146
146
|
}) }));
|
|
147
147
|
};
|
|
148
148
|
exports.TimeBasedScheduleItem = TimeBasedScheduleItem;
|
|
@@ -73,7 +73,7 @@ var WeeklyView = function (_a) {
|
|
|
73
73
|
day: dayText
|
|
74
74
|
});
|
|
75
75
|
return ((0, jsx_runtime_1.jsx)(S_WeeklyDayHeader, __assign({ "$isToday": isToday(date) }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { textAlign: "center", styleTheme: "caption2Bold", colorTheme: isToday(date) ? 'sysTextBrandPrimary' : 'sysTextTertiary', text: dateText }) }), index));
|
|
76
|
-
})] }), (0, jsx_runtime_1.jsx)(AllDaySchedulesSection_1.AllDaySchedulesSection, { calendarDates: calendarDates, displayAllDayScheduleMode: displayAllDayScheduleMode, getSchedulesForDate: getSchedulesForDate, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop }), (0, jsx_runtime_1.jsxs)(S_WeeklyTimeGrid, __assign({ "$displayAllDayScheduleMode": displayAllDayScheduleMode }, { children: [(0, jsx_runtime_1.jsx)(CurrentTimeIndicator_1.CurrentTimeIndicator, { show: true, leftOffset: "80px" }), Array.from({ length: 24 }, function (_unused, hour) { return ((0, jsx_runtime_1.jsxs)(S_TimeRow, { children: [(0, jsx_runtime_1.jsx)(S_TimeLabel, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", text: (0, timeFormatUtils_1.formatTimeWithLocale)(hour, i18n.language, t), colorTheme: "sysTextTertiary" }) }), (0, jsx_runtime_1.jsx)(S_TimeSlots, { children: calendarDates.map(function (date, dayIndex) {
|
|
76
|
+
})] }), (0, jsx_runtime_1.jsx)(AllDaySchedulesSection_1.AllDaySchedulesSection, { calendarDates: calendarDates, displayAllDayScheduleMode: displayAllDayScheduleMode, getSchedulesForDate: getSchedulesForDate, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop }), (0, jsx_runtime_1.jsxs)(S_WeeklyTimeGrid, __assign({ "$displayAllDayScheduleMode": displayAllDayScheduleMode }, { children: [(0, jsx_runtime_1.jsx)(CurrentTimeIndicator_1.CurrentTimeIndicator, { show: true, leftOffset: "80px" }), Array.from({ length: 24 }, function (_unused, hour) { return ((0, jsx_runtime_1.jsxs)(S_TimeRow, { children: [(0, jsx_runtime_1.jsx)(S_TimeLabel, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", text: (0, timeFormatUtils_1.formatTimeWithLocale)(hour, 0, i18n.language, t), colorTheme: "sysTextTertiary" }) }), (0, jsx_runtime_1.jsx)(S_TimeSlots, { children: calendarDates.map(function (date, dayIndex) {
|
|
77
77
|
var timeSlotDate = new Date(date);
|
|
78
78
|
timeSlotDate.setHours(hour, 0, 0, 0);
|
|
79
79
|
var isDragOver = (isDragOverDate === null || isDragOverDate === void 0 ? void 0 : isDragOverDate.getTime()) === timeSlotDate.getTime();
|
|
@@ -2,15 +2,17 @@ import type { TFunction } from 'react-i18next';
|
|
|
2
2
|
/**
|
|
3
3
|
* 로케일에 따라 시간을 문자열로 포맷팅
|
|
4
4
|
* @param hour - 시간 (0-23)
|
|
5
|
+
* @param minute - 분 (0-59)
|
|
5
6
|
* @param currentLang - 현재 언어 코드
|
|
6
7
|
* @returns 포맷팅된 시간 문자열
|
|
7
8
|
*/
|
|
8
|
-
export declare const formatHour: (hour: number, currentLang: string) => string;
|
|
9
|
+
export declare const formatHour: (hour: number, minute: number | undefined, currentLang: string) => string;
|
|
9
10
|
/**
|
|
10
11
|
* 로케일별 텍스트로 시간 포맷팅 (한국어용)
|
|
11
12
|
* @param hour - 시간 (0-23)
|
|
13
|
+
* @param minute - 분 (0-59)
|
|
12
14
|
* @param currentLang - 현재 언어 코드
|
|
13
15
|
* @param t - react-i18next의 번역 함수
|
|
14
16
|
* @returns 로케일별 텍스트가 포함된 포맷팅된 시간 문자열
|
|
15
17
|
*/
|
|
16
|
-
export declare const formatTimeWithLocale: (hour: number, currentLang: string, t: TFunction) => string;
|
|
18
|
+
export declare const formatTimeWithLocale: (hour: number, minute: number | undefined, currentLang: string, t: TFunction) => string;
|
|
@@ -4,42 +4,56 @@ exports.formatTimeWithLocale = exports.formatHour = void 0;
|
|
|
4
4
|
/**
|
|
5
5
|
* 로케일에 따라 시간을 문자열로 포맷팅
|
|
6
6
|
* @param hour - 시간 (0-23)
|
|
7
|
+
* @param minute - 분 (0-59)
|
|
7
8
|
* @param currentLang - 현재 언어 코드
|
|
8
9
|
* @returns 포맷팅된 시간 문자열
|
|
9
10
|
*/
|
|
10
|
-
var formatHour = function (hour, currentLang) {
|
|
11
|
+
var formatHour = function (hour, minute, currentLang) {
|
|
12
|
+
if (minute === void 0) { minute = 0; }
|
|
11
13
|
var is24HourFormat = ['ko', 'ja', 'zh', 'zh-cn', 'zh-tw', 'es'].includes(currentLang);
|
|
14
|
+
var minuteStr = minute.toString().padStart(2, '0');
|
|
12
15
|
if (is24HourFormat) {
|
|
13
|
-
return "".concat(hour, ":
|
|
16
|
+
return "".concat(hour, ":").concat(minuteStr);
|
|
14
17
|
}
|
|
15
18
|
if (hour === 0)
|
|
16
|
-
return
|
|
19
|
+
return "12:".concat(minuteStr, " AM");
|
|
17
20
|
if (hour === 12)
|
|
18
|
-
return
|
|
21
|
+
return "12:".concat(minuteStr, " PM");
|
|
19
22
|
if (hour < 12)
|
|
20
|
-
return "".concat(hour, ":
|
|
21
|
-
return "".concat(hour - 12, ":
|
|
23
|
+
return "".concat(hour, ":").concat(minuteStr, " AM");
|
|
24
|
+
return "".concat(hour - 12, ":").concat(minuteStr, " PM");
|
|
22
25
|
};
|
|
23
26
|
exports.formatHour = formatHour;
|
|
24
27
|
/**
|
|
25
28
|
* 로케일별 텍스트로 시간 포맷팅 (한국어용)
|
|
26
29
|
* @param hour - 시간 (0-23)
|
|
30
|
+
* @param minute - 분 (0-59)
|
|
27
31
|
* @param currentLang - 현재 언어 코드
|
|
28
32
|
* @param t - react-i18next의 번역 함수
|
|
29
33
|
* @returns 로케일별 텍스트가 포함된 포맷팅된 시간 문자열
|
|
30
34
|
*/
|
|
31
|
-
var formatTimeWithLocale = function (hour, currentLang, t) {
|
|
35
|
+
var formatTimeWithLocale = function (hour, minute, currentLang, t) {
|
|
36
|
+
if (minute === void 0) { minute = 0; }
|
|
32
37
|
if (currentLang === 'ko') {
|
|
33
|
-
|
|
34
|
-
|
|
38
|
+
var minuteStr = minute.toString().padStart(2, '0');
|
|
39
|
+
if (hour === 12) {
|
|
40
|
+
return minute === 0 ? t('str_fm_datetime_noon') : "".concat(t('str_fm_pm'), " 12:").concat(minuteStr);
|
|
41
|
+
}
|
|
35
42
|
if (hour < 12) {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
43
|
+
if (hour === 0) {
|
|
44
|
+
return minute === 0
|
|
45
|
+
? "".concat(t('str_fm_datetime_am', { hour: 12 }))
|
|
46
|
+
: "".concat(t('str_fm_am'), " 12:").concat(minuteStr);
|
|
47
|
+
}
|
|
48
|
+
return minute === 0
|
|
49
|
+
? "".concat(t('str_fm_datetime_am', { hour: hour }))
|
|
50
|
+
: "".concat(t('str_fm_am'), " ").concat(hour, ":").concat(minuteStr);
|
|
39
51
|
}
|
|
40
|
-
return
|
|
52
|
+
return minute === 0
|
|
53
|
+
? "".concat(t('str_fm_datetime_pm', { hour: hour - 12 }))
|
|
54
|
+
: "".concat(t('str_fm_pm'), " ").concat(hour - 12, ":").concat(minuteStr);
|
|
41
55
|
}
|
|
42
56
|
// 다른 언어의 경우 기본 formatHour 함수 사용
|
|
43
|
-
return (0, exports.formatHour)(hour, currentLang);
|
|
57
|
+
return (0, exports.formatHour)(hour, minute, currentLang);
|
|
44
58
|
};
|
|
45
59
|
exports.formatTimeWithLocale = formatTimeWithLocale;
|
|
@@ -117,7 +117,7 @@ function MultilingualModal(_a) {
|
|
|
117
117
|
return react_dom_1.default.createPortal((0, jsx_runtime_1.jsxs)(react_hook_form_1.FormProvider, __assign({}, methods, { children: [(0, jsx_runtime_1.jsx)(S_ModalOverlay, { onClick: handleCancel }), (0, jsx_runtime_1.jsxs)(S_ModalWrapper, __assign({ "x-pds-name": "MultiLanguageModal", "x-pds-element-type": "panel", "x-pds-device-type": "desktop", size: size }, { children: [(0, jsx_runtime_1.jsx)(S_Header, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: t('str_multilingual_settings'), colorTheme: "sysTextPrimary", styleTheme: "headingBold" }) }), (0, jsx_runtime_1.jsxs)(S_Body, { children: [(config === null || config === void 0 ? void 0 : config.originalText) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.BodyTextGroup, { titleText: t('str_original_text'), contentText: config.originalText }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" }), (0, jsx_runtime_1.jsx)(components_2.Divider, {}), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" })] })), (_c = config === null || config === void 0 ? void 0 : config.visibleLanguages) === null || _c === void 0 ? void 0 : _c.map(function (languageCode, index) {
|
|
118
118
|
var _a, _b;
|
|
119
119
|
var isReadonly = (_a = config.readonlyLanguages) === null || _a === void 0 ? void 0 : _a.includes(languageCode);
|
|
120
|
-
return ((0, jsx_runtime_1.jsxs)(S_LanguageField, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "".concat(t(LANGUAGE_I18N_KEYS[languageCode])
|
|
120
|
+
return ((0, jsx_runtime_1.jsxs)(S_LanguageField, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "".concat(t(LANGUAGE_I18N_KEYS[languageCode])), styleTheme: "subTitleBold", colorTheme: "sysTextPrimary" }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_1.TextField, { responsiveMode: "use", multiRows: config.textFieldLineType === 'multi' ? 5 : undefined, autoMaxRows: config.textFieldLineType === 'auto' ? 5 : undefined, autoMinRows: config.textFieldLineType === 'auto' ? 1 : undefined, name: languageCode, hintText: t('str_9071'), placeholder: "Input Text", textLineType: config.textFieldLineType, state: isReadonly ? 'disabled' : 'normal' }), index < (((_b = config.visibleLanguages) === null || _b === void 0 ? void 0 : _b.length) || 0) - 1 && (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_f" })] }, "".concat(languageCode, "_field")));
|
|
121
121
|
})] }), (0, jsx_runtime_1.jsxs)(S_Footer, { children: [(0, jsx_runtime_1.jsx)(S_Left, {}), (0, jsx_runtime_1.jsxs)(S_Right, { children: [!allLangInReadonly && ((0, jsx_runtime_1.jsx)(S_Btn2Wrapper, { children: (0, jsx_runtime_1.jsx)(components_1.MainButton, { styleTheme: "secondary", text: t('str_cancel'), size: "medium", onClick: handleCancel }) })), (0, jsx_runtime_1.jsx)(components_1.MainButton, { text: allLangInReadonly ? t('str_confirm') : t('str_apply'), size: "medium", onClick: handleConfirm })] })] })] }))] })), container);
|
|
122
122
|
}
|
|
123
123
|
var S_ModalOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n height: 100vh;\n left: 0;\n position: fixed;\n top: 0;\n width: 100vw;\n\n ", "\n"], ["\n background-color: ", ";\n height: 100vh;\n left: 0;\n position: fixed;\n top: 0;\n width: 100vw;\n\n ", "\n"])), function (_a) {
|
package/package.json
CHANGED
package/release-note.md
CHANGED