open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

AmountInput: filter non-numeric, show numeric keyboard on ios

Browse Source
This commit is contained in:
mantikoros 2022-04-06 22:48:06 -05:00
parent 67d71fa531
commit 20052b61ec
1 changed files with 7 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/components/amount-input.tsx
View File

@ -35,16 +35,9 @@ export function AmountInput(props: {
} = props } = props
const onAmountChange = (str: string) => { const onAmountChange = (str: string) => {
if (str.includes('-')) { const amount = parseInt(str.replace(/\D/g, ''))
onChange(undefined) const isInvalid = !str || isNaN(amount)
return onChange(isInvalid ? undefined : amount)
}
const amount = parseInt(str.replace(/[^\d]/, ''))
if (str && isNaN(amount)) return
if (amount >= 10 ** 9) return
onChange(str ? amount : undefined)
} }
return ( return (
@ -58,9 +51,11 @@ export function AmountInput(props: {
inputClassName inputClassName
)} )}
ref={inputRef} ref={inputRef}
type="number" type="text"
pattern="[0-9]*"
inputMode="numeric"
placeholder="0" placeholder="0"
maxLength={9} maxLength={6}
value={amount ?? ''} value={amount ?? ''}
disabled={disabled} disabled={disabled}
onChange={(e) => onAmountChange(e.target.value)} onChange={(e) => onAmountChange(e.target.value)}