Add transform methods to text and number inputs

oxidecomputer · Nov 30, 2023 · 0fced77 · 0fced77
1 parent e5989f8
commit 0fced77
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/app/components/form/fields/NumberField.tsx b/app/components/form/fields/NumberField.tsx
@@ -68,6 +68,7 @@ export const NumberFieldInner = <
   description,
   required,
   id: idProp,
+  transform,
 }: TextFieldProps<TFieldValues, TName>) => {
   const generatedId = useId()
   const id = idProp || generatedId
@@ -77,7 +78,7 @@ export const NumberFieldInner = <
       name={name}
       control={control}
       rules={{ required, validate }}
-      render={({ field: { value, ...fieldRest }, fieldState: { error } }) => {
+      render={({ field: { value, onChange, ...fieldRest }, fieldState: { error } }) => {
         return (
           <>
             <UINumberField
@@ -88,6 +89,7 @@ export const NumberFieldInner = <
               })}
               aria-describedby={description ? `${id}-label-tip` : undefined}
               defaultValue={value}
+              onChange={(v) => onChange(transform ? transform(v) : v)}
               {...fieldRest}
             />
             <ErrorMessage error={error} label={label} />

diff --git a/app/components/form/fields/TextField.tsx b/app/components/form/fields/TextField.tsx
@@ -56,6 +56,7 @@ export interface TextFieldProps<
   units?: string
   validate?: Validate<FieldPathValue<TFieldValues, TName>, TFieldValues>
   control: Control<TFieldValues>
+  transform?: <T>(value: T) => T
 }
 
 export function TextField<
@@ -111,6 +112,7 @@ export const TextFieldInner = <
   description,
   required,
   id: idProp,
+  transform,
   ...props
 }: TextFieldProps<TFieldValues, TName> & UITextAreaProps) => {
   const generatedId = useId()
@@ -120,7 +122,7 @@ export const TextFieldInner = <
       name={name}
       control={control}
       rules={{ required, validate }}
-      render={({ field, fieldState: { error } }) => {
+      render={({ field: { onChange, ...fieldRest }, fieldState: { error } }) => {
         return (
           <>
             <UITextField
@@ -132,7 +134,10 @@ export const TextFieldInner = <
                 [`${id}-help-text`]: !!description,
               })}
               aria-describedby={description ? `${id}-label-tip` : undefined}
-              {...field}
+              onChange={(e) =>
+                onChange(transform ? transform(e.target.value) : e.target.value)
+              }
+              {...fieldRest}
               {...props}
             />
             <ErrorMessage error={error} label={label} />