pds-dev-kit-web 2.2.68 → 2.2.69
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.
|
@@ -39,28 +39,33 @@ function MobileTabBar(_a) {
|
|
|
39
39
|
var history = (0, react_router_dom_1.useHistory)();
|
|
40
40
|
var pathname = (0, react_router_dom_1.useLocation)().pathname;
|
|
41
41
|
if (itemArray) {
|
|
42
|
+
var hasScroll_1 = itemArray.length > 3;
|
|
42
43
|
var handleClickTabItem_1 = function (item, e) {
|
|
43
44
|
if (item.onClick) {
|
|
44
45
|
item.onClick(e);
|
|
45
46
|
}
|
|
46
47
|
};
|
|
47
|
-
return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: itemArray.map(function (item, index) { return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ 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", colorTheme: item.isActive
|
|
48
|
-
|
|
49
|
-
|
|
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.jsx)(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" }) }), index)); }) })) }));
|
|
50
51
|
}
|
|
51
52
|
if (textArray) {
|
|
53
|
+
var hasScroll_2 = textArray.length > 3;
|
|
52
54
|
var handleClick_1 = function (value) {
|
|
53
55
|
if (value) {
|
|
54
56
|
history.push(value.path);
|
|
55
57
|
}
|
|
56
58
|
};
|
|
57
|
-
return ((0, jsx_runtime_1.jsx)(S_TabBar, __assign({ "x-pds-name": "MobileTabBar", "x-pds-element-type": "component", "x-pds-device-type": "mobile" }, { children: textArray.map(function (value) { return ((0, jsx_runtime_1.jsx)(S_TabWrapper, __assign({ 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", colorTheme: pathname === value.path ? 'usrTextBrandPrimary' : 'sysTextTertiary', singleLineMode: "use" }) }), value.path)); }) })));
|
|
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.jsx)(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" }) }), value.path)); }) })) }));
|
|
58
60
|
}
|
|
59
61
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
60
62
|
}
|
|
61
|
-
var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\n display:
|
|
63
|
+
var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: center;\n background-color: ", ";\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 &::after {\n background-color: ", ";\n bottom: 0px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n\n & > div {\n white-space: ", ";\n }\n"], ["\n align-items: center;\n background-color: ", ";\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 &::after {\n background-color: ", ";\n bottom: 0px;\n content: '';\n height: 2px;\n position: absolute;\n width: 100%;\n ", ";\n }\n\n & > div {\n white-space: ", ";\n }\n"])), function (_a) {
|
|
62
64
|
var isActive = _a.isActive, theme = _a.theme;
|
|
63
65
|
return isActive && theme.ui_cpnt_tabbar_base_area;
|
|
66
|
+
}, function (_a) {
|
|
67
|
+
var hasScroll = _a.hasScroll;
|
|
68
|
+
return (hasScroll ? 'inline-flex' : 'flex');
|
|
64
69
|
}, function (_a) {
|
|
65
70
|
var theme = _a.theme;
|
|
66
71
|
return theme.spacing.spacingD;
|
|
@@ -70,13 +75,20 @@ var S_TabWrapper = styled_components_1.default.div(templateObject_1 || (template
|
|
|
70
75
|
}, function (_a) {
|
|
71
76
|
var isActive = _a.isActive;
|
|
72
77
|
return !isActive && "display: none;";
|
|
78
|
+
}, function (_a) {
|
|
79
|
+
var hasScroll = _a.hasScroll;
|
|
80
|
+
return hasScroll && 'nowrap';
|
|
73
81
|
});
|
|
74
|
-
var
|
|
82
|
+
var S_TabBarContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __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) {
|
|
75
83
|
var theme = _a.theme;
|
|
76
84
|
return theme.ui_cpnt_tabbar_base_area;
|
|
77
|
-
}
|
|
85
|
+
});
|
|
86
|
+
var S_TabBar = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: ", ";\n height: 48px;\n"], ["\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n display: ", ";\n height: 48px;\n"])), function (_a) {
|
|
78
87
|
var theme = _a.theme;
|
|
79
88
|
return theme.ui_cpnt_divider;
|
|
89
|
+
}, function (_a) {
|
|
90
|
+
var hasScroll = _a.hasScroll;
|
|
91
|
+
return (hasScroll ? 'inline-flex' : 'flex');
|
|
80
92
|
});
|
|
81
93
|
exports.default = MobileTabBar;
|
|
82
|
-
var templateObject_1, templateObject_2;
|
|
94
|
+
var templateObject_1, templateObject_2, templateObject_3;
|