allaw-ui 0.0.54 → 0.0.57
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.
|
@@ -55,3 +55,27 @@
|
|
|
55
55
|
.primary-button-full-width {
|
|
56
56
|
width: 100%;
|
|
57
57
|
}
|
|
58
|
+
|
|
59
|
+
.primary-button-loading {
|
|
60
|
+
animation: pulse-background 1.5s infinite alternate;
|
|
61
|
+
pointer-events: none;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@keyframes pulse-background {
|
|
65
|
+
0% {
|
|
66
|
+
background-color: #171e25;
|
|
67
|
+
}
|
|
68
|
+
50% {
|
|
69
|
+
background-color: #171e25;
|
|
70
|
+
}
|
|
71
|
+
100% {
|
|
72
|
+
background-color: #1985e8;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.primary-button-loading-dots {
|
|
77
|
+
width: 1.25rem;
|
|
78
|
+
display: inline-block;
|
|
79
|
+
text-align: left;
|
|
80
|
+
font-size: 0.9rem;
|
|
81
|
+
}
|
|
@@ -8,9 +8,10 @@ export interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonEleme
|
|
|
8
8
|
endIconName?: string;
|
|
9
9
|
label: string;
|
|
10
10
|
disabled?: boolean;
|
|
11
|
-
onClick?: () => void;
|
|
11
|
+
onClick?: () => Promise<void> | void;
|
|
12
12
|
fullWidth?: boolean;
|
|
13
13
|
type?: "button" | "submit" | "reset";
|
|
14
|
+
isLoading?: boolean;
|
|
14
15
|
}
|
|
15
16
|
declare const PrimaryButton: React.ForwardRefExoticComponent<PrimaryButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
16
17
|
export default PrimaryButton;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use client";
|
|
1
2
|
var __assign = (this && this.__assign) || function () {
|
|
2
3
|
__assign = Object.assign || function(t) {
|
|
3
4
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
@@ -9,6 +10,42 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
10
|
};
|
|
10
11
|
return __assign.apply(this, arguments);
|
|
11
12
|
};
|
|
13
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
14
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
15
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
16
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
17
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
18
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
19
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
23
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
24
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
25
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
26
|
+
function step(op) {
|
|
27
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
28
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
29
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
30
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
31
|
+
switch (op[0]) {
|
|
32
|
+
case 0: case 1: t = op; break;
|
|
33
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
34
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
35
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
36
|
+
default:
|
|
37
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
38
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
39
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
40
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
41
|
+
if (t[2]) _.ops.pop();
|
|
42
|
+
_.trys.pop(); continue;
|
|
43
|
+
}
|
|
44
|
+
op = body.call(thisArg, _);
|
|
45
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
46
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
47
|
+
}
|
|
48
|
+
};
|
|
12
49
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
50
|
var t = {};
|
|
14
51
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -20,17 +57,61 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
20
57
|
}
|
|
21
58
|
return t;
|
|
22
59
|
};
|
|
23
|
-
import React, { forwardRef, useImperativeHandle, } from "react";
|
|
60
|
+
import React, { forwardRef, useImperativeHandle, useState, useEffect, } from "react";
|
|
24
61
|
import "./PrimaryButton.css";
|
|
25
62
|
import "../../../styles/global.css";
|
|
26
63
|
var PrimaryButton = forwardRef(function (_a, ref) {
|
|
27
|
-
var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onClick = _a.onClick, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? "button" : _d, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "label", "disabled", "onClick", "fullWidth", "type"]);
|
|
64
|
+
var startIcon = _a.startIcon, endIcon = _a.endIcon, startIconName = _a.startIconName, endIconName = _a.endIconName, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onClick = _a.onClick, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? "button" : _d, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, props = __rest(_a, ["startIcon", "endIcon", "startIconName", "endIconName", "label", "disabled", "onClick", "fullWidth", "type", "isLoading"]);
|
|
28
65
|
var buttonRef = React.useRef(null);
|
|
66
|
+
var _f = useState(false), internalIsLoading = _f[0], setInternalIsLoading = _f[1];
|
|
67
|
+
var _g = useState(""), loadingDots = _g[0], setLoadingDots = _g[1];
|
|
29
68
|
useImperativeHandle(ref, function () { return buttonRef.current; });
|
|
30
|
-
|
|
69
|
+
var isButtonLoading = isLoading || internalIsLoading;
|
|
70
|
+
useEffect(function () {
|
|
71
|
+
var interval = null;
|
|
72
|
+
if (isButtonLoading) {
|
|
73
|
+
interval = setInterval(function () {
|
|
74
|
+
setLoadingDots(function (prev) {
|
|
75
|
+
if (prev.length >= 3)
|
|
76
|
+
return "";
|
|
77
|
+
return prev + ".";
|
|
78
|
+
});
|
|
79
|
+
}, 500);
|
|
80
|
+
}
|
|
81
|
+
return function () {
|
|
82
|
+
if (interval) {
|
|
83
|
+
clearInterval(interval);
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
}, [isButtonLoading]);
|
|
87
|
+
var handleClick = function (event) { return __awaiter(void 0, void 0, void 0, function () {
|
|
88
|
+
return __generator(this, function (_a) {
|
|
89
|
+
switch (_a.label) {
|
|
90
|
+
case 0:
|
|
91
|
+
if (isButtonLoading) {
|
|
92
|
+
event.preventDefault();
|
|
93
|
+
return [2 /*return*/];
|
|
94
|
+
}
|
|
95
|
+
if (!onClick) return [3 /*break*/, 4];
|
|
96
|
+
setInternalIsLoading(true);
|
|
97
|
+
_a.label = 1;
|
|
98
|
+
case 1:
|
|
99
|
+
_a.trys.push([1, , 3, 4]);
|
|
100
|
+
return [4 /*yield*/, onClick()];
|
|
101
|
+
case 2:
|
|
102
|
+
_a.sent();
|
|
103
|
+
return [3 /*break*/, 4];
|
|
104
|
+
case 3:
|
|
105
|
+
setInternalIsLoading(false);
|
|
106
|
+
return [7 /*endfinally*/];
|
|
107
|
+
case 4: return [2 /*return*/];
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
}); };
|
|
111
|
+
return (React.createElement("button", __assign({ ref: buttonRef, className: "primary-button ".concat(disabled ? "primary-button-disabled" : "primary-button-enabled", " ").concat(fullWidth ? "primary-button-full-width" : "", " ").concat(isButtonLoading ? "primary-button-loading" : ""), disabled: disabled, onClick: handleClick, type: type }, props),
|
|
31
112
|
startIcon && (React.createElement("span", { className: "primary-button-icon ".concat(startIconName) })),
|
|
32
113
|
React.createElement("span", { className: "primary-button-label" }, label),
|
|
33
|
-
endIcon && React.createElement("span", { className: "primary-button-icon ".concat(endIconName) })));
|
|
114
|
+
isButtonLoading ? (React.createElement("span", { className: "primary-button-loading-dots" }, loadingDots)) : (endIcon && React.createElement("span", { className: "primary-button-icon ".concat(endIconName) }))));
|
|
34
115
|
});
|
|
35
116
|
PrimaryButton.displayName = "PrimaryButton";
|
|
36
117
|
export default PrimaryButton;
|