oolib 2.39.0 → 2.39.2
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.
|
@@ -50,7 +50,7 @@ var Base = function (_a) {
|
|
|
50
50
|
};
|
|
51
51
|
return (react_1.default.createElement(index_styled_1.TabBarStyled, { size: size, style: style },
|
|
52
52
|
react_1.default.createElement(index_styled_1.TabBarContainerStyled, { id: id },
|
|
53
|
-
scrollX !== 0 && (react_1.default.createElement(index_styled_1.StyledDirectionButtons,
|
|
53
|
+
scrollX !== 0 && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { left: true },
|
|
54
54
|
react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretLeft', style: { height: '100%' }, onClick: function () { return slide("left"); } }))),
|
|
55
55
|
react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id, ref: scrollContainerRef, onScroll: checkScrollPosition }, options.map(function (op) {
|
|
56
56
|
var tabHasError = errorTabs && errorTabs.some(function (tab) { return tab.value === op.value; });
|
|
@@ -59,7 +59,7 @@ var Base = function (_a) {
|
|
|
59
59
|
react_1.default.createElement(index_styled_1.TabBarTabStyled, { size: size, active: tabIsActive, error: tabHasError, tabBarStyle: tabBarStyle, onClick: function () { return handleClick(op); }, black: black },
|
|
60
60
|
react_1.default.createElement(index_styled_1.STYLED_SANS_2, { capitalize: true, active: tabIsActive, tabBarStyle: tabBarStyle, error: tabHasError, semibold: tabIsActive ? true : false }, op.display))));
|
|
61
61
|
})),
|
|
62
|
-
!scrollIsAtEnd && (react_1.default.createElement(index_styled_1.StyledDirectionButtons,
|
|
62
|
+
!scrollIsAtEnd && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { right: true },
|
|
63
63
|
react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretRight', style: { height: '100%' }, onClick: function () { return slide("right"); } }))))));
|
|
64
64
|
};
|
|
65
65
|
var TabBarStyle1 = function (props) { return react_1.default.createElement(Base, __assign({}, props, { tabBarStyle: "1" })); };
|
|
@@ -78,7 +78,7 @@ exports.TabBarStyled = styled_components_1.default.div(templateObject_10 || (tem
|
|
|
78
78
|
var size = _a.size;
|
|
79
79
|
return size === 'S' ? '3rem' : '4rem';
|
|
80
80
|
});
|
|
81
|
-
exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n /* width: fit-content; // */\n /* width: 600px; */\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n /* width: fit-content; // */\n /* width: 600px; */\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
81
|
+
exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n /* width: fit-content; // */\n /* width: 600px; */\n height: 100%;\n display: flex;\n align-items: center;\n position: relative;\n"], ["\n /* width: fit-content; // */\n /* width: 600px; */\n height: 100%;\n display: flex;\n align-items: center;\n position: relative;\n"])));
|
|
82
82
|
exports.TabBarRowStyled = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n white-space: nowrap;\n max-width: 100%;\n overflow-x: hidden; \n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n background: transparent; /* make scrollbar transparent */\n -webkit-appearance: none;\n width: 0;\n height: 0;\n }\n"], ["\n display: flex;\n height: 100%;\n white-space: nowrap;\n max-width: 100%;\n overflow-x: hidden; \n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n background: transparent; /* make scrollbar transparent */\n -webkit-appearance: none;\n width: 0;\n height: 0;\n }\n"])));
|
|
83
83
|
exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n display: flex;\n align-items: center;\n /* min-width: 0; //so that ellipsis works on the text within */\n :nth-child(1){\n border-left: 1px solid ", ";\n }\n\n"], ["\n ", "\n display: flex;\n align-items: center;\n /* min-width: 0; //so that ellipsis works on the text within */\n :nth-child(1){\n border-left: 1px solid ", ";\n }\n\n"])), function (_a) {
|
|
84
84
|
var tabBarStyle = _a.tabBarStyle;
|
|
@@ -93,5 +93,11 @@ exports.TabBarTabStyled = styled_components_1.default.button(templateObject_14 |
|
|
|
93
93
|
: tabBarStyle === "2" && tabBarTabStyle2;
|
|
94
94
|
});
|
|
95
95
|
exports.STYLED_SANS_2 = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n /* width: max-content; */\n /* white-space: nowrap; */\n /* text-overflow: ellipsis; */\n /* overflow: hidden; */\n"], ["\n /* width: max-content; */\n /* white-space: nowrap; */\n /* text-overflow: ellipsis; */\n /* overflow: hidden; */\n"])));
|
|
96
|
-
exports.StyledDirectionButtons = styled_components_1.default.div(
|
|
97
|
-
var
|
|
96
|
+
exports.StyledDirectionButtons = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n position: absolute;\n ", "\n background-color: ", ";\n height: 100%;\n border-right: 1px solid ", ";\n border-left: 1px solid ", ";\n"], ["\n position: absolute;\n ", "\n background-color: ", ";\n height: 100%;\n border-right: 1px solid ", ";\n border-left: 1px solid ", ";\n"])), function (_a) {
|
|
97
|
+
var left = _a.left, right = _a.right;
|
|
98
|
+
if (left)
|
|
99
|
+
return (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject([" left: 0;"], [" left: 0;"])));
|
|
100
|
+
else if (right)
|
|
101
|
+
return (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject([" right: 0;"], [" right: 0;"])));
|
|
102
|
+
}, themes_1.colors.white, greyColor15, greyColor15);
|
|
103
|
+
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;
|
|
@@ -27,6 +27,7 @@ var useScrollBar = function () {
|
|
|
27
27
|
var slide = function (direction) {
|
|
28
28
|
var _a = scrollContainerRef.current, scrollWidth = _a.scrollWidth, offsetWidth = _a.offsetWidth, scrollLeft = _a.scrollLeft;
|
|
29
29
|
var containerWidth = scrollContainerRef.current.parentNode.getBoundingClientRect().width;
|
|
30
|
+
console.log({ containerWidth: containerWidth });
|
|
30
31
|
if (direction === "left") {
|
|
31
32
|
var newScrollLeft = Math.max(scrollLeft - containerWidth, 0); // // ensures that the content is always visible within the scrollable element and no part of it is hidden.
|
|
32
33
|
if (scrollLeft === newScrollLeft) {
|
|
@@ -42,6 +43,7 @@ var useScrollBar = function () {
|
|
|
42
43
|
if (scrollLeft === newScrollLeft) {
|
|
43
44
|
setScrollIsAtEnd(true);
|
|
44
45
|
}
|
|
46
|
+
console.log({ newScrollLeft: newScrollLeft, scrollContainerRef: scrollContainerRef });
|
|
45
47
|
scrollContainerRef.current.scrollTo({
|
|
46
48
|
left: newScrollLeft,
|
|
47
49
|
behavior: "smooth"
|