oolib 2.27.5 → 2.27.6
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.
|
@@ -42,8 +42,8 @@ var DisplayIcon = function (_a) {
|
|
|
42
42
|
return react_1.default.createElement(react_1.default.Fragment, null, IconComp && react_1.default.createElement(IconComp, { size: 20, weight: "bold" }));
|
|
43
43
|
};
|
|
44
44
|
var Banner = function (_a) {
|
|
45
|
-
var color = _a.color, cta = _a.cta, msg = _a.msg, handleRemove = _a.handleRemove, id = _a.id, timeOut = _a.timeOut, showIcon = _a.showIcon, _b = _a.bottomStroke, bottomStroke = _b === void 0 ? true : _b;
|
|
46
|
-
var
|
|
45
|
+
var color = _a.color, cta = _a.cta, msg = _a.msg, handleRemove = _a.handleRemove, id = _a.id, timeOut = _a.timeOut, showIcon = _a.showIcon, _b = _a.bottomStroke, bottomStroke = _b === void 0 ? true : _b, _c = _a.hideCloseButton, hideCloseButton = _c === void 0 ? false : _c;
|
|
46
|
+
var _d = (0, react_1.useState)(0), height = _d[0], setHeight = _d[1];
|
|
47
47
|
var ContainerRef = (0, react_1.useRef)();
|
|
48
48
|
(0, react_1.useEffect)(function () {
|
|
49
49
|
var timer;
|
|
@@ -67,7 +67,7 @@ var Banner = function (_a) {
|
|
|
67
67
|
showIcon && react_1.default.createElement(DisplayIcon, { color: color }),
|
|
68
68
|
react_1.default.createElement(Typo_1.SANS_2, null, msg),
|
|
69
69
|
cta && (react_1.default.createElement(Buttons_1.ButtonSecondary, { style: { marginTop: "0.5rem", marginBottom: "0.5rem" }, S: true, onClick: cta.action, invert: color === "dark" ? true : false }, cta === null || cta === void 0 ? void 0 : cta.text))),
|
|
70
|
-
react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: "X", invert: color === "dark" ? true : false, onClick: function (e) { return remove(e, id); } }))));
|
|
70
|
+
hideCloseButton !== true && react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: "X", invert: color === "dark" ? true : false, onClick: function (e) { return remove(e, id); } }))));
|
|
71
71
|
};
|
|
72
72
|
var BannerAlert = function (_a) {
|
|
73
73
|
var _b;
|
|
@@ -76,16 +76,15 @@ var BannerAlert = function (_a) {
|
|
|
76
76
|
(0, react_1.useEffect)(function () {
|
|
77
77
|
setTimeout(function () {
|
|
78
78
|
var ele = document.getElementById("bannerInfo");
|
|
79
|
-
console.log({ ele: ele, h: ele.offsetHeight });
|
|
80
79
|
setTop(ele.offsetHeight);
|
|
81
80
|
}, 100);
|
|
82
81
|
});
|
|
83
|
-
return (react_1.default.createElement(index_styled_1.BannerAlertStyled, { top: top }, (_b = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.alertState) === null || _b === void 0 ? void 0 : _b.map(function (e) { return (react_1.default.createElement(Banner, { key: e.id, id: e.id, color: e.color, msg: e.msg, cta: e.cta, handleRemove: REMOVE_ALERT_BANNER, timeOut: e.timeOut, showIcon: e.showIcon })); })));
|
|
82
|
+
return (react_1.default.createElement(index_styled_1.BannerAlertStyled, { top: top }, (_b = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.alertState) === null || _b === void 0 ? void 0 : _b.map(function (e) { return (react_1.default.createElement(Banner, { key: e.id, id: e.id, color: e.color, msg: e.msg, cta: e.cta, handleRemove: REMOVE_ALERT_BANNER, timeOut: e.timeOut, showIcon: e.showIcon, hideCloseButton: e.hideCloseButton })); })));
|
|
84
83
|
};
|
|
85
84
|
exports.BannerAlert = BannerAlert;
|
|
86
85
|
var BannerInfo = function (_a) {
|
|
87
86
|
var _b;
|
|
88
87
|
var BANNER_STATE = _a.BANNER_STATE, REMOVE_INFO_BANNER = _a.REMOVE_INFO_BANNER;
|
|
89
|
-
return (react_1.default.createElement(index_styled_1.BannerInfoStyled, { id: "bannerInfo" }, (_b = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.infoState) === null || _b === void 0 ? void 0 : _b.map(function (e) { return (react_1.default.createElement(Banner, { key: e.id, id: e.id, color: e.color, msg: e.msg, cta: e.cta, handleRemove: REMOVE_INFO_BANNER, timeOut: e.timeOut, showIcon: e.showIcon, bottomStroke: false })); })));
|
|
88
|
+
return (react_1.default.createElement(index_styled_1.BannerInfoStyled, { id: "bannerInfo" }, (_b = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.infoState) === null || _b === void 0 ? void 0 : _b.map(function (e) { return (react_1.default.createElement(Banner, { key: e.id, id: e.id, color: e.color, msg: e.msg, cta: e.cta, handleRemove: REMOVE_INFO_BANNER, timeOut: e.timeOut, showIcon: e.showIcon, bottomStroke: false, hideCloseButton: e.hideCloseButton })); })));
|
|
90
89
|
};
|
|
91
90
|
exports.BannerInfo = BannerInfo;
|
|
@@ -62,7 +62,7 @@ exports.BannerWrapperStyled = styled_components_1.default.div(templateObject_3 |
|
|
|
62
62
|
return (color === "dark" ? white : "");
|
|
63
63
|
}, (0, mixins_1.mediaQuery)("sm"));
|
|
64
64
|
exports.BannerStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n width: 100%;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n width: 100%;\n"])));
|
|
65
|
-
exports.BannerAlertStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: sticky;\n z-index:
|
|
65
|
+
exports.BannerAlertStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: sticky;\n z-index: 100000000; //whatever this is, it should be more than modal\n width: 100%;\n ", ";\n\n ", "\n"], ["\n position: sticky;\n z-index: 100000000; //whatever this is, it should be more than modal\n width: 100%;\n ", ";\n\n ", "\n"])), function (_a) {
|
|
66
66
|
var top = _a.top;
|
|
67
67
|
return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n top: ", "px;\n "], ["\n top: ", "px;\n "])), top);
|
|
68
68
|
}, (0, mixins_1.transition)("top"));
|
|
@@ -12,7 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
12
12
|
var themes_1 = require("../../themes");
|
|
13
13
|
var white = themes_1.colors.white, greyColor15 = themes_1.colors.greyColor15, greyColor100 = themes_1.colors.greyColor100;
|
|
14
14
|
exports.StyledHints = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
|
|
15
|
-
exports.StyledLightbox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n position: absolute;\n\n border: 1px solid ", ";\n z-index: 2;\n width: 30rem;\n height: 35rem;\n background-color: white;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n border-radius: 2px;\n /* top: ", "; */\n /* right: ", "; */\n\n top: ", ";\n left: ", ";\n bottom: ", ";\n right: ", ";\n\n display: flex;\n flex-direction: column;\n"], ["\n background: ", ";\n position: absolute;\n\n border: 1px solid ", ";\n z-index: 2;\n width: 30rem;\n height: 35rem;\n background-color: white;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n border-radius: 2px;\n /* top: ", "; */\n /* right: ", "; */\n\n top: ", ";\n left: ", ";\n bottom: ", ";\n right: ", ";\n\n display: flex;\n flex-direction: column;\n"])), white, greyColor15, function (_a) {
|
|
15
|
+
exports.StyledLightbox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\nz-index: 1000;\n background: ", ";\n position: absolute;\n\n border: 1px solid ", ";\n z-index: 2;\n width: 30rem;\n height: 35rem;\n background-color: white;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n border-radius: 2px;\n /* top: ", "; */\n /* right: ", "; */\n\n top: ", ";\n left: ", ";\n bottom: ", ";\n right: ", ";\n\n display: flex;\n flex-direction: column;\n"], ["\nz-index: 1000;\n background: ", ";\n position: absolute;\n\n border: 1px solid ", ";\n z-index: 2;\n width: 30rem;\n height: 35rem;\n background-color: white;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n border-radius: 2px;\n /* top: ", "; */\n /* right: ", "; */\n\n top: ", ";\n left: ", ";\n bottom: ", ";\n right: ", ";\n\n display: flex;\n flex-direction: column;\n"])), white, greyColor15, function (_a) {
|
|
16
16
|
var style = _a.style;
|
|
17
17
|
return ((style === null || style === void 0 ? void 0 : style.top) ? style.top : "-1rem");
|
|
18
18
|
}, function (_a) {
|