pds-dev-kit-web 2.2.262-beta.0 → 2.2.262
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 +0 -1
- package/dist/src/common/services/i18n/resources/es.json +0 -1
- package/dist/src/common/services/i18n/resources/fil.json +0 -1
- package/dist/src/common/services/i18n/resources/index.d.ts +0 -7
- package/dist/src/common/services/i18n/resources/ja.json +0 -1
- package/dist/src/common/services/i18n/resources/ko.json +0 -1
- package/dist/src/common/services/i18n/resources/zh-cn.json +0 -1
- package/dist/src/common/services/i18n/resources/zh-tw.json +0 -1
- package/dist/src/common/styles/colorSet/PaletteColor_Dark.json +2 -1
- package/dist/src/common/styles/colorSet/PaletteColor_light.json +2 -1
- package/dist/src/common/styles/colorSet/UIColor.json +2 -1
- package/dist/src/common/styles/colorSet/index.d.ts +5 -2
- package/dist/src/common/styles/colorSet/index.js +2 -2
- package/dist/src/common/styles/colorSet/ui-type.d.ts +1 -0
- package/dist/src/desktop/components/DynamicDesktopNavBar/blocks/BrandLogo.js +1 -1
- package/dist/src/desktop/components/TextButton/TextButton.d.ts +3 -2
- package/dist/src/desktop/components/TextButton/TextButton.js +27 -19
- package/dist/src/mobile/components/DatePicker/DatePicker.d.ts +1 -2
- package/dist/src/mobile/components/DatePicker/DatePicker.js +17 -76
- package/dist/src/mobile/components/DatePicker/DatePickerHeader.d.ts +1 -3
- package/dist/src/mobile/components/DatePicker/DatePickerHeader.js +4 -23
- package/dist/src/mobile/components/DatePicker/index.d.ts +0 -2
- package/dist/src/mobile/components/DatePicker/index.js +1 -5
- package/dist/src/mobile/components/TextButton/TextButton.d.ts +3 -2
- package/dist/src/mobile/components/TextButton/TextButton.js +27 -19
- package/package.json +1 -1
- package/release-note.md +3 -2
- package/dist/src/mobile/components/DatePicker/MonthPicker.d.ts +0 -12
- package/dist/src/mobile/components/DatePicker/MonthPicker.js +0 -133
- package/dist/src/mobile/components/DatePicker/YearPicker.d.ts +0 -10
- package/dist/src/mobile/components/DatePicker/YearPicker.js +0 -73
|
@@ -105,7 +105,6 @@ declare const locale: {
|
|
|
105
105
|
str_9070: string;
|
|
106
106
|
str_upload: string;
|
|
107
107
|
str_delete: string;
|
|
108
|
-
str_9617: string;
|
|
109
108
|
str_reaction: string;
|
|
110
109
|
};
|
|
111
110
|
};
|
|
@@ -214,7 +213,6 @@ declare const locale: {
|
|
|
214
213
|
str_9070: string;
|
|
215
214
|
str_upload: string;
|
|
216
215
|
str_delete: string;
|
|
217
|
-
str_9617: string;
|
|
218
216
|
str_reaction: string;
|
|
219
217
|
};
|
|
220
218
|
};
|
|
@@ -323,7 +321,6 @@ declare const locale: {
|
|
|
323
321
|
str_9070: string;
|
|
324
322
|
str_upload: string;
|
|
325
323
|
str_delete: string;
|
|
326
|
-
str_9617: string;
|
|
327
324
|
str_reaction: string;
|
|
328
325
|
};
|
|
329
326
|
};
|
|
@@ -432,7 +429,6 @@ declare const locale: {
|
|
|
432
429
|
str_9070: string;
|
|
433
430
|
str_upload: string;
|
|
434
431
|
str_delete: string;
|
|
435
|
-
str_9617: string;
|
|
436
432
|
str_reaction: string;
|
|
437
433
|
};
|
|
438
434
|
};
|
|
@@ -541,7 +537,6 @@ declare const locale: {
|
|
|
541
537
|
str_9070: string;
|
|
542
538
|
str_upload: string;
|
|
543
539
|
str_delete: string;
|
|
544
|
-
str_9617: string;
|
|
545
540
|
str_reaction: string;
|
|
546
541
|
};
|
|
547
542
|
};
|
|
@@ -650,7 +645,6 @@ declare const locale: {
|
|
|
650
645
|
str_9070: string;
|
|
651
646
|
str_upload: string;
|
|
652
647
|
str_delete: string;
|
|
653
|
-
str_9617: string;
|
|
654
648
|
str_reaction: string;
|
|
655
649
|
};
|
|
656
650
|
};
|
|
@@ -752,7 +746,6 @@ declare const locale: {
|
|
|
752
746
|
str_friendly_currency_dollar: string;
|
|
753
747
|
str_upload: string;
|
|
754
748
|
str_delete: string;
|
|
755
|
-
str_9617: string;
|
|
756
749
|
str_reaction: string;
|
|
757
750
|
};
|
|
758
751
|
};
|
|
@@ -379,5 +379,6 @@
|
|
|
379
379
|
"sys_component_border_01": "grey100/opacity50",
|
|
380
380
|
"sys_widget_grey_08": "grey400",
|
|
381
381
|
"sys_on_base_hover_01": "black/opacity05",
|
|
382
|
-
"sys_on_base_pressed_01": "black/opacity10"
|
|
382
|
+
"sys_on_base_pressed_01": "black/opacity10",
|
|
383
|
+
"usr_brand_secondary_opacity50": "darkgreen500/opacity50"
|
|
383
384
|
}
|
|
@@ -379,5 +379,6 @@
|
|
|
379
379
|
"sys_component_border_01": "grey100/opacity50",
|
|
380
380
|
"sys_widget_grey_08": "darkgrey500",
|
|
381
381
|
"sys_on_base_hover_01": "white/opacity10",
|
|
382
|
-
"sys_on_base_pressed_01": "white/opacity20"
|
|
382
|
+
"sys_on_base_pressed_01": "white/opacity20",
|
|
383
|
+
"usr_brand_secondary_opacity50": "green500/opacity50"
|
|
383
384
|
}
|
|
@@ -910,5 +910,6 @@
|
|
|
910
910
|
"ui_cpnt_message_reaction_base_02": "sys_component_pastel_base_02",
|
|
911
911
|
"ui_cpnt_message_reaction_base_03": "sys_component_pastel_base_03",
|
|
912
912
|
"ui_cpnt_message_reaction_base_04": "sys_component_pastel_base_04",
|
|
913
|
-
"ui_cpnt_message_reaction_base_05": "sys_component_pastel_base_05"
|
|
913
|
+
"ui_cpnt_message_reaction_base_05": "sys_component_pastel_base_05",
|
|
914
|
+
"ui_145": "usr_brand_secondary_opacity50"
|
|
914
915
|
}
|
|
@@ -123,7 +123,7 @@ declare const colorSet: {
|
|
|
123
123
|
grey450: string;
|
|
124
124
|
darkgrey450: string;
|
|
125
125
|
};
|
|
126
|
-
readonly
|
|
126
|
+
readonly PaletteColor_Dark: {
|
|
127
127
|
sys_container_background_01: string;
|
|
128
128
|
sys_container_background_02: string;
|
|
129
129
|
sys_container_background_03: string;
|
|
@@ -505,8 +505,9 @@ declare const colorSet: {
|
|
|
505
505
|
sys_widget_grey_08: string;
|
|
506
506
|
sys_on_base_hover_01: string;
|
|
507
507
|
sys_on_base_pressed_01: string;
|
|
508
|
+
usr_brand_secondary_opacity50: string;
|
|
508
509
|
};
|
|
509
|
-
readonly
|
|
510
|
+
readonly PaletteColor_light: {
|
|
510
511
|
sys_container_background_01: string;
|
|
511
512
|
sys_container_background_02: string;
|
|
512
513
|
sys_container_background_03: string;
|
|
@@ -888,6 +889,7 @@ declare const colorSet: {
|
|
|
888
889
|
sys_widget_grey_08: string;
|
|
889
890
|
sys_on_base_hover_01: string;
|
|
890
891
|
sys_on_base_pressed_01: string;
|
|
892
|
+
usr_brand_secondary_opacity50: string;
|
|
891
893
|
};
|
|
892
894
|
readonly UIColor: {
|
|
893
895
|
ui_cpnt_button_fill_base_primary: string;
|
|
@@ -1802,6 +1804,7 @@ declare const colorSet: {
|
|
|
1802
1804
|
ui_cpnt_message_reaction_base_03: string;
|
|
1803
1805
|
ui_cpnt_message_reaction_base_04: string;
|
|
1804
1806
|
ui_cpnt_message_reaction_base_05: string;
|
|
1807
|
+
ui_145: string;
|
|
1805
1808
|
};
|
|
1806
1809
|
};
|
|
1807
1810
|
export default colorSet;
|
|
@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
/* eslint-disable import/order */
|
|
7
7
|
var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
|
|
8
|
-
var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
|
|
9
8
|
var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
|
|
9
|
+
var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
|
|
10
10
|
var UIColor_json_1 = __importDefault(require("./UIColor.json"));
|
|
11
11
|
var colorSet = {
|
|
12
12
|
SemanticColor: SemanticColor_json_1.default,
|
|
13
|
-
PaletteColor_light: PaletteColor_light_json_1.default,
|
|
14
13
|
PaletteColor_Dark: PaletteColor_Dark_json_1.default,
|
|
14
|
+
PaletteColor_light: PaletteColor_light_json_1.default,
|
|
15
15
|
UIColor: UIColor_json_1.default
|
|
16
16
|
};
|
|
17
17
|
exports.default = colorSet;
|
|
@@ -23,7 +23,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
23
23
|
var LogoNav_1 = __importDefault(require("../components/LogoNav"));
|
|
24
24
|
function BrandLogo(_a) {
|
|
25
25
|
var to = _a.to, logoSrc = _a.logoSrc, fallbackText = _a.fallbackText, isCenteredLogo = _a.isCenteredLogo, style = _a.style;
|
|
26
|
-
return ((0, jsx_runtime_1.jsx)(S_BrandLogo, __assign({ style: style }, { children: (0, jsx_runtime_1.jsx)(LogoNav_1.default, { to: to, logoSrc: logoSrc, fallbackText: fallbackText, isCenteredLogo: isCenteredLogo }) })));
|
|
26
|
+
return ((0, jsx_runtime_1.jsx)(S_BrandLogo, __assign({ style: style, id: "pds-brand-logo" }, { children: (0, jsx_runtime_1.jsx)(LogoNav_1.default, { to: to, logoSrc: logoSrc, fallbackText: fallbackText, isCenteredLogo: isCenteredLogo }) })));
|
|
27
27
|
}
|
|
28
28
|
var S_BrandLogo = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n grid-area: BRAND_LOGO;\n"], ["\n display: flex;\n grid-area: BRAND_LOGO;\n"])));
|
|
29
29
|
exports.default = BrandLogo;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { PDSIconType, PDSTextType } from '../../../common';
|
|
1
|
+
import type { PDSIconType, PDSTextType, UiColors } from '../../../common';
|
|
2
2
|
import type React from 'react';
|
|
3
3
|
export type TextButtonProps = {
|
|
4
4
|
text?: PDSTextType;
|
|
@@ -11,8 +11,9 @@ export type TextButtonProps = {
|
|
|
11
11
|
iconFillType?: 'fill' | 'line';
|
|
12
12
|
iconName?: PDSIconType;
|
|
13
13
|
colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'grey3' | 'white' | 'white2';
|
|
14
|
+
overrideColorKey?: UiColors;
|
|
14
15
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
15
16
|
onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
16
17
|
};
|
|
17
|
-
declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, iconMode, iconFillType, iconName, colorTheme, onClick, onKeyDown, ...rest }: TextButtonProps): JSX.Element;
|
|
18
|
+
declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, iconMode, iconFillType, iconName, colorTheme, overrideColorKey, onClick, onKeyDown, ...rest }: TextButtonProps): JSX.Element;
|
|
18
19
|
export default TextButton;
|
|
@@ -71,14 +71,16 @@ var textColor = {
|
|
|
71
71
|
white: 'sysTextWhite',
|
|
72
72
|
white2: 'sysTextWhite'
|
|
73
73
|
};
|
|
74
|
-
var
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
74
|
+
var getIconColor = function (overrideColorKey) {
|
|
75
|
+
return ({
|
|
76
|
+
none: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_primary',
|
|
77
|
+
red: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_error',
|
|
78
|
+
grey_01: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_enabled',
|
|
79
|
+
grey2: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_default',
|
|
80
|
+
grey3: overrideColorKey ? overrideColorKey : 'ui_141',
|
|
81
|
+
white: overrideColorKey ? overrideColorKey : 'ui_cpnt_sidebar_icon_01',
|
|
82
|
+
white2: overrideColorKey ? overrideColorKey : 'ui_cpnt_sidebar_icon_01'
|
|
83
|
+
});
|
|
82
84
|
};
|
|
83
85
|
var textDisabledColor = {
|
|
84
86
|
none: 'sysTextTertiary',
|
|
@@ -89,14 +91,16 @@ var textDisabledColor = {
|
|
|
89
91
|
white: 'sysTextTertiary',
|
|
90
92
|
white2: 'sysTextTertiary'
|
|
91
93
|
};
|
|
92
|
-
var
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
94
|
+
var getOverrideTextColor = function (overrideColorKey) {
|
|
95
|
+
return ({
|
|
96
|
+
none: overrideColorKey,
|
|
97
|
+
red: overrideColorKey,
|
|
98
|
+
grey_01: overrideColorKey,
|
|
99
|
+
grey2: overrideColorKey,
|
|
100
|
+
grey3: overrideColorKey ? overrideColorKey : 'ui_141',
|
|
101
|
+
white: overrideColorKey,
|
|
102
|
+
white2: overrideColorKey
|
|
103
|
+
});
|
|
100
104
|
};
|
|
101
105
|
var overrideTextDisabledColor = {
|
|
102
106
|
none: undefined,
|
|
@@ -126,7 +130,7 @@ var backgroundPressedColor = {
|
|
|
126
130
|
white2: 'ui_cpnt_textbutton_white_variation_base_pressed'
|
|
127
131
|
};
|
|
128
132
|
function TextButton(_a) {
|
|
129
|
-
var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, iconName = _a.iconName, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, onClick = _a.onClick, onKeyDown = _a.onKeyDown, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "iconMode", "iconFillType", "iconName", "colorTheme", "onClick", "onKeyDown"]);
|
|
133
|
+
var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, iconName = _a.iconName, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, overrideColorKey = _a.overrideColorKey, onClick = _a.onClick, onKeyDown = _a.onKeyDown, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "iconMode", "iconFillType", "iconName", "colorTheme", "overrideColorKey", "onClick", "onKeyDown"]);
|
|
130
134
|
var buttonRef = (0, react_1.useRef)(null);
|
|
131
135
|
/**
|
|
132
136
|
* @when keydown 이벤트가 있을 때만
|
|
@@ -144,9 +148,13 @@ function TextButton(_a) {
|
|
|
144
148
|
onClick(e);
|
|
145
149
|
}
|
|
146
150
|
};
|
|
147
|
-
return ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ ref: buttonRef, "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onKeyDown: onKeyDown, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, hoverColor: backgroundHoverColor[colorTheme], pressedColor: backgroundPressedColor[colorTheme] }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled'
|
|
151
|
+
return ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ ref: buttonRef, "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onKeyDown: onKeyDown, type: type, fontWeight: fontWeight, disabled: state === 'disabled', state: state, hoverColor: backgroundHoverColor[colorTheme], pressedColor: backgroundPressedColor[colorTheme] }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled'
|
|
152
|
+
? 'ui_cpnt_button_text_disabled'
|
|
153
|
+
: getIconColor(overrideColorKey)[colorTheme], fillType: iconFillType }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? textDisabledColor[colorTheme] : textColor[colorTheme], colorOverride: state === 'disabled'
|
|
148
154
|
? overrideTextDisabledColor[colorTheme]
|
|
149
|
-
:
|
|
155
|
+
: getOverrideTextColor(overrideColorKey)[colorTheme], singleLineMode: "use", ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled'
|
|
156
|
+
? 'ui_cpnt_button_text_disabled'
|
|
157
|
+
: getIconColor(overrideColorKey)[colorTheme], fillType: iconFillType })] }))] })));
|
|
150
158
|
}
|
|
151
159
|
var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n border-radius: 14px;\n height: 48px;\n\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
|
|
152
160
|
var size = _a.size;
|
|
@@ -10,8 +10,7 @@ type Props = {
|
|
|
10
10
|
startOfWeek?: 'sunday' | 'monday';
|
|
11
11
|
quickActionMode?: 'use' | 'none';
|
|
12
12
|
quickActionBtnText?: PDSTextType;
|
|
13
|
-
quickNavigationMode?: 'use' | 'none';
|
|
14
13
|
onChange?: (val1: string, val2?: string) => void;
|
|
15
14
|
};
|
|
16
|
-
declare const DatePicker: ({ id, type, date, endDate, minDate, maxDate, startOfWeek, quickActionMode, quickActionBtnText,
|
|
15
|
+
declare const DatePicker: ({ id, type, date, endDate, minDate, maxDate, startOfWeek, quickActionMode, quickActionBtnText, onChange }: Props) => JSX.Element;
|
|
17
16
|
export default DatePicker;
|
|
@@ -50,44 +50,13 @@ var styled_components_1 = __importStar(require("styled-components"));
|
|
|
50
50
|
var TextLabel_1 = require("../TextLabel");
|
|
51
51
|
var DatePickerHeader_1 = __importDefault(require("./DatePickerHeader"));
|
|
52
52
|
var Day_1 = __importDefault(require("./Day"));
|
|
53
|
-
var MonthPicker_1 = __importDefault(require("./MonthPicker"));
|
|
54
|
-
var YearPicker_1 = __importDefault(require("./YearPicker"));
|
|
55
53
|
var DatePicker = function (_a) {
|
|
56
|
-
var id = _a.id, type = _a.type, date = _a.date, endDate = _a.endDate, minDate = _a.minDate, maxDate = _a.maxDate, _b = _a.startOfWeek, startOfWeek = _b === void 0 ? 'sunday' : _b, _c = _a.quickActionMode, quickActionMode = _c === void 0 ? 'none' : _c, quickActionBtnText = _a.quickActionBtnText,
|
|
54
|
+
var id = _a.id, type = _a.type, date = _a.date, endDate = _a.endDate, minDate = _a.minDate, maxDate = _a.maxDate, _b = _a.startOfWeek, startOfWeek = _b === void 0 ? 'sunday' : _b, _c = _a.quickActionMode, quickActionMode = _c === void 0 ? 'none' : _c, quickActionBtnText = _a.quickActionBtnText, onChange = _a.onChange;
|
|
57
55
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
58
56
|
var startDate = date || dateHelper_1.DateHelper.formatDate(new Date());
|
|
59
|
-
var
|
|
57
|
+
var _d = (0, react_1.useState)(function () {
|
|
60
58
|
return dateHelper_1.DateHelper.startOfMonth(dateHelper_1.DateHelper.parseDate(startDate));
|
|
61
|
-
}), currentMonth =
|
|
62
|
-
// 연도/월 선택 상태 관리
|
|
63
|
-
var _f = (0, react_1.useState)(false), showYearPicker = _f[0], setShowYearPicker = _f[1];
|
|
64
|
-
var _g = (0, react_1.useState)(false), showMonthPicker = _g[0], setShowMonthPicker = _g[1];
|
|
65
|
-
// Picker 외부 클릭 감지용 ref
|
|
66
|
-
var yearPickerRef = (0, react_1.useRef)(null);
|
|
67
|
-
var monthPickerRef = (0, react_1.useRef)(null);
|
|
68
|
-
var isEventInside = function (ref, node) {
|
|
69
|
-
if (!ref.current || !node)
|
|
70
|
-
return false;
|
|
71
|
-
return ref.current.contains(node);
|
|
72
|
-
};
|
|
73
|
-
// Picker 외부 클릭 시 닫기
|
|
74
|
-
(0, react_1.useEffect)(function () {
|
|
75
|
-
if (!showYearPicker && !showMonthPicker)
|
|
76
|
-
return;
|
|
77
|
-
var handleDocumentClick = function (event) {
|
|
78
|
-
var target = event.target;
|
|
79
|
-
var isClickInsideYearPicker = isEventInside(yearPickerRef, target);
|
|
80
|
-
var isClickInsideMonthPicker = isEventInside(monthPickerRef, target);
|
|
81
|
-
if (!isClickInsideYearPicker && !isClickInsideMonthPicker) {
|
|
82
|
-
setShowYearPicker(false);
|
|
83
|
-
setShowMonthPicker(false);
|
|
84
|
-
}
|
|
85
|
-
};
|
|
86
|
-
document.addEventListener('mousedown', handleDocumentClick);
|
|
87
|
-
return function () {
|
|
88
|
-
document.removeEventListener('mousedown', handleDocumentClick);
|
|
89
|
-
};
|
|
90
|
-
}, [showYearPicker, showMonthPicker]);
|
|
59
|
+
}), currentMonth = _d[0], setCurrentMonth = _d[1];
|
|
91
60
|
var isPrevButtonDisabled = (0, react_1.useMemo)(function () {
|
|
92
61
|
if (!minDate)
|
|
93
62
|
return false;
|
|
@@ -129,33 +98,6 @@ var DatePicker = function (_a) {
|
|
|
129
98
|
var startOfCurrentMonth = dateHelper_1.DateHelper.startOfMonth(today);
|
|
130
99
|
setCurrentMonth(startOfCurrentMonth);
|
|
131
100
|
};
|
|
132
|
-
// 헤더 타이틀 클릭 핸들러
|
|
133
|
-
var handleHeaderTitleClick = function () {
|
|
134
|
-
setShowYearPicker(true);
|
|
135
|
-
};
|
|
136
|
-
// 연도 선택 핸들러
|
|
137
|
-
var handleYearSelect = function (year) {
|
|
138
|
-
var newDate = new Date(year, currentMonth.getMonth(), 1);
|
|
139
|
-
setCurrentMonth(newDate);
|
|
140
|
-
setShowYearPicker(false);
|
|
141
|
-
setShowMonthPicker(true);
|
|
142
|
-
};
|
|
143
|
-
// 월 선택 핸들러
|
|
144
|
-
var handleMonthSelect = function (year, month) {
|
|
145
|
-
var newDate = new Date(year, month - 1, 1);
|
|
146
|
-
setCurrentMonth(newDate);
|
|
147
|
-
setShowMonthPicker(false);
|
|
148
|
-
};
|
|
149
|
-
// 연도 선택기에서 월 선택기로 돌아가기
|
|
150
|
-
var handleBackToYear = function () {
|
|
151
|
-
setShowMonthPicker(false);
|
|
152
|
-
setShowYearPicker(true);
|
|
153
|
-
};
|
|
154
|
-
// 선택기 닫기
|
|
155
|
-
var handleClosePickers = function () {
|
|
156
|
-
setShowYearPicker(false);
|
|
157
|
-
setShowMonthPicker(false);
|
|
158
|
-
};
|
|
159
101
|
var calendarDates = (0, react_1.useMemo)(function () { return dateHelper_1.DateHelper.getCalendarDates(currentMonth, startOfWeek); }, [currentMonth, startOfWeek]);
|
|
160
102
|
var days = [
|
|
161
103
|
t('str_3893'),
|
|
@@ -166,11 +108,11 @@ var DatePicker = function (_a) {
|
|
|
166
108
|
t('str_3891'),
|
|
167
109
|
t('str_3892')
|
|
168
110
|
];
|
|
169
|
-
return ((0, jsx_runtime_1.jsxs)(CalendarContainer, __assign({ id: id }, { children: [(0, jsx_runtime_1.
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
111
|
+
return ((0, jsx_runtime_1.jsxs)(CalendarContainer, __assign({ id: id }, { children: [(0, jsx_runtime_1.jsx)(DatePickerHeader_1.default, { headerTitle: t('str_35', {
|
|
112
|
+
year: currentMonth.getFullYear(),
|
|
113
|
+
month: String(currentMonth.getMonth() + 1)
|
|
114
|
+
}), textButtonText: quickActionMode === 'use' ? quickActionBtnText : undefined, isTextButtonDisabled: currentMonth.getFullYear() === new Date().getFullYear() &&
|
|
115
|
+
currentMonth.getMonth() === new Date().getMonth(), isPrevButtonDisabled: isPrevButtonDisabled, isNextButtonDisabled: isNextButtonDisabled, onClickPrevButton: function () { return setCurrentMonth(function (prev) { return dateHelper_1.DateHelper.addMonths(prev, -1); }); }, onClickNextButton: function () { return setCurrentMonth(function (prev) { return dateHelper_1.DateHelper.addMonths(prev, 1); }); }, onClickTextButton: handleQuickActionButtonClick }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_a" }), (0, jsx_runtime_1.jsxs)(S_MonthContainer, { children: [(0, jsx_runtime_1.jsx)(S_DayOfWeekContainer, __assign({ id: "weeks" }, { children: days
|
|
174
116
|
.slice(startOfWeek === 'monday' ? 1 : 0)
|
|
175
117
|
.concat(startOfWeek === 'monday' ? [t('str_3893')] : [])
|
|
176
118
|
.map(function (day) { return ((0, jsx_runtime_1.jsx)(S_DayOfWeek, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: day, styleTheme: "caption2Bold", colorTheme: "sysTextSecondary", textAlign: "center" }) }, "".concat(id, "_").concat(day))); }) })), (0, jsx_runtime_1.jsx)(S_Grid, { children: calendarDates.map(function (d) {
|
|
@@ -185,31 +127,30 @@ var DatePicker = function (_a) {
|
|
|
185
127
|
}) })] })] })));
|
|
186
128
|
};
|
|
187
129
|
var CalendarContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n"])));
|
|
188
|
-
var
|
|
189
|
-
var S_MonthContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n padding: 0 ", ";\n"], ["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n padding: 0 ", ";\n"])), function (_a) {
|
|
130
|
+
var S_MonthContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n padding: 0 ", ";\n"], ["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n padding: 0 ", ";\n"])), function (_a) {
|
|
190
131
|
var theme = _a.theme;
|
|
191
132
|
return theme.spacing.spacingD;
|
|
192
133
|
});
|
|
193
|
-
var S_DayOfWeekContainer = styled_components_1.default.div(
|
|
194
|
-
var S_DayOfWeek = styled_components_1.default.span(
|
|
134
|
+
var S_DayOfWeekContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: grid;\n grid-template-columns: repeat(7, minmax(32px, 120px));\n grid-template-rows: minmax(25px, 32px);\n justify-items: center;\n"], ["\n align-items: center;\n display: grid;\n grid-template-columns: repeat(7, minmax(32px, 120px));\n grid-template-rows: minmax(25px, 32px);\n justify-items: center;\n"])));
|
|
135
|
+
var S_DayOfWeek = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n background-color: transparent;\n box-sizing: border-box;\n color: ", ";\n display: flex;\n justify-content: center;\n"], ["\n align-items: center;\n background-color: transparent;\n box-sizing: border-box;\n color: ", ";\n display: flex;\n justify-content: center;\n"])), function (_a) {
|
|
195
136
|
var theme = _a.theme;
|
|
196
137
|
return theme.ui_cpnt_textlabel_sys_primary;
|
|
197
138
|
});
|
|
198
|
-
var S_Grid = styled_components_1.default.div(
|
|
199
|
-
var S_CellWrapper = styled_components_1.default.div(
|
|
139
|
+
var S_Grid = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n display: grid;\n flex: 1;\n grid-row-gap: 2px;\n grid-template-columns: repeat(7, minmax(32px, 120px));\n grid-template-rows: repeat(6, minmax(25px, 32px));\n justify-items: center;\n"], ["\n align-items: center;\n display: grid;\n flex: 1;\n grid-row-gap: 2px;\n grid-template-columns: repeat(7, minmax(32px, 120px));\n grid-template-rows: repeat(6, minmax(25px, 32px));\n justify-items: center;\n"])));
|
|
140
|
+
var S_CellWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n position: relative;\n width: 100%;\n\n ", "\n\n ", "\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n position: relative;\n width: 100%;\n\n ", "\n\n ", "\n\n ", "\n"])), function (_a) {
|
|
200
141
|
var isRange = _a.isRange, isStart = _a.isStart, isEnd = _a.isEnd, isValidRange = _a.isValidRange, theme = _a.theme;
|
|
201
142
|
return isValidRange &&
|
|
202
|
-
(isRange || (isStart && !isEnd) || (isEnd && !isStart)) && (0, styled_components_1.css)(
|
|
143
|
+
(isRange || (isStart && !isEnd) || (isEnd && !isStart)) && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background: ", "20;\n "], ["\n background: ", "20;\n "])), theme.ui_cpnt_calendar_status_a);
|
|
203
144
|
}, function (_a) {
|
|
204
145
|
var isStart = _a.isStart, isEnd = _a.isEnd, isValidRange = _a.isValidRange, theme = _a.theme;
|
|
205
146
|
return isValidRange &&
|
|
206
147
|
isEnd &&
|
|
207
|
-
!isStart && (0, styled_components_1.css)(
|
|
148
|
+
!isStart && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background: linear-gradient(\n to right,\n ", "20 50%,\n transparent 50%\n );\n "], ["\n background: linear-gradient(\n to right,\n ", "20 50%,\n transparent 50%\n );\n "])), theme.ui_cpnt_calendar_status_a);
|
|
208
149
|
}, function (_a) {
|
|
209
150
|
var isStart = _a.isStart, isEnd = _a.isEnd, isValidRange = _a.isValidRange, theme = _a.theme;
|
|
210
151
|
return isValidRange &&
|
|
211
152
|
isStart &&
|
|
212
|
-
!isEnd && (0, styled_components_1.css)(
|
|
153
|
+
!isEnd && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background: linear-gradient(\n to left,\n ", "20 50%,\n transparent 50%\n );\n "], ["\n background: linear-gradient(\n to left,\n ", "20 50%,\n transparent 50%\n );\n "])), theme.ui_cpnt_calendar_status_a);
|
|
213
154
|
});
|
|
214
155
|
exports.default = DatePicker;
|
|
215
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9
|
|
156
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
@@ -9,8 +9,6 @@ type Props = {
|
|
|
9
9
|
onClickPrevButton: () => void;
|
|
10
10
|
onClickNextButton: () => void;
|
|
11
11
|
onClickTextButton: () => void;
|
|
12
|
-
onHeaderTitleClick?: () => void;
|
|
13
|
-
isHeaderTitleClickable?: boolean;
|
|
14
12
|
};
|
|
15
|
-
declare function DatePickerHeader({ headerTitle, textButtonText, isTextButtonDisabled, isPrevButtonDisabled, isNextButtonDisabled, onClickPrevButton, onClickNextButton, onClickTextButton
|
|
13
|
+
declare function DatePickerHeader({ headerTitle, textButtonText, isTextButtonDisabled, isPrevButtonDisabled, isNextButtonDisabled, onClickPrevButton, onClickNextButton, onClickTextButton }: Props): JSX.Element;
|
|
16
14
|
export default DatePickerHeader;
|
|
@@ -3,17 +3,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
|
-
var __assign = (this && this.__assign) || function () {
|
|
7
|
-
__assign = Object.assign || function(t) {
|
|
8
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
-
s = arguments[i];
|
|
10
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
-
t[p] = s[p];
|
|
12
|
-
}
|
|
13
|
-
return t;
|
|
14
|
-
};
|
|
15
|
-
return __assign.apply(this, arguments);
|
|
16
|
-
};
|
|
17
6
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
18
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
8
|
};
|
|
@@ -24,8 +13,8 @@ var IconButton_1 = require("../IconButton");
|
|
|
24
13
|
var TextButton_1 = require("../TextButton");
|
|
25
14
|
var TextLabel_1 = require("../TextLabel");
|
|
26
15
|
function DatePickerHeader(_a) {
|
|
27
|
-
var headerTitle = _a.headerTitle, textButtonText = _a.textButtonText, isTextButtonDisabled = _a.isTextButtonDisabled, isPrevButtonDisabled = _a.isPrevButtonDisabled, isNextButtonDisabled = _a.isNextButtonDisabled, onClickPrevButton = _a.onClickPrevButton, onClickNextButton = _a.onClickNextButton, onClickTextButton = _a.onClickTextButton
|
|
28
|
-
return ((0, jsx_runtime_1.jsxs)(S_HeaderContainer, { children: [(0, jsx_runtime_1.jsx)(S_LeftIconWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { onClick: onClickPrevButton, iconName: "ic_arrow_left", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 16, baseSize: "medium", state: isPrevButtonDisabled ? 'disabled' : 'normal' }) }), (0, jsx_runtime_1.jsx)(
|
|
16
|
+
var headerTitle = _a.headerTitle, textButtonText = _a.textButtonText, isTextButtonDisabled = _a.isTextButtonDisabled, isPrevButtonDisabled = _a.isPrevButtonDisabled, isNextButtonDisabled = _a.isNextButtonDisabled, onClickPrevButton = _a.onClickPrevButton, onClickNextButton = _a.onClickNextButton, onClickTextButton = _a.onClickTextButton;
|
|
17
|
+
return ((0, jsx_runtime_1.jsxs)(S_HeaderContainer, { children: [(0, jsx_runtime_1.jsx)(S_LeftIconWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { onClick: onClickPrevButton, iconName: "ic_arrow_left", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 16, baseSize: "medium", state: isPrevButtonDisabled ? 'disabled' : 'normal' }) }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: headerTitle, textAlign: "center" }), (0, jsx_runtime_1.jsx)(S_RightIconWrapper, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { onClick: onClickNextButton, iconName: "ic_arrow_right", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 16, baseSize: "medium", state: isNextButtonDisabled ? 'disabled' : 'normal' }) }), textButtonText && ((0, jsx_runtime_1.jsx)(S_TextButtonWrapper, { children: (0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { text: textButtonText, size: "xsmall", fontWeight: "bold", onClick: onClickTextButton, state: isTextButtonDisabled ? 'disabled' : 'normal' }) }))] }));
|
|
29
18
|
}
|
|
30
19
|
var S_HeaderContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n justify-items: center;\n margin: 0 ", ";\n position: relative;\n"], ["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n justify-items: center;\n margin: 0 ", ";\n position: relative;\n"])), function (_a) {
|
|
31
20
|
var theme = _a.theme;
|
|
@@ -33,14 +22,6 @@ var S_HeaderContainer = styled_components_1.default.div(templateObject_1 || (tem
|
|
|
33
22
|
});
|
|
34
23
|
var S_TextButtonWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: auto 0;\n position: absolute;\n right: 0;\n"], ["\n margin: auto 0;\n position: absolute;\n right: 0;\n"])));
|
|
35
24
|
var S_LeftIconWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n grid-column: 1 / 2;\n height: auto;\n width: auto;\n"], ["\n align-items: center;\n display: flex;\n grid-column: 1 / 2;\n height: auto;\n width: auto;\n"])));
|
|
36
|
-
var
|
|
37
|
-
var isClickable = _a.isClickable;
|
|
38
|
-
return (isClickable ? 'pointer' : 'default');
|
|
39
|
-
}, function (_a) {
|
|
40
|
-
var isClickable = _a.isClickable, theme = _a.theme;
|
|
41
|
-
return isClickable &&
|
|
42
|
-
"\n &:hover {\n background-color: ".concat(theme.ui_cpnt_button_fill_base_transparent, ";\n }\n ");
|
|
43
|
-
});
|
|
44
|
-
var S_RightIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n grid-column: 3 / 4;\n height: auto;\n width: auto;\n"], ["\n align-items: center;\n display: flex;\n grid-column: 3 / 4;\n height: auto;\n width: auto;\n"])));
|
|
25
|
+
var S_RightIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n grid-column: 3 / 4;\n height: auto;\n width: auto;\n"], ["\n align-items: center;\n display: flex;\n grid-column: 3 / 4;\n height: auto;\n width: auto;\n"])));
|
|
45
26
|
exports.default = DatePickerHeader;
|
|
46
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4
|
|
27
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -3,10 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.
|
|
6
|
+
exports.DatePicker = void 0;
|
|
7
7
|
var DatePicker_1 = require("./DatePicker");
|
|
8
8
|
Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return __importDefault(DatePicker_1).default; } });
|
|
9
|
-
var YearPicker_1 = require("./YearPicker");
|
|
10
|
-
Object.defineProperty(exports, "YearPicker", { enumerable: true, get: function () { return __importDefault(YearPicker_1).default; } });
|
|
11
|
-
var MonthPicker_1 = require("./MonthPicker");
|
|
12
|
-
Object.defineProperty(exports, "MonthPicker", { enumerable: true, get: function () { return __importDefault(MonthPicker_1).default; } });
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { PDSIconType, PDSTextType } from '../../../common';
|
|
2
|
+
import type { PDSIconType, PDSTextType, UiColors } from '../../../common';
|
|
3
3
|
export type TextButtonProps = {
|
|
4
4
|
text?: PDSTextType;
|
|
5
5
|
size?: 'rlarge' | 'large' | 'medium' | 'small' | 'xsmall';
|
|
@@ -11,7 +11,8 @@ export type TextButtonProps = {
|
|
|
11
11
|
iconFillType?: 'fill' | 'line';
|
|
12
12
|
iconName?: PDSIconType;
|
|
13
13
|
colorTheme?: 'none' | 'red' | 'grey_01' | 'grey2' | 'grey3' | 'white' | 'white2';
|
|
14
|
+
overrideColorKey?: UiColors;
|
|
14
15
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
15
16
|
};
|
|
16
|
-
declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, iconMode, iconFillType, iconName, colorTheme, onClick, ...rest }: TextButtonProps): JSX.Element;
|
|
17
|
+
declare function TextButton({ text, size, responsiveMode, fontWeight, type, state, iconMode, iconFillType, iconName, colorTheme, overrideColorKey, onClick, ...rest }: TextButtonProps): JSX.Element;
|
|
17
18
|
export default TextButton;
|
|
@@ -70,14 +70,16 @@ var textColor = {
|
|
|
70
70
|
white: 'sysTextWhite',
|
|
71
71
|
white2: 'sysTextWhite'
|
|
72
72
|
};
|
|
73
|
-
var
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
73
|
+
var getIconColor = function (overrideColorKey) {
|
|
74
|
+
return ({
|
|
75
|
+
none: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_primary',
|
|
76
|
+
red: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_error',
|
|
77
|
+
grey_01: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_enabled',
|
|
78
|
+
grey2: overrideColorKey ? overrideColorKey : 'ui_cpnt_button_icon_default',
|
|
79
|
+
grey3: overrideColorKey ? overrideColorKey : 'ui_141',
|
|
80
|
+
white: overrideColorKey ? overrideColorKey : 'ui_cpnt_sidebar_icon_01',
|
|
81
|
+
white2: overrideColorKey ? overrideColorKey : 'ui_cpnt_sidebar_icon_01'
|
|
82
|
+
});
|
|
81
83
|
};
|
|
82
84
|
var textDisabledColor = {
|
|
83
85
|
none: 'sysTextTertiary',
|
|
@@ -88,14 +90,16 @@ var textDisabledColor = {
|
|
|
88
90
|
white: 'sysTextTertiary',
|
|
89
91
|
white2: 'sysTextTertiary'
|
|
90
92
|
};
|
|
91
|
-
var
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
93
|
+
var getOverrideTextColor = function (overrideColorKey) {
|
|
94
|
+
return ({
|
|
95
|
+
none: overrideColorKey,
|
|
96
|
+
red: overrideColorKey,
|
|
97
|
+
grey_01: overrideColorKey,
|
|
98
|
+
grey2: overrideColorKey,
|
|
99
|
+
grey3: overrideColorKey ? overrideColorKey : 'ui_141',
|
|
100
|
+
white: overrideColorKey,
|
|
101
|
+
white2: overrideColorKey
|
|
102
|
+
});
|
|
99
103
|
};
|
|
100
104
|
var overrideTextDisabledColor = {
|
|
101
105
|
none: undefined,
|
|
@@ -116,15 +120,19 @@ var backgroundPressedColor = {
|
|
|
116
120
|
white2: 'ui_cpnt_textbutton_white_variation_base_pressed'
|
|
117
121
|
};
|
|
118
122
|
function TextButton(_a) {
|
|
119
|
-
var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, iconName = _a.iconName, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "iconMode", "iconFillType", "iconName", "colorTheme", "onClick"]);
|
|
123
|
+
var text = _a.text, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, fontWeight = _a.fontWeight, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, _f = _a.iconMode, iconMode = _f === void 0 ? 'none' : _f, _g = _a.iconFillType, iconFillType = _g === void 0 ? 'line' : _g, iconName = _a.iconName, _h = _a.colorTheme, colorTheme = _h === void 0 ? 'none' : _h, overrideColorKey = _a.overrideColorKey, onClick = _a.onClick, rest = __rest(_a, ["text", "size", "responsiveMode", "fontWeight", "type", "state", "iconMode", "iconFillType", "iconName", "colorTheme", "overrideColorKey", "onClick"]);
|
|
120
124
|
var handleClick = function (e) {
|
|
121
125
|
if (onClick) {
|
|
122
126
|
onClick(e);
|
|
123
127
|
}
|
|
124
128
|
};
|
|
125
|
-
return ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', pressedColor: backgroundPressedColor[colorTheme] }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled'
|
|
129
|
+
return ((0, jsx_runtime_1.jsxs)(S_Button, __assign({ "x-pds-name": "TextButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, rest, { size: size, responsiveMode: responsiveMode, onClick: handleClick, type: type, fontWeight: fontWeight, disabled: state === 'disabled', pressedColor: backgroundPressedColor[colorTheme] }, { children: [size !== 'xsmall' && iconMode === 'left' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled'
|
|
130
|
+
? 'ui_cpnt_button_text_disabled'
|
|
131
|
+
: getIconColor(overrideColorKey)[colorTheme], fillType: iconFillType }), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: textStyle[size], colorTheme: state === 'disabled' ? textDisabledColor[colorTheme] : textColor[colorTheme], colorOverride: state === 'disabled'
|
|
126
132
|
? overrideTextDisabledColor[colorTheme]
|
|
127
|
-
:
|
|
133
|
+
: getOverrideTextColor(overrideColorKey)[colorTheme], singleLineMode: "use" }), size !== 'xsmall' && iconMode === 'right' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: state === 'disabled'
|
|
134
|
+
? 'ui_cpnt_button_text_disabled'
|
|
135
|
+
: getIconColor(overrideColorKey)[colorTheme], fillType: iconFillType })] }))] })));
|
|
128
136
|
}
|
|
129
137
|
var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: 14px;\n height: 48px;\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"], ["\n border-radius: 14px;\n height: 48px;\n ", ";\n\n & > div {\n height: 48px;\n line-height: 48px;\n }\n"])), function (_a) {
|
|
130
138
|
var size = _a.size;
|
package/package.json
CHANGED
package/release-note.md
CHANGED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
type Props = {
|
|
3
|
-
currentYear: number;
|
|
4
|
-
currentMonth: number;
|
|
5
|
-
minDate?: string;
|
|
6
|
-
maxDate?: string;
|
|
7
|
-
onMonthSelect: (year: number, month: number) => void;
|
|
8
|
-
onClose: () => void;
|
|
9
|
-
onBackToYear: () => void;
|
|
10
|
-
};
|
|
11
|
-
declare function MonthPicker({ currentYear, currentMonth, minDate, maxDate, onMonthSelect, onClose, onBackToYear }: Props): JSX.Element;
|
|
12
|
-
export default MonthPicker;
|
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
-
return cooked;
|
|
5
|
-
};
|
|
6
|
-
var __assign = (this && this.__assign) || function () {
|
|
7
|
-
__assign = Object.assign || function(t) {
|
|
8
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
-
s = arguments[i];
|
|
10
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
-
t[p] = s[p];
|
|
12
|
-
}
|
|
13
|
-
return t;
|
|
14
|
-
};
|
|
15
|
-
return __assign.apply(this, arguments);
|
|
16
|
-
};
|
|
17
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
18
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
|
-
};
|
|
20
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
22
|
-
var react_1 = require("react");
|
|
23
|
-
var react_i18next_1 = require("react-i18next");
|
|
24
|
-
var dateHelper_1 = require("../../../common/utils/dateHelper");
|
|
25
|
-
var styled_components_1 = __importDefault(require("styled-components"));
|
|
26
|
-
var IconButton_1 = require("../IconButton");
|
|
27
|
-
var TextLabel_1 = require("../TextLabel");
|
|
28
|
-
// Constants
|
|
29
|
-
var MONTH_KEYS = [
|
|
30
|
-
'str_month_january',
|
|
31
|
-
'str_month_february',
|
|
32
|
-
'str_month_march',
|
|
33
|
-
'str_month_april',
|
|
34
|
-
'str_month_may',
|
|
35
|
-
'str_month_june',
|
|
36
|
-
'str_month_july',
|
|
37
|
-
'str_month_august',
|
|
38
|
-
'str_month_september',
|
|
39
|
-
'str_month_october',
|
|
40
|
-
'str_month_november',
|
|
41
|
-
'str_month_december'
|
|
42
|
-
];
|
|
43
|
-
var MONTHS_COUNT = 12;
|
|
44
|
-
var GRID_COLUMNS = 3;
|
|
45
|
-
function MonthPicker(_a) {
|
|
46
|
-
var currentYear = _a.currentYear, currentMonth = _a.currentMonth, minDate = _a.minDate, maxDate = _a.maxDate, onMonthSelect = _a.onMonthSelect, onClose = _a.onClose, onBackToYear = _a.onBackToYear;
|
|
47
|
-
var t = (0, react_i18next_1.useTranslation)().t;
|
|
48
|
-
// Generate months array (1-12)
|
|
49
|
-
var months = (0, react_1.useMemo)(function () { return Array.from({ length: MONTHS_COUNT }, function (_, i) { return i + 1; }); }, []);
|
|
50
|
-
var getMonthStringKey = (0, react_1.useCallback)(function (monthNumber) {
|
|
51
|
-
return MONTH_KEYS[monthNumber - 1] || MONTH_KEYS[0];
|
|
52
|
-
}, []);
|
|
53
|
-
// Helper function to compare dates for disabled state
|
|
54
|
-
var isDateOutOfRange = (0, react_1.useCallback)(function (targetDate, compareDate, isMinDate) {
|
|
55
|
-
var targetYear = targetDate.getFullYear();
|
|
56
|
-
var targetMonth = targetDate.getMonth();
|
|
57
|
-
var compareYear = compareDate.getFullYear();
|
|
58
|
-
var compareMonth = compareDate.getMonth();
|
|
59
|
-
if (isMinDate) {
|
|
60
|
-
return (targetYear < compareYear || (targetYear === compareYear && targetMonth < compareMonth));
|
|
61
|
-
}
|
|
62
|
-
return targetYear > compareYear || (targetYear === compareYear && targetMonth > compareMonth);
|
|
63
|
-
}, []);
|
|
64
|
-
var isMonthDisabled = (0, react_1.useCallback)(function (month) {
|
|
65
|
-
if (!minDate && !maxDate)
|
|
66
|
-
return false;
|
|
67
|
-
var targetDate = new Date(currentYear, month - 1, 1);
|
|
68
|
-
if (minDate) {
|
|
69
|
-
var minDateObj = dateHelper_1.DateHelper.parseDate(minDate);
|
|
70
|
-
if (isDateOutOfRange(targetDate, minDateObj, true)) {
|
|
71
|
-
return true;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
if (maxDate) {
|
|
75
|
-
var maxDateObj = dateHelper_1.DateHelper.parseDate(maxDate);
|
|
76
|
-
if (isDateOutOfRange(targetDate, maxDateObj, false)) {
|
|
77
|
-
return true;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
return false;
|
|
81
|
-
}, [currentYear, minDate, maxDate, isDateOutOfRange]);
|
|
82
|
-
var handleMonthClick = (0, react_1.useCallback)(function (month) {
|
|
83
|
-
if (isMonthDisabled(month))
|
|
84
|
-
return;
|
|
85
|
-
onMonthSelect(currentYear, month);
|
|
86
|
-
onClose();
|
|
87
|
-
}, [currentYear, isMonthDisabled, onMonthSelect, onClose]);
|
|
88
|
-
// Helper function to get color theme for month text
|
|
89
|
-
var getTextColorTheme = (0, react_1.useCallback)(function (isDisabled, isSelected) {
|
|
90
|
-
if (isDisabled)
|
|
91
|
-
return 'sysTextTertiary';
|
|
92
|
-
if (isSelected)
|
|
93
|
-
return 'sysTextWhite';
|
|
94
|
-
return 'sysTextPrimary';
|
|
95
|
-
}, []);
|
|
96
|
-
return ((0, jsx_runtime_1.jsxs)(S_MonthPickerContainer, { children: [(0, jsx_runtime_1.jsxs)(S_Header, { children: [(0, jsx_runtime_1.jsx)(S_BackButton, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { onClick: onBackToYear, iconName: "ic_arrow_left", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 20, baseSize: "medium" }) }), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: currentYear.toString(), textAlign: "center" }), (0, jsx_runtime_1.jsx)(S_CloseButton, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { onClick: onClose, iconName: "ic_xmark", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 20, baseSize: "small" }) })] }), (0, jsx_runtime_1.jsx)(S_MonthGrid, { children: months.map(function (month) {
|
|
97
|
-
var isDisabled = isMonthDisabled(month);
|
|
98
|
-
var isSelected = month === currentMonth;
|
|
99
|
-
return ((0, jsx_runtime_1.jsx)(S_MonthItem, __assign({ isSelected: isSelected, isDisabled: isDisabled, onClick: function () { return handleMonthClick(month); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: t(getMonthStringKey(month)), textAlign: "center", colorTheme: getTextColorTheme(isDisabled, isSelected) }) }), month));
|
|
100
|
-
}) })] }));
|
|
101
|
-
}
|
|
102
|
-
var S_MonthPickerContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 16px;\n box-shadow: ", ";\n left: 50%;\n min-width: 280px;\n padding: 16px;\n padding-top: ", ";\n position: absolute;\n top: 100%;\n transform: translateX(-50%);\n z-index: 1000;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 16px;\n box-shadow: ", ";\n left: 50%;\n min-width: 280px;\n padding: 16px;\n padding-top: ", ";\n position: absolute;\n top: 100%;\n transform: translateX(-50%);\n z-index: 1000;\n"])), function (_a) {
|
|
103
|
-
var theme = _a.theme;
|
|
104
|
-
return theme.ui_cpnt_button_fill_base_white;
|
|
105
|
-
}, function (_a) {
|
|
106
|
-
var theme = _a.theme;
|
|
107
|
-
return theme.ui_cpnt_card_base;
|
|
108
|
-
}, function (_a) {
|
|
109
|
-
var theme = _a.theme;
|
|
110
|
-
return theme.boxShadow.elevation4;
|
|
111
|
-
}, function (_a) {
|
|
112
|
-
var theme = _a.theme;
|
|
113
|
-
return theme.spacing.spacingA;
|
|
114
|
-
});
|
|
115
|
-
var S_Header = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-bottom: 16px;\n"], ["\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-bottom: 16px;\n"])));
|
|
116
|
-
var S_BackButton = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
|
|
117
|
-
var S_CloseButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n"], ["\n align-items: center;\n display: flex;\n"])));
|
|
118
|
-
var S_MonthGrid = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: grid;\n gap: 8px;\n grid-template-columns: repeat(", ", 1fr);\n"], ["\n display: grid;\n gap: 8px;\n grid-template-columns: repeat(", ", 1fr);\n"])), GRID_COLUMNS);
|
|
119
|
-
var S_MonthItem = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n background: ", ";\n border: 1px solid ", ";\n border-radius: 12px;\n cursor: ", ";\n display: flex;\n height: 40px;\n justify-content: center;\n padding: 8px;\n transition: all 0.2s ease;\n\n &:hover {\n background: ", ";\n }\n"], ["\n align-items: center;\n background: ", ";\n border: 1px solid ", ";\n border-radius: 12px;\n cursor: ", ";\n display: flex;\n height: 40px;\n justify-content: center;\n padding: 8px;\n transition: all 0.2s ease;\n\n &:hover {\n background: ", ";\n }\n"])), function (_a) {
|
|
120
|
-
var isSelected = _a.isSelected, theme = _a.theme;
|
|
121
|
-
return isSelected ? theme.ui_cpnt_calendar_status_a : 'transparent';
|
|
122
|
-
}, function (_a) {
|
|
123
|
-
var theme = _a.theme;
|
|
124
|
-
return theme.ui_cpnt_card_base;
|
|
125
|
-
}, function (_a) {
|
|
126
|
-
var isDisabled = _a.isDisabled;
|
|
127
|
-
return (isDisabled ? 'not-allowed' : 'pointer');
|
|
128
|
-
}, function (_a) {
|
|
129
|
-
var isSelected = _a.isSelected, theme = _a.theme;
|
|
130
|
-
return isSelected ? theme.ui_cpnt_calendar_status_a : theme.ui_cpnt_button_fill_base_transparent;
|
|
131
|
-
});
|
|
132
|
-
exports.default = MonthPicker;
|
|
133
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
type Props = {
|
|
3
|
-
currentYear: number;
|
|
4
|
-
minDate?: string;
|
|
5
|
-
maxDate?: string;
|
|
6
|
-
onYearSelect: (year: number) => void;
|
|
7
|
-
onClose: () => void;
|
|
8
|
-
};
|
|
9
|
-
declare function YearPicker({ currentYear, minDate, maxDate, onYearSelect, onClose }: Props): JSX.Element;
|
|
10
|
-
export default YearPicker;
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
-
return cooked;
|
|
5
|
-
};
|
|
6
|
-
var __assign = (this && this.__assign) || function () {
|
|
7
|
-
__assign = Object.assign || function(t) {
|
|
8
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
-
s = arguments[i];
|
|
10
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
-
t[p] = s[p];
|
|
12
|
-
}
|
|
13
|
-
return t;
|
|
14
|
-
};
|
|
15
|
-
return __assign.apply(this, arguments);
|
|
16
|
-
};
|
|
17
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
18
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
|
-
};
|
|
20
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
22
|
-
var react_1 = require("react");
|
|
23
|
-
var react_i18next_1 = require("react-i18next");
|
|
24
|
-
var dateHelper_1 = require("../../../common/utils/dateHelper");
|
|
25
|
-
var styled_components_1 = __importDefault(require("styled-components"));
|
|
26
|
-
var IconButton_1 = require("../IconButton");
|
|
27
|
-
var TextLabel_1 = require("../TextLabel");
|
|
28
|
-
function YearPicker(_a) {
|
|
29
|
-
var currentYear = _a.currentYear, minDate = _a.minDate, maxDate = _a.maxDate, onYearSelect = _a.onYearSelect, onClose = _a.onClose;
|
|
30
|
-
var t = (0, react_i18next_1.useTranslation)('translation').t;
|
|
31
|
-
var years = (0, react_1.useMemo)(function () {
|
|
32
|
-
var minYear = minDate ? dateHelper_1.DateHelper.parseDate(minDate).getFullYear() : currentYear - 10;
|
|
33
|
-
var maxYear = maxDate ? dateHelper_1.DateHelper.parseDate(maxDate).getFullYear() : currentYear + 10;
|
|
34
|
-
var yearList = [];
|
|
35
|
-
for (var year = minYear; year <= maxYear; year += 1) {
|
|
36
|
-
yearList.push(year);
|
|
37
|
-
}
|
|
38
|
-
return yearList;
|
|
39
|
-
}, [currentYear, minDate, maxDate]);
|
|
40
|
-
var handleYearClick = function (year) {
|
|
41
|
-
onYearSelect(year);
|
|
42
|
-
};
|
|
43
|
-
return ((0, jsx_runtime_1.jsxs)(S_YearPickerContainer, { children: [(0, jsx_runtime_1.jsxs)(S_Header, { children: [(0, jsx_runtime_1.jsx)(S_Title, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: t('str_9617'), textAlign: "center" }) }), (0, jsx_runtime_1.jsx)(S_CloseButton, __assign({ onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: "ic_xmark", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: 20, baseSize: "small" }) }))] }), (0, jsx_runtime_1.jsx)(S_YearGrid, { children: years.map(function (year) { return ((0, jsx_runtime_1.jsx)(S_YearItem, __assign({ isSelected: year === currentYear, onClick: function () { return handleYearClick(year); } }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: year.toString(), textAlign: "center", colorTheme: year === currentYear ? 'sysTextWhite' : 'sysTextPrimary' }) }), year)); }) })] }));
|
|
44
|
-
}
|
|
45
|
-
var S_YearPickerContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 16px;\n box-shadow: ", ";\n left: 50%;\n min-width: 280px;\n padding: 16px;\n padding-top: ", ";\n position: absolute;\n top: 100%;\n transform: translateX(-50%);\n z-index: 1000;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 16px;\n box-shadow: ", ";\n left: 50%;\n min-width: 280px;\n padding: 16px;\n padding-top: ", ";\n position: absolute;\n top: 100%;\n transform: translateX(-50%);\n z-index: 1000;\n"])), function (_a) {
|
|
46
|
-
var theme = _a.theme;
|
|
47
|
-
return theme.ui_cpnt_button_fill_base_white;
|
|
48
|
-
}, function (_a) {
|
|
49
|
-
var theme = _a.theme;
|
|
50
|
-
return theme.ui_cpnt_card_base;
|
|
51
|
-
}, function (_a) {
|
|
52
|
-
var theme = _a.theme;
|
|
53
|
-
return theme.boxShadow.elevation4;
|
|
54
|
-
}, function (_a) {
|
|
55
|
-
var theme = _a.theme;
|
|
56
|
-
return theme.spacing.spacingA;
|
|
57
|
-
});
|
|
58
|
-
var S_Header = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n margin-bottom: 16px;\n position: relative;\n"], ["\n align-items: center;\n display: flex;\n height: 40px;\n justify-content: center;\n margin-bottom: 16px;\n position: relative;\n"])));
|
|
59
|
-
var S_CloseButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n"], ["\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n"])));
|
|
60
|
-
var S_Title = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n left: 50%;\n position: absolute;\n transform: translateX(-50%);\n"], ["\n left: 50%;\n position: absolute;\n transform: translateX(-50%);\n"])));
|
|
61
|
-
var S_YearGrid = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: grid;\n gap: 8px;\n grid-template-columns: repeat(3, 1fr);\n max-height: 200px;\n overflow-y: auto;\n"], ["\n display: grid;\n gap: 8px;\n grid-template-columns: repeat(3, 1fr);\n max-height: 200px;\n overflow-y: auto;\n"])));
|
|
62
|
-
var S_YearItem = styled_components_1.default.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n background: ", ";\n border: 1px solid ", ";\n border-radius: 12px;\n cursor: pointer;\n display: flex;\n height: 40px;\n justify-content: center;\n padding: 8px;\n transition: all 0.2s ease;\n\n &:hover {\n background: ", ";\n }\n"], ["\n align-items: center;\n background: ", ";\n border: 1px solid ", ";\n border-radius: 12px;\n cursor: pointer;\n display: flex;\n height: 40px;\n justify-content: center;\n padding: 8px;\n transition: all 0.2s ease;\n\n &:hover {\n background: ", ";\n }\n"])), function (_a) {
|
|
63
|
-
var isSelected = _a.isSelected, theme = _a.theme;
|
|
64
|
-
return isSelected ? theme.ui_cpnt_calendar_status_a : 'transparent';
|
|
65
|
-
}, function (_a) {
|
|
66
|
-
var theme = _a.theme;
|
|
67
|
-
return theme.ui_cpnt_card_base;
|
|
68
|
-
}, function (_a) {
|
|
69
|
-
var isSelected = _a.isSelected, theme = _a.theme;
|
|
70
|
-
return isSelected ? theme.ui_cpnt_calendar_status_a : theme.ui_cpnt_button_fill_base_transparent;
|
|
71
|
-
});
|
|
72
|
-
exports.default = YearPicker;
|
|
73
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|