oolib 2.41.0 → 2.42.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.
- 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/icons/custom/index.d.ts +1 -0
- package/dist/icons/custom/index.js +8 -1
- package/dist/icons/index.d.ts +2 -0
- package/dist/icons/index.js +1 -0
- package/dist/utils/customHooks/useScrollBar.d.ts +2 -3
- package/dist/utils/customHooks/useScrollBar.js +27 -43
- 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,5 +16,6 @@ export function BadgeSuperAdmin(props: any): any;
|
|
|
16
16
|
export function BadgeMod(props: any): any;
|
|
17
17
|
export function BadgeVetted(props: any): any;
|
|
18
18
|
export function IndiaFlag(props: any): any;
|
|
19
|
+
export function NigeriaFlag(props: any): any;
|
|
19
20
|
export function KenyaFlag(props: any): any;
|
|
20
21
|
export function ModalBulbIcon(): any;
|
|
@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.ModalBulbIcon = exports.KenyaFlag = exports.IndiaFlag = exports.BadgeVetted = exports.BadgeMod = exports.BadgeSuperAdmin = exports.BadgeAdmin = exports.OkeGoogleIcon = exports.LetterH = exports.LanguageIcon = exports.IndexIcon = void 0;
|
|
17
|
+
exports.ModalBulbIcon = exports.KenyaFlag = exports.NigeriaFlag = exports.IndiaFlag = exports.BadgeVetted = exports.BadgeMod = exports.BadgeSuperAdmin = exports.BadgeAdmin = exports.OkeGoogleIcon = exports.LetterH = exports.LanguageIcon = exports.IndexIcon = void 0;
|
|
18
18
|
var react_1 = __importDefault(require("react"));
|
|
19
19
|
var themes_1 = require("../../themes");
|
|
20
20
|
var comps_1 = require("../../utils/comps");
|
|
@@ -91,6 +91,13 @@ var IndiaFlag = function (props) { return (react_1.default.createElement("svg",
|
|
|
91
91
|
react_1.default.createElement("path", { fill: "#3D58DB", d: "M15 20a5 5 0 1010 0 5 5 0 00-10 0zm8.75 0a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" }),
|
|
92
92
|
react_1.default.createElement("path", { fill: "#3D58DB", d: "M19.993 21.076l-.713 3.9.414-3.943-1.784 3.541 1.509-3.667-2.71 2.896 2.482-3.094-3.416 2.015 3.252-2.269-3.845.971 3.76-1.261-3.963-.151 3.963-.151-3.76-1.262 3.845.972-3.252-2.27 3.415 2.015-2.48-3.093 2.709 2.895-1.509-3.667 1.784 3.542-.414-3.944.713 3.9.714-3.9-.415 3.944 1.784-3.542-1.509 3.667 2.71-2.895-2.481 3.093 3.415-2.015-3.252 2.27 3.845-.972-3.76 1.262 3.963.15-3.963.152 3.76 1.261-3.845-.971 3.252 2.27-3.415-2.016 2.48 3.094-2.709-2.896 1.509 3.668-1.784-3.542.415 3.944-.714-3.901z" })))); };
|
|
93
93
|
exports.IndiaFlag = IndiaFlag;
|
|
94
|
+
var NigeriaFlag = function (props) { return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.size || 30, height: props.size || 30, fill: "none", viewBox: "0 0 40 40" },
|
|
95
|
+
react_1.default.createElement("mask", { id: "mask0_863_1249", style: { maskType: "alpha" }, width: "40", height: "28", x: "0", y: "6", maskUnits: "userSpaceOnUse" },
|
|
96
|
+
react_1.default.createElement("path", { fill: "#fff", d: "M0 6H40V34H0z" })),
|
|
97
|
+
react_1.default.createElement("g", { fillRule: "evenodd", clipRule: "evenodd", mask: "url(#mask0_863_1249)" },
|
|
98
|
+
react_1.default.createElement("path", { fill: "#F7FCFF", d: "M4 6h32v28H4V6z" }),
|
|
99
|
+
react_1.default.createElement("path", { fill: "#093", d: "M26.25 6H35a5 5 0 015 5v18a5 5 0 01-5 5h-8.75V6zM0 11a5 5 0 015-5h8.75v28H5a5 5 0 01-5-5V11z" })))); };
|
|
100
|
+
exports.NigeriaFlag = NigeriaFlag;
|
|
94
101
|
var KenyaFlag = function (props) { return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: props.size || 40, height: props.size || 40, fill: "none", viewBox: "0 0 40 40" },
|
|
95
102
|
react_1.default.createElement("mask", { id: "mask0_4893_23143", style: { maskType: "alpha" }, width: "40", height: "28", x: "0", y: "6", maskUnits: "userSpaceOnUse" },
|
|
96
103
|
react_1.default.createElement("path", { fill: "#fff", d: "M40 6H0v28h40V6z" })),
|
package/dist/icons/index.d.ts
CHANGED
|
@@ -96,6 +96,7 @@ export namespace icons {
|
|
|
96
96
|
export { BadgeVetted };
|
|
97
97
|
export { IndiaFlag };
|
|
98
98
|
export { KenyaFlag };
|
|
99
|
+
export { NigeriaFlag };
|
|
99
100
|
export { LightbulbFilament };
|
|
100
101
|
export { ModalBulbIcon };
|
|
101
102
|
export { Keyboard };
|
|
@@ -198,6 +199,7 @@ import { BadgeMod } from "./custom";
|
|
|
198
199
|
import { BadgeVetted } from "./custom";
|
|
199
200
|
import { IndiaFlag } from "./custom";
|
|
200
201
|
import { KenyaFlag } from "./custom";
|
|
202
|
+
import { NigeriaFlag } from "./custom";
|
|
201
203
|
import { LightbulbFilament } from "phosphor-react";
|
|
202
204
|
import { ModalBulbIcon } from "./custom";
|
|
203
205
|
import { Keyboard } from "phosphor-react";
|
package/dist/icons/index.js
CHANGED
|
@@ -102,6 +102,7 @@ exports.icons = {
|
|
|
102
102
|
BadgeVetted: custom_1.BadgeVetted,
|
|
103
103
|
IndiaFlag: custom_1.IndiaFlag,
|
|
104
104
|
KenyaFlag: custom_1.KenyaFlag,
|
|
105
|
+
NigeriaFlag: custom_1.NigeriaFlag,
|
|
105
106
|
LightbulbFilament: phosphor_react_1.LightbulbFilament,
|
|
106
107
|
ModalBulbIcon: custom_1.ModalBulbIcon,
|
|
107
108
|
Keyboard: phosphor_react_1.Keyboard,
|
|
@@ -6,64 +6,48 @@ var react_1 = require("react");
|
|
|
6
6
|
* @summary The hook sets the initial state values of scrollX and scrollIsAtEnd,
|
|
7
7
|
* and uses an effect to check whether the width of the scrollable element is less than or equal to its parent element's width.
|
|
8
8
|
* If so, it sets scrollIsAtEnd to true.
|
|
9
|
-
* @returns scrollContainerRef:
|
|
10
|
-
* scrollX:
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
9
|
+
* @returns scrollContainerRef: useRef object that can be attached to the container element to enable scrolling
|
|
10
|
+
* scrollX: state variable that keeps track of the current horizontal scroll position of container
|
|
11
|
+
* slide (string): function that takes a string argument "left" or "right", and adjusts the scroll position of the container accordingly
|
|
12
|
+
* scrollIsAtEnd: state (boolean) variable that indicates whether the scroll position of the container is at the end of the scrollable content
|
|
13
|
+
* scrollIsAtStart: state variable that indicates whether the scroll position of the container is at the start of the scrollable content
|
|
14
14
|
*/
|
|
15
15
|
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
|
-
var _a = scrollContainerRef.current, scrollWidth = _a.scrollWidth, offsetWidth = _a.offsetWidth
|
|
29
|
-
var containerWidth = scrollContainerRef.current.parentNode.getBoundingClientRect().width;
|
|
30
|
-
console.log({ containerWidth: containerWidth });
|
|
20
|
+
var _a = scrollContainerRef.current, scrollWidth = _a.scrollWidth, offsetWidth = _a.offsetWidth;
|
|
31
21
|
if (direction === "left") {
|
|
32
|
-
var
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
scrollContainerRef.current.scrollTo({
|
|
37
|
-
left: newScrollLeft,
|
|
38
|
-
behavior: "smooth"
|
|
39
|
-
});
|
|
22
|
+
var newScrollX = scrollX + Math.min(offsetWidth, Math.abs(scrollX));
|
|
23
|
+
//newScrollX = minimum value between offsetWidth (the width of container) and Math.abs(scrollX) (distance scrolled from the left edge of the container)
|
|
24
|
+
setScrollX(newScrollX);
|
|
40
25
|
}
|
|
41
26
|
else if (direction === "right") {
|
|
42
|
-
var
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
scrollContainerRef.current.scrollTo({
|
|
48
|
-
left: newScrollLeft,
|
|
49
|
-
behavior: "smooth"
|
|
50
|
-
});
|
|
27
|
+
var newScrollX = scrollX - Math.min(offsetWidth, scrollWidth - offsetWidth + scrollX);
|
|
28
|
+
// calculate minimum value between offsetWidth (the width of the container) and
|
|
29
|
+
// scrollWidth - offsetWidth + scrollX (distance from left edge of container to right edge of scrollable content hidden from view).
|
|
30
|
+
// result subtracted from scrollX, which gives the new scroll position then used to set scrollX
|
|
31
|
+
setScrollX(newScrollX);
|
|
51
32
|
}
|
|
52
33
|
};
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
if
|
|
34
|
+
(0, react_1.useEffect)(function () {
|
|
35
|
+
// update scrollIsAtEnd state variable everytime the scrollX state variable changes.
|
|
36
|
+
// checks if current scroll position plus the width of the container is equal to the width of the scrollable content,
|
|
37
|
+
// which indicates that the scroll position is at the end of the content. If scrollIsAtEnd is true and the scroll position changes, set scrollIsAtEnd to false.
|
|
38
|
+
if (Math.abs(scrollX) + scrollContainerRef.current.offsetWidth === scrollContainerRef.current.scrollWidth) {
|
|
56
39
|
setScrollIsAtEnd(true);
|
|
57
40
|
}
|
|
58
|
-
else {
|
|
41
|
+
else if (scrollIsAtEnd === true) {
|
|
59
42
|
setScrollIsAtEnd(false);
|
|
60
43
|
}
|
|
44
|
+
}, [scrollX]);
|
|
45
|
+
return {
|
|
46
|
+
scrollContainerRef: scrollContainerRef,
|
|
47
|
+
scrollX: scrollX,
|
|
48
|
+
slide: slide,
|
|
49
|
+
scrollIsAtEnd: scrollIsAtEnd,
|
|
50
|
+
scrollIsAtStart: scrollX === 0
|
|
61
51
|
};
|
|
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
52
|
};
|
|
69
53
|
exports.useScrollBar = useScrollBar;
|