oolib 2.40.1 → 2.42.1
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/components/LoadersAndProgress/LoaderOverlay/index.js +1 -0
- package/dist/components/Modals/ModalLarge/styled.js +1 -1
- package/dist/components/TabBar/index.js +11 -9
- package/dist/components/TabBar/index.styled.d.ts +1 -0
- package/dist/components/TabBar/index.styled.js +39 -23
- package/dist/utils/customHooks/useScrollBar.d.ts +2 -3
- package/dist/utils/customHooks/useScrollBar.js +33 -36
- package/package.json +1 -1
|
@@ -35,7 +35,7 @@ var styled_components_1 = __importStar(require("styled-components"));
|
|
|
35
35
|
var black_opacity80 = themes_1.colors.black_opacity80, white = themes_1.colors.white, greyColor5 = themes_1.colors.greyColor5, greyColor15 = themes_1.colors.greyColor15;
|
|
36
36
|
exports.StyledModalLargeBg = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100vw;\n height: 100%;\n position: fixed;\n left: 0;\n bottom: 0;\n z-index: 99999999;\n overflow-y: auto;\n overflow-x: hidden;\n ", " {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"], ["\n width: 100vw;\n height: 100%;\n position: fixed;\n left: 0;\n bottom: 0;\n z-index: 99999999;\n overflow-y: auto;\n overflow-x: hidden;\n ", " {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])), (0, mixins_1.mediaQuery)("sm"));
|
|
37
37
|
exports.StyledModalLargeBgColor = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n position: absolute;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n"], ["\n background: ", ";\n position: absolute;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n"])), black_opacity80);
|
|
38
|
-
exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 100%;\n margin-top: 4rem;\n background-color: ", ";\n ", "\n\n ", " {\n margin-top: 0;\n border: 2px solid ", ";\n width: ", ";\n min-height: 50vh
|
|
38
|
+
exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 100%;\n margin-top: 4rem;\n background-color: ", ";\n ", "\n\n ", " {\n margin-top: 0;\n border: 2px solid ", ";\n width: ", ";\n /* min-height: 50vh; */\n max-height: 90vh;\n position: relative;\n overflow: ", ";\n border-radius: 0.2rem;\n margin: 0 auto;\n }\n"], ["\n width: 100%;\n margin-top: 4rem;\n background-color: ", ";\n ", "\n\n ", " {\n margin-top: 0;\n border: 2px solid ", ";\n width: ", ";\n /* min-height: 50vh; */\n max-height: 90vh;\n position: relative;\n overflow: ", ";\n border-radius: 0.2rem;\n margin: 0 auto;\n }\n"])), white, function (_a) {
|
|
39
39
|
var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
|
|
40
40
|
return takeFullScreenOnScroll
|
|
41
41
|
? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n /* min-height: calc(100vh - 4rem); */\n "], ["\n /* min-height: calc(100vh - 4rem); */\n "]))) : (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: calc(100vh - 4rem);\n display: flex;\n flex-direction: column;\n "], ["\n height: calc(100vh - 4rem);\n display: flex;\n flex-direction: column;\n "])));
|
|
@@ -44,21 +44,23 @@ var Base = function (_a) {
|
|
|
44
44
|
;
|
|
45
45
|
var size = _size || (S ? 'S' : 'M'); //defaults to M
|
|
46
46
|
var value = saveValueAsString ? options.find(function (d) { return d.value === valueProp; }) : valueProp;
|
|
47
|
-
var _d = (0, useScrollBar_1.useScrollBar)(), scrollContainerRef = _d.scrollContainerRef, scrollX = _d.scrollX, scrollIsAtEnd = _d.scrollIsAtEnd,
|
|
47
|
+
var _d = (0, useScrollBar_1.useScrollBar)(), scrollContainerRef = _d.scrollContainerRef, scrollX = _d.scrollX, scrollIsAtEnd = _d.scrollIsAtEnd, scrollIsAtStart = _d.scrollIsAtStart, slide = _d.slide;
|
|
48
48
|
var handleClick = function (v) {
|
|
49
49
|
onChange && onChange(id, saveValueAsString ? v.value : v);
|
|
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
|
-
|
|
53
|
+
!scrollIsAtStart && (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
|
-
react_1.default.createElement(
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
react_1.default.createElement(index_styled_1.
|
|
60
|
-
react_1.default.createElement(index_styled_1.
|
|
61
|
-
|
|
55
|
+
react_1.default.createElement("div", { ref: scrollContainerRef, style: { maxWidth: '100%', height: '100%', overflow: 'hidden' } },
|
|
56
|
+
react_1.default.createElement(index_styled_1.TabBarRowStyled, { id: id, translateX: scrollX }, options.map(function (op) {
|
|
57
|
+
var tabHasError = errorTabs && errorTabs.some(function (tab) { return tab.value === op.value; });
|
|
58
|
+
var tabIsActive = value && op.value === value.value;
|
|
59
|
+
return (react_1.default.createElement(index_styled_1.TabBarTabWrapper, { tabBarStyle: tabBarStyle, key: op.value, active: tabIsActive, error: tabHasError, black: black },
|
|
60
|
+
react_1.default.createElement(index_styled_1.TabBarTabStyled, { size: size, active: tabIsActive, error: tabHasError, tabBarStyle: tabBarStyle, onClick: function () { return handleClick(op); }, black: black },
|
|
61
|
+
react_1.default.createElement(index_styled_1.STYLED_SANS_2, { capitalize: true, active: tabIsActive, tabBarStyle: tabBarStyle, error: tabHasError, semibold: tabIsActive ? true : false }, op.display),
|
|
62
|
+
tabHasError && react_1.default.createElement(index_styled_1.StyledDot, { active: tabIsActive, error: tabHasError, tabBarStyle: tabBarStyle }))));
|
|
63
|
+
}))),
|
|
62
64
|
!scrollIsAtEnd && (react_1.default.createElement(index_styled_1.StyledDirectionButtons, { right: true },
|
|
63
65
|
react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: 'CaretRight', style: { height: '100%' }, onClick: function () { return slide("right"); } }))))));
|
|
64
66
|
};
|
|
@@ -27,46 +27,52 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
27
27
|
return result;
|
|
28
28
|
};
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
|
-
exports.StyledDirectionButtons = exports.STYLED_SANS_2 = exports.TabBarTabStyled = exports.TabBarTabWrapper = exports.TabBarRowStyled = exports.TabBarContainerStyled = exports.TabBarStyled = void 0;
|
|
30
|
+
exports.StyledDot = exports.StyledDirectionButtons = exports.STYLED_SANS_2 = exports.TabBarTabStyled = exports.TabBarTabWrapper = exports.TabBarRowStyled = exports.TabBarContainerStyled = exports.TabBarStyled = void 0;
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
32
|
var themes_1 = require("../../themes");
|
|
33
33
|
var mixins_1 = require("../../themes/mixins");
|
|
34
34
|
var utilsOolib_1 = require("../../utilsOolib");
|
|
35
35
|
var Typo_1 = require("../Typo");
|
|
36
36
|
var greyColor100 = themes_1.colors.greyColor100, greyColor10 = themes_1.colors.greyColor10, greyColor15 = themes_1.colors.greyColor15, red = themes_1.colors.red, lightRed = themes_1.colors.lightRed, invertRed = themes_1.colors.invertRed, greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, none = themes_1.colors.none;
|
|
37
|
-
var tabBarWrapperStyle1 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n :hover {\n background-color: ", ";\n }\n\n ", "\n\n ", "\n"], ["\n ", "\n :hover {\n background-color: ", ";\n }\n\n ", "\n\n ", "\n"])), (0, mixins_1.transition)("background-color"), function (_a) {
|
|
37
|
+
var tabBarWrapperStyle1 = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n :hover {\n background-color: ", ";\n }\n :first-of-type{\n border-left: 1px solid ", ";\n }\n\n ", "\n\n ", "\n"], ["\n ", "\n :hover {\n background-color: ", ";\n }\n :first-of-type{\n border-left: 1px solid ", ";\n }\n\n ", "\n\n ", "\n"])), (0, mixins_1.transition)("background-color"), function (_a) {
|
|
38
38
|
var error = _a.error;
|
|
39
39
|
return error ? invertRed : greyColor10;
|
|
40
|
-
}, function (_a) {
|
|
40
|
+
}, greyColor15, function (_a) {
|
|
41
41
|
var active = _a.active;
|
|
42
|
-
return active && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n background-color: ", "
|
|
42
|
+
return active && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n /* background-color: ", "; */\n border-radius: 0.2rem;\n ::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 3px;\n background-color: ", ";\n }\n "], ["\n position: relative;\n /* background-color: ", "; */\n border-radius: 0.2rem;\n ::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 3px;\n background-color: ", ";\n }\n "])), greyColor5, function (_a) {
|
|
43
43
|
var error = _a.error, colors = _a.theme.colors, black = _a.black;
|
|
44
44
|
return error ? red : black ? greyColor100 : (0, utilsOolib_1.getPrimaryColor100)(colors);
|
|
45
45
|
});
|
|
46
46
|
}, function (_a) {
|
|
47
47
|
var error = _a.error;
|
|
48
|
-
return error && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n background-color: ", "
|
|
48
|
+
return error && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n /* background-color: ", "; */\n "], ["\n position: relative;\n /* background-color: ", "; */\n "])), lightRed);
|
|
49
49
|
});
|
|
50
|
-
var tabBarWrapperStyle2 = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n background-color: ", ";\n :first-of-type {\n border-radius: 1px 0 0 2px;\n }\n :last-of-type {\n border-radius: 0 2px 2px 0;\n }\n :hover {\n background-color: ", "
|
|
50
|
+
var tabBarWrapperStyle2 = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n background-color: ", ";\n :first-of-type {\n border-radius: 1px 0 0 2px;\n }\n :last-of-type {\n border-radius: 0 2px 2px 0;\n }\n :hover {\n /* background-color: ", "; */\n /* background-color: ", " */\n }\n background-color: ", ";\n color: ", ";\n ", "\n\n ", "\n\n \n"], ["\n ", "\n background-color: ", ";\n :first-of-type {\n border-radius: 1px 0 0 2px;\n }\n :last-of-type {\n border-radius: 0 2px 2px 0;\n }\n :hover {\n /* background-color: ", "; */\n /* background-color: ", " */\n }\n background-color: ", ";\n color: ", ";\n ", "\n\n ", "\n\n \n"])), (0, mixins_1.transition)("background-color"), greyColor5, function (_a) {
|
|
51
51
|
var active = _a.active, error = _a.error;
|
|
52
52
|
return (active ? "" : error ? invertRed : greyColor10);
|
|
53
|
+
}, greyColor10, function (_a) {
|
|
54
|
+
var error = _a.error, active = _a.active;
|
|
55
|
+
return error && active ? greyColor100 : active ? greyColor100 : greyColor5;
|
|
56
|
+
}, function (_a) {
|
|
57
|
+
var error = _a.error, active = _a.active;
|
|
58
|
+
return active && error ? invertRed : greyColor100;
|
|
53
59
|
}, function (_a) {
|
|
54
60
|
var error = _a.error;
|
|
55
|
-
return error && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n background-color: ", "
|
|
61
|
+
return error && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n /* background-color: ", "; */\n }\n "], ["\n position: relative;\n /* background-color: ", "; */\n }\n "])), lightRed);
|
|
56
62
|
}, function (_a) {
|
|
57
63
|
var active = _a.active;
|
|
58
|
-
return active && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border-radius: 0.2rem;\n position: relative;\n background-color:
|
|
59
|
-
var error = _a.error;
|
|
60
|
-
return error ? red : greyColor100;
|
|
61
|
-
});
|
|
64
|
+
return active && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border-radius: 0.2rem;\n position: relative;\n /* background-color: ", "; */\n "], ["\n border-radius: 0.2rem;\n position: relative;\n /* background-color: ", "; */\n "])), greyColor100);
|
|
62
65
|
});
|
|
63
|
-
var tabBarTabStyle1 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n white-space: nowrap;\n color: ", "\n"], ["\n white-space: nowrap;\n color: ", "\n"])), function (_a) {
|
|
66
|
+
var tabBarTabStyle1 = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n white-space: nowrap;\n color: ", ";\n \n"], ["\n white-space: nowrap;\n color: ", ";\n \n"])), function (_a) {
|
|
64
67
|
var active = _a.active, colors = _a.theme.colors, error = _a.error, black = _a.black;
|
|
65
68
|
return error ? red : active && !black ? (0, utilsOolib_1.getPrimaryColor100)(colors) : greyColor100;
|
|
66
69
|
});
|
|
67
|
-
var tabBarTabStyle2 = (0, styled_components_1.css)(
|
|
70
|
+
var tabBarTabStyle2 = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n ", "\n border-radius: ", ";\n color: ", "\n"], ["\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n ", "\n border-radius: ", ";\n color: ", "\n"])), (0, mixins_1.transition)("color"), function (_a) {
|
|
68
71
|
var active = _a.active;
|
|
69
|
-
return active &&
|
|
72
|
+
return active && "0.2rem";
|
|
73
|
+
}, function (_a) {
|
|
74
|
+
var error = _a.error, active = _a.active;
|
|
75
|
+
return error && !active ? red : active && error ? invertRed : active ? white : greyColor100;
|
|
70
76
|
});
|
|
71
77
|
// export const TabBarStyled = styled.div`
|
|
72
78
|
// background-color: ${white};
|
|
@@ -74,30 +80,40 @@ var tabBarTabStyle2 = (0, styled_components_1.css)(templateObject_9 || (template
|
|
|
74
80
|
// border-top: ${({ top }) => top && `0.1rem solid ${greyColor5}`};
|
|
75
81
|
// border-bottom: ${({ bottom }) => bottom && `0.1rem solid ${greyColor5}`};
|
|
76
82
|
// `;
|
|
77
|
-
exports.TabBarStyled = styled_components_1.default.div(
|
|
83
|
+
exports.TabBarStyled = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n z-index: 1000;\n height: ", ";\n"], ["\n background-color: ", ";\n z-index: 1000;\n height: ", ";\n"])), white, function (_a) {
|
|
78
84
|
var size = _a.size;
|
|
79
85
|
return size === 'S' ? '3rem' : '4rem';
|
|
80
86
|
});
|
|
81
|
-
exports.TabBarContainerStyled = styled_components_1.default.div(
|
|
82
|
-
exports.TabBarRowStyled = styled_components_1.default.div(
|
|
83
|
-
|
|
87
|
+
exports.TabBarContainerStyled = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n /* width: fit-content; // */\n /* width: 600px; */\n height: 100%;\n display: flex;\n align-items: center;\n position: relative;\n /* overflow: hidden; */\n"], ["\n /* width: fit-content; // */\n /* width: 600px; */\n height: 100%;\n display: flex;\n align-items: center;\n position: relative;\n /* overflow: hidden; */\n"])));
|
|
88
|
+
exports.TabBarRowStyled = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: flex;\n height: 100%;\n white-space: nowrap;\n width: fit-content;\n ", ";\n transform: ", ";\n /* max-width: 100%; */\n /* overflow-x: hidden; \n scroll-behavior: smooth; */\n \n"], ["\n display: flex;\n height: 100%;\n white-space: nowrap;\n width: fit-content;\n ", ";\n transform: ", ";\n /* max-width: 100%; */\n /* overflow-x: hidden; \n scroll-behavior: smooth; */\n \n"])), (0, mixins_1.transition)('transform'), function (_a) {
|
|
89
|
+
var translateX = _a.translateX;
|
|
90
|
+
return "translateX(".concat(translateX, "px)");
|
|
91
|
+
});
|
|
92
|
+
exports.TabBarTabWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __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 ", "\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"])), function (_a) {
|
|
84
93
|
var tabBarStyle = _a.tabBarStyle;
|
|
85
94
|
return tabBarStyle === "1"
|
|
86
95
|
? tabBarWrapperStyle1
|
|
87
96
|
: tabBarStyle === "2" && tabBarWrapperStyle2;
|
|
88
97
|
}, greyColor15);
|
|
89
|
-
exports.TabBarTabStyled = styled_components_1.default.button(
|
|
98
|
+
exports.TabBarTabStyled = styled_components_1.default.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n padding: 0 1.5rem;\n height: 100%;\n cursor: pointer;\n color: ", ";\n /* color: ", "; */\n background-color: ", ";\n border-top: 0; \n border-bottom: 0;\n border-left: 0;\n border-right: ", " ;\n display: flex;\n justify-content: center;\n align-items: center;\n :hover {\n background-color: ", ";\n }\n\n ", " \n"], ["\n padding: 0 1.5rem;\n height: 100%;\n cursor: pointer;\n color: ", ";\n /* color: ", "; */\n background-color: ", ";\n border-top: 0; \n border-bottom: 0;\n border-left: 0;\n border-right: ", " ;\n display: flex;\n justify-content: center;\n align-items: center;\n :hover {\n background-color: ", ";\n }\n\n ", " \n"])), greyColor100, function (active, error, tabBarStyle) { return tabBarStyle === "2" && error ? red : greyColor100; }, none, function (_a) {
|
|
99
|
+
var tabBarStyle = _a.tabBarStyle;
|
|
100
|
+
return tabBarStyle === "1" ? "1px solid ".concat(greyColor15) : 0;
|
|
101
|
+
}, none, function (_a) {
|
|
90
102
|
var tabBarStyle = _a.tabBarStyle;
|
|
91
103
|
return tabBarStyle === "1"
|
|
92
104
|
? tabBarTabStyle1
|
|
93
105
|
: tabBarStyle === "2" && tabBarTabStyle2;
|
|
94
106
|
});
|
|
95
|
-
exports.STYLED_SANS_2 = (0, styled_components_1.default)(Typo_1.SANS_2)(
|
|
96
|
-
exports.StyledDirectionButtons = styled_components_1.default.div(
|
|
107
|
+
exports.STYLED_SANS_2 = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_14 || (templateObject_14 = __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"])));
|
|
108
|
+
exports.StyledDirectionButtons = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n position: absolute;\n ", "\n background-color: ", ";\n height: 100%;\n border-right: 1px solid ", ";\n border-left: 1px solid ", ";\n z-index: 10;\n"], ["\n position: absolute;\n ", "\n background-color: ", ";\n height: 100%;\n border-right: 1px solid ", ";\n border-left: 1px solid ", ";\n z-index: 10;\n"])), function (_a) {
|
|
97
109
|
var left = _a.left, right = _a.right;
|
|
98
110
|
if (left)
|
|
99
|
-
return (0, styled_components_1.css)(
|
|
111
|
+
return (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject([" left: 0;"], [" left: 0;"])));
|
|
100
112
|
else if (right)
|
|
101
|
-
return (0, styled_components_1.css)(
|
|
113
|
+
return (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject([" right: 0;"], [" right: 0;"])));
|
|
102
114
|
}, themes_1.colors.white, greyColor15, greyColor15);
|
|
115
|
+
exports.StyledDot = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n background: ", ";\n height: 5px;\n width: 5px;\n border-radius: 50%;\n margin-left: 10px;\n"], ["\n background: ", ";\n height: 5px;\n width: 5px;\n border-radius: 50%;\n margin-left: 10px;\n"])), function (_a) {
|
|
116
|
+
var active = _a.active, error = _a.error, tabBarStyle = _a.tabBarStyle;
|
|
117
|
+
return tabBarStyle === "2" && active ? invertRed : !active && error ? red : red;
|
|
118
|
+
});
|
|
103
119
|
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;
|
|
@@ -16,54 +16,51 @@ var useScrollBar = function () {
|
|
|
16
16
|
var _a = (0, react_1.useState)(0), scrollX = _a[0], setScrollX = _a[1];
|
|
17
17
|
var _b = (0, react_1.useState)(false), scrollIsAtEnd = _b[0], setScrollIsAtEnd = _b[1];
|
|
18
18
|
var scrollContainerRef = (0, react_1.useRef)(null);
|
|
19
|
-
// const numberOfTabs = scrollContainerRef.current.childNodes.length
|
|
20
|
-
// const lastTab = scrollContainerRef.current.childNodes[numberOfTabs - 1];
|
|
21
|
-
// const lastTabRect = lastTab.getBoundingClientRect();
|
|
22
|
-
// console.log("lastTabRect", lastTabRect)
|
|
23
|
-
// const isLastTabVisible = lastTabRect.right <= containerWidth.innerWidth;
|
|
24
|
-
// const isLastTabHalfVisible = lastTabRect.right > containerWidth.innerWidth && lastTabRect.left < containerWidth.innerWidth;
|
|
25
|
-
// console.log("islast", isLastTabVisible)
|
|
26
|
-
// console.log("islasthalf",isLastTabHalfVisible)
|
|
27
19
|
var slide = function (direction) {
|
|
28
20
|
var _a = scrollContainerRef.current, scrollWidth = _a.scrollWidth, offsetWidth = _a.offsetWidth, scrollLeft = _a.scrollLeft;
|
|
29
|
-
|
|
30
|
-
console.log({ containerWidth: containerWidth });
|
|
21
|
+
// const containerWidth = scrollContainerRef.current.parentNode.getBoundingClientRect().width;
|
|
31
22
|
if (direction === "left") {
|
|
32
|
-
var
|
|
33
|
-
if (scrollLeft === newScrollLeft) {
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
23
|
+
var newScrollX = scrollX + Math.min(offsetWidth, Math.abs(scrollX)); //Math.max(, 0); // // ensures that the content is always visible within the scrollable element and no part of it is hidden.
|
|
24
|
+
// if (scrollLeft === newScrollLeft) {
|
|
25
|
+
// setScrollIsAtEnd(true);
|
|
26
|
+
// }
|
|
27
|
+
setScrollX(newScrollX);
|
|
28
|
+
// scrollContainerRef.current.scrollTo({
|
|
29
|
+
// left: newScrollLeft,
|
|
30
|
+
// behavior: "smooth"
|
|
31
|
+
// });
|
|
40
32
|
}
|
|
41
33
|
else if (direction === "right") {
|
|
42
|
-
var
|
|
43
|
-
if (scrollLeft === newScrollLeft) {
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
console.log({
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
34
|
+
var newScrollX = scrollX - Math.min(offsetWidth, scrollWidth - offsetWidth + scrollX); // // ensures that the content is always visible within the scrollable element and no part of it is hidden.
|
|
35
|
+
// if (scrollLeft === newScrollLeft) {
|
|
36
|
+
// setScrollIsAtEnd(true);
|
|
37
|
+
// }
|
|
38
|
+
console.log({
|
|
39
|
+
offsetWidth: offsetWidth,
|
|
40
|
+
remainingHidden: scrollWidth - offsetWidth + scrollX,
|
|
41
|
+
scrollWidth: scrollWidth
|
|
50
42
|
});
|
|
43
|
+
setScrollX(newScrollX);
|
|
44
|
+
// scrollContainerRef.current.scrollTo({
|
|
45
|
+
// left: newScrollLeft,
|
|
46
|
+
// behavior: "smooth"
|
|
47
|
+
// });
|
|
51
48
|
}
|
|
52
49
|
};
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
if (Math.floor(scrollContainerRef.current.scrollWidth - scrollContainerRef.current.scrollLeft) <= scrollContainerRef.current.offsetWidth) {
|
|
50
|
+
(0, react_1.useEffect)(function () {
|
|
51
|
+
if (Math.abs(scrollX) + scrollContainerRef.current.offsetWidth === scrollContainerRef.current.scrollWidth) {
|
|
56
52
|
setScrollIsAtEnd(true);
|
|
57
53
|
}
|
|
58
|
-
else {
|
|
54
|
+
else if (scrollIsAtEnd === true) {
|
|
59
55
|
setScrollIsAtEnd(false);
|
|
60
56
|
}
|
|
57
|
+
}, [scrollX]);
|
|
58
|
+
return {
|
|
59
|
+
scrollContainerRef: scrollContainerRef,
|
|
60
|
+
scrollX: scrollX,
|
|
61
|
+
slide: slide,
|
|
62
|
+
scrollIsAtEnd: scrollIsAtEnd,
|
|
63
|
+
scrollIsAtStart: scrollX === 0
|
|
61
64
|
};
|
|
62
|
-
(0, react_1.useEffect)(function () {
|
|
63
|
-
if (scrollContainerRef.current.offsetWidth >= scrollContainerRef.current.scrollWidth) {
|
|
64
|
-
setScrollIsAtEnd(true);
|
|
65
|
-
}
|
|
66
|
-
}, []);
|
|
67
|
-
return { scrollContainerRef: scrollContainerRef, scrollX: scrollX, scrollIsAtEnd: scrollIsAtEnd, slide: slide, checkScrollPosition: checkScrollPosition, setScrollIsAtEnd: setScrollIsAtEnd };
|
|
68
65
|
};
|
|
69
66
|
exports.useScrollBar = useScrollBar;
|