Add number support (#539)

* add number input * min 0 validation on number * validate integer * Update packages/berlin/src/pages/Register.tsx Co-authored-by: Martin Benedikt Busch <[email protected]> * Update packages/berlin/src/pages/Register.tsx Co-authored-by: Martin Benedikt Busch <[email protected]> --------- Co-authored-by: Martin Benedikt Busch <[email protected]>
lexicongovernance · May 21, 2024 · 031fa18 · 031fa18
1 parent 800e6fd
commit 031fa18
Showing 1 changed file with 58 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,52 @@ 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.coerce
+              .number()
+              .int('Value has to be an integer')
+              .min(0, 'Value must be positive')
+              .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;