feat(web/input): support default values (#66)

* feat(web/dialog): Support placeholders * feat(web/dialog): Support default values * feat(web/dialog): Support default state of checkbox * feat(web/dialog): Support placeholder for number input * feat(web/dialog): Support default value for select
overextended · Aug 5, 2022 · 1990e37 · 1990e37
1 parent 14a04c4
commit 1990e37
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 5 deletions.
diff --git a/web/src/features/dialog/InputDialog.tsx b/web/src/features/dialog/InputDialog.tsx
@@ -30,10 +30,10 @@ interface Props {
 //     data: {
 //       heading: "Police locker",
 //       rows: [
-//         { type: "input", label: "Locker number" },
+//         { type: "input", label: "Locker number", placeholder: "420" },
 //         { type: "checkbox", label: "Some checkbox" },
 //         { type: "input", label: "Locker PIN", password: true, icon: "lock" },
-//         { type: "checkbox", label: "Some other checkbox" },
+//         { type: "checkbox", label: "Some other checkbox", checked: true },
 //         {
 //           type: "select",
 //           label: "Locker type",
@@ -43,7 +43,7 @@ interface Props {
 //             { value: "option3", label: "Option 3" },
 //           ],
 //         },
-//         { type: "number", label: "Number counter" },
+//         { type: "number", label: "Number counter", default: 12 },
 //       ],
 //     },
 //   },

diff --git a/web/src/features/dialog/components/checkbox.tsx b/web/src/features/dialog/components/checkbox.tsx
@@ -1,4 +1,5 @@
 import { Box, Checkbox } from "@chakra-ui/react";
+import { useEffect } from "react";
 import { Row } from "../../../interfaces/dialog";
 
 interface Props {
@@ -8,11 +9,16 @@ interface Props {
 }
 
 const CheckboxField: React.FC<Props> = (props) => {
+  useEffect(() => {
+    if(props.row.checked) props.handleChange(props.row.checked, props.index);
+  }, []);
+
   return (
     <>
       <Box mb={3} key={`checkbox-${props.index}`}>
         <Checkbox
           onChange={(e) => props.handleChange(e.target.checked, props.index)}
+          defaultChecked={props.row.checked}
         >
           {props.row.label}
         </Checkbox>

diff --git a/web/src/features/dialog/components/input.tsx b/web/src/features/dialog/components/input.tsx
@@ -7,6 +7,7 @@ import {
   Input,
 } from "@chakra-ui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect } from "react";
 import { Row } from "../../../interfaces/dialog";
 
 interface Props {
@@ -18,6 +19,10 @@ interface Props {
 }
 
 const InputField: React.FC<Props> = (props) => {
+  useEffect(() => {
+    if(props.row.default) props.handleChange(props.row.default, props.index);
+  }, []);
+
   return (
     <>
       <Box mb={3} textAlign="left">
@@ -31,6 +36,8 @@ const InputField: React.FC<Props> = (props) => {
           )}
           <Input
             onChange={(e) => props.handleChange(e.target.value, props.index)}
+            placeholder={props.row.placeholder}
+            defaultValue={props.row.default}
             type={
               !props.row.password || props.passwordStates[props.index]
                 ? "text"

diff --git a/web/src/features/dialog/components/number.tsx b/web/src/features/dialog/components/number.tsx
@@ -7,6 +7,7 @@ import {
   NumberIncrementStepper,
   NumberDecrementStepper,
 } from "@chakra-ui/react";
+import { useEffect } from "react";
 import { Row } from "../../../interfaces/dialog";
 
 interface Props {
@@ -16,11 +17,15 @@ interface Props {
 }
 
 const InputNumber: React.FC<Props> = (props) => {
+  useEffect(() => {
+    if(props.row.default) props.handleChange(props.row.default, props.index);
+  }, []);
+
   return (
     <Box mb={3}>
       <Text>{props.row.label}</Text>
-      <NumberInput onChange={(e) => props.handleChange(+e, props.index)}>
-        <NumberInputField />
+      <NumberInput onChange={(e) => props.handleChange(+e, props.index)} defaultValue={props.row.default}>
+        <NumberInputField placeholder={props.row.placeholder} />
         <NumberInputStepper>
           <NumberIncrementStepper />
           <NumberDecrementStepper />

diff --git a/web/src/features/dialog/components/select.tsx b/web/src/features/dialog/components/select.tsx
@@ -1,4 +1,5 @@
 import { Box, Select } from "@chakra-ui/react";
+import { useEffect } from "react";
 import { Row } from "../../../interfaces/dialog";
 
 interface Props {
@@ -8,11 +9,22 @@ interface Props {
 }
 
 const SelectField: React.FC<Props> = (props) => {
+  useEffect(() => {
+    if(props.row.default) {
+      props.row.options?.map((option) => {
+        if(props.row.default === option.value) {
+          props.handleChange(option.value, props.index);
+        }
+      });
+    }
+  }, []);
+
   return (
     <>
       <Box mb={3} key={`select-${props.index}`}>
         <Select
           onChange={(e) => props.handleChange(e.target.value, props.index)}
+          defaultValue={props.row.default}
         >
           {/* Hacky workaround for selectable placeholder issue */}
           <option value="" selected hidden disabled>

diff --git a/web/src/interfaces/dialog.ts b/web/src/interfaces/dialog.ts
@@ -5,6 +5,9 @@ type RowType = "input" | "checkbox" | "select" | "number";
 export interface Row {
   type: RowType;
   label: string;
+  placeholder?: string;
+  default?: string | number;
+  checked?: boolean;
   options?: { value: string; label?: string }[];
   password?: boolean;
   icon?: IconProp;