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.
71 lines
2.0 KiB
React
71 lines
2.0 KiB
React
1 year ago
|
import React from 'react'
|
||
|
|
import { NumericFormat } from 'react-number-format'
|
||
|
|
import Input from './Input'
|
||
|
|
import { toFixed } from '@/utils'
|
||
|
|
import { isEmpty } from 'lodash'
|
||
|
|
|
||
|
|
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={label}
|
||
|
|
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={label}
|
||
|
|
max={max}
|
||
|
|
thousandSeparator="."
|
||
|
|
decimalSeparator=","
|
||
|
|
allowNegative={false}
|
||
|
|
allowLeadingZeros={false}
|
||
|
|
className={`${className} ${
|
||
|
|
error &&
|
||
|
|
'focus:ring-red-600 border-red-600 focus:border-red-600'
|
||
|
|
}`}
|
||
|
|
customInput={Input}
|
||
|
|
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>
|
||
|
|
)
|
||
|
|
}
|