pds-dev-kit-web 2.2.122 → 2.2.123
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.
|
@@ -11,6 +11,8 @@ export type PDSTabItemOption = {
|
|
|
11
11
|
title: PDSTextType;
|
|
12
12
|
isActive: boolean;
|
|
13
13
|
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
tooltipText?: PDSTextType;
|
|
14
16
|
};
|
|
15
17
|
export type ContextMenuItemValueOption = {
|
|
16
18
|
text?: PDSTextType;
|
|
@@ -60,23 +60,23 @@ function DesktopTabBar(_a) {
|
|
|
60
60
|
};
|
|
61
61
|
var textLabel_1 = function (item, isSubText) {
|
|
62
62
|
if (isSubText) {
|
|
63
|
-
return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "caption1Bold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use" }));
|
|
63
|
+
return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, __assign({ text: item.title, textAlign: "center", styleTheme: "caption1Bold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use" }, (item.tooltipText && { tooltipText: item.tooltipText }))));
|
|
64
64
|
}
|
|
65
65
|
if (styleTheme === 'content_black') {
|
|
66
|
-
return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
|
|
66
|
+
return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, __assign({ text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextSecondary', singleLineMode: "use" }, (item.tooltipText && { tooltipText: item.tooltipText }))));
|
|
67
67
|
}
|
|
68
68
|
if (styleTheme === 'content') {
|
|
69
|
-
return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }));
|
|
69
|
+
return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, __assign({ text: item.title, textAlign: "center", styleTheme: item.isActive ? 'caption1Bold' : 'caption1Regular', colorTheme: item.isActive ? 'usrTextBrandPrimary' : 'sysTextSecondary', singleLineMode: "use" }, (item.tooltipText && { tooltipText: item.tooltipText }))));
|
|
70
70
|
}
|
|
71
71
|
if (styleTheme === 'main') {
|
|
72
|
-
return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "leadParaBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use", letterSpacing: "-0.04em" }));
|
|
72
|
+
return ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, __assign({ text: item.title, textAlign: "center", styleTheme: "leadParaBold", colorTheme: item.isActive ? 'sysTextPrimary' : 'sysTextTertiary', singleLineMode: "use", letterSpacing: "-0.04em" }, (item.tooltipText && { tooltipText: item.tooltipText }))));
|
|
73
73
|
}
|
|
74
74
|
};
|
|
75
|
-
return ((0, jsx_runtime_1.jsxs)(S_TabBarBox, __assign({ "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(S_MainTabBarSpace, __assign({ styleTheme: styleTheme, isSubTabBarActivated: isSubTabBarActivated }, { children: itemArray.map(function (item) { return ((0, jsx_runtime_1.jsxs)(S_MainTabItemBox, __assign({ styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsxs)(S_MainTabItemWrapper, __assign({ text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return handelClickTabItem_1(item, e); } }, { children: [textLabel_1(item, false), item.iconMode === 'use' && item.iconName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacing_1.default, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { size: styleTheme === 'main' ? 20 : 16, iconName: item.iconName || 'ic_unavailable', fillType: item.iconFillType || 'line', colorKey: item.isActive
|
|
75
|
+
return ((0, jsx_runtime_1.jsxs)(S_TabBarBox, __assign({ "x-pds-name": "DesktopTabBar", "x-pds-element-type": "component", "x-pds-device-type": "desktop" }, { children: [(0, jsx_runtime_1.jsx)(S_MainTabBarSpace, __assign({ styleTheme: styleTheme, isSubTabBarActivated: isSubTabBarActivated }, { children: itemArray.map(function (item) { return ((0, jsx_runtime_1.jsxs)(S_MainTabItemBox, __assign({ styleTheme: styleTheme }, { children: [(0, jsx_runtime_1.jsxs)(S_MainTabItemWrapper, __assign({ text: item.title, styleTheme: styleTheme, isActive: item.isActive, onClick: function (e) { return !item.disabled && handelClickTabItem_1(item, e); }, disabled: item.disabled }, { children: [textLabel_1(item, false), item.iconMode === 'use' && item.iconName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacing_1.default, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(Icon_1.default, { size: styleTheme === 'main' ? 20 : 16, iconName: item.iconName || 'ic_unavailable', fillType: item.iconFillType || 'line', colorKey: item.isActive
|
|
76
76
|
? styleTheme === 'content'
|
|
77
77
|
? 'ui_cpnt_textlabel_usr_brandprimary'
|
|
78
78
|
: 'ui_cpnt_textlabel_sys_primary'
|
|
79
|
-
: 'ui_cpnt_textlabel_sys_tertiary' })] }))] })), item.isActive && item.subArray && ((0, jsx_runtime_1.jsx)(S_SubTabBarWrapper, { children: item.subArray.map(function (subItem) { return ((0, jsx_runtime_1.jsx)(S_SubTabItemWrapper, __assign({ text: subItem.title, styleTheme: styleTheme, onClick: function (e) { return handelClickTabItem_1(subItem, e); } }, { children: textLabel_1(subItem, true) }), subItem.title)); }) }))] }), item.title)); }) })), isSubTabBarActivated && (0, jsx_runtime_1.jsx)(S_SubTabBarSpace, { styleTheme: styleTheme })] })));
|
|
79
|
+
: 'ui_cpnt_textlabel_sys_tertiary' })] }))] })), item.isActive && item.subArray && ((0, jsx_runtime_1.jsx)(S_SubTabBarWrapper, { children: item.subArray.map(function (subItem) { return ((0, jsx_runtime_1.jsx)(S_SubTabItemWrapper, __assign({ text: subItem.title, styleTheme: styleTheme, disabled: subItem.disabled, onClick: function (e) { return !subItem.disabled && handelClickTabItem_1(subItem, e); } }, { children: textLabel_1(subItem, true) }), subItem.title)); }) }))] }), item.title)); }) })), isSubTabBarActivated && (0, jsx_runtime_1.jsx)(S_SubTabBarSpace, { styleTheme: styleTheme })] })));
|
|
80
80
|
}
|
|
81
81
|
if (textArray) {
|
|
82
82
|
var isSubTabBarActivated = textArray.some(function (item) { return pathname.includes(item.path) && item.subArray; });
|
|
@@ -158,7 +158,10 @@ var S_MainTabItemBox = styled_components_1.default.div(templateObject_5 || (temp
|
|
|
158
158
|
var theme = _a.theme, styleTheme = _a.styleTheme;
|
|
159
159
|
return styleTheme === 'main' ? '20px' : theme.spacing.spacingD;
|
|
160
160
|
});
|
|
161
|
-
var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: flex-end;\n box-sizing: border-box;\n cursor:
|
|
161
|
+
var S_MainTabItemWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: flex-end;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n height: 100%;\n padding: 0 ", ";\n ", "\n ", "\n & > [x-pds-name=\"TextLabel\"] {\n padding-bottom: ", ";\n }\n & > svg {\n padding-bottom: ", ";\n }\n"], ["\n align-items: flex-end;\n box-sizing: border-box;\n cursor: ", ";\n display: flex;\n height: 100%;\n padding: 0 ", ";\n ", "\n ", "\n & > [x-pds-name=\"TextLabel\"] {\n padding-bottom: ", ";\n }\n & > svg {\n padding-bottom: ", ";\n }\n"])), function (_a) {
|
|
162
|
+
var disabled = _a.disabled;
|
|
163
|
+
return (disabled ? 'default' : 'pointer');
|
|
164
|
+
}, function (_a) {
|
|
162
165
|
var theme = _a.theme, styleTheme = _a.styleTheme;
|
|
163
166
|
return (styleTheme === 'main' ? 0 : theme.spacing.spacingA);
|
|
164
167
|
}, tabIndicator, textOffset, function (_a) {
|
|
@@ -179,7 +182,10 @@ var S_SubTabBarSpace = styled_components_1.default.div(templateObject_8 || (temp
|
|
|
179
182
|
var styleTheme = _a.styleTheme;
|
|
180
183
|
return (styleTheme === 'main' ? '26px' : '32px');
|
|
181
184
|
});
|
|
182
|
-
var S_SubTabItemWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n align-items: center;\n cursor:
|
|
185
|
+
var S_SubTabItemWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n align-items: center;\n cursor: ", ";\n display: flex;\n justify-content: center;\n margin-right: ", ";\n ", ";\n ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n ", "\n"], ["\n align-items: center;\n cursor: ", ";\n display: flex;\n justify-content: center;\n margin-right: ", ";\n ", ";\n ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n ", "\n"])), function (_a) {
|
|
186
|
+
var disabled = _a.disabled;
|
|
187
|
+
return (disabled ? 'default' : 'pointer');
|
|
188
|
+
}, function (_a) {
|
|
183
189
|
var theme = _a.theme, styleTheme = _a.styleTheme;
|
|
184
190
|
return styleTheme === 'main' ? theme.spacing.spacingD : theme.spacing.spacingE;
|
|
185
191
|
}, function (_a) {
|
package/package.json
CHANGED
package/release-note.md
CHANGED