summaryrefslogtreecommitdiff
path: root/packages/taler-wallet-webextension/src/mui/Button.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui/Button.tsx')
-rw-r--r--packages/taler-wallet-webextension/src/mui/Button.tsx17
1 files changed, 15 insertions, 2 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/Button.tsx b/packages/taler-wallet-webextension/src/mui/Button.tsx
index 2f12c1724..0aaa5ee97 100644
--- a/packages/taler-wallet-webextension/src/mui/Button.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Button.tsx
@@ -19,6 +19,7 @@ import { css } from "@linaria/core";
import { theme, Colors, rippleEnabled, rippleEnabledOutlined } from "./style";
// eslint-disable-next-line import/extensions
import { alpha } from "./colors/manipulation";
+import { useState } from "preact/hooks";
export const buttonBaseStyle = css`
display: inline-flex;
@@ -219,7 +220,7 @@ export function Button({
size = "medium",
style: parentStyle,
color = "primary",
- onClick,
+ onClick: doClick,
}: Props): VNode {
const style = css`
user-select: none;
@@ -275,9 +276,21 @@ export function Button({
}}
/>
);
+ const [running, setRunning] = useState(false);
+
+ async function onClick(): Promise<void> {
+ if (!doClick || disabled || running) return;
+ setRunning(true);
+ try {
+ await doClick();
+ } finally {
+ setRunning(false);
+ }
+ }
+
return (
<ButtonBase
- disabled={disabled}
+ disabled={disabled || running}
class={[
theme.typography.button,
theme.shape.roundBorder,