wex-ui-lib 1.4.4 → 1.4.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.
- package/dist/index.cjs.js +83 -27
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.esm.js +82 -26
- package/dist/index.esm.js.map +1 -1
- package/dist/types/components/Navbar/Navbar.types.d.ts +4 -0
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1980,11 +1980,11 @@ function Icon(props) {
|
|
|
1980
1980
|
icon.includes("arrow-caret") && (React.createElement("svg", { width: "8", height: "10", viewBox: "0 0 8 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
1981
1981
|
React.createElement("path", { d: "M1 1L6 5L1 9", stroke: "white", strokeWidth: "1.5" })))));
|
|
1982
1982
|
}
|
|
1983
|
-
var IconContainer = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 1px;\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n transition: 100ms;\n cursor: pointer;\n svg {\n transform: ", ";\n height: ", ";\n fill: ", ";\n path{\n fill: ", "
|
|
1983
|
+
var IconContainer = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 1px;\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n transition: 100ms;\n cursor: pointer;\n svg {\n transform: ", ";\n height: ", ";\n fill: ", ";\n stroke: ", ";\n path{\n fill: ", ";\n stroke: ", ";\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n fill: ", ";\n path{\n fill: ", ";\n }\n }\n }\n"], ["\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 1px;\n width: ", ";\n height: ", ";\n border: ", ";\n border-radius: ", ";\n transition: 100ms;\n cursor: pointer;\n svg {\n transform: ", ";\n height: ", ";\n fill: ", ";\n stroke: ", ";\n path{\n fill: ", ";\n stroke: ", ";\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n fill: ", ";\n path{\n fill: ", ";\n }\n }\n }\n"])), function (props) { return props.border ? props.size : "unset"; }, function (props) { return props.border ? props.size : "unset"; }, function (props) { return props.border ? "2px solid ".concat(props.color) : "unset"; }, function (props) {
|
|
1984
1984
|
return props.border === "rounded" ? "2px" :
|
|
1985
1985
|
props.border === "circle" ? "50px" :
|
|
1986
1986
|
"unset";
|
|
1987
|
-
}, function (props) { return props.icon.includes("left") ? "rotateY(180deg)" : ""; }, function (props) { return props.border ? "46%" : props.size; }, function (props) { return props.color; }, function (props) { return props.color; }, function (props) { return props.hoverColor; }, function (props) { return props.hoverColor; }, function (props) { return props.hoverColor; });
|
|
1987
|
+
}, function (props) { return props.icon.includes("left") ? "rotateY(180deg)" : ""; }, function (props) { return props.border ? "46%" : props.size; }, function (props) { return props.color; }, function (props) { return props.color; }, function (props) { return props.color; }, function (props) { return props.color; }, function (props) { return props.hoverColor; }, function (props) { return props.hoverColor; }, function (props) { return props.hoverColor; });
|
|
1988
1988
|
var templateObject_1$d;
|
|
1989
1989
|
|
|
1990
1990
|
var theme = {
|
|
@@ -2188,39 +2188,62 @@ var disappearAnimation = keyframes(templateObject_2$7 || (templateObject_2$7 = _
|
|
|
2188
2188
|
var fadeInFromLeft = keyframes(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"])));
|
|
2189
2189
|
var fadeInFromRight = keyframes(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n"])));
|
|
2190
2190
|
var fadeInFromTop = keyframes(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
|
|
2191
|
-
var fadeInFromBottom = keyframes(templateObject_6$
|
|
2192
|
-
var templateObject_1$b, templateObject_2$7, templateObject_3$6, templateObject_4$5, templateObject_5$5, templateObject_6$
|
|
2191
|
+
var fadeInFromBottom = keyframes(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"], ["\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n"])));
|
|
2192
|
+
var templateObject_1$b, templateObject_2$7, templateObject_3$6, templateObject_4$5, templateObject_5$5, templateObject_6$2;
|
|
2193
2193
|
|
|
2194
2194
|
function Navbar(props) {
|
|
2195
2195
|
var logo = props.logo, items = props.items, button = props.button, config = props.config;
|
|
2196
|
+
var _a = React.useState(false), sideNavOpen = _a[0], setSideNavOpen = _a[1];
|
|
2197
|
+
var isMobile = typeof window !== 'undefined' && window.innerWidth <= 800;
|
|
2198
|
+
var sideNavItems = props.mobileItems || [];
|
|
2196
2199
|
return (React.createElement(React.Fragment, null,
|
|
2197
2200
|
React.createElement(NavbarContainer, __assign({}, props),
|
|
2198
2201
|
React.createElement(Logo$1, { src: logo === null || logo === undefined ? undefined : logo.url, width: logo === null || logo === undefined ? undefined : logo.width, onClick: logo === null || logo === undefined ? undefined : logo.onClick }),
|
|
2199
|
-
React.createElement(
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
React.createElement(
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
}
|
|
2218
|
-
|
|
2202
|
+
!isMobile ? (React.createElement(React.Fragment, null,
|
|
2203
|
+
React.createElement(ItemsContainer, null, items === null || items === undefined ? undefined : items.map(function (item) {
|
|
2204
|
+
var _a, _b;
|
|
2205
|
+
return (React.createElement(Item$1, { key: item.label, href: "#", onClick: function (e) {
|
|
2206
|
+
e.preventDefault();
|
|
2207
|
+
item.onClick && item.onClick();
|
|
2208
|
+
}, config: config, hasSubitems: ((_a = item.subitems) === null || _a === undefined ? undefined : _a.length) > 0 },
|
|
2209
|
+
item.label,
|
|
2210
|
+
item.subitems && React.createElement(Icon, { icon: 'arrow-caret', size: '8px' }),
|
|
2211
|
+
item.subitems && (React.createElement("div", null, (_b = item.subitems) === null || _b === undefined ? undefined : _b.map(function (subitem) {
|
|
2212
|
+
return (React.createElement(Subitem, { key: subitem.label },
|
|
2213
|
+
React.createElement("a", { href: "#", onClick: function (e) {
|
|
2214
|
+
e.preventDefault();
|
|
2215
|
+
e.stopPropagation();
|
|
2216
|
+
subitem.onClick && subitem.onClick();
|
|
2217
|
+
} }, subitem.label)));
|
|
2218
|
+
})))));
|
|
2219
|
+
})),
|
|
2220
|
+
button && (React.createElement(Button, { colors: button.colors, type: button.type, font: button.font, onClick: button.onClick, arrow: button.arrow }, button.label)))) : (React.createElement(Icon, { icon: 'hamburgerMenu', color: 'white', callback: function () { return setSideNavOpen(true); } }))),
|
|
2221
|
+
isMobile && (React.createElement(SideNav, { open: sideNavOpen },
|
|
2222
|
+
React.createElement(SideNavOverlay, { open: sideNavOpen, onClick: function () { return setSideNavOpen(false); } }),
|
|
2223
|
+
React.createElement(SideNavContent, { open: sideNavOpen },
|
|
2224
|
+
React.createElement(CloseButton, { onClick: function () { return setSideNavOpen(false); } }, "\u00D7"), sideNavItems === null || sideNavItems === undefined ? undefined :
|
|
2225
|
+
sideNavItems.map(function (item) { return (React.createElement(SideNavItem, { key: item.label, onClick: function () { setSideNavOpen(false); item.onClick && item.onClick(); } }, item.label)); }))))));
|
|
2226
|
+
}
|
|
2227
|
+
var NavbarContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n ", ";\n ", ";\n grid-template-rows: 100%;\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n grid-area: button;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n @media only screen and (max-width: 1024px) {\n grid-template-columns: auto auto;\n grid-template-areas: \"logo hamburgerIcon\";\n }\n"], ["\n background-color: ", ";\n width: 100vw;\n height: ", ";\n display: grid;\n ", ";\n ", ";\n grid-template-rows: 100%;\n position: fixed;\n top: 0;\n left: 0;\n align-items: center;\n justify-content: space-between;\n padding: 0 4vw;\n z-index: 99;\n backdrop-filter: blur(4px);\n & > button {\n margin-left: auto;\n grid-area: button;\n }\n * {\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n }\n @media only screen and (max-width: 1024px) {\n grid-template-columns: auto auto;\n grid-template-areas: \"logo hamburgerIcon\";\n }\n"])), function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.background) || theme.black; }, function (props) { var _a; return ((_a = props.config) === null || _a === undefined ? undefined : _a.height) || '80px'; }, function (props) { var _a; return ((_a = props.button) === null || _a === undefined ? undefined : _a.label) ? "grid-template-columns: auto auto auto" : "grid-template-columns: auto auto"; }, function (props) { var _a; return ((_a = props.button) === null || _a === undefined ? undefined : _a.label) ? "grid-template-areas: \"logo items button\"" : "grid-template-areas: \"logo items\""; });
|
|
2219
2228
|
var ItemsContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n grid-area: items;\n display: flex;\n align-items: center;\n height: 100%;\n @media only screen and (max-width: 1024px) {\n display: none;\n }\n"], ["\n grid-area: items;\n display: flex;\n align-items: center;\n height: 100%;\n @media only screen and (max-width: 1024px) {\n display: none;\n }\n"])));
|
|
2220
2229
|
var Item$1 = newStyled.a(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transition: 300ms;\n transform: rotateZ(90deg);\n }\n & > div:nth-of-type(2) {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n top: 88%;\n left: 0;\n background-color: ", ";\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n &:hover {\n color: ", ";\n }\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n"], ["\n color: ", ";\n position: relative;\n display: flex;\n gap: 5px;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-transform: uppercase;\n text-decoration: none;\n padding: 6px 22px 0;\n transition: 0.3s;\n border-bottom: 4px solid transparent;\n svg {\n margin-bottom: 1px;\n transition: 300ms;\n transform: rotateZ(90deg);\n }\n & > div:nth-of-type(2) {\n z-index: 10;\n position: absolute;\n display: none;\n flex-direction: column;\n align-items: flex-start;\n width: max-content;\n top: 88%;\n left: 0;\n background-color: ", ";\n padding: 16px 14px;\n animation-name: ", ";\n animation-duration: 0.3s;\n animation-fill-mode: forwards;\n a {\n color: ", ";\n &:hover {\n color: ", ";\n }\n }\n &:hover {\n animation-name: ", ";\n display: flex;\n }\n }\n &:hover {\n border-color: ", ";\n svg {\n transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n }\n & > div{\n animation-name: ", ";\n display: flex;\n }\n }\n"])), function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.text) || theme.white; }, theme.gray, disappearAnimation, function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.text) || theme.white; }, function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.textHover) || theme.primary; }, appearAnimation, function (props) { var _a, _b; return !props.hasSubitems ? ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.borderHover) || "white" : "transparent"; }, appearAnimation);
|
|
2221
2230
|
var Logo$1 = newStyled.img(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n grid-area: logo;\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n @media only screen and (max-width: 1024px) {\n width: calc(", "/1.3);\n }\n"], ["\n grid-area: logo;\n cursor: pointer;\n width: ", ";\n transition: all 0.2s;\n &:hover {\n filter: brightness(1.2);\n }\n @media only screen and (max-width: 1024px) {\n width: calc(", "/1.3);\n }\n"])), function (props) { return props.width || '130px'; }, function (props) { return props.width || '130px'; });
|
|
2222
2231
|
var Subitem = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n transition: 0.3s;\n a {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:not(:first-of-type) {\n a {\n padding-top: 9px;\n }\n }\n &:not(:last-of-type) {\n a {\n padding-bottom: 9px;\n }\n }\n"], ["\n width: 100%;\n cursor: pointer;\n height: 100%;\n max-height: 90px;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n transition: 0.3s;\n a {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font-size: 12px;\n letter-spacing: 2px;\n font-weight: 500;\n text-decoration: none;\n }\n &:not(:first-of-type) {\n a {\n padding-top: 9px;\n }\n }\n &:not(:last-of-type) {\n a {\n padding-bottom: 9px;\n }\n }\n"])));
|
|
2223
|
-
var
|
|
2232
|
+
var SideNav = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 200;\n pointer-events: ", ";\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 200;\n pointer-events: ", ";\n"])), function (_a) {
|
|
2233
|
+
var open = _a.open;
|
|
2234
|
+
return open ? 'auto' : 'none';
|
|
2235
|
+
});
|
|
2236
|
+
var SideNavOverlay = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0,0,0,0.4);\n opacity: ", ";\n transition: opacity 0.3s;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0,0,0,0.4);\n opacity: ", ";\n transition: opacity 0.3s;\n"])), function (_a) {
|
|
2237
|
+
var open = _a.open;
|
|
2238
|
+
return open ? 1 : 0;
|
|
2239
|
+
});
|
|
2240
|
+
var SideNavContent = newStyled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n right: 0;\n width: 80vw;\n max-width: 320px;\n height: 100vh;\n background: ", ";\n box-shadow: -2px 0 16px rgba(0,0,0,0.15);\n transform: ", ";\n transition: transform 0.3s;\n display: flex;\n flex-direction: column;\n padding: 32px 20px 20px 20px;\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n width: 80vw;\n max-width: 320px;\n height: 100vh;\n background: ", ";\n box-shadow: -2px 0 16px rgba(0,0,0,0.15);\n transform: ", ";\n transition: transform 0.3s;\n display: flex;\n flex-direction: column;\n padding: 32px 20px 20px 20px;\n"])), theme.black2, function (_a) {
|
|
2241
|
+
var open = _a.open;
|
|
2242
|
+
return open ? 'translateX(0)' : 'translateX(100%)';
|
|
2243
|
+
});
|
|
2244
|
+
var CloseButton = newStyled.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background: none;\n border: none;\n color: white;\n font-size: 2rem;\n align-self: flex-end;\n cursor: pointer;\n"], ["\n background: none;\n border: none;\n color: white;\n font-size: 2rem;\n align-self: flex-end;\n cursor: pointer;\n"])));
|
|
2245
|
+
var SideNavItem = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n color: white;\n font-size: 1.1rem;\n padding: 16px 0;\n border-bottom: 1px solid rgba(255,255,255,0.08);\n cursor: pointer;\n &:last-of-type { border-bottom: none; }\n"], ["\n color: white;\n font-size: 1.1rem;\n padding: 16px 0;\n border-bottom: 1px solid rgba(255,255,255,0.08);\n cursor: pointer;\n &:last-of-type { border-bottom: none; }\n"])));
|
|
2246
|
+
var templateObject_1$a, templateObject_2$6, templateObject_3$5, templateObject_4$4, templateObject_5$4, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
2224
2247
|
|
|
2225
2248
|
function Hero(props) {
|
|
2226
2249
|
var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, backgroundColor = props.backgroundColor, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
|
|
@@ -2565,6 +2588,7 @@ var Item = newStyled.button(templateObject_4$1 || (templateObject_4$1 = __makeTe
|
|
|
2565
2588
|
var ItemContent = newStyled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n grid-area: content;\n display: flex;\n position: relative;\n width: 100%;\n overflow: hidden;\n flex-direction: column;\n gap: 20px;\n"], ["\n grid-area: content;\n display: flex;\n position: relative;\n width: 100%;\n overflow: hidden;\n flex-direction: column;\n gap: 20px;\n"])));
|
|
2566
2589
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
|
|
2567
2590
|
|
|
2591
|
+
var isTouchDevice = function () { return typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0); };
|
|
2568
2592
|
var Tabs = function (_a) {
|
|
2569
2593
|
var _b, _c;
|
|
2570
2594
|
var tabs = _a.tabs, font = _a.font, _d = _a.displayMode, displayMode = _d === undefined ? "dark" : _d, accentColor = _a.accentColor, tabPadding = _a.tabPadding, onTabChange = _a.onTabChange, activeTabId = _a.activeTabId;
|
|
@@ -2573,6 +2597,9 @@ var Tabs = function (_a) {
|
|
|
2573
2597
|
var activeTab = isControlled ? activeTabId : internalActiveTabId;
|
|
2574
2598
|
var _f = React.useState({ left: 0, width: 0 }), indicatorStyle = _f[0], setIndicatorStyle = _f[1];
|
|
2575
2599
|
var tabRefs = React.useRef([]);
|
|
2600
|
+
var tabsListRef = React.useRef(null);
|
|
2601
|
+
// Drag state for mobile
|
|
2602
|
+
var dragState = React.useRef({ startX: 0, scrollLeft: 0, dragging: false });
|
|
2576
2603
|
React.useEffect(function () {
|
|
2577
2604
|
onTabChange && onTabChange(activeTab);
|
|
2578
2605
|
var updateIndicator = function () {
|
|
@@ -2592,14 +2619,43 @@ var Tabs = function (_a) {
|
|
|
2592
2619
|
}
|
|
2593
2620
|
onTabChange === null || onTabChange === undefined ? undefined : onTabChange(id);
|
|
2594
2621
|
};
|
|
2622
|
+
// Drag handlers
|
|
2623
|
+
React.useEffect(function () {
|
|
2624
|
+
var el = tabsListRef.current;
|
|
2625
|
+
if (!el || !isTouchDevice())
|
|
2626
|
+
return;
|
|
2627
|
+
var onTouchStart = function (e) {
|
|
2628
|
+
dragState.current.dragging = true;
|
|
2629
|
+
dragState.current.startX = e.touches[0].pageX - el.offsetLeft;
|
|
2630
|
+
dragState.current.scrollLeft = el.scrollLeft;
|
|
2631
|
+
};
|
|
2632
|
+
var onTouchMove = function (e) {
|
|
2633
|
+
if (!dragState.current.dragging)
|
|
2634
|
+
return;
|
|
2635
|
+
var x = e.touches[0].pageX - el.offsetLeft;
|
|
2636
|
+
var walk = dragState.current.startX - x;
|
|
2637
|
+
el.scrollLeft = dragState.current.scrollLeft + walk;
|
|
2638
|
+
};
|
|
2639
|
+
var onTouchEnd = function () {
|
|
2640
|
+
dragState.current.dragging = false;
|
|
2641
|
+
};
|
|
2642
|
+
el.addEventListener('touchstart', onTouchStart);
|
|
2643
|
+
el.addEventListener('touchmove', onTouchMove);
|
|
2644
|
+
el.addEventListener('touchend', onTouchEnd);
|
|
2645
|
+
return function () {
|
|
2646
|
+
el.removeEventListener('touchstart', onTouchStart);
|
|
2647
|
+
el.removeEventListener('touchmove', onTouchMove);
|
|
2648
|
+
el.removeEventListener('touchend', onTouchEnd);
|
|
2649
|
+
};
|
|
2650
|
+
}, [tabs]);
|
|
2595
2651
|
return (React.createElement(TabsContainer, null,
|
|
2596
|
-
React.createElement(TabsList,
|
|
2652
|
+
React.createElement(TabsList, { ref: tabsListRef },
|
|
2597
2653
|
tabs.map(function (tab, index) { return (React.createElement(Tab, { ref: function (el) { tabRefs.current[index] = el; }, key: tab.id, active: activeTab === tab.id, onClick: function () { return handleTabClick(tab.id); }, font: font, accentColor: accentColor, displayMode: displayMode, tabPadding: tabPadding }, (font === null || font === undefined ? undefined : font.casing) ? formatText(tab.label, font.casing) : tab.label)); }),
|
|
2598
2654
|
React.createElement(ActiveIndicator, { accentColor: accentColor, left: indicatorStyle.left, width: indicatorStyle.width })),
|
|
2599
2655
|
React.createElement(TabPanel, null, (_c = tabs.find(function (tab) { return tab.id === activeTab; })) === null || _c === undefined ? undefined : _c.content)));
|
|
2600
2656
|
};
|
|
2601
2657
|
var TabsContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n position: relative;\n"], ["\n width: 100%;\n position: relative;\n"])));
|
|
2602
|
-
var TabsList = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n position: relative;\n"], ["\n display: flex;\n justify-content: center;\n position: relative;\n"])));
|
|
2658
|
+
var TabsList = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n position: relative;\n overflow-x: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n &::-webkit-scrollbar { display: none; }\n width: 100%;\n scroll-behavior: smooth;\n @media (max-width: 700px) {\n justify-content: flex-start;\n cursor: grab;\n -webkit-overflow-scrolling: touch;\n }\n"], ["\n display: flex;\n justify-content: center;\n position: relative;\n overflow-x: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n &::-webkit-scrollbar { display: none; }\n width: 100%;\n scroll-behavior: smooth;\n @media (max-width: 700px) {\n justify-content: flex-start;\n cursor: grab;\n -webkit-overflow-scrolling: touch;\n }\n"])));
|
|
2603
2659
|
var Tab = newStyled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: ", ";\n width: fit-content;\n border: none;\n background: ", ";\n color: ", ";\n font-size: 16px;\n cursor: pointer;\n border-bottom: 2px solid rgba(255, 255, 255, 0.1);\n outline: none;\n transition: color 0.3s;\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: 1px;\n &:hover {\n background: ", "\n }\n"], ["\n padding: ", ";\n width: fit-content;\n border: none;\n background: ", ";\n color: ", ";\n font-size: 16px;\n cursor: pointer;\n border-bottom: 2px solid rgba(255, 255, 255, 0.1);\n outline: none;\n transition: color 0.3s;\n font-size: ", ";\n font-weight: ", ";\n letter-spacing: 1px;\n &:hover {\n background: ", "\n }\n"])), function (props) { return props.tabPadding || "14px 32px 12px"; }, function (props) { return props.active ? (props.displayMode === "dark" ? "rgba(255, 255, 255, 0.1)" : theme.black) : "transparent"; }, function (props) { return (props.active ? (props.displayMode === "dark" ? "white" : "black") : (props.displayMode === "dark" ? "#AEAEAE" : theme.black)); }, function (props) { var _a; return (((_a = props.font) === null || _a === undefined ? undefined : _a.size) || "12px"); }, function (props) { var _a; return (((_a = props.font) === null || _a === undefined ? undefined : _a.weight) || "12px"); }, function (props) { return props.displayMode === "dark" ? "rgba(255, 255, 255, 0.1)" : theme.black; });
|
|
2604
2660
|
var ActiveIndicator = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n bottom: 0;\n left: ", "px;\n width: ", "px;\n height: 2px;\n background: ", ";\n transition: left 0.3s ease, width 0.3s ease;\n"], ["\n position: absolute;\n bottom: 0;\n left: ", "px;\n width: ", "px;\n height: 2px;\n background: ", ";\n transition: left 0.3s ease, width 0.3s ease;\n"])), function (props) { return props.left; }, function (props) { return props.width; }, function (props) { return props.accentColor || theme.primary; });
|
|
2605
2661
|
var TabPanel = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: 16px;\n font-size: 14px;\n"], ["\n padding: 16px;\n font-size: 14px;\n"])));
|