asi-calculator/features/strategies/components/FormAmount.tsx

77 lines
1.7 KiB
TypeScript
Raw Normal View History

2024-04-01 14:42:08 +02:00
import { Dispatch, SetStateAction } from 'react'
import { TokenSymbol } from '@/types'
2024-04-01 15:49:03 +02:00
import { Select, Input, FormInline } from '@/components'
2024-04-01 14:42:08 +02:00
export function FormAmount({
amount,
setAmount,
token,
setToken,
isFiat
}: {
amount: number
setAmount: Dispatch<SetStateAction<number>>
token: TokenSymbol | string
setToken?: Dispatch<SetStateAction<TokenSymbol>>
isFiat?: boolean
}) {
2024-04-01 15:23:01 +02:00
function handleAmountChange(e: React.ChangeEvent<HTMLInputElement>) {
const { value } = e.target
if (value === '') {
setAmount(0)
} else if (isNaN(Number(value))) {
return
2024-04-01 15:23:01 +02:00
} else {
setAmount(Number(value))
}
}
2024-04-01 14:42:08 +02:00
function handleTokenChange(e: React.ChangeEvent<HTMLSelectElement>) {
if (!setToken) return
setToken(e.target.value as TokenSymbol)
}
function handleFocus(e: React.FocusEvent<HTMLInputElement>) {
e.target.select()
}
2024-04-01 14:42:08 +02:00
const options = isFiat
? [{ value: 'USD', label: 'USD' }]
: [
{ value: 'OCEAN', label: 'OCEAN' },
{ value: 'FET', label: 'FET' },
{ value: 'AGIX', label: 'AGIX' }
]
return (
2024-04-01 15:49:03 +02:00
<FormInline>
2024-04-01 15:23:01 +02:00
<Input
type="text"
inputMode="numeric"
pattern="[0-9]*"
value={amount}
onChange={handleAmountChange}
onFocus={handleFocus}
2024-04-06 14:55:43 +02:00
style={{ width: amount.toString().length + 'ch' }}
2024-04-01 15:23:01 +02:00
/>
2024-04-01 14:42:08 +02:00
<Select
options={options}
value={token}
onChange={handleTokenChange}
disabled={!setToken}
2024-04-06 14:55:43 +02:00
style={
setToken
? {
paddingRight: '1.2rem',
width: `calc(${token.length + 'em'} - 1.75rem)`,
minWidth: '1.85rem'
}
: undefined
}
2024-04-01 14:42:08 +02:00
/>
2024-04-01 15:49:03 +02:00
</FormInline>
2024-04-01 14:42:08 +02:00
)
}