@typeolymp/ui-components 1.9.10 → 1.9.11

package/build/index.js

@@ -4,15 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var styled = require('styled-components');
 var BeatLoader = require('react-spinners/BeatLoader');
+var styled = require('styled-components');
 var parse = require('html-react-parser');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var BeatLoader__default = /*#__PURE__*/_interopDefaultLegacy(BeatLoader);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var parse__default = /*#__PURE__*/_interopDefaultLegacy(parse);
 
 var theme = {
@@ -185,6 +185,18 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __spreadArray(to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -270,17 +282,47 @@ var GhostButton = styled__default["default"](StyledButton)(templateObject_3$a ||
         ? theme.button.medium.marginTopActive
         : theme.button[size].marginTopActive;
 });
-var templateObject_1$N, templateObject_2$t, templateObject_3$a;
+var LoaderWrapper = styled__default["default"].div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  width: ", ";\n  margin-top: ", ";\n"], ["\n  width: ", ";\n  margin-top: ", ";\n"])), function (_a) {
+    var width = _a.width;
+    return "".concat(width, "px");
+}, function (_a) {
+    var size = _a.size;
+    return (size === "small" ? "3px" : "");
+});
+var templateObject_1$N, templateObject_2$t, templateObject_3$a, templateObject_4$7;
 
 var Button = React.forwardRef(function (_a, ref) {
-    var label = _a.label, color = _a.color, size = _a.size, fluid = _a.fluid, disabled = _a.disabled, type = _a.type, tabIndex = _a.tabIndex, href = _a.href, asAnchor = _a.asAnchor, onClick = _a.onClick;
+    var label = _a.label, color = _a.color, size = _a.size, fluid = _a.fluid, disabled = _a.disabled, type = _a.type, tabIndex = _a.tabIndex, href = _a.href, asAnchor = _a.asAnchor, props = __rest(_a, ["label", "color", "size", "fluid", "disabled", "type", "tabIndex", "href", "asAnchor"]);
+    var buttonRef = React.useRef(null);
+    var _b = React.useState(false), isLoading = _b[0], setIsLoading = _b[1];
     var as = href || asAnchor ? "a" : "button";
+    var onClick = function () {
+        if (props.onClickAsync) {
+            setIsLoading(true);
+            new Promise(function (resolve) {
+                props.onClickAsync(resolve);
+            }).then(function () { return setIsLoading(false); });
+        }
+        else if (props.onClick) {
+            props.onClick();
+        }
+    };
+    var Loader = function (_a) {
+        var _b;
+        var dark = _a.dark;
+        var width = ((_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) - 40;
+        if (dark)
+            width = width + 4;
+        return (jsxRuntime.jsx(LoaderWrapper, __assign({ width: width, size: size }, { children: jsxRuntime.jsx(BeatLoader__default["default"], { size: 10, color: dark
+                    ? theme.colors.lightGray.darker
+                    : theme.colors.lightGray.light, speedMultiplier: 0.5 }) })));
+    };
     if (disabled) {
-        return (jsxRuntime.jsx(DisabledButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref }, { children: jsxRuntime.jsx("span", { children: label }) })));
+        return (jsxRuntime.jsx(DisabledButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef }, { children: jsxRuntime.jsx("span", { children: label }) })));
     }
     if (color === "white")
-        return (jsxRuntime.jsx(GhostButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref, onClick: onClick }, { children: jsxRuntime.jsx("span", { children: label }) })));
-    return (jsxRuntime.jsx(StyledButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref, onClick: onClick }, { children: jsxRuntime.jsx("span", { children: label }) })));
+        return (jsxRuntime.jsx(GhostButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? jsxRuntime.jsx(Loader, { dark: true }) : jsxRuntime.jsx("span", { children: label }) })));
+    return (jsxRuntime.jsx(StyledButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? jsxRuntime.jsx(Loader, {}) : jsxRuntime.jsx("span", { children: label }) })));
 });
 
 var StyledCheckbox = styled__default["default"].div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n  min-height: 25px;\n  max-height: 25px;\n  min-width: 25px;\n  max-width: 25px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  cursor: ", ";\n  background-color: ", ";\n\n  svg {\n    margin-left: -1px;\n    fill: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  min-height: 25px;\n  max-height: 25px;\n  min-width: 25px;\n  max-width: 25px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  cursor: ", ";\n  background-color: ", ";\n\n  svg {\n    margin-left: -1px;\n    fill: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {