pds-dev-kit-web-test 2.5.507 → 2.5.509
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/services/i18n/resources/en.json +7 -2
- package/dist/src/common/services/i18n/resources/es.json +8 -2
- package/dist/src/common/services/i18n/resources/fil.json +8 -2
- package/dist/src/common/services/i18n/resources/index.d.ts +37 -0
- package/dist/src/common/services/i18n/resources/ja.json +7 -2
- package/dist/src/common/services/i18n/resources/ko.json +10 -5
- package/dist/src/common/services/i18n/resources/zh-cn.json +7 -2
- package/dist/src/common/services/i18n/resources/zh-tw.json +7 -2
- package/dist/src/desktop/components/BasicFormGroup/BasicFormGroup.d.ts +1 -1
- package/dist/src/desktop/components/BasicFormGroup/BasicFormGroup.js +2 -2
- package/dist/src/desktop/components/Calendar/Calendar.js +42 -39
- package/dist/src/desktop/components/Calendar/DailyView.d.ts +2 -0
- package/dist/src/desktop/components/Calendar/DailyView.js +2 -2
- package/dist/src/desktop/components/Calendar/MonthlyView.js +4 -3
- package/dist/src/desktop/components/Calendar/TimeBasedScheduleItem.d.ts +3 -0
- package/dist/src/desktop/components/Calendar/TimeBasedScheduleItem.js +20 -6
- package/dist/src/desktop/components/Calendar/WeeklyView.d.ts +3 -0
- package/dist/src/desktop/components/Calendar/WeeklyView.js +8 -7
- package/dist/src/desktop/components/Calendar/calendarUtils.d.ts +1 -1
- package/dist/src/desktop/components/Calendar/calendarUtils.js +5 -5
- package/dist/src/desktop/components/Calendar/types.d.ts +2 -2
- package/package.json +1 -1
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"str_3892": "Sat",
|
|
36
36
|
"str_3893": "Sun",
|
|
37
37
|
"calendar_all_day": "All day",
|
|
38
|
-
"str_calendar_schedule_more": "more",
|
|
38
|
+
"str_calendar_schedule_more": "{{count}} more",
|
|
39
39
|
"str_calendar_today": "Today",
|
|
40
40
|
"calendar_month_1": "Jan",
|
|
41
41
|
"calendar_month_2": "Feb",
|
|
@@ -76,6 +76,11 @@
|
|
|
76
76
|
"str_9071": "Please enter the text in the appropriate language for your country.",
|
|
77
77
|
"str_original_text": "Original Text",
|
|
78
78
|
"str_apply": "Apply",
|
|
79
|
-
"str_cancel": "Cancel"
|
|
79
|
+
"str_cancel": "Cancel",
|
|
80
|
+
"str_calendar_weekly_date": "{{month}}-{{date}} {{day}}",
|
|
81
|
+
"str_fm_year": "Year",
|
|
82
|
+
"str_fm_month": "Month",
|
|
83
|
+
"str_fm_day": "Day",
|
|
84
|
+
"str_fm_week": "Week"
|
|
80
85
|
}
|
|
81
86
|
}
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"str_3892": "Sat",
|
|
36
36
|
"str_3893": "Sun",
|
|
37
37
|
"calendar_all_day": "Todo el día",
|
|
38
|
-
"str_calendar_schedule_more": "más",
|
|
38
|
+
"str_calendar_schedule_more": "{{count}} más",
|
|
39
39
|
"str_calendar_today": "Hoy",
|
|
40
40
|
"calendar_month_1": "Ene",
|
|
41
41
|
"calendar_month_2": "Feb",
|
|
@@ -75,6 +75,12 @@
|
|
|
75
75
|
"str_9071": "Por favor, ingrese el texto en el idioma apropiado para su país.",
|
|
76
76
|
"str_original_text": "Texto Original",
|
|
77
77
|
"str_apply": "Aplicar",
|
|
78
|
-
"str_cancel": "Cancelar"
|
|
78
|
+
"str_cancel": "Cancelar",
|
|
79
|
+
"calendar_date_format": "{{day}} ({{dayText}})",
|
|
80
|
+
"str_calendar_weekly_date": "{{month}}/{{date}} {{day}}",
|
|
81
|
+
"str_fm_year": "Año",
|
|
82
|
+
"str_fm_month": "Mes",
|
|
83
|
+
"str_fm_day": "Día",
|
|
84
|
+
"str_fm_week": "Principal"
|
|
79
85
|
}
|
|
80
86
|
}
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"str_3892": "Sat",
|
|
36
36
|
"str_3893": "Sun",
|
|
37
37
|
"calendar_all_day": "Buong araw",
|
|
38
|
-
"str_calendar_schedule_more": "pa",
|
|
38
|
+
"str_calendar_schedule_more": "{{count}} pa",
|
|
39
39
|
"str_calendar_today": "Ngayon",
|
|
40
40
|
"calendar_month_1": "Ene",
|
|
41
41
|
"calendar_month_2": "Peb",
|
|
@@ -75,6 +75,12 @@
|
|
|
75
75
|
"str_9071": "Mangyaring ilagay ang teksto sa naaangkop na wika para sa inyong bansa.",
|
|
76
76
|
"str_original_text": "Orihinal na Teksto",
|
|
77
77
|
"str_apply": "Apply",
|
|
78
|
-
"str_cancel": "Cancel"
|
|
78
|
+
"str_cancel": "Cancel",
|
|
79
|
+
"calendar_date_format": "{{day}} ({{dayText}})",
|
|
80
|
+
"str_calendar_weekly_date": "{{month}}/{{date}} {{day}}",
|
|
81
|
+
"str_fm_year": "Taon",
|
|
82
|
+
"str_fm_month": "Buwan",
|
|
83
|
+
"str_fm_day": "Araw",
|
|
84
|
+
"str_fm_week": "Linggo"
|
|
79
85
|
}
|
|
80
86
|
}
|
|
@@ -78,6 +78,11 @@ declare const locale: {
|
|
|
78
78
|
str_original_text: string;
|
|
79
79
|
str_apply: string;
|
|
80
80
|
str_cancel: string;
|
|
81
|
+
str_calendar_weekly_date: string;
|
|
82
|
+
str_fm_year: string;
|
|
83
|
+
str_fm_month: string;
|
|
84
|
+
str_fm_day: string;
|
|
85
|
+
str_fm_week: string;
|
|
81
86
|
};
|
|
82
87
|
};
|
|
83
88
|
readonly en: {
|
|
@@ -159,6 +164,11 @@ declare const locale: {
|
|
|
159
164
|
str_original_text: string;
|
|
160
165
|
str_apply: string;
|
|
161
166
|
str_cancel: string;
|
|
167
|
+
str_calendar_weekly_date: string;
|
|
168
|
+
str_fm_year: string;
|
|
169
|
+
str_fm_month: string;
|
|
170
|
+
str_fm_day: string;
|
|
171
|
+
str_fm_week: string;
|
|
162
172
|
};
|
|
163
173
|
};
|
|
164
174
|
readonly ja: {
|
|
@@ -240,6 +250,11 @@ declare const locale: {
|
|
|
240
250
|
str_original_text: string;
|
|
241
251
|
str_apply: string;
|
|
242
252
|
str_cancel: string;
|
|
253
|
+
str_calendar_weekly_date: string;
|
|
254
|
+
str_fm_year: string;
|
|
255
|
+
str_fm_month: string;
|
|
256
|
+
str_fm_day: string;
|
|
257
|
+
str_fm_week: string;
|
|
243
258
|
};
|
|
244
259
|
};
|
|
245
260
|
readonly es: {
|
|
@@ -320,6 +335,12 @@ declare const locale: {
|
|
|
320
335
|
str_original_text: string;
|
|
321
336
|
str_apply: string;
|
|
322
337
|
str_cancel: string;
|
|
338
|
+
calendar_date_format: string;
|
|
339
|
+
str_calendar_weekly_date: string;
|
|
340
|
+
str_fm_year: string;
|
|
341
|
+
str_fm_month: string;
|
|
342
|
+
str_fm_day: string;
|
|
343
|
+
str_fm_week: string;
|
|
323
344
|
};
|
|
324
345
|
};
|
|
325
346
|
readonly 'zh-cn': {
|
|
@@ -401,6 +422,11 @@ declare const locale: {
|
|
|
401
422
|
str_original_text: string;
|
|
402
423
|
str_apply: string;
|
|
403
424
|
str_cancel: string;
|
|
425
|
+
str_calendar_weekly_date: string;
|
|
426
|
+
str_fm_year: string;
|
|
427
|
+
str_fm_month: string;
|
|
428
|
+
str_fm_day: string;
|
|
429
|
+
str_fm_week: string;
|
|
404
430
|
};
|
|
405
431
|
};
|
|
406
432
|
readonly 'zh-tw': {
|
|
@@ -482,6 +508,11 @@ declare const locale: {
|
|
|
482
508
|
str_original_text: string;
|
|
483
509
|
str_apply: string;
|
|
484
510
|
str_cancel: string;
|
|
511
|
+
str_calendar_weekly_date: string;
|
|
512
|
+
str_fm_year: string;
|
|
513
|
+
str_fm_month: string;
|
|
514
|
+
str_fm_day: string;
|
|
515
|
+
str_fm_week: string;
|
|
485
516
|
};
|
|
486
517
|
};
|
|
487
518
|
readonly fil: {
|
|
@@ -562,6 +593,12 @@ declare const locale: {
|
|
|
562
593
|
str_original_text: string;
|
|
563
594
|
str_apply: string;
|
|
564
595
|
str_cancel: string;
|
|
596
|
+
calendar_date_format: string;
|
|
597
|
+
str_calendar_weekly_date: string;
|
|
598
|
+
str_fm_year: string;
|
|
599
|
+
str_fm_month: string;
|
|
600
|
+
str_fm_day: string;
|
|
601
|
+
str_fm_week: string;
|
|
565
602
|
};
|
|
566
603
|
};
|
|
567
604
|
};
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"str_3892": "土",
|
|
36
36
|
"str_3893": "日",
|
|
37
37
|
"calendar_all_day": "終日",
|
|
38
|
-
"str_calendar_schedule_more": "件以上",
|
|
38
|
+
"str_calendar_schedule_more": "{{count}}件以上",
|
|
39
39
|
"str_calendar_today": "今日",
|
|
40
40
|
"calendar_month_1": "1月",
|
|
41
41
|
"calendar_month_2": "2月",
|
|
@@ -76,6 +76,11 @@
|
|
|
76
76
|
"str_9071": "国に適した言語を入力してください。",
|
|
77
77
|
"str_original_text": "原文",
|
|
78
78
|
"str_apply": "適用",
|
|
79
|
-
"str_cancel": "キャンセル"
|
|
79
|
+
"str_cancel": "キャンセル",
|
|
80
|
+
"str_calendar_weekly_date": "{{month}}月{{date}}日 ({{day}})",
|
|
81
|
+
"str_fm_year": "年",
|
|
82
|
+
"str_fm_month": "月",
|
|
83
|
+
"str_fm_day": "日",
|
|
84
|
+
"str_fm_week": "週"
|
|
80
85
|
}
|
|
81
86
|
}
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"str_3892": "토",
|
|
36
36
|
"str_3893": "일",
|
|
37
37
|
"calendar_all_day": "종일",
|
|
38
|
-
"str_calendar_schedule_more": "개 더보기",
|
|
38
|
+
"str_calendar_schedule_more": "{{count}}개 더보기",
|
|
39
39
|
"str_calendar_today": "오늘",
|
|
40
40
|
"calendar_month_1": "1월",
|
|
41
41
|
"calendar_month_2": "2월",
|
|
@@ -54,12 +54,12 @@
|
|
|
54
54
|
"calendar_duration_hour": "시간",
|
|
55
55
|
"calendar_duration_hours": "시간",
|
|
56
56
|
"str_fm_datetime_noon": "정오",
|
|
57
|
-
"str_calendar_daily_header": "{{year}}년 {{month}} {{day}}일",
|
|
57
|
+
"str_calendar_daily_header": "{{year}}년 {{month}}월 {{day}}일",
|
|
58
58
|
"calendar_header_weekly_same_month": "{{month}} {{startDay}}일 - {{endDay}}일",
|
|
59
59
|
"calendar_header_weekly_diff_month": "{{startMonth}} {{startDay}}일 - {{endMonth}} {{endDay}}일",
|
|
60
60
|
"str_calendar_yearly_header": "{{year}}년",
|
|
61
|
-
"str_calendar_monthly_header": "{{year}}년 {{month}}",
|
|
62
|
-
"str_calendar_weekly_header": "{{year}}년 {{month}}",
|
|
61
|
+
"str_calendar_monthly_header": "{{year}}년 {{month}}월",
|
|
62
|
+
"str_calendar_weekly_header": "{{year}}년 {{month}}월",
|
|
63
63
|
"calendar_view_monthly": "월간",
|
|
64
64
|
"calendar_view_weekly": "주간",
|
|
65
65
|
"calendar_view_daily": "일간",
|
|
@@ -76,6 +76,11 @@
|
|
|
76
76
|
"str_9071": "국가에 맞는 언어를 입력해 주세요.",
|
|
77
77
|
"str_original_text": "원문",
|
|
78
78
|
"str_apply": "적용",
|
|
79
|
-
"str_cancel": "취소"
|
|
79
|
+
"str_cancel": "취소",
|
|
80
|
+
"str_calendar_weekly_date": "{{month}}월 {{date}}일 ({{day}})",
|
|
81
|
+
"str_fm_year": "년",
|
|
82
|
+
"str_fm_month": "월",
|
|
83
|
+
"str_fm_day": "일",
|
|
84
|
+
"str_fm_week": "주"
|
|
80
85
|
}
|
|
81
86
|
}
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"str_3892": "Sat",
|
|
36
36
|
"str_3893": "Sun",
|
|
37
37
|
"calendar_all_day": "全天",
|
|
38
|
-
"str_calendar_schedule_more": "更多",
|
|
38
|
+
"str_calendar_schedule_more": "{{count}} 更多",
|
|
39
39
|
"str_calendar_today": "今天",
|
|
40
40
|
"calendar_month_1": "1月",
|
|
41
41
|
"calendar_month_2": "2月",
|
|
@@ -76,6 +76,11 @@
|
|
|
76
76
|
"str_9071": "请输入适合您国家的语言。",
|
|
77
77
|
"str_original_text": "原文",
|
|
78
78
|
"str_apply": "应用",
|
|
79
|
-
"str_cancel": "取消"
|
|
79
|
+
"str_cancel": "取消",
|
|
80
|
+
"str_calendar_weekly_date": "{{month}}月{{date}}日 ({{day}})",
|
|
81
|
+
"str_fm_year": "年份",
|
|
82
|
+
"str_fm_month": "月",
|
|
83
|
+
"str_fm_day": "日",
|
|
84
|
+
"str_fm_week": "周"
|
|
80
85
|
}
|
|
81
86
|
}
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"str_3892": "Sat",
|
|
36
36
|
"str_3893": "Sun",
|
|
37
37
|
"calendar_all_day": "全天",
|
|
38
|
-
"str_calendar_schedule_more": "更多",
|
|
38
|
+
"str_calendar_schedule_more": "{{count}} 更多",
|
|
39
39
|
"str_calendar_today": "今天",
|
|
40
40
|
"calendar_month_1": "1月",
|
|
41
41
|
"calendar_month_2": "2月",
|
|
@@ -76,6 +76,11 @@
|
|
|
76
76
|
"str_9071": "請輸入適合您國家的語言。",
|
|
77
77
|
"str_original_text": "原文",
|
|
78
78
|
"str_apply": "應用",
|
|
79
|
-
"str_cancel": "取消"
|
|
79
|
+
"str_cancel": "取消",
|
|
80
|
+
"str_calendar_weekly_date": "{{month}}月{{date}}日 ({{day}})",
|
|
81
|
+
"str_fm_year": "年份",
|
|
82
|
+
"str_fm_month": "月",
|
|
83
|
+
"str_fm_day": "日",
|
|
84
|
+
"str_fm_week": "週"
|
|
80
85
|
}
|
|
81
86
|
}
|
|
@@ -12,5 +12,5 @@ type BasicFormGroupProps = {
|
|
|
12
12
|
multilingualBtnState?: 'normal' | 'disabled';
|
|
13
13
|
multilingualConfig?: MultilingualConfig;
|
|
14
14
|
};
|
|
15
|
-
declare const _default: import("react").ForwardRefExoticComponent<BasicFormGroupProps & import("react").RefAttributes<
|
|
15
|
+
declare const _default: import("react").ForwardRefExoticComponent<BasicFormGroupProps & import("react").RefAttributes<unknown>>;
|
|
16
16
|
export default _default;
|
|
@@ -24,7 +24,7 @@ var components_1 = require("../../components");
|
|
|
24
24
|
var MultilingualModal_1 = __importDefault(require("../../panels/MultilingualModal"));
|
|
25
25
|
var components_2 = require("../../../hybrid/components");
|
|
26
26
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
27
|
-
function BasicFormGroup(_a
|
|
27
|
+
function BasicFormGroup(_a) {
|
|
28
28
|
var _b = _a.titleStyleTheme, titleStyleTheme = _b === void 0 ? 'subTitleBold' : _b, _c = _a.headerSize, headerSize = _c === void 0 ? 'rlarge' : _c, titleText = _a.titleText, descText = _a.descText, captionText = _a.captionText, inputForm = _a.inputForm, _d = _a.titleRequirementMode, titleRequirementMode = _d === void 0 ? 'none' : _d, _e = _a.multilingualBtnMode, multilingualBtnMode = _e === void 0 ? 'none' : _e, _f = _a.multilingualBtnState, multilingualBtnState = _f === void 0 ? 'normal' : _f, multilingualConfig = _a.multilingualConfig;
|
|
29
29
|
var _g = (0, react_1.useState)(false), isMultiLanguageModalOpen = _g[0], setIsMultiLanguageModalOpen = _g[1];
|
|
30
30
|
var _h = (0, react_1.useState)(false), hasMultilingualValues = _h[0], setHasMultilingualValues = _h[1];
|
|
@@ -69,7 +69,7 @@ function BasicFormGroup(_a, ref) {
|
|
|
69
69
|
};
|
|
70
70
|
return ((0, jsx_runtime_1.jsxs)("div", __assign({ "x-pds-name": "BasicFormGroup", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [titleText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(S_TitleTextWrapper, __assign({ "$headerSize": headerSize }, { children: [(0, jsx_runtime_1.jsxs)(S_TitleText, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: titleText, styleTheme: titleStyleTheme, colorTheme: "sysTextPrimary" }), titleRequirementMode === 'use' && ((0, jsx_runtime_1.jsx)(S_IconWrapper, { children: (0, jsx_runtime_1.jsx)(components_2.Icon, { iconName: "ic_requirement", size: 16, fillType: "line", colorKey: "ui_cpnt_icon_sys_error_01" }) }))] }), multilingualBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(S_MultilingualButtonWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.IconButton, { iconFillType: "line", iconName: "ic_translate", baseSize: "small", shapeType: "round", baseColorKey: "ui_cpnt_button_fill_base_default", iconColorKey: hasMultilingualValues
|
|
71
71
|
? 'ui_cpnt_button_icon_primary'
|
|
72
|
-
: 'ui_cpnt_button_icon_disabled', state: multilingualBtnState, onClick: multilingualBtnState === 'normal' ? handleLanguageButtonClick : undefined }) }))] })), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" })] })), multilingualBtnMode === 'use' && multilingualConfig && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", {
|
|
72
|
+
: 'ui_cpnt_button_icon_disabled', state: multilingualBtnState, onClick: multilingualBtnState === 'normal' ? handleLanguageButtonClick : undefined }) }))] })), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" })] })), multilingualBtnMode === 'use' && multilingualConfig && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", id: "hiddenInput_".concat(multilingualConfig.hiddenInputId), name: multilingualConfig.hiddenInputId, value: hiddenInputValue }), (0, jsx_runtime_1.jsx)(MultilingualModal_1.default, { isOpen: isMultiLanguageModalOpen, onClose: handleLanguageModalClose, config: multilingualConfig, onHiddenInputUpdate: handleHiddenInputUpdate })] })), descText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: descText, styleTheme: "caption1Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_d" })] })), inputForm, captionText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.Spacing, { size: "spacing_b" }), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: captionText, styleTheme: "caption1Regular", colorTheme: "sysTextPrimary" })] }))] })));
|
|
73
73
|
}
|
|
74
74
|
var S_TitleTextWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: ", ";\n"], ["\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: ", ";\n"])), function (_a) {
|
|
75
75
|
var $headerSize = _a.$headerSize;
|
|
@@ -43,25 +43,45 @@ var ScheduleItem_1 = require("./ScheduleItem");
|
|
|
43
43
|
var WeeklyView_1 = require("./WeeklyView");
|
|
44
44
|
var YearlyView_1 = require("./YearlyView");
|
|
45
45
|
var Calendar = function (_a) {
|
|
46
|
-
var _b
|
|
46
|
+
var _b;
|
|
47
|
+
var _c = _a.defaultViewType, defaultViewType = _c === void 0 ? 'MONTHLY' : _c, _d = _a.viewTypes, viewTypes = _d === void 0 ? ['MONTHLY', 'WEEKLY', 'DAILY', 'YEARLY'] : _d, _e = _a.displayAllDayScheduleMode, displayAllDayScheduleMode = _e === void 0 ? 'use' : _e, _f = _a.startOfWeek, startOfWeek = _f === void 0 ? 'sunday' : _f, _g = _a.todayBtnMode, todayBtnMode = _g === void 0 ? 'use' : _g, _h = _a.schedules, schedules = _h === void 0 ? [] : _h, config = _a.config, onActionDispatch = _a.onActionDispatch;
|
|
48
|
+
// 다국어 키를 CalendarViewType으로 매핑하는 함수
|
|
49
|
+
var mapI18nKeyToViewType = function (key) {
|
|
50
|
+
switch (key) {
|
|
51
|
+
case 'str_fm_month':
|
|
52
|
+
return 'MONTHLY';
|
|
53
|
+
case 'str_fm_week':
|
|
54
|
+
return 'WEEKLY';
|
|
55
|
+
case 'str_fm_day':
|
|
56
|
+
return 'DAILY';
|
|
57
|
+
case 'str_fm_year':
|
|
58
|
+
return 'YEARLY';
|
|
59
|
+
default:
|
|
60
|
+
return key;
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
// 다국어 키를 받아서 내부적으로 매핑
|
|
64
|
+
var actualDefaultViewType = mapI18nKeyToViewType(defaultViewType);
|
|
65
|
+
var actualViewTypes = viewTypes.map(mapI18nKeyToViewType);
|
|
47
66
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
48
|
-
var
|
|
49
|
-
var
|
|
50
|
-
var
|
|
51
|
-
var
|
|
52
|
-
var
|
|
53
|
-
var
|
|
54
|
-
var
|
|
55
|
-
var
|
|
56
|
-
var
|
|
57
|
-
var
|
|
67
|
+
var _j = (0, react_1.useState)(actualDefaultViewType), currentViewType = _j[0], setCurrentViewType = _j[1];
|
|
68
|
+
var _k = (0, react_1.useState)(new Date()), selectedDate = _k[0], setSelectedDate = _k[1];
|
|
69
|
+
var _l = (0, react_1.useState)(null), dragStartDate = _l[0], setDragStartDate = _l[1];
|
|
70
|
+
var _m = (0, react_1.useState)(null), dragEndDate = _m[0], setDragEndDate = _m[1];
|
|
71
|
+
var _o = (0, react_1.useState)(false), isDragging = _o[0], setIsDragging = _o[1];
|
|
72
|
+
var _p = (0, react_1.useState)(null), draggedSchedule = _p[0], setDraggedSchedule = _p[1];
|
|
73
|
+
var _q = (0, react_1.useState)(null), isDragOverDate = _q[0], setIsDragOverDate = _q[1];
|
|
74
|
+
var _r = (0, react_1.useState)([]), selectedSchedules = _r[0], setSelectedSchedules = _r[1];
|
|
75
|
+
var _s = (0, react_1.useState)([]), selectedDates = _s[0], setSelectedDates = _s[1];
|
|
76
|
+
var _t = (0, react_1.useState)(null), lastSelectedDate = _t[0], setLastSelectedDate = _t[1];
|
|
58
77
|
// 오늘 날짜인지 확인
|
|
59
78
|
var today = new Date();
|
|
60
79
|
var isToday = function (date) { return dateHelper_1.DateHelper.isSameDay(date, today); };
|
|
80
|
+
var isDraggable = !!((_b = config === null || config === void 0 ? void 0 : config.SCHEDULE) === null || _b === void 0 ? void 0 : _b.DRAG);
|
|
61
81
|
// 과거 날짜인지 확인
|
|
62
82
|
var isPastDate = (0, react_1.useCallback)(function (date) { return dateHelper_1.DateHelper.isBefore(date, today) && !dateHelper_1.DateHelper.isSameDay(date, today); }, [today]);
|
|
63
83
|
// 뷰 타입에 따른 시작일과 종료일 계산
|
|
64
|
-
var
|
|
84
|
+
var _u = (0, calendarUtils_1.calculateDateRange)(currentViewType, selectedDate), startDate = _u.startDate, endDate = _u.endDate;
|
|
65
85
|
// 뷰 타입 변경 처리
|
|
66
86
|
var handleViewTypeChange = (0, react_1.useCallback)(function (option) {
|
|
67
87
|
var newViewType = option.value;
|
|
@@ -277,33 +297,19 @@ var Calendar = function (_a) {
|
|
|
277
297
|
var getDayTextByDate = function (date) {
|
|
278
298
|
return defaultDayTexts[date.getDay()];
|
|
279
299
|
};
|
|
280
|
-
var monthNames = (0, react_1.useMemo)(function () { return [
|
|
281
|
-
t('calendar_month_1'),
|
|
282
|
-
t('calendar_month_2'),
|
|
283
|
-
t('calendar_month_3'),
|
|
284
|
-
t('calendar_month_4'),
|
|
285
|
-
t('calendar_month_5'),
|
|
286
|
-
t('calendar_month_6'),
|
|
287
|
-
t('calendar_month_7'),
|
|
288
|
-
t('calendar_month_8'),
|
|
289
|
-
t('calendar_month_9'),
|
|
290
|
-
t('calendar_month_10'),
|
|
291
|
-
t('calendar_month_11'),
|
|
292
|
-
t('calendar_month_12')
|
|
293
|
-
]; }, [t]);
|
|
294
300
|
// 뷰 타입을 위한 드롭다운 옵션 생성
|
|
295
301
|
var viewTypeOptions = (0, react_1.useMemo)(function () {
|
|
296
302
|
var viewTypeTextMap = {
|
|
297
|
-
MONTHLY: t('
|
|
298
|
-
WEEKLY: t('
|
|
299
|
-
DAILY: t('
|
|
300
|
-
YEARLY: t('
|
|
303
|
+
MONTHLY: t('str_fm_month'),
|
|
304
|
+
WEEKLY: t('str_fm_week'),
|
|
305
|
+
DAILY: t('str_fm_day'),
|
|
306
|
+
YEARLY: t('str_fm_year')
|
|
301
307
|
};
|
|
302
|
-
return
|
|
308
|
+
return actualViewTypes.map(function (viewType) { return ({
|
|
303
309
|
text: viewTypeTextMap[viewType] || viewType,
|
|
304
310
|
value: viewType
|
|
305
311
|
}); });
|
|
306
|
-
}, [
|
|
312
|
+
}, [actualViewTypes, t]);
|
|
307
313
|
// 특정 월의 캘린더 날짜 생성 (연간 보기용)
|
|
308
314
|
var getMonthDates = (0, react_1.useCallback)(function (year, month) {
|
|
309
315
|
var monthDate = new Date(year, month, 1);
|
|
@@ -359,31 +365,28 @@ var Calendar = function (_a) {
|
|
|
359
365
|
}, [onActionDispatch, calendarUtils_1.calculateDateRange]);
|
|
360
366
|
// 다중 일자 지원을 포함한 이벤트 아이템 렌더링
|
|
361
367
|
var renderScheduleItem = function (schedule, extraProps) {
|
|
362
|
-
var _a;
|
|
363
368
|
if (extraProps === void 0) { extraProps = {}; }
|
|
364
369
|
// isAllDay 계산
|
|
365
370
|
var isAllDay = (0, calendarUtils_1.calculateIsAllDay)(new Date(schedule.startDate), new Date(schedule.endDate));
|
|
366
371
|
var isSelected = selectedSchedules.some(function (s) { return s.id === schedule.id; });
|
|
367
|
-
var isDraggable = !!((_a = config === null || config === void 0 ? void 0 : config.SCHEDULE) === null || _a === void 0 ? void 0 : _a.DRAG);
|
|
368
372
|
return ((0, jsx_runtime_1.jsx)(ScheduleItem_1.ScheduleItem, { schedule: schedule, extraProps: extraProps, onDragStart: handleScheduleDragStart, onDragEnd: handleScheduleDragEnd, onClick: handleScheduleClick, isSelected: isSelected, isAllDay: isAllDay, isDraggable: isDraggable }));
|
|
369
373
|
};
|
|
370
374
|
// 뷰 타입에 따른 캘린더 콘텐츠 렌더링
|
|
371
375
|
var renderCalendarContent = function () {
|
|
372
|
-
var _a;
|
|
373
376
|
switch (currentViewType) {
|
|
374
377
|
case 'MONTHLY':
|
|
375
|
-
return ((0, jsx_runtime_1.jsx)(MonthlyView_1.MonthlyView, { getDayTextByDate: getDayTextByDate, startOfWeek: startOfWeek, selectedDate: selectedDate, selectedDates: selectedDates, dragStartDate: dragStartDate, selectedSchedules: selectedSchedules, dragEndDate: dragEndDate, isDragOverDate: isDragOverDate, schedules: schedules, getSchedulesForDate: getSchedulesForDate, isToday: isToday, isPastDate: isPastDate, handleDateClick: handleDateClick, handleScheduleClick: handleScheduleClick, handleMouseUp: handleMouseUp, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop, renderScheduleItem: renderScheduleItem, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, isDraggable:
|
|
378
|
+
return ((0, jsx_runtime_1.jsx)(MonthlyView_1.MonthlyView, { getDayTextByDate: getDayTextByDate, startOfWeek: startOfWeek, selectedDate: selectedDate, selectedDates: selectedDates, dragStartDate: dragStartDate, selectedSchedules: selectedSchedules, dragEndDate: dragEndDate, isDragOverDate: isDragOverDate, schedules: schedules, getSchedulesForDate: getSchedulesForDate, isToday: isToday, isPastDate: isPastDate, handleDateClick: handleDateClick, handleScheduleClick: handleScheduleClick, handleMouseUp: handleMouseUp, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop, renderScheduleItem: renderScheduleItem, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, isDraggable: isDraggable, onSwitchToWeeklyView: handleSwitchToWeeklyView }));
|
|
376
379
|
case 'WEEKLY':
|
|
377
|
-
return ((0, jsx_runtime_1.jsx)(WeeklyView_1.WeeklyView, { selectedDate: selectedDate, startOfWeek: startOfWeek, getDayTextByDate: getDayTextByDate, defaultViewType: currentViewType, displayAllDayScheduleMode: displayAllDayScheduleMode, getSchedulesForDate: getSchedulesForDate, isToday: isToday, isDragOverDate: isDragOverDate, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop, handleDateClick: handleDateClick, renderScheduleItem: renderScheduleItem, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd }));
|
|
380
|
+
return ((0, jsx_runtime_1.jsx)(WeeklyView_1.WeeklyView, { selectedDate: selectedDate, selectedSchedules: selectedSchedules, startOfWeek: startOfWeek, getDayTextByDate: getDayTextByDate, defaultViewType: currentViewType, displayAllDayScheduleMode: displayAllDayScheduleMode, getSchedulesForDate: getSchedulesForDate, isToday: isToday, isDragOverDate: isDragOverDate, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop, handleDateClick: handleDateClick, handleScheduleClick: handleScheduleClick, renderScheduleItem: renderScheduleItem, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, isDraggable: isDraggable }));
|
|
378
381
|
case 'DAILY':
|
|
379
|
-
return ((0, jsx_runtime_1.jsx)(DailyView_1.DailyView, { selectedDate: selectedDate, displayAllDayScheduleMode: displayAllDayScheduleMode, getSchedulesForDate: getSchedulesForDate, renderScheduleItem: renderScheduleItem, handleDateClick: handleDateClick, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop, isDragOverDate: isDragOverDate, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd }));
|
|
382
|
+
return ((0, jsx_runtime_1.jsx)(DailyView_1.DailyView, { selectedDate: selectedDate, selectedSchedules: selectedSchedules, displayAllDayScheduleMode: displayAllDayScheduleMode, getSchedulesForDate: getSchedulesForDate, renderScheduleItem: renderScheduleItem, handleDateClick: handleDateClick, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop, isDragOverDate: isDragOverDate, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, handleScheduleClick: handleScheduleClick }));
|
|
380
383
|
case 'YEARLY':
|
|
381
384
|
return ((0, jsx_runtime_1.jsx)(YearlyView_1.YearlyView, { selectedDate: selectedDate, getMonthDates: getMonthDates, getDayTextByDate: getDayTextByDate, startOfWeek: startOfWeek, isToday: isToday, handleDateClick: handleDateClick, getSchedulesForDate: getSchedulesForDate }));
|
|
382
385
|
default:
|
|
383
386
|
return null;
|
|
384
387
|
}
|
|
385
388
|
};
|
|
386
|
-
return ((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
|
|
389
|
+
return ((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_NavigationButton, __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_NavigationButton, __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() })] })));
|
|
387
390
|
};
|
|
388
391
|
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"])));
|
|
389
392
|
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"])));
|
|
@@ -2,6 +2,7 @@ import type { Schedule, displayAllDayScheduleMode } from './types';
|
|
|
2
2
|
import type { FC, MouseEvent, DragEvent } from 'react';
|
|
3
3
|
interface DailyViewProps {
|
|
4
4
|
selectedDate: Date;
|
|
5
|
+
selectedSchedules: Schedule[];
|
|
5
6
|
displayAllDayScheduleMode?: displayAllDayScheduleMode;
|
|
6
7
|
getSchedulesForDate: (date: Date) => Schedule[];
|
|
7
8
|
isDragOverDate: Date | null;
|
|
@@ -12,6 +13,7 @@ interface DailyViewProps {
|
|
|
12
13
|
renderScheduleItem: (schedule: Schedule, extraProps?: any) => React.ReactNode;
|
|
13
14
|
handleScheduleDragStart: (schedule: Schedule, e: DragEvent) => void;
|
|
14
15
|
handleScheduleDragEnd: () => void;
|
|
16
|
+
handleScheduleClick: (schedule: Schedule, e?: React.MouseEvent) => void;
|
|
15
17
|
}
|
|
16
18
|
export declare const DailyView: FC<DailyViewProps>;
|
|
17
19
|
export {};
|
|
@@ -28,7 +28,7 @@ var CurrentTimeIndicator_1 = require("./CurrentTimeIndicator");
|
|
|
28
28
|
var TimeBasedScheduleItem_1 = require("./TimeBasedScheduleItem");
|
|
29
29
|
var timeFormatUtils_1 = require("./timeFormatUtils");
|
|
30
30
|
var DailyView = function (_a) {
|
|
31
|
-
var selectedDate = _a.selectedDate, _b = _a.displayAllDayScheduleMode, displayAllDayScheduleMode = _b === void 0 ? 'use' : _b, getSchedulesForDate = _a.getSchedulesForDate, isDragOverDate = _a.isDragOverDate, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop, handleDateClick = _a.handleDateClick, renderScheduleItem = _a.renderScheduleItem, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd;
|
|
31
|
+
var selectedDate = _a.selectedDate, selectedSchedules = _a.selectedSchedules, _b = _a.displayAllDayScheduleMode, displayAllDayScheduleMode = _b === void 0 ? 'use' : _b, getSchedulesForDate = _a.getSchedulesForDate, isDragOverDate = _a.isDragOverDate, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop, handleDateClick = _a.handleDateClick, renderScheduleItem = _a.renderScheduleItem, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd, handleScheduleClick = _a.handleScheduleClick;
|
|
32
32
|
var i18n = (0, react_i18next_1.useTranslation)().i18n;
|
|
33
33
|
var currentDateForDaily = [selectedDate][0];
|
|
34
34
|
var HOURS_IN_DAY = Array.from({ length: 24 }, function (_, i) { return i; });
|
|
@@ -40,7 +40,7 @@ var DailyView = function (_a) {
|
|
|
40
40
|
return ((0, jsx_runtime_1.jsxs)(S_DailyContainer, { children: [(0, jsx_runtime_1.jsx)(AllDaySchedulesSection_1.AllDaySchedulesSection, { calendarDates: [selectedDate], displayAllDayScheduleMode: displayAllDayScheduleMode, getSchedulesForDate: getSchedulesForDate, renderScheduleItem: renderScheduleItem, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop }), (0, jsx_runtime_1.jsxs)(S_DailyTimeGrid, { children: [(0, jsx_runtime_1.jsx)(CurrentTimeIndicator_1.CurrentTimeIndicator, { show: true, leftOffset: "80px" }), HOURS_IN_DAY.map(function (hour) {
|
|
41
41
|
var timeSlotDate = getTimeSlotDate(currentDateForDaily, hour);
|
|
42
42
|
var isDragOver = (isDragOverDate === null || isDragOverDate === void 0 ? void 0 : isDragOverDate.getTime()) === timeSlotDate.getTime();
|
|
43
|
-
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), handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd })) }))] }, hour));
|
|
43
|
+
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));
|
|
44
44
|
})] })] }));
|
|
45
45
|
};
|
|
46
46
|
exports.DailyView = DailyView;
|
|
@@ -23,6 +23,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
23
23
|
var react_1 = require("react");
|
|
24
24
|
var react_i18next_1 = require("react-i18next");
|
|
25
25
|
var dateHelper_1 = require("../../../common/utils/dateHelper");
|
|
26
|
+
var components_1 = require("../../../hybrid/components");
|
|
26
27
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
27
28
|
var TextLabel_1 = require("../TextLabel");
|
|
28
29
|
var calendarUtils_1 = require("./calendarUtils");
|
|
@@ -263,10 +264,10 @@ var MonthlyView = function (_a) {
|
|
|
263
264
|
onDragStart: function (e) { return handleScheduleDragStart === null || handleScheduleDragStart === void 0 ? void 0 : handleScheduleDragStart(schedule, e); },
|
|
264
265
|
onDragEnd: function () { return handleScheduleDragEnd === null || handleScheduleDragEnd === void 0 ? void 0 : handleScheduleDragEnd(); }
|
|
265
266
|
});
|
|
266
|
-
}), hiddenSchedulesCount > 0 && ((0, jsx_runtime_1.
|
|
267
|
+
}), hiddenSchedulesCount > 0 && ((0, jsx_runtime_1.jsxs)(S_MoreSchedulesButton, __assign({ onClick: function (e) {
|
|
267
268
|
e.stopPropagation();
|
|
268
269
|
onSwitchToWeeklyView === null || onSwitchToWeeklyView === void 0 ? void 0 : onSwitchToWeeklyView(date);
|
|
269
|
-
} }, { children: (0, jsx_runtime_1.jsx)(
|
|
270
|
+
} }, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: t('str_calendar_schedule_more', { count: hiddenSchedulesCount }), styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b", spacingType: "width" })] })))] }))] }), index));
|
|
270
271
|
}), (0, jsx_runtime_1.jsx)(MultiWeekSchedulesLayer_1.MultiWeekSchedulesLayer, { multiWeekSchedules: getMultiWeekSchedules, selectedSchedules: selectedSchedules, handleScheduleClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd, isDraggable: isDraggable })] })));
|
|
271
272
|
};
|
|
272
273
|
exports.MonthlyView = MonthlyView;
|
|
@@ -300,7 +301,7 @@ var S_SchedulesContainer = styled_components_1.default.div(templateObject_4 || (
|
|
|
300
301
|
var _b = _a.$multiWeekSchedulesCount, $multiWeekSchedulesCount = _b === void 0 ? 0 : _b;
|
|
301
302
|
return $multiWeekSchedulesCount * 28;
|
|
302
303
|
});
|
|
303
|
-
var S_MoreSchedulesButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background: none;\n border: none;\n border-radius: 2px;\n color: ", ";\n cursor: pointer;\n
|
|
304
|
+
var S_MoreSchedulesButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n background: none;\n border: none;\n border-radius: 2px;\n color: ", ";\n cursor: pointer;\n display: flex;\n outline: inherit;\n padding-top: 4px;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"], ["\n align-items: center;\n background: none;\n border: none;\n border-radius: 2px;\n color: ", ";\n cursor: pointer;\n display: flex;\n outline: inherit;\n padding-top: 4px;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
304
305
|
var theme = _a.theme;
|
|
305
306
|
return theme.ui_cpnt_textlabel_sys_brandprimary;
|
|
306
307
|
}, function (_a) {
|
|
@@ -2,6 +2,9 @@ import type { Schedule } from './types';
|
|
|
2
2
|
import type React from 'react';
|
|
3
3
|
interface TimeBasedScheduleItemProps {
|
|
4
4
|
schedules: Schedule[];
|
|
5
|
+
selectedSchedules: Schedule[];
|
|
6
|
+
isDraggable?: boolean;
|
|
7
|
+
onClick?: (schedule: Schedule, e?: React.MouseEvent) => void;
|
|
5
8
|
handleScheduleDragStart: (schedule: Schedule, e: React.DragEvent) => void;
|
|
6
9
|
handleScheduleDragEnd: () => void;
|
|
7
10
|
}
|
|
@@ -36,8 +36,8 @@ var TextLabel_1 = require("../TextLabel");
|
|
|
36
36
|
var calendarUtils_1 = require("./calendarUtils");
|
|
37
37
|
var timeFormatUtils_1 = require("./timeFormatUtils");
|
|
38
38
|
var TimeBasedScheduleItem = function (_a) {
|
|
39
|
-
var schedules = _a.schedules, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd;
|
|
40
|
-
var
|
|
39
|
+
var schedules = _a.schedules, selectedSchedules = _a.selectedSchedules, _b = _a.isDraggable, isDraggable = _b === void 0 ? false : _b, onClick = _a.onClick, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd;
|
|
40
|
+
var _c = (0, react_i18next_1.useTranslation)(), i18n = _c.i18n, t = _c.t;
|
|
41
41
|
// 시간별 스케줄 계산 및 grid 위치 할당
|
|
42
42
|
var timedSchedulesWithGrid = (0, react_1.useMemo)(function () {
|
|
43
43
|
var filteredSchedules = schedules.filter(function (schedule) { return !(0, calendarUtils_1.calculateIsAllDay)(new Date(schedule.startDate), new Date(schedule.endDate)); });
|
|
@@ -119,6 +119,7 @@ var TimeBasedScheduleItem = function (_a) {
|
|
|
119
119
|
return schedulesWithGrid;
|
|
120
120
|
}, [schedules]);
|
|
121
121
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: timedSchedulesWithGrid.map(function (schedule) {
|
|
122
|
+
var isSelected = selectedSchedules.some(function (s) { return s.id === (schedule === null || schedule === void 0 ? void 0 : schedule.id); });
|
|
122
123
|
var startDate = new Date(schedule.startDate);
|
|
123
124
|
var endDate = new Date(schedule.endDate);
|
|
124
125
|
// 시간을 UTC에서 로컬 시간으로 변환
|
|
@@ -138,19 +139,26 @@ var TimeBasedScheduleItem = function (_a) {
|
|
|
138
139
|
// 픽셀 단위로 변환 (각 시간은 60px)
|
|
139
140
|
var top = (startMinutes / 60) * 60;
|
|
140
141
|
var height = (duration / 60) * 60;
|
|
141
|
-
return ((0, jsx_runtime_1.jsx)(S_ScheduleItem, __assign({ "$top": top, "$height": height, "$gridColumn": schedule.gridColumn, "$totalColumns": schedule.totalColumns,
|
|
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
|
+
e.stopPropagation();
|
|
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), " (").concat(durationText, ")"), ellipsisMode: "use", singleLineMode: "use" }) }), (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" }) })] }) }), schedule.id));
|
|
142
146
|
}) }));
|
|
143
147
|
};
|
|
144
148
|
exports.TimeBasedScheduleItem = TimeBasedScheduleItem;
|
|
145
|
-
var S_ScheduleItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n border: 1px solid ", ";\n border-left: 2px solid ", ";\n border-radius: 4px;\n cursor:
|
|
146
|
-
|
|
147
|
-
|
|
149
|
+
var S_ScheduleItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n border: 1px solid ", ";\n border-left: 2px solid ", ";\n border-radius: 4px;\n cursor: ", ";\n height: ", "px;\n left: ", ";\n overflow: hidden;\n position: absolute;\n top: ", "px;\n width: ", ";\n z-index: 9;\n\n &:active {\n background: ", ";\n cursor: ", ";\n }\n"], ["\n background: ", ";\n border: 1px solid ", ";\n border-left: 2px solid ", ";\n border-radius: 4px;\n cursor: ", ";\n height: ", "px;\n left: ", ";\n overflow: hidden;\n position: absolute;\n top: ", "px;\n width: ", ";\n z-index: 9;\n\n &:active {\n background: ", ";\n cursor: ", ";\n }\n"])), function (props) {
|
|
150
|
+
if (props.$isSelected)
|
|
151
|
+
return props.theme.ui_cpnt_sheet_base_06;
|
|
152
|
+
return props.theme.ui_cpnt_sheet_base;
|
|
148
153
|
}, function (_a) {
|
|
149
154
|
var theme = _a.theme;
|
|
150
155
|
return theme.ui_temp_white;
|
|
151
156
|
}, function (_a) {
|
|
152
157
|
var theme = _a.theme;
|
|
153
158
|
return theme.ui_temp_grey_02;
|
|
159
|
+
}, function (_a) {
|
|
160
|
+
var $isDraggable = _a.$isDraggable;
|
|
161
|
+
return ($isDraggable ? 'grab' : 'default');
|
|
154
162
|
}, function (_a) {
|
|
155
163
|
var $height = _a.$height;
|
|
156
164
|
return $height - 2;
|
|
@@ -163,6 +171,12 @@ var S_ScheduleItem = styled_components_1.default.div(templateObject_1 || (templa
|
|
|
163
171
|
}, function (_a) {
|
|
164
172
|
var $totalColumns = _a.$totalColumns;
|
|
165
173
|
return "calc(100% / ".concat($totalColumns, ")");
|
|
174
|
+
}, function (_a) {
|
|
175
|
+
var theme = _a.theme;
|
|
176
|
+
return theme.ui_cpnt_sheet_base_06;
|
|
177
|
+
}, function (_a) {
|
|
178
|
+
var $isDraggable = _a.$isDraggable;
|
|
179
|
+
return ($isDraggable ? 'grabbing' : 'default');
|
|
166
180
|
});
|
|
167
181
|
var S_ScheduleContent = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n padding: 4px 6px;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n padding: 4px 6px;\n"])));
|
|
168
182
|
var S_ScheduleTitle = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-bottom: 2px;\n"], ["\n margin-bottom: 2px;\n"])));
|
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import type { Schedule, displayAllDayScheduleMode } from './types';
|
|
3
3
|
interface WeeklyViewProps {
|
|
4
4
|
selectedDate: Date;
|
|
5
|
+
selectedSchedules: Schedule[];
|
|
5
6
|
startOfWeek: 'sunday' | 'monday';
|
|
6
7
|
getDayTextByDate: (date: Date) => string;
|
|
7
8
|
defaultViewType: string;
|
|
@@ -16,6 +17,8 @@ interface WeeklyViewProps {
|
|
|
16
17
|
renderScheduleItem: (schedule: Schedule, extraProps?: any) => React.ReactNode;
|
|
17
18
|
handleScheduleDragStart: (schedule: Schedule, e: React.DragEvent) => void;
|
|
18
19
|
handleScheduleDragEnd: () => void;
|
|
20
|
+
isDraggable: boolean;
|
|
21
|
+
handleScheduleClick: (schedule: Schedule, e?: React.MouseEvent) => void;
|
|
19
22
|
}
|
|
20
23
|
export declare const WeeklyView: React.FC<WeeklyViewProps>;
|
|
21
24
|
export {};
|
|
@@ -30,7 +30,7 @@ var CurrentTimeIndicator_1 = require("./CurrentTimeIndicator");
|
|
|
30
30
|
var TimeBasedScheduleItem_1 = require("./TimeBasedScheduleItem");
|
|
31
31
|
var timeFormatUtils_1 = require("./timeFormatUtils");
|
|
32
32
|
var WeeklyView = function (_a) {
|
|
33
|
-
var selectedDate = _a.selectedDate, startOfWeek = _a.startOfWeek, getDayTextByDate = _a.getDayTextByDate, defaultViewType = _a.defaultViewType, _b = _a.displayAllDayScheduleMode, displayAllDayScheduleMode = _b === void 0 ? 'use' : _b, getSchedulesForDate = _a.getSchedulesForDate, isToday = _a.isToday, isDragOverDate = _a.isDragOverDate, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop, handleDateClick = _a.handleDateClick, renderScheduleItem = _a.renderScheduleItem, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd;
|
|
33
|
+
var selectedDate = _a.selectedDate, selectedSchedules = _a.selectedSchedules, startOfWeek = _a.startOfWeek, getDayTextByDate = _a.getDayTextByDate, defaultViewType = _a.defaultViewType, _b = _a.displayAllDayScheduleMode, displayAllDayScheduleMode = _b === void 0 ? 'use' : _b, getSchedulesForDate = _a.getSchedulesForDate, isToday = _a.isToday, isDragOverDate = _a.isDragOverDate, handleDateDragOver = _a.handleDateDragOver, handleDateDragLeave = _a.handleDateDragLeave, handleDateDrop = _a.handleDateDrop, handleDateClick = _a.handleDateClick, renderScheduleItem = _a.renderScheduleItem, handleScheduleDragStart = _a.handleScheduleDragStart, handleScheduleDragEnd = _a.handleScheduleDragEnd, isDraggable = _a.isDraggable, handleScheduleClick = _a.handleScheduleClick;
|
|
34
34
|
var _c = (0, react_i18next_1.useTranslation)(), t = _c.t, i18n = _c.i18n;
|
|
35
35
|
// Generate calendar dates for weekly view
|
|
36
36
|
var calendarDates = (0, react_1.useMemo)(function () {
|
|
@@ -45,22 +45,23 @@ var WeeklyView = function (_a) {
|
|
|
45
45
|
}, [selectedDate, startOfWeek]);
|
|
46
46
|
return ((0, jsx_runtime_1.jsxs)(S_WeeklyContainer, { children: [(0, jsx_runtime_1.jsxs)(S_WeeklyHeader, { children: [(0, jsx_runtime_1.jsx)(S_TimeColumnHeader, {}), calendarDates.map(function (date, index) {
|
|
47
47
|
var dayText = getDayTextByDate(date);
|
|
48
|
-
var dateText = t('
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
var dateText = t('str_calendar_weekly_date', {
|
|
49
|
+
month: date.getMonth() + 1,
|
|
50
|
+
date: date.getDate(),
|
|
51
|
+
day: dayText
|
|
51
52
|
});
|
|
52
53
|
return ((0, jsx_runtime_1.jsx)(S_WeeklyDayHeader, __assign({ "$isToday": isToday(date) }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { styleTheme: "caption2Bold", colorTheme: isToday(date) ? 'sysTextBrandPrimary' : 'sysTextTertiary', text: dateText }) }), index));
|
|
53
54
|
})] }), (0, jsx_runtime_1.jsx)(AllDaySchedulesSection_1.AllDaySchedulesSection, { calendarDates: calendarDates, displayAllDayScheduleMode: displayAllDayScheduleMode, getSchedulesForDate: getSchedulesForDate, renderScheduleItem: renderScheduleItem, handleDateDragOver: handleDateDragOver, handleDateDragLeave: handleDateDragLeave, handleDateDrop: handleDateDrop }), (0, jsx_runtime_1.jsxs)(S_TimeGrid, { children: [(0, jsx_runtime_1.jsx)(CurrentTimeIndicator_1.CurrentTimeIndicator, { show: defaultViewType === 'WEEKLY' }), 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", colorTheme: "sysTextTertiary", text: (0, timeFormatUtils_1.formatTimeWithLocale)(hour, i18n.language, t) }) }), (0, jsx_runtime_1.jsx)(S_TimeSlots, { children: calendarDates.map(function (date, dayIndex) {
|
|
54
55
|
var timeSlotDate = new Date(date);
|
|
55
56
|
timeSlotDate.setHours(hour, 0, 0, 0);
|
|
56
|
-
return ((0, jsx_runtime_1.jsx)(S_TimeSlot, __assign({ "$isDragOver": (isDragOverDate === null || isDragOverDate === void 0 ? void 0 : isDragOverDate.getTime()) === timeSlotDate.getTime(), onClick: function () {
|
|
57
|
+
return ((0, jsx_runtime_1.jsx)(S_TimeSlot, __assign({ "$isDragOver": (isDragOverDate === null || isDragOverDate === void 0 ? void 0 : isDragOverDate.getTime()) === timeSlotDate.getTime(), "$isDraggable": isDraggable, onClick: function () {
|
|
57
58
|
var clickedDate = new Date(date);
|
|
58
59
|
clickedDate.setHours(hour, 0, 0, 0);
|
|
59
60
|
handleDateClick(clickedDate);
|
|
60
61
|
}, onDoubleClick: function () {
|
|
61
62
|
var clickedDate = new Date(date);
|
|
62
63
|
clickedDate.setHours(hour, 0, 0, 0);
|
|
63
|
-
}, 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(date), handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd })) }), dayIndex));
|
|
64
|
+
}, 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(date), selectedSchedules: selectedSchedules, isDraggable: isDraggable, onClick: handleScheduleClick, handleScheduleDragStart: handleScheduleDragStart, handleScheduleDragEnd: handleScheduleDragEnd })) }), dayIndex));
|
|
64
65
|
}) })] }, hour)); })] })] }));
|
|
65
66
|
};
|
|
66
67
|
exports.WeeklyView = WeeklyView;
|
|
@@ -78,7 +79,7 @@ var S_TimeLabel = styled_components_1.default.div(templateObject_7 || (templateO
|
|
|
78
79
|
return theme.ui_cpnt_divider;
|
|
79
80
|
});
|
|
80
81
|
var S_TimeSlots = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: contents;\n"], ["\n display: contents;\n"])));
|
|
81
|
-
var S_TimeSlot = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background: ", ";\n border-bottom: 1px solid ", ";\n border-right: 1px solid ", ";\n cursor:
|
|
82
|
+
var S_TimeSlot = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background: ", ";\n border-bottom: 1px solid ", ";\n border-right: 1px solid ", ";\n cursor: default;\n min-width: 0;\n overflow: visible;\n position: relative;\n\n &:hover {\n background: ", ";\n }\n"], ["\n background: ", ";\n border-bottom: 1px solid ", ";\n border-right: 1px solid ", ";\n cursor: default;\n min-width: 0;\n overflow: visible;\n position: relative;\n\n &:hover {\n background: ", ";\n }\n"])), function (props) { return (props.$isDragOver ? props.theme.ui_cpnt_sheet_base : 'transparent'); }, function (_a) {
|
|
82
83
|
var theme = _a.theme;
|
|
83
84
|
return theme.ui_cpnt_divider;
|
|
84
85
|
}, function (_a) {
|
|
@@ -20,5 +20,5 @@ export declare const calculateDateRange: (viewType: CalendarViewType, baseDate:
|
|
|
20
20
|
* @param getDayTextByDate 날짜에 따른 요일 텍스트 반환 함수
|
|
21
21
|
* @returns 헤더에 표시할 텍스트
|
|
22
22
|
*/
|
|
23
|
-
export declare const getHeaderText: (viewType: CalendarViewType, selectedDate: Date, t: TFunction
|
|
23
|
+
export declare const getHeaderText: (viewType: CalendarViewType, selectedDate: Date, t: TFunction) => string;
|
|
24
24
|
export declare const toUTC: (date: Date | null | undefined) => string | null;
|
|
@@ -59,18 +59,18 @@ exports.calculateDateRange = calculateDateRange;
|
|
|
59
59
|
* @param getDayTextByDate 날짜에 따른 요일 텍스트 반환 함수
|
|
60
60
|
* @returns 헤더에 표시할 텍스트
|
|
61
61
|
*/
|
|
62
|
-
var getHeaderText = function (viewType, selectedDate, t
|
|
62
|
+
var getHeaderText = function (viewType, selectedDate, t) {
|
|
63
63
|
var year = selectedDate.getFullYear();
|
|
64
|
-
var
|
|
64
|
+
var monthNumber = selectedDate.getMonth() + 1;
|
|
65
65
|
var day = selectedDate.getDate();
|
|
66
66
|
if (viewType === 'DAILY') {
|
|
67
|
-
return t('str_calendar_daily_header', { year: year, month:
|
|
67
|
+
return t('str_calendar_daily_header', { year: year, month: monthNumber, day: day });
|
|
68
68
|
}
|
|
69
69
|
if (viewType === 'WEEKLY') {
|
|
70
|
-
return t('str_calendar_weekly_header', { year: year, month:
|
|
70
|
+
return t('str_calendar_weekly_header', { year: year, month: monthNumber });
|
|
71
71
|
}
|
|
72
72
|
if (viewType === 'MONTHLY') {
|
|
73
|
-
return t('str_calendar_monthly_header', { year: year, month:
|
|
73
|
+
return t('str_calendar_monthly_header', { year: year, month: monthNumber });
|
|
74
74
|
}
|
|
75
75
|
if (viewType === 'YEARLY') {
|
|
76
76
|
return t('str_calendar_yearly_header', { year: year });
|
|
@@ -40,8 +40,8 @@ export type CalendarAction = {
|
|
|
40
40
|
};
|
|
41
41
|
};
|
|
42
42
|
export type CalendarProps = {
|
|
43
|
-
defaultViewType?: CalendarViewType;
|
|
44
|
-
viewTypes?: CalendarViewType[];
|
|
43
|
+
defaultViewType?: CalendarViewType | 'str_fm_month' | 'str_fm_week' | 'str_fm_day' | 'str_fm_year';
|
|
44
|
+
viewTypes?: (CalendarViewType | 'str_fm_month' | 'str_fm_week' | 'str_fm_day' | 'str_fm_year')[];
|
|
45
45
|
displayAllDayScheduleMode?: displayAllDayScheduleMode;
|
|
46
46
|
startOfWeek?: StartOfWeek;
|
|
47
47
|
todayBtnMode?: TodayBtnMode;
|