diff options
Diffstat (limited to 'packages/web-util/src/components/Button.tsx')
| -rw-r--r-- | packages/web-util/src/components/Button.tsx | 176 |
1 files changed, 106 insertions, 70 deletions
diff --git a/packages/web-util/src/components/Button.tsx b/packages/web-util/src/components/Button.tsx index ea0ea2f38..b142114e7 100644 --- a/packages/web-util/src/components/Button.tsx +++ b/packages/web-util/src/components/Button.tsx @@ -14,36 +14,56 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { AbsoluteTime, OperationFail, OperationOk, OperationResult, TalerError, TranslatedString } from "@gnu-taler/taler-util"; +import { + AbsoluteTime, + OperationAlternative, + OperationFail, + OperationOk, + OperationResult, + TalerError, + TranslatedString, +} from "@gnu-taler/taler-util"; // import { NotificationMessage, notifyInfo } from "@gnu-taler/web-util/browser"; import { Fragment, VNode, h } from "preact"; -import { HTMLAttributes, useEffect, useState, useTransition } from "preact/compat"; -import { NotificationMessage, buildUnifiedRequestErrorMessage, notifyInfo, useTranslationContext } from "../index.browser.js"; +import { HTMLAttributes, useState } from "preact/compat"; +import { + NotificationMessage, + buildUnifiedRequestErrorMessage, + notifyInfo, + useTranslationContext, +} from "../index.browser.js"; // import { useBankCoreApiContext } from "../context/config.js"; // function errorMap<T extends OperationFail<unknown>>(resp: T, map: (d: T["case"]) => TranslatedString): void { +export type OnOperationSuccesReturnType<T> = ( + result: T extends OperationOk<any> ? T : never, +) => TranslatedString | void; +export type OnOperationFailReturnType<T> = ( + (d: (T extends OperationFail<any> ? T : never) | (T extends OperationAlternative<any,any> ? T : never)) => TranslatedString) + export interface ButtonHandler<T extends OperationResult<A, B>, A, B> { - onClick: () => Promise<T | undefined>, + onClick: () => Promise<T | undefined>; onNotification: (n: NotificationMessage) => void; - onOperationSuccess: ((result: T extends OperationOk<any> ? T : never) => void) | ((result: T extends OperationOk<any> ? T : never) => TranslatedString | undefined), - onOperationFail: (d: T extends OperationFail<any> ? T : never) => TranslatedString; + onOperationSuccess: OnOperationSuccesReturnType<T>; + onOperationFail?: OnOperationFailReturnType<T>; onOperationComplete?: () => void; } -interface Props<T extends OperationResult<A, B>, A, B> extends HTMLAttributes<HTMLButtonElement> { - handler: ButtonHandler<T, A, B> | undefined, +interface Props<T extends OperationResult<A, B>, A, B> + extends HTMLAttributes<HTMLButtonElement> { + handler: ButtonHandler<T, A, B> | undefined; } /** * This button accept an async function and report a notification * on error or success. - * + * * When the async function is running the inner text will change into * a "loading" animation. - * - * @param param0 - * @returns + * + * @param param0 + * @returns */ export function Button<T extends OperationResult<A, B>, A, B>({ handler, @@ -53,69 +73,84 @@ export function Button<T extends OperationResult<A, B>, A, B>({ ...rest }: Props<T, A, B>): VNode { const { i18n } = useTranslationContext(); - const [running, setRunning] = useState(false) - return <button {...rest} disabled={disabled || running} onClick={(e) => { - e.preventDefault(); - if (!handler) { return; } - setRunning(true) - handler.onClick().then((resp) => { - if (resp) { - if (resp.type === "ok") { - const result: OperationOk<any> = resp - // @ts-expect-error this is an operationOk - const msg = handler.onOperationSuccess(result) - if (msg) { - notifyInfo(msg) - } + const [running, setRunning] = useState(false); + return ( + <button + {...rest} + disabled={disabled || running} + onClick={(e) => { + e.preventDefault(); + if (!handler) { + return; } - if (resp.type === "fail") { - // @ts-expect-error this is an operationFail - const error: OperationFail<any> = resp; - // @ts-expect-error this is an operationFail - const title = handler.onOperationFail(error) - handler.onNotification({ - title, - type: "error", - description: error.detail.hint as TranslatedString, - debug: error.detail, - when: AbsoluteTime.now(), + setRunning(true); + handler + .onClick() + .then((resp) => { + if (resp) { + if (resp.type === "ok") { + const result: OperationOk<any> = resp; + // @ts-expect-error this is an operationOk + const msg = handler.onOperationSuccess(result); + if (msg) { + notifyInfo(msg); + } + } + if (resp.type === "fail") { + const d = 'detail' in resp ? resp.detail : undefined + + const title = !handler.onOperationFail ? "Unexpected error." as TranslatedString : handler.onOperationFail(resp as any); + handler.onNotification({ + title, + type: "error", + description: d && d.hint ? d.hint as TranslatedString : undefined, + debug: d, + when: AbsoluteTime.now(), + }); + } + } + if (handler.onOperationComplete) { + handler.onOperationComplete(); + } + setRunning(false); }) - } - } - if (handler.onOperationComplete) { - handler.onOperationComplete() - } - setRunning(false) - }).catch(error => { - console.error(error) + .catch((error) => { + console.error(error); - if (error instanceof TalerError) { - handler.onNotification(buildUnifiedRequestErrorMessage(i18n, error)) - } else { - const description = (error instanceof Error ? - error.message : String(error)) as TranslatedString + if (error instanceof TalerError) { + handler.onNotification( + buildUnifiedRequestErrorMessage(i18n, error), + ); + } else { + const description = ( + error instanceof Error ? error.message : String(error) + ) as TranslatedString; - handler.onNotification({ - title: i18n.str`Operation failed`, - type: "error", - description, - when: AbsoluteTime.now(), - }) - } + handler.onNotification({ + title: i18n.str`Operation failed`, + type: "error", + description, + when: AbsoluteTime.now(), + }); + } - if (handler.onOperationComplete) { - handler.onOperationComplete() - } - setRunning(false) - }) - }} > - {running ? <Wait /> : children} - </button> + if (handler.onOperationComplete) { + handler.onOperationComplete(); + } + setRunning(false); + }); + }} + > + {running ? <Wait /> : children} + </button> + ); } function Wait(): VNode { - return <Fragment> - <style>{` + return ( + <Fragment> + <style> + {` #l1 { width: 120px; height: 20px; -webkit-mask: radial-gradient(circle closest-side, currentColor 90%, #0000) left/20% 100%; @@ -125,7 +160,8 @@ function Wait(): VNode { @keyframes l17 { 100% {background-size:120% 100%} `} - </style> - <div id="l1" /> - </Fragment> + </style> + <div id="l1" /> + </Fragment> + ); } |