pds-dev-kit-web-test 2.3.13 → 2.3.15
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/mobile/components/MobileTabBar/MobileTabBar.js +15 -17
- package/package.json +1 -1
- package/pipeline_output.log +6269 -6259
- package/release-note.md +2 -3
|
@@ -45,9 +45,9 @@ function MobileTabBar(_a) {
|
|
|
45
45
|
item.onClick(e);
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
|
-
return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasScroll: hasScroll_1 }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasScroll: hasScroll_1 }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ hasScroll: hasScroll_1, colorTheme: colorTheme, isActive: item.isActive, onClick: function (e) { return handleClickTabItem_1(item, e); } }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: item.title, textAlign: "center", styleTheme: "body2Bold", wordBreak: hasScroll_1 ? 'keep_all' : 'normal', colorTheme: item.isActive
|
|
49
|
+
? mobileTabBarThemes[colorTheme].activeTextColor
|
|
50
|
+
: mobileTabBarThemes[colorTheme].inActiveTextColor, singleLineMode: "use" }), item.isActive && (0, jsx_runtime_1.jsx)(S_Indicator, { colorTheme: colorTheme })] }), index)); }) })) }));
|
|
51
51
|
}
|
|
52
52
|
if (textArray) {
|
|
53
53
|
var hasScroll_2 = textArray.length > 3;
|
|
@@ -56,39 +56,37 @@ function MobileTabBar(_a) {
|
|
|
56
56
|
history.push(value.path);
|
|
57
57
|
}
|
|
58
58
|
};
|
|
59
|
-
return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasScroll: hasScroll_2 }, { children: textArray.map(function (value) { return ((0, jsx_runtime_1.
|
|
59
|
+
return ((0, jsx_runtime_1.jsx)(S_TabBarContainer, { children: (0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile", hasScroll: hasScroll_2 }, { children: textArray.map(function (value) { return ((0, jsx_runtime_1.jsxs)(S_TabWrapper, __assign({ hasScroll: hasScroll_2, colorTheme: colorTheme, isActive: pathname === value.path, onClick: function () { return handleClick_1(value); } }, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: value.title, textAlign: "center", styleTheme: "body2Bold", wordBreak: hasScroll_2 ? 'keep_all' : 'normal', colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }), pathname === value.path && (0, jsx_runtime_1.jsx)(S_Indicator, { colorTheme: colorTheme })] }), value.path)); }) })) }));
|
|
60
60
|
}
|
|
61
61
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
62
62
|
}
|
|
63
|
-
var
|
|
63
|
+
var S_Indicator = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n bottom: -1px;\n height: 2px;\n left: 0;\n position: absolute;\n right: 0;\n"], ["\n background-color: ", ";\n bottom: -1px;\n height: 2px;\n left: 0;\n position: absolute;\n right: 0;\n"])), function (_a) {
|
|
64
|
+
var colorTheme = _a.colorTheme, theme = _a.theme;
|
|
65
|
+
return theme[mobileTabBarThemes[colorTheme].activeIndicatorBorderColor];
|
|
66
|
+
});
|
|
67
|
+
var S_TabWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n border-bottom: ", ";\n box-sizing: border-box;\n display: ", ";\n flex: 1;\n justify-content: center;\n padding: 0 ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n & > div {\n white-space: ", ";\n }\n"], ["\n align-items: center;\n background-color: ", ";\n border-bottom: ", ";\n box-sizing: border-box;\n display: ", ";\n flex: 1;\n justify-content: center;\n padding: 0 ", ";\n position: relative;\n\n &:last-child {\n margin-right: 0;\n }\n\n & > div {\n white-space: ", ";\n }\n"])), function (_a) {
|
|
64
68
|
var isActive = _a.isActive, theme = _a.theme;
|
|
65
69
|
return isActive && theme.ui_cpnt_tabbar_base_area;
|
|
70
|
+
}, function (_a) {
|
|
71
|
+
var theme = _a.theme;
|
|
72
|
+
return "1px solid ".concat(theme.ui_cpnt_divider);
|
|
66
73
|
}, function (_a) {
|
|
67
74
|
var hasScroll = _a.hasScroll;
|
|
68
75
|
return (hasScroll ? 'inline-flex' : 'flex');
|
|
69
76
|
}, function (_a) {
|
|
70
77
|
var theme = _a.theme;
|
|
71
78
|
return theme.spacing.spacingD;
|
|
72
|
-
}, function (_a) {
|
|
73
|
-
var colorTheme = _a.colorTheme, theme = _a.theme;
|
|
74
|
-
return theme[mobileTabBarThemes[colorTheme].activeIndicatorBorderColor];
|
|
75
|
-
}, function (_a) {
|
|
76
|
-
var isActive = _a.isActive;
|
|
77
|
-
return !isActive && "display: none;";
|
|
78
79
|
}, function (_a) {
|
|
79
80
|
var hasScroll = _a.hasScroll;
|
|
80
81
|
return hasScroll && 'nowrap';
|
|
81
82
|
});
|
|
82
|
-
var S_TabBarContainer = styled_components_1.default.div(
|
|
83
|
+
var S_TabBarContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n overflow-x: auto;\n\n &::-webkit-scrollbar {\n display: none;\n }\n"], ["\n background-color: ", ";\n overflow-x: auto;\n\n &::-webkit-scrollbar {\n display: none;\n }\n"])), function (_a) {
|
|
83
84
|
var theme = _a.theme;
|
|
84
85
|
return theme.ui_cpnt_tabbar_base_area;
|
|
85
|
-
}, function (_a) {
|
|
86
|
-
var theme = _a.theme;
|
|
87
|
-
return theme.ui_cpnt_divider;
|
|
88
86
|
});
|
|
89
|
-
var S_TabBar = styled_components_1.default.div(
|
|
87
|
+
var S_TabBar = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-sizing: border-box;\n display: ", ";\n height: 48px;\n width: 100%;\n"], ["\n box-sizing: border-box;\n display: ", ";\n height: 48px;\n width: 100%;\n"])), function (_a) {
|
|
90
88
|
var hasScroll = _a.hasScroll;
|
|
91
89
|
return (hasScroll ? 'inline-flex' : 'flex');
|
|
92
90
|
});
|
|
93
91
|
exports.default = MobileTabBar;
|
|
94
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
92
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|