diff --git a/src/components/ui/currency-input.tsx b/src/components/ui/currency-input.tsx new file mode 100644 index 0000000..5e41c9e --- /dev/null +++ b/src/components/ui/currency-input.tsx @@ -0,0 +1,70 @@ +'use client'; + +import { useReducer } from 'react'; +import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'; +import { Input } from '@/components/ui/input'; +import { UseFormReturn } from 'react-hook-form'; + +type TextInputProps = { + form: UseFormReturn; + name: string; + label: string; + placeholder: string; +}; + +const moneyFormatter = Intl.NumberFormat('en-US', { + currency: 'EUR', + currencyDisplay: 'symbol', + currencySign: 'standard', + style: 'currency', + minimumFractionDigits: 2, + maximumFractionDigits: 2, +}); + +export default function CurrencyInput(props: TextInputProps) { + + const initialValue = props.form.getValues()[props.name] + ? moneyFormatter.format(props.form.getValues()[props.name] / 100) + : ''; + + const [value, setValue] = useReducer((_: any, next: string) => { + const digits = next.replace(/\D/g, ''); + return moneyFormatter.format(Number(digits) / 100); + }, initialValue); + + function handleChange(realChangeFn: Function, formattedValue: string) { + const digits = formattedValue.replace(/\D/g, ''); + const realValue = Number(digits); + realChangeFn(realValue); + } + + return ( + { + field.value = value; + const _change = field.onChange; + + return ( + + {props.label} + + { + setValue(ev.target.value); + handleChange(_change, ev.target.value); + }} + value={value} + /> + + + + ); + }} + /> + ); +}