41 lines
900 B
TypeScript
41 lines
900 B
TypeScript
import _ from 'lodash'
|
|
import { useState } from 'react'
|
|
|
|
import { NumericContract } from 'common/contract'
|
|
import { getMappedBucket } from 'common/calculate-dpm'
|
|
|
|
import { NumberInput } from './number-input'
|
|
|
|
export function BucketInput(props: {
|
|
contract: NumericContract
|
|
isSubmitting?: boolean
|
|
onBucketChange: (bucket?: string) => void
|
|
}) {
|
|
const { contract, isSubmitting, onBucketChange } = props
|
|
|
|
const [numberString, setNumberString] = useState('')
|
|
|
|
const onChange = (s: string) => {
|
|
setNumberString(s)
|
|
|
|
const value = parseFloat(s)
|
|
|
|
const bucket = isFinite(value)
|
|
? getMappedBucket(value, contract)
|
|
: undefined
|
|
|
|
onBucketChange(bucket)
|
|
}
|
|
|
|
return (
|
|
<NumberInput
|
|
inputClassName="w-full max-w-none"
|
|
onChange={onChange}
|
|
error={undefined}
|
|
disabled={isSubmitting}
|
|
numberString={numberString}
|
|
label="Value"
|
|
/>
|
|
)
|
|
}
|