@typeolymp/ui-components 1.9.10 → 1.9.12

package/build/components/atoms/Button/index.d.ts

@@ -10,6 +10,7 @@ export declare type PropsType = {
     href?: string;
     asAnchor?: boolean;
     onClick?(): void;
+    onClickAsync?(resolve: (value: void | PromiseLike<void>) => void): void;
 };
 declare const Button: React.ForwardRefExoticComponent<PropsType & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export default Button;

package/build/components/atoms/Button/styles.d.ts

@@ -1,3 +1,4 @@
 export declare const StyledButton: any;
 export declare const DisabledButton: any;
 export declare const GhostButton: any;
+export declare const LoaderWrapper: any;

package/build/index.es.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { forwardRef, useRef, useState, useEffect, createElement, useImperativeHandle } from 'react';
-import styled, { keyframes } from 'styled-components';
 import BeatLoader from 'react-spinners/BeatLoader';
+import styled, { keyframes } from 'styled-components';
 import parse from 'html-react-parser';
 
 var theme = {
@@ -174,6 +174,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)) {
@@ -259,17 +271,47 @@ var GhostButton = styled(StyledButton)(templateObject_3$a || (templateObject_3$a
         ? theme.button.medium.marginTopActive
         : theme.button[size].marginTopActive;
 });
-var templateObject_1$N, templateObject_2$t, templateObject_3$a;
+var LoaderWrapper = styled.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 = 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 = useRef(null);
+    var _b = 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 (jsx(LoaderWrapper, __assign({ width: width, size: size }, { children: jsx(BeatLoader, { size: 10, color: dark
+                    ? theme.colors.lightGray.darker
+                    : theme.colors.lightGray.light, speedMultiplier: 0.5 }) })));
+    };
     if (disabled) {
-        return (jsx(DisabledButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref }, { children: jsx("span", { children: label }) })));
+        return (jsx(DisabledButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef }, { children: jsx("span", { children: label }) })));
     }
     if (color === "white")
-        return (jsx(GhostButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref, onClick: onClick }, { children: jsx("span", { children: label }) })));
-    return (jsx(StyledButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref, onClick: onClick }, { children: jsx("span", { children: label }) })));
+        return (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 ? jsx(Loader, { dark: true }) : jsx("span", { children: label }) })));
+    return (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 ? jsx(Loader, {}) : jsx("span", { children: label }) })));
 });
 
 var StyledCheckbox = styled.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) {