@typeolymp/ui-components 1.5.3 → 1.5.5
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/build/index.js
CHANGED
|
@@ -1221,8 +1221,8 @@ var Container$8 = styled__default["default"].div(templateObject_1$h || (template
|
|
|
1221
1221
|
}
|
|
1222
1222
|
return "";
|
|
1223
1223
|
});
|
|
1224
|
-
var
|
|
1225
|
-
var DropdownContainer = styled__default["default"].div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n width:
|
|
1224
|
+
var SelectedLocaleWrapper = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"])));
|
|
1225
|
+
var DropdownContainer = styled__default["default"].div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"], ["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"])), function (_a) {
|
|
1226
1226
|
var color = _a.color;
|
|
1227
1227
|
switch (color) {
|
|
1228
1228
|
default:
|
|
@@ -1232,7 +1232,7 @@ var DropdownContainer = styled__default["default"].div(templateObject_3$4 || (te
|
|
|
1232
1232
|
return theme.colors.lightGray.dark;
|
|
1233
1233
|
}
|
|
1234
1234
|
});
|
|
1235
|
-
var Locale = styled__default["default"].div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
|
|
1235
|
+
var Locale = styled__default["default"].div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
|
|
1236
1236
|
var templateObject_1$h, templateObject_2$e, templateObject_3$4, templateObject_4$3;
|
|
1237
1237
|
|
|
1238
1238
|
var LocaleSelect = function (props) {
|
|
@@ -1242,7 +1242,7 @@ var LocaleSelect = function (props) {
|
|
|
1242
1242
|
setLocale(locale);
|
|
1243
1243
|
props.onChange(locale);
|
|
1244
1244
|
};
|
|
1245
|
-
return (jsxRuntime.jsxs(Container$8, __assign({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxRuntime.jsxs(
|
|
1245
|
+
return (jsxRuntime.jsxs(Container$8, __assign({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxRuntime.jsxs(SelectedLocaleWrapper, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Flag, { locale: locale }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 10 }, void 0), jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: getNativeLanguageByLocale_1(locale) }), void 0)] }, void 0), dropdownIsVisible ? (jsxRuntime.jsx(Icon, { type: "chevronUp", size: "small", color: "darkGray" }, void 0)) : (jsxRuntime.jsx(Icon, { type: "chevronDown", size: "small", color: "darkGray" }, void 0))] }, void 0), dropdownIsVisible && (jsxRuntime.jsx(DropdownContainer, __assign({ color: props.color || "light" }, { children: props.locales
|
|
1246
1246
|
.filter(function (l) { return l !== locale; })
|
|
1247
1247
|
.map(function (locale) { return (jsxRuntime.jsxs(Locale, __assign({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Flag, { locale: locale }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 10 }, void 0), jsxRuntime.jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }), void 0)] }, void 0), jsxRuntime.jsx(Icon, { type: "chevronRight", size: "small", color: "darkGray" }, void 0)] }), locale)); }) }), void 0))] }), void 0));
|
|
1248
1248
|
};
|