diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src')
-rw-r--r-- | packages/taler-wallet-webextension/src/mui/Button.stories.tsx | 27 | ||||
-rw-r--r-- | packages/taler-wallet-webextension/src/mui/Button.tsx | 17 |
2 files changed, 42 insertions, 2 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx index 8f6b47afb..385eb1028 100644 --- a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx @@ -39,6 +39,33 @@ const Stack = styled.div` background-color: white; `; +export const WithDelay = (): VNode => ( + <Stack> + <Button + size="small" + variant="contained" + onClick={() => + new Promise((resolve) => { + setTimeout(resolve, 2000); + }) + } + > + Returns after 2 seconds + </Button> + <Button + size="small" + variant="contained" + onClick={() => + new Promise((_, reject) => { + setTimeout(reject, 2000); + }) + } + > + Fails after 2 seconds + </Button> + </Stack> +); + export const BasicExample = (): VNode => ( <Fragment> <Stack> 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, |