From c1c5fc978b5be43067c3bae28d13afaaeacb9ac5 Mon Sep 17 00:00:00 2001 From: AprilNEA Date: Mon, 30 Sep 2024 08:35:49 +0000 Subject: [PATCH 1/4] fix: fix number convert when string empty --- .../advanced/ports/update-port.tsx | 20 ++--------- .../application/domains/add-domain.tsx | 7 ++-- .../dashboard/compose/domains/add-domain.tsx | 7 ++-- apps/dokploy/components/ui/input.tsx | 35 ++++++++++++++++++- 4 files changed, 41 insertions(+), 28 deletions(-) diff --git a/apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx b/apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx index a068ce18c..5ad25ed7d 100644 --- a/apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx +++ b/apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx @@ -17,7 +17,7 @@ import { FormLabel, FormMessage, } from "@/components/ui/form"; -import { Input } from "@/components/ui/input"; +import { Input, NumberInput } from "@/components/ui/input"; import { Select, SelectContent, @@ -125,7 +125,7 @@ export const UpdatePort = ({ portId }: Props) => { Published Port - { if (value === "") { field.onChange(0); } else { - const number = Number.parseInt(value, 10); - if (!Number.isNaN(number)) { - field.onChange(number); - } + field.onChange(parseInt(value, 10)); } }} /> @@ -158,17 +155,6 @@ export const UpdatePort = ({ portId }: Props) => { placeholder="1-65535" {...field} 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); - } - } - }} /> diff --git a/apps/dokploy/components/dashboard/application/domains/add-domain.tsx b/apps/dokploy/components/dashboard/application/domains/add-domain.tsx index 7ab67a29d..79c547156 100644 --- a/apps/dokploy/components/dashboard/application/domains/add-domain.tsx +++ b/apps/dokploy/components/dashboard/application/domains/add-domain.tsx @@ -18,7 +18,7 @@ import { FormLabel, FormMessage, } from "@/components/ui/form"; -import { Input } from "@/components/ui/input"; +import { Input, NumberInput } from "@/components/ui/input"; import { Select, SelectContent, @@ -228,12 +228,9 @@ export const AddDomain = ({ Container Port - { - field.onChange(Number.parseInt(e.target.value)); - }} /> diff --git a/apps/dokploy/components/dashboard/compose/domains/add-domain.tsx b/apps/dokploy/components/dashboard/compose/domains/add-domain.tsx index 91f211d14..e3526db53 100644 --- a/apps/dokploy/components/dashboard/compose/domains/add-domain.tsx +++ b/apps/dokploy/components/dashboard/compose/domains/add-domain.tsx @@ -18,7 +18,7 @@ import { FormLabel, FormMessage, } from "@/components/ui/form"; -import { Input } from "@/components/ui/input"; +import { Input, NumberInput } from "@/components/ui/input"; import { Select, SelectContent, @@ -364,12 +364,9 @@ export const AddDomainCompose = ({ Container Port - { - field.onChange(Number.parseInt(e.target.value)); - }} /> diff --git a/apps/dokploy/components/ui/input.tsx b/apps/dokploy/components/ui/input.tsx index 55b46e6de..d8b94c793 100644 --- a/apps/dokploy/components/ui/input.tsx +++ b/apps/dokploy/components/ui/input.tsx @@ -31,4 +31,37 @@ const Input = React.forwardRef( ); Input.displayName = "Input"; -export { Input }; +const NumberInput = React.forwardRef( + ({ className, errorMessage, ...props }, ref) => { + return ( + { + 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); + } + } + }} + /> + ); + } +); +NumberInput.displayName = "NumberInput"; + + +export { Input, NumberInput }; From fc38a425878ea5fe686c7989fcd7fa1bce46fd05 Mon Sep 17 00:00:00 2001 From: AprilNEA Date: Tue, 1 Oct 2024 14:36:45 +0000 Subject: [PATCH 2/4] fix: convert final value --- apps/dokploy/components/ui/input.tsx | 39 +++++++++++++++------------- 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/apps/dokploy/components/ui/input.tsx b/apps/dokploy/components/ui/input.tsx index d8b94c793..4a537cefb 100644 --- a/apps/dokploy/components/ui/input.tsx +++ b/apps/dokploy/components/ui/input.tsx @@ -39,24 +39,27 @@ const NumberInput = React.forwardRef( 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); - } - } - }} + value={props.value === undefined ? undefined : String(props.value)} + 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, + }, + }; + props.onChange?.( + syntheticEvent as unknown as React.ChangeEvent + ); + } + } + }} /> ); } From dfd6764320cc1ebe6937fac4a3b0745028822349 Mon Sep 17 00:00:00 2001 From: AprilNEA Date: Wed, 2 Oct 2024 18:22:21 +0000 Subject: [PATCH 3/4] styles: format code with prettier --- .../advanced/ports/update-port.tsx | 2 +- .../application/domains/add-domain.tsx | 5 +-- .../dashboard/compose/domains/add-domain.tsx | 5 +-- apps/dokploy/components/ui/input.tsx | 43 +++++++++---------- 4 files changed, 24 insertions(+), 31 deletions(-) diff --git a/apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx b/apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx index 5ad25ed7d..bd8135cb1 100644 --- a/apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx +++ b/apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx @@ -134,7 +134,7 @@ export const UpdatePort = ({ portId }: Props) => { if (value === "") { field.onChange(0); } else { - field.onChange(parseInt(value, 10)); + field.onChange(Number.parseInt(value, 10)); } }} /> diff --git a/apps/dokploy/components/dashboard/application/domains/add-domain.tsx b/apps/dokploy/components/dashboard/application/domains/add-domain.tsx index 79c547156..4b5d4e09b 100644 --- a/apps/dokploy/components/dashboard/application/domains/add-domain.tsx +++ b/apps/dokploy/components/dashboard/application/domains/add-domain.tsx @@ -228,10 +228,7 @@ export const AddDomain = ({ Container Port - + diff --git a/apps/dokploy/components/dashboard/compose/domains/add-domain.tsx b/apps/dokploy/components/dashboard/compose/domains/add-domain.tsx index e3526db53..9f586467b 100644 --- a/apps/dokploy/components/dashboard/compose/domains/add-domain.tsx +++ b/apps/dokploy/components/dashboard/compose/domains/add-domain.tsx @@ -364,10 +364,7 @@ export const AddDomainCompose = ({ Container Port - + diff --git a/apps/dokploy/components/ui/input.tsx b/apps/dokploy/components/ui/input.tsx index 4a537cefb..8fe7ab282 100644 --- a/apps/dokploy/components/ui/input.tsx +++ b/apps/dokploy/components/ui/input.tsx @@ -40,31 +40,30 @@ const NumberInput = React.forwardRef( ref={ref} {...props} value={props.value === undefined ? undefined : String(props.value)} - 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, - }, - }; - props.onChange?.( - syntheticEvent as unknown as React.ChangeEvent - ); - } - } - }} + 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, + }, + }; + props.onChange?.( + syntheticEvent as unknown as React.ChangeEvent, + ); + } + } + }} /> ); - } + }, ); NumberInput.displayName = "NumberInput"; - export { Input, NumberInput }; From ecfca9419a5de78eec28fa23f17eeea6b1a96712 Mon Sep 17 00:00:00 2001 From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com> Date: Wed, 2 Oct 2024 13:02:20 -0600 Subject: [PATCH 4/4] refactor: remove innecessary conversion --- .../advanced/ports/update-port.tsx | 21 +++---------------- 1 file changed, 3 insertions(+), 18 deletions(-) diff --git a/apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx b/apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx index bd8135cb1..0ed9d2e27 100644 --- a/apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx +++ b/apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx @@ -125,25 +125,14 @@ export const UpdatePort = ({ portId }: Props) => { Published Port - { - const value = e.target.value; - if (value === "") { - field.onChange(0); - } else { - field.onChange(Number.parseInt(value, 10)); - } - }} - /> + )} /> + { Target Port - +