fix: fix number convert when string empty

This commit is contained in:
AprilNEA
2024-09-30 08:35:49 +00:00
parent 0b2b20caeb
commit c1c5fc978b
4 changed files with 41 additions and 28 deletions

View File

@@ -17,7 +17,7 @@ import {
FormLabel, FormLabel,
FormMessage, FormMessage,
} from "@/components/ui/form"; } from "@/components/ui/form";
import { Input } from "@/components/ui/input"; import { Input, NumberInput } from "@/components/ui/input";
import { import {
Select, Select,
SelectContent, SelectContent,
@@ -125,7 +125,7 @@ export const UpdatePort = ({ portId }: Props) => {
<FormItem> <FormItem>
<FormLabel>Published Port</FormLabel> <FormLabel>Published Port</FormLabel>
<FormControl> <FormControl>
<Input <NumberInput
placeholder="1-65535" placeholder="1-65535"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
@@ -134,10 +134,7 @@ export const UpdatePort = ({ portId }: Props) => {
if (value === "") { if (value === "") {
field.onChange(0); field.onChange(0);
} else { } else {
const number = Number.parseInt(value, 10); field.onChange(parseInt(value, 10));
if (!Number.isNaN(number)) {
field.onChange(number);
}
} }
}} }}
/> />
@@ -158,17 +155,6 @@ export const UpdatePort = ({ portId }: Props) => {
placeholder="1-65535" placeholder="1-65535"
{...field} {...field}
value={field.value?.toString() || ""} value={field.value?.toString() || ""}
onChange={(e) => {
const value = e.target.value;
if (value === "") {
field.onChange(0);
} else {
const number = Number.parseInt(value, 10);
if (!Number.isNaN(number)) {
field.onChange(number);
}
}
}}
/> />
</FormControl> </FormControl>

View File

@@ -18,7 +18,7 @@ import {
FormLabel, FormLabel,
FormMessage, FormMessage,
} from "@/components/ui/form"; } from "@/components/ui/form";
import { Input } from "@/components/ui/input"; import { Input, NumberInput } from "@/components/ui/input";
import { import {
Select, Select,
SelectContent, SelectContent,
@@ -228,12 +228,9 @@ export const AddDomain = ({
<FormItem> <FormItem>
<FormLabel>Container Port</FormLabel> <FormLabel>Container Port</FormLabel>
<FormControl> <FormControl>
<Input <NumberInput
placeholder={"3000"} placeholder={"3000"}
{...field} {...field}
onChange={(e) => {
field.onChange(Number.parseInt(e.target.value));
}}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />

View File

@@ -18,7 +18,7 @@ import {
FormLabel, FormLabel,
FormMessage, FormMessage,
} from "@/components/ui/form"; } from "@/components/ui/form";
import { Input } from "@/components/ui/input"; import { Input, NumberInput } from "@/components/ui/input";
import { import {
Select, Select,
SelectContent, SelectContent,
@@ -364,12 +364,9 @@ export const AddDomainCompose = ({
<FormItem> <FormItem>
<FormLabel>Container Port</FormLabel> <FormLabel>Container Port</FormLabel>
<FormControl> <FormControl>
<Input <NumberInput
placeholder={"3000"} placeholder={"3000"}
{...field} {...field}
onChange={(e) => {
field.onChange(Number.parseInt(e.target.value));
}}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />

View File

@@ -31,4 +31,37 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
); );
Input.displayName = "Input"; Input.displayName = "Input";
export { Input }; const NumberInput = React.forwardRef<HTMLInputElement, InputProps>(
({ className, errorMessage, ...props }, ref) => {
return (
<Input
type="text"
className={cn("text-left", className)}
ref={ref}
{...props}
onChange={(e) => {
const value = e.target.value;
if (value === "") {
props.onChange?.(e);
} else {
const number = Number.parseInt(value, 10);
if (!Number.isNaN(number)) {
const syntheticEvent = {
...e,
target: {
...e.target,
value: number.toString(),
},
};
props.onChange?.(syntheticEvent as React.ChangeEvent<HTMLInputElement>);
}
}
}}
/>
);
}
);
NumberInput.displayName = "NumberInput";
export { Input, NumberInput };