pds-dev-kit-web 1.3.11 → 1.3.12
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/assets/icons/fill/Question.d.ts +4 -0
- package/dist/src/common/assets/icons/fill/Question.js +34 -0
- package/dist/src/common/assets/icons/fill/index.d.ts +1 -0
- package/dist/src/common/assets/icons/fill/index.js +2 -0
- package/dist/src/common/assets/icons/line/Requirement.d.ts +4 -0
- package/dist/src/common/assets/icons/line/Requirement.js +34 -0
- package/dist/src/common/assets/icons/line/index.d.ts +1 -0
- package/dist/src/common/assets/icons/line/index.js +2 -0
- package/dist/src/common/styles/colorSet/UIColor.json +1 -1
- package/dist/src/common/styles/colorSet/index.d.ts +211 -211
- package/dist/src/common/styles/colorSet/index.js +4 -4
- package/dist/src/common/types/{comopnents.d.ts → components.d.ts} +5 -0
- package/dist/src/common/types/{comopnents.js → components.js} +0 -0
- package/dist/src/common/types/index.d.ts +1 -1
- package/dist/src/common/types/index.js +1 -1
- package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.d.ts +9 -4
- package/dist/src/desktop/components/DesktopTabBar/DesktopTabBar.js +81 -38
- package/dist/src/desktop/components/TextLabel/TextLabel.d.ts +3 -1
- package/dist/src/desktop/components/TextLabel/TextLabel.js +11 -4
- package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.d.ts +6 -4
- package/dist/src/desktop/components/UserDesktopTabBar/UserDesktopTabBar.js +38 -16
- package/dist/src/mobile/components/MobileTabBar/MobileTabBar.d.ts +6 -4
- package/dist/src/mobile/components/MobileTabBar/MobileTabBar.js +21 -12
- package/dist/src/mobile/components/TextLabel/TextLabel.d.ts +3 -1
- package/dist/src/mobile/components/TextLabel/TextLabel.js +10 -3
- package/package.json +1 -1
- package/release-note.md +17 -5
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
24
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
|
+
};
|
|
27
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
+
var react_1 = __importDefault(require("react"));
|
|
29
|
+
var Question = function (_a) {
|
|
30
|
+
var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
|
|
31
|
+
return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
|
|
32
|
+
react_1.default.createElement("path", { fill: color, fillRule: "evenodd", d: "M12.0001,2 C17.5231,2 22.0001,6.477 22.0001,12 C22.0001,17.523 17.5231,22 12.0001,22 C6.4771,22 2.0001,17.523 2.0001,12 C2.0001,6.477 6.4771,2 12.0001,2 Z M11.7876652,14.8317533 C11.432968,14.8317533 11.1366272,14.9408168 10.8986427,15.158944 C10.66157,15.3779367 10.5439455,15.6575203 10.5439455,15.9976948 C10.5439455,16.3378693 10.66157,16.6174529 10.8986427,16.8355801 C11.1366272,17.0545728 11.432968,17.1636364 11.7876652,17.1636364 C12.1414506,17.1636364 12.4377914,17.0545728 12.6748641,16.8355801 C12.9119368,16.6174529 13.0304731,16.3378693 13.0304731,15.9976948 C13.0304731,15.6575203 12.9119368,15.3779367 12.6748641,15.158944 C12.4377914,14.9408168 12.1414506,14.8317533 11.7876652,14.8317533 Z M11.8870534,6.8 C10.8940836,6.8 10.1071846,7.1393089 9.57285929,7.66558393 C9.27195935,7.96161363 9.15342301,8.18666545 9.05585848,8.51385618 C8.84066944,9.23661876 9.26284117,9.97669301 10.0533874,9.97669301 L10.0533874,9.97669301 L10.1199501,9.97669301 C10.5676527,9.97669301 10.9360272,9.74211977 11.087389,9.34914467 C11.1402744,9.21238241 11.1548635,9.12236168 11.2806944,8.95097606 C11.4338798,8.74237033 11.7119843,8.66100544 11.9754997,8.69649439 C12.4861178,8.76747227 12.7514568,9.03840004 12.7514568,9.73259835 C12.7514568,10.0173755 12.6666577,10.2787818 12.495236,10.5159518 C12.324726,10.7522562 12.0247379,10.9686522 11.7475452,11.2993053 C11.4183789,11.6905492 11.1986308,11.9952347 11.0655053,12.3414683 C10.8995545,12.7699323 10.8858772,13.0339354 10.8913481,13.2892827 C10.9032017,13.8389285 11.2907244,14.2379644 11.8706406,14.2379644 C12.4131723,14.2388283 12.7514568,13.9090408 12.8581395,13.3550671 C12.9593513,12.8244641 13.0933886,12.5846974 13.3104013,12.3683014 L13.3104013,12.3683014 L14.0754166,11.6299583 C14.3991119,11.3036332 14.6334492,10.9833671 14.7802519,10.6708913 C14.9270546,10.3584155 15,10.0113164 15,9.62872827 C15,8.75535409 14.7282782,8.08106421 14.1848347,7.6075898 C13.6413912,7.1341154 12.8754641,6.8 11.8870534,6.8 Z" })));
|
|
33
|
+
};
|
|
34
|
+
exports.default = Question;
|
|
@@ -28,6 +28,7 @@ declare const fillIcons: {
|
|
|
28
28
|
readonly ic_post_free: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
29
29
|
readonly ic_post_notice: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
30
30
|
readonly ic_post_social: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
31
|
+
readonly ic_question: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
31
32
|
readonly ic_reply: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
32
33
|
readonly ic_setting: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
33
34
|
readonly ic_speaker_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
@@ -31,6 +31,7 @@ var Pin_1 = __importDefault(require("./Pin"));
|
|
|
31
31
|
var PostFree_1 = __importDefault(require("./PostFree"));
|
|
32
32
|
var PostNotice_1 = __importDefault(require("./PostNotice"));
|
|
33
33
|
var PostSocial_1 = __importDefault(require("./PostSocial"));
|
|
34
|
+
var Question_1 = __importDefault(require("./Question"));
|
|
34
35
|
var Reply_1 = __importDefault(require("./Reply"));
|
|
35
36
|
var Setting_1 = __importDefault(require("./Setting"));
|
|
36
37
|
var SpeakerOff_1 = __importDefault(require("./SpeakerOff"));
|
|
@@ -81,6 +82,7 @@ var fillIcons = {
|
|
|
81
82
|
ic_post_free: PostFree_1.default,
|
|
82
83
|
ic_post_notice: PostNotice_1.default,
|
|
83
84
|
ic_post_social: PostSocial_1.default,
|
|
85
|
+
ic_question: Question_1.default,
|
|
84
86
|
ic_reply: Reply_1.default,
|
|
85
87
|
ic_setting: Setting_1.default,
|
|
86
88
|
ic_speaker_off: SpeakerOff_1.default,
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
14
|
+
var t = {};
|
|
15
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
16
|
+
t[p] = s[p];
|
|
17
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
18
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
19
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
20
|
+
t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
24
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
25
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
26
|
+
};
|
|
27
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
|
+
var react_1 = __importDefault(require("react"));
|
|
29
|
+
var Requirement = function (_a) {
|
|
30
|
+
var color = _a.color, size = _a.size, rest = __rest(_a, ["color", "size"]);
|
|
31
|
+
return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 24 24" }, rest),
|
|
32
|
+
react_1.default.createElement("path", { fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M11.9998204,19.6217475 L11.9998204,4.35 M19,16.0272646 L5,7.94412368 M19,7.94412368 L5,16.0272646" })));
|
|
33
|
+
};
|
|
34
|
+
exports.default = Requirement;
|
|
@@ -91,6 +91,7 @@ declare const lineIcons: {
|
|
|
91
91
|
readonly ic_radio_off: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
92
92
|
readonly ic_radio_on: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
93
93
|
readonly ic_report: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
94
|
+
readonly ic_requirement: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
94
95
|
readonly ic_search: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
95
96
|
readonly ic_seller_info: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
96
97
|
readonly ic_seller_intro: ({ color, size, ...rest }: import("../IconType").default) => JSX.Element;
|
|
@@ -94,6 +94,7 @@ var Question_1 = __importDefault(require("./Question"));
|
|
|
94
94
|
var RadioOff_1 = __importDefault(require("./RadioOff"));
|
|
95
95
|
var RadioOn_1 = __importDefault(require("./RadioOn"));
|
|
96
96
|
var Report_1 = __importDefault(require("./Report"));
|
|
97
|
+
var Requirement_1 = __importDefault(require("./Requirement"));
|
|
97
98
|
var Search_1 = __importDefault(require("./Search"));
|
|
98
99
|
var SellerInfo_1 = __importDefault(require("./SellerInfo"));
|
|
99
100
|
var SellerIntro_1 = __importDefault(require("./SellerIntro"));
|
|
@@ -228,6 +229,7 @@ var lineIcons = {
|
|
|
228
229
|
ic_radio_off: RadioOff_1.default,
|
|
229
230
|
ic_radio_on: RadioOn_1.default,
|
|
230
231
|
ic_report: Report_1.default,
|
|
232
|
+
ic_requirement: Requirement_1.default,
|
|
231
233
|
ic_search: Search_1.default,
|
|
232
234
|
ic_seller_info: SellerInfo_1.default,
|
|
233
235
|
ic_seller_intro: SellerIntro_1.default,
|
|
@@ -312,7 +312,7 @@
|
|
|
312
312
|
"ui_cpnt_modal_gradient_2": "sys_component_base_black",
|
|
313
313
|
"ui_cpnt_list_icon_04": "sys_widget_white",
|
|
314
314
|
"ui_cpnt_list_thumbnail_border": "sys_border_line_01",
|
|
315
|
-
"ui_cpnt_list_thumbnail_gradient_1": "
|
|
315
|
+
"ui_cpnt_list_thumbnail_gradient_1": "sys_component_base_black_opacity80",
|
|
316
316
|
"ui_cpnt_list_thumbnail_gradient_2": "sys_component_base_black_opacity00",
|
|
317
317
|
"ui_cpnt_list_base_area_active": "sys_component_base_01",
|
|
318
318
|
"ui_cpnt_contextmenu_base": "sys_component_base_02",
|
|
@@ -1,60 +1,159 @@
|
|
|
1
1
|
declare const colorSet: {
|
|
2
|
-
readonly
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
2
|
+
readonly PaletteColor_Dark: {
|
|
3
|
+
sys_container_background_01: string;
|
|
4
|
+
sys_container_background_02: string;
|
|
5
|
+
sys_container_background_03: string;
|
|
6
|
+
sys_background_dimmed: string;
|
|
7
|
+
sys_text_grey_01: string;
|
|
8
|
+
sys_text_grey_02: string;
|
|
9
|
+
sys_text_grey_03: string;
|
|
10
|
+
sys_text_white: string;
|
|
11
|
+
sys_text_brand_primary: string;
|
|
12
|
+
sys_text_error_01: string;
|
|
13
|
+
sys_widget_grey_01: string;
|
|
14
|
+
sys_widget_grey_02: string;
|
|
15
|
+
sys_widget_grey_03: string;
|
|
16
|
+
sys_widget_primary_01: string;
|
|
17
|
+
sys_widget_error_01: string;
|
|
18
|
+
sys_widget_warning_01: string;
|
|
19
|
+
sys_widget_success_01: string;
|
|
20
|
+
sys_widget_white: string;
|
|
21
|
+
sys_border_area_01: string;
|
|
22
|
+
sys_border_line_01: string;
|
|
23
|
+
sys_border_line_02: string;
|
|
24
|
+
sys_border_line_03: string;
|
|
25
|
+
sys_border_line_04: string;
|
|
26
|
+
sys_border_line_05: string;
|
|
27
|
+
sys_component_base_01: string;
|
|
28
|
+
sys_component_base_02: string;
|
|
29
|
+
sys_component_base_03: string;
|
|
30
|
+
sys_component_base_red: string;
|
|
31
|
+
sys_component_base_white: string;
|
|
32
|
+
sys_component_base_white_opacity00: string;
|
|
33
|
+
sys_on_base_white_opacity00: string;
|
|
34
|
+
sys_on_base_white_opacity30: string;
|
|
35
|
+
sys_on_base_black_opacity20: string;
|
|
36
|
+
usr_brand_primary: string;
|
|
37
|
+
usr_brand_secondary: string;
|
|
38
|
+
usr_brand_secondary_variant: string;
|
|
39
|
+
usr_background: string;
|
|
40
|
+
usr_surface: string;
|
|
41
|
+
usr_border: string;
|
|
42
|
+
usr_on_brand_primary: string;
|
|
43
|
+
usr_on_brand_secondary: string;
|
|
44
|
+
usr_on_background: string;
|
|
45
|
+
usr_on_surface: string;
|
|
46
|
+
sys_widget_status_active_01: string;
|
|
47
|
+
sys_text_success_01: string;
|
|
48
|
+
sys_widget_grey_04: string;
|
|
49
|
+
sys_text_active: string;
|
|
50
|
+
sys_component_base_blue: string;
|
|
51
|
+
sys_on_base_black_opacity65: string;
|
|
52
|
+
sys_component_base_04: string;
|
|
53
|
+
sys_component_base_black: string;
|
|
54
|
+
sys_component_base_black_opacity00: string;
|
|
55
|
+
usr_text_brand_secondary_variant: string;
|
|
56
|
+
usr_text_brand_primary: string;
|
|
57
|
+
usr_text_brand_on_primary: string;
|
|
58
|
+
sys_text_brand_secondary_variant: string;
|
|
59
|
+
sys_component_base_navy: string;
|
|
60
|
+
sys_widget_lightgreen: string;
|
|
61
|
+
sys_border_line_06: string;
|
|
62
|
+
sys_background_dimmed_20: string;
|
|
63
|
+
sys_widget_pink: string;
|
|
64
|
+
sys_widget_primary_opacity20: string;
|
|
65
|
+
sys_widget_secondary_variant_01: string;
|
|
66
|
+
usr_component_base_brand_primary_opacity10: string;
|
|
67
|
+
sys_temp_grey_01: string;
|
|
68
|
+
sys_temp_grey_02: string;
|
|
69
|
+
sys_temp_grey_03: string;
|
|
70
|
+
sys_temp_grey_04: string;
|
|
71
|
+
sys_temp_grey_05: string;
|
|
72
|
+
sys_temp_white: string;
|
|
73
|
+
sys_temp_primary_01: string;
|
|
74
|
+
sys_temp_secondary_01: string;
|
|
75
|
+
sys_temp_red: string;
|
|
76
|
+
sys_temp_white_opacity_00: string;
|
|
77
|
+
sys_temp_dimmed: string;
|
|
78
|
+
sys_temp_black: string;
|
|
79
|
+
sys_temp_primary_02: string;
|
|
80
|
+
sys_temp_primary_03: string;
|
|
81
|
+
sys_temp_secondary_02: string;
|
|
82
|
+
sys_temp_lightgreen_01: string;
|
|
83
|
+
sys_text_grey_04: string;
|
|
84
|
+
sys_papp_post_social_background: string;
|
|
85
|
+
sys_papp_post_notice_background: string;
|
|
86
|
+
sys_papp_post_free_background: string;
|
|
87
|
+
sys_papp_vod_background: string;
|
|
88
|
+
sys_papp_vodplus_background: string;
|
|
89
|
+
sys_papp_live_background: string;
|
|
90
|
+
sys_selcontrols_base_off_disabled: string;
|
|
91
|
+
sys_selcontrols_base_on_disabled: string;
|
|
92
|
+
sys_component_base_blue_opacity10: string;
|
|
93
|
+
sys_component_base_05: string;
|
|
94
|
+
sys_background_dimmed_65: string;
|
|
95
|
+
sys_temp_grey_06: string;
|
|
96
|
+
sys_on_base_white_opacity10: string;
|
|
97
|
+
sys_on_base_black_opacity10: string;
|
|
98
|
+
sys_component_base_05_opacity00: string;
|
|
99
|
+
sys_papp_post_notice_link: string;
|
|
100
|
+
sys_component_base_navy_light: string;
|
|
101
|
+
sys_component_base_orange: string;
|
|
102
|
+
sys_component_base_grey: string;
|
|
103
|
+
sys_component_base_black_opacity80: string;
|
|
104
|
+
sys_text_darkgrey_02: string;
|
|
105
|
+
sys_border_line_darktheme_01: string;
|
|
106
|
+
sys_border_line_darktheme_02: string;
|
|
107
|
+
sys_component_base_darktheme_01: string;
|
|
108
|
+
sys_component_base_darktheme_02: string;
|
|
109
|
+
sys_component_base_darktheme_03: string;
|
|
110
|
+
sys_text_grey_darktheme_01: string;
|
|
111
|
+
sys_text_grey_darktheme_02: string;
|
|
112
|
+
sys_text_grey_darktheme_03: string;
|
|
113
|
+
sys_widget_grey_darktheme_01: string;
|
|
114
|
+
sys_widget_grey_darktheme_02: string;
|
|
115
|
+
sys_widget_grey_darktheme_03: string;
|
|
116
|
+
sys_component_base_green: string;
|
|
117
|
+
sys_text_error_darktheme_01: string;
|
|
118
|
+
sys_border_line_darktheme_03: string;
|
|
119
|
+
sys_border_line_darktheme_04: string;
|
|
120
|
+
usr_widget_brand_primary_darktheme_01: string;
|
|
121
|
+
usr_text_brand_primary_darktheme_01: string;
|
|
122
|
+
sys_component_base_black_opacity50: string;
|
|
123
|
+
sys_component_base_card: string;
|
|
124
|
+
sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
|
|
125
|
+
sys_widget_green_01: string;
|
|
126
|
+
sys_component_base_black_opacity30: string;
|
|
127
|
+
sys_area_background: string;
|
|
128
|
+
sys_border_white_opacity30: string;
|
|
129
|
+
sys_container_background_wt: string;
|
|
130
|
+
sys_channeldesc_grey_03: string;
|
|
131
|
+
sys_channeldesc_border_grey_03: string;
|
|
132
|
+
sys_gradient_base_01: string;
|
|
133
|
+
sys_gradient_base_01_opacity00: string;
|
|
134
|
+
sys_channeldesc_background: string;
|
|
135
|
+
sys_channeldesc_bottomsheet_base: string;
|
|
136
|
+
sys_channeldesc_bottomsheet_border: string;
|
|
137
|
+
sys_channeldesc_contents_base: string;
|
|
138
|
+
sys_channeldesc_dimmed: string;
|
|
139
|
+
sys_gradient_base_01_opacity50: string;
|
|
140
|
+
sys_gradient_base_01_opacity75: string;
|
|
141
|
+
sys_gradient_base_01_opacity40: string;
|
|
142
|
+
sys_widget_black: string;
|
|
143
|
+
usr_temp_primary_01: string;
|
|
144
|
+
sys_cpnt_sheet_base_02_opacity50: string;
|
|
145
|
+
usr_menu_primarymenu_main: string;
|
|
146
|
+
usr_menu_primarymenu_sub: string;
|
|
147
|
+
usr_menu_secondarymenu_main: string;
|
|
148
|
+
usr_menu_secondarymenu_sub: string;
|
|
149
|
+
usr_menu_hover: string;
|
|
150
|
+
usr_menu_active: string;
|
|
151
|
+
usr_menu_background: string;
|
|
152
|
+
sys_cpnt_base_white_opacity50: string;
|
|
153
|
+
sys_widget_dark_01: string;
|
|
154
|
+
usr_menu_background_gradient_opacity00: string;
|
|
155
|
+
sys_border_line_white: string;
|
|
156
|
+
sys_component_base_white_opacity10: string;
|
|
58
157
|
};
|
|
59
158
|
readonly PaletteColor_light: {
|
|
60
159
|
sys_container_background_01: string;
|
|
@@ -702,161 +801,62 @@ declare const colorSet: {
|
|
|
702
801
|
ui_cpnt_dropdown_border_white_focus: string;
|
|
703
802
|
ui_cpnt_dropdown_base_white_normal: string;
|
|
704
803
|
};
|
|
705
|
-
readonly
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
sys_text_brand_secondary_variant: string;
|
|
762
|
-
sys_component_base_navy: string;
|
|
763
|
-
sys_widget_lightgreen: string;
|
|
764
|
-
sys_border_line_06: string;
|
|
765
|
-
sys_background_dimmed_20: string;
|
|
766
|
-
sys_widget_pink: string;
|
|
767
|
-
sys_widget_primary_opacity20: string;
|
|
768
|
-
sys_widget_secondary_variant_01: string;
|
|
769
|
-
usr_component_base_brand_primary_opacity10: string;
|
|
770
|
-
sys_temp_grey_01: string;
|
|
771
|
-
sys_temp_grey_02: string;
|
|
772
|
-
sys_temp_grey_03: string;
|
|
773
|
-
sys_temp_grey_04: string;
|
|
774
|
-
sys_temp_grey_05: string;
|
|
775
|
-
sys_temp_white: string;
|
|
776
|
-
sys_temp_primary_01: string;
|
|
777
|
-
sys_temp_secondary_01: string;
|
|
778
|
-
sys_temp_red: string;
|
|
779
|
-
sys_temp_white_opacity_00: string;
|
|
780
|
-
sys_temp_dimmed: string;
|
|
781
|
-
sys_temp_black: string;
|
|
782
|
-
sys_temp_primary_02: string;
|
|
783
|
-
sys_temp_primary_03: string;
|
|
784
|
-
sys_temp_secondary_02: string;
|
|
785
|
-
sys_temp_lightgreen_01: string;
|
|
786
|
-
sys_text_grey_04: string;
|
|
787
|
-
sys_papp_post_social_background: string;
|
|
788
|
-
sys_papp_post_notice_background: string;
|
|
789
|
-
sys_papp_post_free_background: string;
|
|
790
|
-
sys_papp_vod_background: string;
|
|
791
|
-
sys_papp_vodplus_background: string;
|
|
792
|
-
sys_papp_live_background: string;
|
|
793
|
-
sys_selcontrols_base_off_disabled: string;
|
|
794
|
-
sys_selcontrols_base_on_disabled: string;
|
|
795
|
-
sys_component_base_blue_opacity10: string;
|
|
796
|
-
sys_component_base_05: string;
|
|
797
|
-
sys_background_dimmed_65: string;
|
|
798
|
-
sys_temp_grey_06: string;
|
|
799
|
-
sys_on_base_white_opacity10: string;
|
|
800
|
-
sys_on_base_black_opacity10: string;
|
|
801
|
-
sys_component_base_05_opacity00: string;
|
|
802
|
-
sys_papp_post_notice_link: string;
|
|
803
|
-
sys_component_base_navy_light: string;
|
|
804
|
-
sys_component_base_orange: string;
|
|
805
|
-
sys_component_base_grey: string;
|
|
806
|
-
sys_component_base_black_opacity80: string;
|
|
807
|
-
sys_text_darkgrey_02: string;
|
|
808
|
-
sys_border_line_darktheme_01: string;
|
|
809
|
-
sys_border_line_darktheme_02: string;
|
|
810
|
-
sys_component_base_darktheme_01: string;
|
|
811
|
-
sys_component_base_darktheme_02: string;
|
|
812
|
-
sys_component_base_darktheme_03: string;
|
|
813
|
-
sys_text_grey_darktheme_01: string;
|
|
814
|
-
sys_text_grey_darktheme_02: string;
|
|
815
|
-
sys_text_grey_darktheme_03: string;
|
|
816
|
-
sys_widget_grey_darktheme_01: string;
|
|
817
|
-
sys_widget_grey_darktheme_02: string;
|
|
818
|
-
sys_widget_grey_darktheme_03: string;
|
|
819
|
-
sys_component_base_green: string;
|
|
820
|
-
sys_text_error_darktheme_01: string;
|
|
821
|
-
sys_border_line_darktheme_03: string;
|
|
822
|
-
sys_border_line_darktheme_04: string;
|
|
823
|
-
usr_widget_brand_primary_darktheme_01: string;
|
|
824
|
-
usr_text_brand_primary_darktheme_01: string;
|
|
825
|
-
sys_component_base_black_opacity50: string;
|
|
826
|
-
sys_component_base_card: string;
|
|
827
|
-
sys_cpnt_textlabel_sys_brand_primary_opacity50: string;
|
|
828
|
-
sys_widget_green_01: string;
|
|
829
|
-
sys_component_base_black_opacity30: string;
|
|
830
|
-
sys_area_background: string;
|
|
831
|
-
sys_border_white_opacity30: string;
|
|
832
|
-
sys_container_background_wt: string;
|
|
833
|
-
sys_channeldesc_grey_03: string;
|
|
834
|
-
sys_channeldesc_border_grey_03: string;
|
|
835
|
-
sys_gradient_base_01: string;
|
|
836
|
-
sys_gradient_base_01_opacity00: string;
|
|
837
|
-
sys_channeldesc_background: string;
|
|
838
|
-
sys_channeldesc_bottomsheet_base: string;
|
|
839
|
-
sys_channeldesc_bottomsheet_border: string;
|
|
840
|
-
sys_channeldesc_contents_base: string;
|
|
841
|
-
sys_channeldesc_dimmed: string;
|
|
842
|
-
sys_gradient_base_01_opacity50: string;
|
|
843
|
-
sys_gradient_base_01_opacity75: string;
|
|
844
|
-
sys_gradient_base_01_opacity40: string;
|
|
845
|
-
sys_widget_black: string;
|
|
846
|
-
usr_temp_primary_01: string;
|
|
847
|
-
sys_cpnt_sheet_base_02_opacity50: string;
|
|
848
|
-
usr_menu_primarymenu_main: string;
|
|
849
|
-
usr_menu_primarymenu_sub: string;
|
|
850
|
-
usr_menu_secondarymenu_main: string;
|
|
851
|
-
usr_menu_secondarymenu_sub: string;
|
|
852
|
-
usr_menu_hover: string;
|
|
853
|
-
usr_menu_active: string;
|
|
854
|
-
usr_menu_background: string;
|
|
855
|
-
sys_cpnt_base_white_opacity50: string;
|
|
856
|
-
sys_widget_dark_01: string;
|
|
857
|
-
usr_menu_background_gradient_opacity00: string;
|
|
858
|
-
sys_border_line_white: string;
|
|
859
|
-
sys_component_base_white_opacity10: string;
|
|
804
|
+
readonly SemanticColor: {
|
|
805
|
+
blue500: string;
|
|
806
|
+
blue700: string;
|
|
807
|
+
blue300: string;
|
|
808
|
+
green700: string;
|
|
809
|
+
green500: string;
|
|
810
|
+
green300: string;
|
|
811
|
+
red500: string;
|
|
812
|
+
grey900: string;
|
|
813
|
+
grey500: string;
|
|
814
|
+
grey400: string;
|
|
815
|
+
grey100: string;
|
|
816
|
+
grey50: string;
|
|
817
|
+
white: string;
|
|
818
|
+
black: string;
|
|
819
|
+
darkblue500: string;
|
|
820
|
+
grey950: string;
|
|
821
|
+
darkgrey900: string;
|
|
822
|
+
darkgrey500: string;
|
|
823
|
+
darkgrey400: string;
|
|
824
|
+
darkgrey100: string;
|
|
825
|
+
darkgrey50: string;
|
|
826
|
+
darkred500: string;
|
|
827
|
+
darkgreen700: string;
|
|
828
|
+
orange500: string;
|
|
829
|
+
darkorange500: string;
|
|
830
|
+
opacity00: string;
|
|
831
|
+
opacity20: string;
|
|
832
|
+
opacity30: string;
|
|
833
|
+
opacity65: string;
|
|
834
|
+
darkgreen500: string;
|
|
835
|
+
grey70: string;
|
|
836
|
+
navy500: string;
|
|
837
|
+
lightgreen500: string;
|
|
838
|
+
pink500: string;
|
|
839
|
+
darkgrey70: string;
|
|
840
|
+
darknavy500: string;
|
|
841
|
+
darkpink500: string;
|
|
842
|
+
darklightgreen500: string;
|
|
843
|
+
opacity10: string;
|
|
844
|
+
grey600: string;
|
|
845
|
+
darkgrey600: string;
|
|
846
|
+
skyblue500: string;
|
|
847
|
+
skyblue300: string;
|
|
848
|
+
pink300: string;
|
|
849
|
+
lightpink500: string;
|
|
850
|
+
darkblue300: string;
|
|
851
|
+
darkblue700: string;
|
|
852
|
+
darkgreen300: string;
|
|
853
|
+
darkskyblue500: string;
|
|
854
|
+
navy100: string;
|
|
855
|
+
darknavy100: string;
|
|
856
|
+
opacity80: string;
|
|
857
|
+
opacity50: string;
|
|
858
|
+
grey30: string;
|
|
859
|
+
opacity95: string;
|
|
860
860
|
};
|
|
861
861
|
};
|
|
862
862
|
export default colorSet;
|
|
@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
/* eslint-disable import/order */
|
|
7
|
-
var
|
|
7
|
+
var PaletteColor_Dark_json_1 = __importDefault(require("./PaletteColor_Dark.json"));
|
|
8
8
|
var PaletteColor_light_json_1 = __importDefault(require("./PaletteColor_light.json"));
|
|
9
9
|
var UIColor_json_1 = __importDefault(require("./UIColor.json"));
|
|
10
|
-
var
|
|
10
|
+
var SemanticColor_json_1 = __importDefault(require("./SemanticColor.json"));
|
|
11
11
|
var colorSet = {
|
|
12
|
-
|
|
12
|
+
PaletteColor_Dark: PaletteColor_Dark_json_1.default,
|
|
13
13
|
PaletteColor_light: PaletteColor_light_json_1.default,
|
|
14
14
|
UIColor: UIColor_json_1.default,
|
|
15
|
-
|
|
15
|
+
SemanticColor: SemanticColor_json_1.default
|
|
16
16
|
};
|
|
17
17
|
exports.default = colorSet;
|
|
File without changes
|
|
@@ -15,4 +15,4 @@ __exportStar(require("./icon"), exports);
|
|
|
15
15
|
__exportStar(require("./styled-components"), exports);
|
|
16
16
|
__exportStar(require("./text"), exports);
|
|
17
17
|
__exportStar(require("./uiColors"), exports);
|
|
18
|
-
__exportStar(require("./
|
|
18
|
+
__exportStar(require("./components"), exports);
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { PDSTextType } from '../../../common';
|
|
2
|
+
import { PDSTabItemOption, PDSTextType } from '../../../common/types';
|
|
3
|
+
declare type ItemArray = PDSTabItemOption & {
|
|
4
|
+
subArray?: PDSTabItemOption[];
|
|
5
|
+
};
|
|
3
6
|
declare type TextObj = {
|
|
4
7
|
title: PDSTextType;
|
|
5
8
|
path: string;
|
|
@@ -8,9 +11,11 @@ declare type TextObj = {
|
|
|
8
11
|
path: string;
|
|
9
12
|
}[];
|
|
10
13
|
};
|
|
11
|
-
declare type
|
|
12
|
-
|
|
14
|
+
declare type DesktopTabBarProps = {
|
|
15
|
+
itemArray?: ItemArray[];
|
|
13
16
|
styleTheme?: 'main' | 'content';
|
|
17
|
+
/** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
|
|
18
|
+
textArray?: TextObj[];
|
|
14
19
|
};
|
|
15
|
-
declare function DesktopTabBar({
|
|
20
|
+
declare function DesktopTabBar({ itemArray, styleTheme, textArray }: DesktopTabBarProps): JSX.Element;
|
|
16
21
|
export default DesktopTabBar;
|
|
@@ -31,36 +31,62 @@ var react_router_dom_1 = require("react-router-dom");
|
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
32
|
var TextLabel_1 = require("../TextLabel");
|
|
33
33
|
function DesktopTabBar(_a) {
|
|
34
|
-
var
|
|
34
|
+
var itemArray = _a.itemArray, _b = _a.styleTheme, styleTheme = _b === void 0 ? 'main' : _b, textArray = _a.textArray;
|
|
35
35
|
var history = (0, react_router_dom_1.useHistory)();
|
|
36
|
-
var pathname =
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
react_1.default.createElement(
|
|
56
|
-
|
|
57
|
-
} },
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
36
|
+
var pathname = (0, react_router_dom_1.useLocation)().pathname;
|
|
37
|
+
if (itemArray) {
|
|
38
|
+
var handelClickTabItem_1 = function (item) {
|
|
39
|
+
if (item.onClick) {
|
|
40
|
+
item.onClick();
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
var textLabel_1 = function (item, isSubText) {
|
|
44
|
+
if (isSubText) {
|
|
45
|
+
return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
|
|
46
|
+
}
|
|
47
|
+
if (styleTheme === 'content') {
|
|
48
|
+
return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
|
|
49
|
+
}
|
|
50
|
+
if (styleTheme === 'main') {
|
|
51
|
+
return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
return (react_1.default.createElement(S_TabBox, null,
|
|
55
|
+
itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme },
|
|
56
|
+
react_1.default.createElement(S_TitleWrapper, { text: item.title, onClick: function () { return handelClickTabItem_1(item); } }, textLabel_1(item, false)),
|
|
57
|
+
item.isActive && item.subArray && (react_1.default.createElement(S_SubTabBox, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubWrapper, { key: subItem.title, text: subItem.title, onClick: function () { return handelClickTabItem_1(subItem); } }, textLabel_1(subItem, true))); }))))); }),
|
|
58
|
+
itemArray.map(function (item) { return item.isActive && item.subArray && react_1.default.createElement(S_SubBackground, { key: item.title }); })));
|
|
59
|
+
}
|
|
60
|
+
if (textArray) {
|
|
61
|
+
var handleClick_1 = function (value) {
|
|
62
|
+
if (value) {
|
|
63
|
+
history.push(value.path);
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
var textLabel_2 = function (item, isSubText) {
|
|
67
|
+
if (isSubText) {
|
|
68
|
+
return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
|
|
69
|
+
}
|
|
70
|
+
if (styleTheme === 'content') {
|
|
71
|
+
return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
|
|
72
|
+
}
|
|
73
|
+
if (styleTheme === 'main') {
|
|
74
|
+
return (react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: pathname.includes(item.path) ? 'caption1Bold' : 'caption1Regular', colorTheme: pathname.includes(item.path) ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
return (react_1.default.createElement(S_TabBox, null,
|
|
78
|
+
textArray.map(function (item) { return (react_1.default.createElement(S_TabWrapper, { key: item.path, isActive: pathname.includes(item.path), styleTheme: styleTheme },
|
|
79
|
+
react_1.default.createElement(S_TitleWrapper, { text: item.title, onClick: function () {
|
|
80
|
+
handleClick_1(item);
|
|
81
|
+
} }, textLabel_2(item, false)),
|
|
82
|
+
item.subArray && pathname.includes(item.path) && (react_1.default.createElement(S_SubTabBox, null, item.subArray.map(function (subItem) { return (react_1.default.createElement(S_SubWrapper, { key: subItem.path, text: subItem.title, onClick: function () {
|
|
83
|
+
handleClick_1(subItem);
|
|
84
|
+
} }, textLabel_2(subItem, true))); }))))); }),
|
|
85
|
+
textArray.map(function (item) {
|
|
86
|
+
return item.subArray && pathname.includes(item.path) && react_1.default.createElement(S_SubBackground, { key: item.path });
|
|
87
|
+
})));
|
|
88
|
+
}
|
|
89
|
+
return react_1.default.createElement(react_1.default.Fragment, null);
|
|
64
90
|
}
|
|
65
91
|
var mediumStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-end;\n box-sizing: border-box;\n justify-content: center;\n display: flex;\n margin-right: ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"], ["\n align-items: flex-end;\n box-sizing: border-box;\n justify-content: center;\n display: flex;\n margin-right: ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
|
|
66
92
|
var theme = _a.theme;
|
|
@@ -74,15 +100,26 @@ var mediumStyle = (0, styled_components_1.css)(templateObject_1 || (templateObje
|
|
|
74
100
|
var isActive = _a.isActive;
|
|
75
101
|
return !isActive && "display: none;";
|
|
76
102
|
});
|
|
77
|
-
|
|
78
|
-
var
|
|
103
|
+
// NOTE: Tab item 활성화 시 text에 bold가 적용되는데, 이때 font-family에 따라 text 영역의 너비가 변경되어 시각적 변동을 일으키는 문제를 해결하기 위한 처리입니다.
|
|
104
|
+
var textOffset = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n content: ", ";\n height: 0;\n overflow: hidden;\n visibility: hidden;\n"], ["\n display: block;\n content: ", ";\n height: 0;\n overflow: hidden;\n visibility: hidden;\n"])), function (_a) {
|
|
105
|
+
var text = _a.text;
|
|
106
|
+
return "'" + text + "'";
|
|
107
|
+
});
|
|
108
|
+
var S_TabWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n ", "\n"], ["\n position: relative;\n ", "\n"])), mediumStyle);
|
|
109
|
+
var S_TitleWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n cursor: pointer;\n padding: 0 ", ";\n padding-bottom: ", ";\n\n & > div::before {\n font-weight: ", ";\n ", "\n }\n\n & > div::after {\n font-weight: ", ";\n ", "\n }\n"], ["\n cursor: pointer;\n padding: 0 ", ";\n padding-bottom: ", ";\n\n & > div::before {\n font-weight: ", ";\n ", "\n }\n\n & > div::after {\n font-weight: ", ";\n ", "\n }\n"])), function (_a) {
|
|
79
110
|
var theme = _a.theme;
|
|
80
111
|
return theme.spacing.spacingA;
|
|
81
112
|
}, function (_a) {
|
|
82
113
|
var theme = _a.theme;
|
|
83
114
|
return theme.spacing.spacingB;
|
|
84
|
-
})
|
|
85
|
-
var
|
|
115
|
+
}, function (_a) {
|
|
116
|
+
var theme = _a.theme;
|
|
117
|
+
return theme.fontWeight.normal;
|
|
118
|
+
}, textOffset, function (_a) {
|
|
119
|
+
var theme = _a.theme;
|
|
120
|
+
return theme.fontWeight.bold;
|
|
121
|
+
}, textOffset);
|
|
122
|
+
var S_TabBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n padding-left: ", ";\n position: relative;\n height: 40px;\n"], ["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n padding-left: ", ";\n position: relative;\n height: 40px;\n"])), function (_a) {
|
|
86
123
|
var theme = _a.theme;
|
|
87
124
|
return theme.ui_cpnt_tabbar_base_area;
|
|
88
125
|
}, function (_a) {
|
|
@@ -92,17 +129,23 @@ var S_TabBox = styled_components_1.default.div(templateObject_4 || (templateObje
|
|
|
92
129
|
var theme = _a.theme;
|
|
93
130
|
return theme.spacing.spacingE;
|
|
94
131
|
});
|
|
95
|
-
var S_SubBackground = styled_components_1.default.div(
|
|
132
|
+
var S_SubBackground = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 100%;\n height: 32px;\n background-color: ", ";\n position: absolute;\n bottom: -33px;\n left: 0px;\n"], ["\n width: 100%;\n height: 32px;\n background-color: ", ";\n position: absolute;\n bottom: -33px;\n left: 0px;\n"])), function (_a) {
|
|
96
133
|
var theme = _a.theme;
|
|
97
134
|
return theme.ui_cpnt_tabbar_base_area_sub;
|
|
98
135
|
});
|
|
99
|
-
var S_SubTabBox = styled_components_1.default.div(
|
|
100
|
-
var S_SubWrapper = styled_components_1.default.div(
|
|
136
|
+
var S_SubTabBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 100vw;\n position: absolute;\n bottom: -33px;\n left: 0px;\n height: 32px;\n display: flex;\n z-index: 1;\n"], ["\n width: 100vw;\n position: absolute;\n bottom: -33px;\n left: 0px;\n height: 32px;\n display: flex;\n z-index: 1;\n"])));
|
|
137
|
+
var S_SubWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n padding: 0 ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n & > div::before {\n font-weight: ", ";\n ", "\n }\n\n & > div::after {\n font-weight: ", ";\n ", "\n }\n"], ["\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n padding: 0 ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n & > div::before {\n font-weight: ", ";\n ", "\n }\n\n & > div::after {\n font-weight: ", ";\n ", "\n }\n"])), function (_a) {
|
|
101
138
|
var theme = _a.theme;
|
|
102
139
|
return theme.spacing.spacingE;
|
|
103
140
|
}, function (_a) {
|
|
104
141
|
var theme = _a.theme;
|
|
105
142
|
return theme.spacing.spacingA;
|
|
106
|
-
})
|
|
143
|
+
}, function (_a) {
|
|
144
|
+
var theme = _a.theme;
|
|
145
|
+
return theme.fontWeight.normal;
|
|
146
|
+
}, textOffset, function (_a) {
|
|
147
|
+
var theme = _a.theme;
|
|
148
|
+
return theme.fontWeight.bold;
|
|
149
|
+
}, textOffset);
|
|
107
150
|
exports.default = DesktopTabBar;
|
|
108
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
151
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
@@ -14,6 +14,7 @@ export declare type TextLabelProps = {
|
|
|
14
14
|
userSelectMode?: 'none' | 'use';
|
|
15
15
|
customFontSize?: string;
|
|
16
16
|
customFontWeight?: 'bold' | 'regular';
|
|
17
|
+
textDecorationType?: 'none' | 'line_through';
|
|
17
18
|
};
|
|
18
19
|
export declare type TextStyleProps = {
|
|
19
20
|
textAlign?: 'left' | 'center' | 'right';
|
|
@@ -27,6 +28,7 @@ export declare type TextStyleProps = {
|
|
|
27
28
|
userSelectMode?: 'none' | 'use';
|
|
28
29
|
customFontSize?: string;
|
|
29
30
|
customFontWeight?: 'bold' | 'regular';
|
|
31
|
+
textDecorationType?: 'none' | 'line_through';
|
|
30
32
|
};
|
|
31
|
-
declare function TextLabel({ text, tooltipText, tooltipPosition, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight }: TextLabelProps): JSX.Element;
|
|
33
|
+
declare function TextLabel({ text, tooltipText, tooltipPosition, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight, textDecorationType }: TextLabelProps): JSX.Element;
|
|
32
34
|
export default TextLabel;
|
|
@@ -28,12 +28,12 @@ var styled_components_1 = __importStar(require("styled-components"));
|
|
|
28
28
|
var common_1 = require("../../../common");
|
|
29
29
|
var hybrid_1 = require("../../../hybrid");
|
|
30
30
|
function TextLabel(_a) {
|
|
31
|
-
var text = _a.text, tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'right_bottom' : _b, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, _d = _a.styleTheme, styleTheme = _d === void 0 ? 'body2Bold' : _d, colorOverride = _a.colorOverride, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'sysTextPrimary' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit, _h = _a.userSelectMode, userSelectMode = _h === void 0 ? 'none' : _h, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight;
|
|
32
|
-
var
|
|
31
|
+
var text = _a.text, tooltipText = _a.tooltipText, _b = _a.tooltipPosition, tooltipPosition = _b === void 0 ? 'right_bottom' : _b, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, _d = _a.styleTheme, styleTheme = _d === void 0 ? 'body2Bold' : _d, colorOverride = _a.colorOverride, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'sysTextPrimary' : _e, _f = _a.singleLineMode, singleLineMode = _f === void 0 ? 'none' : _f, _g = _a.ellipsisMode, ellipsisMode = _g === void 0 ? 'none' : _g, lineLimit = _a.lineLimit, _h = _a.userSelectMode, userSelectMode = _h === void 0 ? 'none' : _h, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _j = _a.textDecorationType, textDecorationType = _j === void 0 ? 'none' : _j;
|
|
32
|
+
var _k = (0, react_1.useState)(false), isTooltipOpen = _k[0], setIsTooltipOpen = _k[1];
|
|
33
33
|
var handleTooltipToggle = function (value) {
|
|
34
34
|
setIsTooltipOpen(value);
|
|
35
35
|
};
|
|
36
|
-
return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight },
|
|
36
|
+
return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType },
|
|
37
37
|
text,
|
|
38
38
|
tooltipText && (react_1.default.createElement(S_TooltipBox, { styleTheme: styleTheme },
|
|
39
39
|
react_1.default.createElement(S_IconWrapper, { onMouseEnter: function () { return handleTooltipToggle(true); }, onMouseLeave: function () { return handleTooltipToggle(false); } },
|
|
@@ -270,7 +270,7 @@ var tooltipLeftTop = (0, styled_components_1.css)(templateObject_32 || (template
|
|
|
270
270
|
var tooltipLeftBottom = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n right: 0;\n top: 20px;\n"], ["\n right: 0;\n top: 20px;\n"])));
|
|
271
271
|
var tooltipRightTop = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n left: 0;\n bottom: 20px;\n"], ["\n left: 0;\n bottom: 20px;\n"])));
|
|
272
272
|
var tooltipRightBottom = (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n left: 0;\n top: 20px;\n"], ["\n left: 0;\n top: 20px;\n"])));
|
|
273
|
-
var S_TextLabel = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n overflow-wrap: break-word;\n hyphens: auto;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n overflow-wrap: break-word;\n hyphens: auto;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
|
|
273
|
+
var S_TextLabel = styled_components_1.default.div(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n overflow-wrap: break-word;\n hyphens: auto;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n overflow-wrap: break-word;\n hyphens: auto;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
|
|
274
274
|
var textAlign = _a.textAlign;
|
|
275
275
|
return textAlign;
|
|
276
276
|
}, function (_a) {
|
|
@@ -327,6 +327,13 @@ var S_TextLabel = styled_components_1.default.div(templateObject_36 || (template
|
|
|
327
327
|
}, function (_a) {
|
|
328
328
|
var userSelectMode = _a.userSelectMode;
|
|
329
329
|
return userSelectMode === 'none' && userSelectModeStyle;
|
|
330
|
+
}, function (_a) {
|
|
331
|
+
var textDecorationType = _a.textDecorationType;
|
|
332
|
+
return textDecorationType &&
|
|
333
|
+
{
|
|
334
|
+
none: '',
|
|
335
|
+
line_through: 'text-decoration: line-through;'
|
|
336
|
+
}[textDecorationType];
|
|
330
337
|
});
|
|
331
338
|
var S_TooltipBox = styled_components_1.default.div(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"], ["\n display: inline-block;\n margin-left: ", ";\n position: relative;\n\n ", ";\n"])), function (_a) {
|
|
332
339
|
var theme = _a.theme;
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { PDSTextType } from '../../../common';
|
|
2
|
+
import { PDSTabItemOption, PDSTextType } from '../../../common/types';
|
|
3
3
|
declare type TextObj = {
|
|
4
4
|
path: string;
|
|
5
5
|
title: PDSTextType;
|
|
6
6
|
};
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
declare type UserDesktopTabBarProps = {
|
|
8
|
+
itemArray?: PDSTabItemOption[];
|
|
9
9
|
styleTheme?: 'main';
|
|
10
|
+
/** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
|
|
11
|
+
textArray?: TextObj[];
|
|
10
12
|
};
|
|
11
|
-
declare function UserDesktopTabBar({
|
|
13
|
+
declare function UserDesktopTabBar({ itemArray, styleTheme, textArray }: UserDesktopTabBarProps): JSX.Element;
|
|
12
14
|
export default UserDesktopTabBar;
|
|
@@ -31,21 +31,37 @@ var react_router_dom_1 = require("react-router-dom");
|
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
32
|
var TextLabel_1 = require("../TextLabel");
|
|
33
33
|
function UserDesktopTabBar(_a) {
|
|
34
|
-
var
|
|
34
|
+
var itemArray = _a.itemArray, _b = _a.styleTheme, styleTheme = _b === void 0 ? 'main' : _b, textArray = _a.textArray;
|
|
35
35
|
var history = (0, react_router_dom_1.useHistory)();
|
|
36
|
-
var pathname =
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
react_1.default.createElement(S_TabBar, null,
|
|
44
|
-
|
|
36
|
+
var pathname = (0, react_router_dom_1.useLocation)().pathname;
|
|
37
|
+
if (itemArray) {
|
|
38
|
+
var handleClickTabItem_1 = function (item) {
|
|
39
|
+
if (item.onClick) {
|
|
40
|
+
item.onClick();
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, styleTheme: styleTheme, text: item.title, onClick: function () { return handleClickTabItem_1(item); } },
|
|
44
|
+
react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'body2Bold' : 'body2Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }))); })));
|
|
45
|
+
}
|
|
46
|
+
if (textArray) {
|
|
47
|
+
var handleClick_1 = function (value) {
|
|
48
|
+
if (value) {
|
|
49
|
+
history.push(value.path);
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
return (react_1.default.createElement(S_TabBar, null, textArray.map(function (item) { return (react_1.default.createElement(S_TabWrapper, { key: item.path, styleTheme: styleTheme, isActive: pathname === item.path, onClick: function () {
|
|
53
|
+
handleClick_1(item);
|
|
45
54
|
} },
|
|
46
|
-
react_1.default.createElement(TextLabel_1.TextLabel, { text:
|
|
55
|
+
react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, styleTheme: pathname === item.path ? 'body2Bold' : 'body2Regular', colorTheme: pathname === item.path ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }))); })));
|
|
56
|
+
}
|
|
57
|
+
return react_1.default.createElement(react_1.default.Fragment, null);
|
|
47
58
|
}
|
|
48
|
-
|
|
59
|
+
// NOTE: Tab item 활성화 시 text에 bold가 적용되는데, 이때 font-family에 따라 text 영역의 너비가 변경되어 시각적 변동을 일으키는 문제를 해결하기 위한 처리입니다.
|
|
60
|
+
var textOffset = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n content: ", ";\n height: 0;\n overflow: hidden;\n visibility: hidden;\n"], ["\n display: block;\n content: ", ";\n height: 0;\n overflow: hidden;\n visibility: hidden;\n"])), function (_a) {
|
|
61
|
+
var text = _a.text;
|
|
62
|
+
return "'" + text + "'";
|
|
63
|
+
});
|
|
64
|
+
var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n\n & > div::before {\n font-weight: ", ";\n ", "\n }\n\n & > div::after {\n font-weight: ", ";\n ", "\n }\n"], ["\n ", "\n\n & > div::before {\n font-weight: ", ";\n ", "\n }\n\n & > div::after {\n font-weight: ", ";\n ", "\n }\n"])), function (_a) {
|
|
49
65
|
var styleTheme = _a.styleTheme;
|
|
50
66
|
switch (styleTheme) {
|
|
51
67
|
case 'main':
|
|
@@ -53,8 +69,14 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (template
|
|
|
53
69
|
default:
|
|
54
70
|
return mainStyle;
|
|
55
71
|
}
|
|
56
|
-
})
|
|
57
|
-
var
|
|
72
|
+
}, function (_a) {
|
|
73
|
+
var theme = _a.theme;
|
|
74
|
+
return theme.fontWeight.normal;
|
|
75
|
+
}, textOffset, function (_a) {
|
|
76
|
+
var theme = _a.theme;
|
|
77
|
+
return theme.fontWeight.bold;
|
|
78
|
+
}, textOffset);
|
|
79
|
+
var mainStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n background-color: ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"], ["\n align-items: center;\n cursor: pointer;\n display: flex;\n margin-right: ", ";\n position: relative;\n background-color: ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
|
|
58
80
|
var theme = _a.theme;
|
|
59
81
|
return theme.spacing.spacingE;
|
|
60
82
|
}, function (_a) {
|
|
@@ -67,7 +89,7 @@ var mainStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject
|
|
|
67
89
|
var isActive = _a.isActive;
|
|
68
90
|
return !isActive && "display: none;";
|
|
69
91
|
});
|
|
70
|
-
var S_TabBar = styled_components_1.default.div(
|
|
92
|
+
var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: 48px;\n justify-content: center;\n"], ["\n background-color: ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n height: 48px;\n justify-content: center;\n"])), function (_a) {
|
|
71
93
|
var theme = _a.theme;
|
|
72
94
|
return theme.ui_cpnt_tabbar_base_area;
|
|
73
95
|
}, function (_a) {
|
|
@@ -75,4 +97,4 @@ var S_TabBar = styled_components_1.default.div(templateObject_3 || (templateObje
|
|
|
75
97
|
return theme.ui_cpnt_divider;
|
|
76
98
|
});
|
|
77
99
|
exports.default = UserDesktopTabBar;
|
|
78
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
100
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { PDSTextType } from '../../../common';
|
|
2
|
+
import { PDSTabItemOption, PDSTextType } from '../../../common/types';
|
|
3
3
|
declare type TextObj = {
|
|
4
4
|
path: string;
|
|
5
5
|
title: PDSTextType;
|
|
6
6
|
};
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
declare type MobileTabBarProps = {
|
|
8
|
+
itemArray?: PDSTabItemOption[];
|
|
9
|
+
/** @deprecated v1.5 해당 필드 대신 itemArray를 사용하세요. */
|
|
10
|
+
textArray?: TextObj[];
|
|
9
11
|
};
|
|
10
|
-
declare function MobileTabBar({ textArray }: MobileTabBarProps): JSX.Element;
|
|
12
|
+
declare function MobileTabBar({ itemArray, textArray }: MobileTabBarProps): JSX.Element;
|
|
11
13
|
export default MobileTabBar;
|
|
@@ -12,19 +12,28 @@ var react_router_dom_1 = require("react-router-dom");
|
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var TextLabel_1 = require("../TextLabel");
|
|
14
14
|
function MobileTabBar(_a) {
|
|
15
|
-
var textArray = _a.textArray;
|
|
15
|
+
var itemArray = _a.itemArray, textArray = _a.textArray;
|
|
16
16
|
var history = (0, react_router_dom_1.useHistory)();
|
|
17
|
-
var pathname =
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
react_1.default.createElement(S_TabBar, null,
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
17
|
+
var pathname = (0, react_router_dom_1.useLocation)().pathname;
|
|
18
|
+
if (itemArray) {
|
|
19
|
+
var handleClickTabItem_1 = function (item) {
|
|
20
|
+
if (item.onClick) {
|
|
21
|
+
item.onClick();
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
return (react_1.default.createElement(S_TabBar, null, itemArray.map(function (item, index) { return (react_1.default.createElement(S_TabWrapper, { key: index, isActive: item.isActive, onClick: function () { return handleClickTabItem_1(item); } },
|
|
25
|
+
react_1.default.createElement(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }))); })));
|
|
26
|
+
}
|
|
27
|
+
if (textArray) {
|
|
28
|
+
var handleClick_1 = function (value) {
|
|
29
|
+
if (value) {
|
|
30
|
+
history.push(value.path);
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
return (react_1.default.createElement(S_TabBar, null, textArray.map(function (value) { return (react_1.default.createElement(S_TabWrapper, { key: value.path, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } },
|
|
34
|
+
react_1.default.createElement(TextLabel_1.TextLabel, { text: value.title, textAlign: "center", styleTheme: "body2Bold", colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }))); })));
|
|
35
|
+
}
|
|
36
|
+
return react_1.default.createElement(react_1.default.Fragment, null);
|
|
28
37
|
}
|
|
29
38
|
var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n position: relative;\n background-color: ", ";\n padding: 0 ", ";\n flex: 1;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"], ["\n align-items: center;\n justify-content: center;\n cursor: pointer;\n display: flex;\n position: relative;\n background-color: ", ";\n padding: 0 ", ";\n flex: 1;\n\n &:last-child {\n margin-right: 0;\n }\n\n &::after {\n background-color: ", ";\n bottom: -1px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n"])), function (_a) {
|
|
30
39
|
var isActive = _a.isActive, theme = _a.theme;
|
|
@@ -12,6 +12,7 @@ export declare type TextLabelProps = {
|
|
|
12
12
|
userSelectMode?: 'none' | 'use';
|
|
13
13
|
customFontSize?: string;
|
|
14
14
|
customFontWeight?: 'bold' | 'regular';
|
|
15
|
+
textDecorationType?: 'none' | 'line_through';
|
|
15
16
|
};
|
|
16
17
|
export declare type TextStyleProps = {
|
|
17
18
|
textAlign?: 'left' | 'center' | 'right';
|
|
@@ -24,6 +25,7 @@ export declare type TextStyleProps = {
|
|
|
24
25
|
userSelectMode?: 'none' | 'use';
|
|
25
26
|
customFontSize?: string;
|
|
26
27
|
customFontWeight?: 'bold' | 'regular';
|
|
28
|
+
textDecorationType?: 'none' | 'line_through';
|
|
27
29
|
};
|
|
28
|
-
declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight }: TextLabelProps): JSX.Element;
|
|
30
|
+
declare function TextLabel({ text, textAlign, styleTheme, colorOverride, colorTheme, singleLineMode, ellipsisMode, lineLimit, userSelectMode, customFontSize, customFontWeight, textDecorationType }: TextLabelProps): JSX.Element;
|
|
29
31
|
export default TextLabel;
|
|
@@ -30,8 +30,8 @@ var react_1 = __importDefault(require("react"));
|
|
|
30
30
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
31
31
|
var common_1 = require("../../../common");
|
|
32
32
|
function TextLabel(_a) {
|
|
33
|
-
var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.singleLineMode, singleLineMode = _e === void 0 ? 'none' : _e, _f = _a.ellipsisMode, ellipsisMode = _f === void 0 ? 'none' : _f, lineLimit = _a.lineLimit, _g = _a.userSelectMode, userSelectMode = _g === void 0 ? 'none' : _g, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight;
|
|
34
|
-
return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight }, text));
|
|
33
|
+
var text = _a.text, _b = _a.textAlign, textAlign = _b === void 0 ? 'left' : _b, _c = _a.styleTheme, styleTheme = _c === void 0 ? 'body2Bold' : _c, colorOverride = _a.colorOverride, _d = _a.colorTheme, colorTheme = _d === void 0 ? 'sysTextPrimary' : _d, _e = _a.singleLineMode, singleLineMode = _e === void 0 ? 'none' : _e, _f = _a.ellipsisMode, ellipsisMode = _f === void 0 ? 'none' : _f, lineLimit = _a.lineLimit, _g = _a.userSelectMode, userSelectMode = _g === void 0 ? 'none' : _g, customFontSize = _a.customFontSize, customFontWeight = _a.customFontWeight, _h = _a.textDecorationType, textDecorationType = _h === void 0 ? 'none' : _h;
|
|
34
|
+
return (react_1.default.createElement(S_TextLabel, { textAlign: textAlign, styleTheme: styleTheme, colorOverride: colorOverride, colorTheme: colorTheme, singleLineMode: singleLineMode, ellipsisMode: ellipsisMode, lineLimit: lineLimit, userSelectMode: userSelectMode, customFontSize: customFontSize, customFontWeight: customFontWeight, textDecorationType: textDecorationType }, text));
|
|
35
35
|
}
|
|
36
36
|
var displayBold = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
37
37
|
var theme = _a.theme;
|
|
@@ -259,7 +259,7 @@ var ellipsisStyle = (0, styled_components_1.css)(templateObject_30 || (templateO
|
|
|
259
259
|
return lineLimit;
|
|
260
260
|
});
|
|
261
261
|
var userSelectModeStyle = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"], ["\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n"])));
|
|
262
|
-
var S_TextLabel = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n overflow-wrap: break-word;\n hyphens: auto;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n overflow-wrap: break-word;\n hyphens: auto;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
|
|
262
|
+
var S_TextLabel = styled_components_1.default.div(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n overflow-wrap: break-word;\n hyphens: auto;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"], ["\n box-sizing: border-box;\n text-align: ", ";\n white-space: pre-wrap;\n word-break: keep-all;\n overflow-wrap: break-word;\n hyphens: auto;\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (_a) {
|
|
263
263
|
var textAlign = _a.textAlign;
|
|
264
264
|
return textAlign;
|
|
265
265
|
}, function (_a) {
|
|
@@ -316,6 +316,13 @@ var S_TextLabel = styled_components_1.default.div(templateObject_32 || (template
|
|
|
316
316
|
}, function (_a) {
|
|
317
317
|
var userSelectMode = _a.userSelectMode;
|
|
318
318
|
return userSelectMode === 'none' && userSelectModeStyle;
|
|
319
|
+
}, function (_a) {
|
|
320
|
+
var textDecorationType = _a.textDecorationType;
|
|
321
|
+
return textDecorationType &&
|
|
322
|
+
{
|
|
323
|
+
none: '',
|
|
324
|
+
line_through: 'text-decoration: line-through;'
|
|
325
|
+
}[textDecorationType];
|
|
319
326
|
});
|
|
320
327
|
exports.default = TextLabel;
|
|
321
328
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;
|
package/package.json
CHANGED
package/release-note.md
CHANGED
|
@@ -1,8 +1,20 @@
|
|
|
1
1
|
# PDS-DEV-KIT-WEB Release Notes
|
|
2
|
-
## [v1.3.
|
|
2
|
+
## [v1.3.12]
|
|
3
3
|
|
|
4
4
|
### Component
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
|
|
5
|
+
* Icon
|
|
6
|
+
* ic_requirement(line) 추가
|
|
7
|
+
* ic_question(fill) 추가
|
|
8
|
+
* TextLabel
|
|
9
|
+
* textDecorationType prop 추가
|
|
10
|
+
* DesktopTabBar
|
|
11
|
+
* itemArray prop 추가 (onClick과 isActive를 통해 TabBar를 핸들링 할 수 있습니다.)
|
|
12
|
+
* 텍스트 중심 안맞고, 시각적 변동이 일어나던 부분 수정
|
|
13
|
+
* UserDesktopTabBar
|
|
14
|
+
* itemArray prop 추가 (onClick과 isActive를 통해 TabBar를 핸들링 할 수 있습니다.)
|
|
15
|
+
* 텍스트 중심 안맞고, 시각적 변동이 일어나던 부분 수정
|
|
16
|
+
* MobileTabBar
|
|
17
|
+
* itemArray prop 추가 (onClick과 isActive를 통해 TabBar를 핸들링 할 수 있습니다.)
|
|
18
|
+
|
|
19
|
+
### Color
|
|
20
|
+
* 컬러 키 값 22.05.10 14시 10분 기준 싱크
|