wex-ui-lib 1.1.8 → 1.1.9
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/index.cjs.js +13 -6
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +14 -7
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -2209,13 +2209,20 @@ var templateObject_1$5, templateObject_2$3, templateObject_3$2, templateObject_4
|
|
|
2209
2209
|
|
|
2210
2210
|
function Hero(props) {
|
|
2211
2211
|
var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, backgroundColor = props.backgroundColor, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
|
|
2212
|
-
var _b = React.useState(
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2212
|
+
var _b = React.useState(0), activeIndex = _b[0], setActiveIndex = _b[1];
|
|
2213
|
+
React.useEffect(function () {
|
|
2214
|
+
if (imageUrls.length > 1) {
|
|
2215
|
+
var interval_1 = setInterval(function () {
|
|
2216
|
+
setActiveIndex(function (prevIndex) { return (prevIndex + 1) % imageUrls.length; });
|
|
2217
|
+
}, 4500);
|
|
2218
|
+
return function () { return clearInterval(interval_1); };
|
|
2219
|
+
}
|
|
2220
|
+
}, [imageUrls]);
|
|
2221
|
+
return (React.createElement(Container$3, { backgroundUrl: imageUrls[activeIndex] || "", marginTop: marginTop, height: height, backgroundColor: backgroundColor },
|
|
2222
|
+
overlay && (React.createElement(Overlay, { color: overlay.color, opacity: overlay.opacity })),
|
|
2223
|
+
React.createElement(HeroContent, null, children)));
|
|
2217
2224
|
}
|
|
2218
|
-
var Container$3 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n
|
|
2225
|
+
var Container$3 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n width: 100vw;\n height: ", ";\n margin-top: ", ";\n background-image: url(", ");\n background-color: ", ";\n background-position-y: 69%;\n background-size: cover;\n transition: background-image 1s ease-in-out;\n\n @media only screen and (max-width: 800px) {\n padding: 80px 10px;\n svg {\n max-height: 300px;\n transform: translateX(20px);\n }\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n width: 100vw;\n height: ", ";\n margin-top: ", ";\n background-image: url(", ");\n background-color: ", ";\n background-position-y: 69%;\n background-size: cover;\n transition: background-image 1s ease-in-out;\n\n @media only screen and (max-width: 800px) {\n padding: 80px 10px;\n svg {\n max-height: 300px;\n transform: translateX(20px);\n }\n }\n"])), function (props) { return props.height ? "calc(".concat(props.height, " - ").concat(props.marginTop || '0px', ")") : '100vh'; }, function (props) { return props.marginTop; }, function (props) { return props.backgroundUrl; }, function (props) { return props.backgroundColor || 'none'; });
|
|
2219
2226
|
var Overlay = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n opacity: ", ";\n"])), function (props) { return props.color; }, function (props) { return props.opacity; });
|
|
2220
2227
|
var HeroContent = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n z-index: 2;\n"], ["\n width: 100%;\n height: 100%;\n z-index: 2;\n"])));
|
|
2221
2228
|
var templateObject_1$4, templateObject_2$2, templateObject_3$1;
|