diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/WalletWithdrawForm.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/WalletWithdrawForm.tsx | 98 |
1 files changed, 71 insertions, 27 deletions
diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx index 3a53bbe48..4c4a38e57 100644 --- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx +++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx @@ -25,14 +25,16 @@ import { RequestError, useTranslationContext, } from "@gnu-taler/web-util/browser"; -import { VNode, h } from "preact"; +import { Ref, VNode, h } from "preact"; import { useEffect, useRef, useState } from "preact/hooks"; import { useAccessAPI } from "../hooks/access.js"; import { notifyError } from "../hooks/notification.js"; import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js"; import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js"; +import { forwardRef } from "preact/compat"; const logger = new Logger("WalletWithdrawForm"); +const RefAmount = forwardRef(Amount); export function WalletWithdrawForm({ focus, @@ -68,6 +70,7 @@ export function WalletWithdrawForm({ ? i18n.str`balance is not enough` : undefined, }); + return ( <form id="reserve-form" @@ -82,32 +85,15 @@ export function WalletWithdrawForm({ <p> <label for="withdraw-amount">{i18n.str`Amount to withdraw:`}</label> - <div style={{ width: "max-content" }}> - <input - type="text" - readonly - class="currency-indicator" - size={limit.currency.length} - maxLength={limit.currency.length} - tabIndex={-1} - value={limit.currency} - /> - - <input - type="number" - ref={ref} - id="withdraw-amount" - name="withdraw-amount" - value={amountStr ?? ""} - onChange={(e): void => { - setAmountStr(e.currentTarget.value); - }} - /> - <ShowInputErrorLabel - message={errors?.amount} - isDirty={amountStr !== undefined} - /> - </div> + <RefAmount + currency={limit.currency} + value={amountStr} + onChange={(v) => { + setAmountStr(v); + }} + error={errors?.amount} + ref={ref} + /> </p> <p> <div> @@ -160,3 +146,61 @@ export function WalletWithdrawForm({ </form> ); } + +export function Amount( + { + currency, + value, + error, + onChange, + }: { + error?: string; + currency: string; + value: string | undefined; + onChange?: (s: string) => void; + }, + ref: Ref<HTMLInputElement>, +): VNode { + return ( + <div style={{ width: "max-content" }}> + <div> + <input + type="text" + readonly + class="currency-indicator" + size={currency.length} + maxLength={currency.length} + tabIndex={-1} + style={{ + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + borderRight: 0, + }} + value={currency} + /> + <input + type="number" + ref={ref} + name="amount" + id="amount" + placeholder="0" + style={{ + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + borderLeft: 0, + width: 150, + color: "black", + }} + value={value ?? ""} + disabled={!onChange} + onInput={(e): void => { + if (onChange) { + onChange(e.currentTarget.value); + } + }} + /> + </div> + <ShowInputErrorLabel message={error} isDirty={value !== undefined} /> + </div> + ); +} |