I’m building a Currency component. Here when the default value is not 0, and if I enter 0, it throws a 0 below the Currency component. Similarly, if the default value is 0, it throws a 0 below the Currency component.
How can I make sure that it doesn’t throw the 0 below the input field( Currency) in both the cases.
import { TextFieldProps } from "@material-ui/core";
import React, { FC } from "react";
import { UseControllerOptions, UseFormMethods } from "react-hook-form";
import { NumberFormatProps } from "react-number-format";
import NumberTest from "./NumberTest";
export type FormInputBase<T> = {
label: string;
name: string;
methods: UseFormMethods;
typeOptions?: T;
index?: number;
predicator?: string;
};
export type CurrencyProps = UseControllerOptions &
FormInputBase<TextFieldProps & NumberFormatProps>;
const CurrencyTest: FC<CurrencyProps> = ({ ...props }) => {
function handleFocus(event: React.FocusEvent<HTMLInputElement>) {
event.target.select();
}
return (
<NumberTest
{...props}
typeOptions={{
fixedDecimalScale: true,
onFocus: handleFocus,
decimalScale: 2,
thousandSeparator: true,
...props.typeOptions,
prefix: "$ ",
}}
/>
);
};
export default CurrencyTest;
import { TextField, TextFieldProps } from "@material-ui/core";
import { FC } from "react";
import {
Controller,
DeepMap,
FieldError,
UseControllerOptions,
UseFormMethods,
} from "react-hook-form";
import NumberFormat, {
NumberFormatProps,
NumberFormatValues,
} from "react-number-format";
export const getErrorItem: any = ({
methods,
index = -1,
...props
}: Pick<FormInputBase<any>, "methods" | "index" | "name" | "predicator">) => {
// hold vars
let errors: DeepMap<Record<string, any>, FieldError> | undefined = undefined;
let errorItem = undefined;
// if a predicator exists, pull errors from it
if (props.predicator) {
errors = methods.errors ? methods.errors[`${props.predicator}`] : undefined;
} else {
errors = methods.errors;
}
// if a index exists, pull errors from it
if (errors) {
if (Array.isArray(errors) && index >= 0) {
if (errors[index]) {
if (errors[index][props.name]) {
errorItem = errors[index][props.name];
}
}
} else if (errors[props.name]) {
errorItem = errors[props.name];
}
}
return errorItem;
};
export type FormInputBase<T> = {
label: string;
name: string;
methods: UseFormMethods;
typeOptions?: T;
index?: number;
predicator?: string;
};
export type NumberProps = UseControllerOptions &
FormInputBase<
Pick<
TextFieldProps,
"size" | "margin" | "fullWidth" | "color" | "style" | "InputProps"
> &
Partial<NumberFormatProps>
>;
const NumberTest: FC<NumberProps> = ({ methods, children, ...props }) => {
// hold vars
let errorItem = getErrorItem({
methods: methods,
index: props.index,
name: props.name,
predicator: props.predicator,
});
return (
<Controller
defaultValue={""}
{...props}
name={`${props.predicator ? props.predicator : ""}${
props.index !== undefined ? `[${props.index}].` : ""
}${props.name}`}
control={methods.control}
render={(control) => {
const { onChange, ...controlProps } = control;
return (
<NumberFormat
fullWidth
margin="normal"
variant="filled"
label={props.label}
{...props.typeOptions}
{...controlProps}
customInput={TextField}
error={errorItem}
helperText={errorItem && errorItem.message}
value={control.value}
onValueChange={(v: NumberFormatValues) => {
control.onChange(v.floatValue);
}}
/>
);
}}
/>
);
};
export default NumberTest;
