You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
2.2 KiB
JavaScript
77 lines
2.2 KiB
JavaScript
import React from 'react'
|
|
import { NumericFormat } from 'react-number-format'
|
|
import Input from './Input'
|
|
import { toFixed } from '@/utils'
|
|
import { isEmpty } from 'lodash'
|
|
|
|
const InputNum = (props) => {
|
|
return <Input {...props} textSize="text-xl" inputMode="decimal" />
|
|
}
|
|
|
|
export default function FormInputNumericWith({
|
|
name,
|
|
onChange,
|
|
value,
|
|
label,
|
|
className,
|
|
error,
|
|
max = 999999999,
|
|
fixed = true,
|
|
leftItem = null,
|
|
}) {
|
|
if (fixed) {
|
|
value = toFixed(value)
|
|
}
|
|
value = Number(value)
|
|
|
|
const labelId = `${name}-${value}`
|
|
|
|
return (
|
|
<div>
|
|
<label
|
|
htmlFor={labelId}
|
|
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
|
>
|
|
{label}
|
|
</label>
|
|
<div className="relative">
|
|
{isEmpty(leftItem) === false && (
|
|
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
|
{leftItem}
|
|
</div>
|
|
)}
|
|
<NumericFormat
|
|
id={labelId}
|
|
max={max}
|
|
pattern="\d*"
|
|
inputMode="decimal"
|
|
thousandSeparator="."
|
|
decimalSeparator=","
|
|
allowNegative={false}
|
|
allowLeadingZeros={false}
|
|
className={`${className} ${
|
|
error &&
|
|
'focus:ring-red-600 border-red-600 focus:border-red-600'
|
|
}`}
|
|
customInput={InputNum}
|
|
value={value}
|
|
name={name}
|
|
onValueChange={(values) => {
|
|
onChange({
|
|
target: {
|
|
name: name,
|
|
value: values.floatValue,
|
|
},
|
|
})
|
|
}}
|
|
/>
|
|
</div>
|
|
{error && (
|
|
<p className="mb-2 text-sm text-red-600 dark:text-red-500">
|
|
{error}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|