diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui/Button.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/mui/Button.tsx | 17 |
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, |