add number input

lexicongovernance · May 21, 2024 · 46f5a43 · 46f5a43
1 parent a4a307a
commit 46f5a43
Showing 1 changed file with 54 additions and 0 deletions.
diff --git a/packages/berlin/src/pages/Register.tsx b/packages/berlin/src/pages/Register.tsx
@@ -688,6 +688,18 @@ function FormField({
           value={value}
         />
       );
+    case 'NUMBER':
+      return (
+        <NumberInput
+          id={id}
+          name={name}
+          register={register}
+          required={required}
+          disabled={disabled}
+          errors={errors}
+          value={value}
+        />
+      );
     default:
       return null;
   }
@@ -821,6 +833,48 @@ function TextAreaInput(props: {
   );
 }
 
+function NumberInput(props: {
+  id: string;
+  name: string;
+  required: boolean | null;
+  disabled: boolean;
+  register: UseFormRegister<Record<string, string>>;
+  errors: FieldErrors<Record<string, string>>;
+  value: string;
+}) {
+  return (
+    <FlexColumn $gap="0.5rem">
+      <Input
+        type="number"
+        label={props.name}
+        required={!!props.required}
+        placeholder="Enter a value"
+        {...props.register(props.id, {
+          validate: (value) => {
+            if (!props.required) {
+              return true;
+            }
+
+            const v = z.string().min(1, 'Value is required').safeParse(value);
+
+            if (v.success) {
+              return true;
+            }
+
+            return v.error.errors[0].message;
+          },
+        })}
+        onChange={(event) => {
+          props.register(props.id, {
+            value: event.target.value,
+          });
+        }}
+      />
+      {props.errors?.[props.id] && <Error>{props.errors?.[props.id]?.message}</Error>}
+    </FlexColumn>
+  );
+}
+
 function SelectInput(props: {
   id: string;
   name: string;