feat(web/input): number input type

web/src/features/dialog/InputDialog.tsx

@@ -13,7 +13,7 @@ import { useLocales } from "../../providers/LocaleProvider";
 import { debugData } from "../../utils/debugData";
 import { fetchNui } from "../../utils/fetchNui";
 import { Row } from "../../interfaces/dialog";
-
+import InputNumber from "./components/number";
 import Input from "./components/input";
 import CheckboxField from "./components/checkbox";
 import SelectField from "./components/select";
@@ -42,6 +42,7 @@ interface Props {
 //             { value: "option3", label: "Option 3" },
 //           ],
 //         },
+//         { type: "number", label: "Number counter" },
 //       ],
 //     },
 //   },
@@ -52,7 +53,9 @@ const InputDialog: React.FC = () => {
     heading: "",
     rows: [{ type: "input", label: "" }],
   });
-  const [inputData, setInputData] = React.useState<Array<string | boolean>>([]);
+  const [inputData, setInputData] = React.useState<
+    Array<string | number | boolean>
+  >([]);
   const [passwordStates, setPasswordStates] = React.useState<boolean[]>([]);
   const [visible, setVisible] = React.useState(false);
 
@@ -77,7 +80,7 @@ const InputDialog: React.FC = () => {
     fetchNui("inputData");
   };
 
-  const handleChange = (value: string | boolean, index: number) => {
+  const handleChange = (value: string | number | boolean, index: number) => {
     setInputData((previousData) => {
       previousData[index] = value;
       return previousData;
@@ -129,6 +132,13 @@ const InputDialog: React.FC = () => {
                     handleChange={handleChange}
                   />
                 )}
+                {row.type === "number" && (
+                  <InputNumber
+                    row={row}
+                    index={index}
+                    handleChange={handleChange}
+                  />
+                )}
               </React.Fragment>
             ))}
           </ModalBody>

web/src/features/dialog/components/input.tsx

@@ -12,7 +12,7 @@ import { Row } from "../../../interfaces/dialog";
 interface Props {
   row: Row;
   index: number;
-  handleChange: (value: string | boolean, index: number) => void;
+  handleChange: (value: string | number | boolean, index: number) => void;
   passwordStates: boolean[];
   handlePasswordStates: (index: number) => void;
 }

web/src/features/dialog/components/number.tsx

@@ -0,0 +1,33 @@
+import {
+  Box,
+  Text,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+} from "@chakra-ui/react";
+import { Row } from "../../../interfaces/dialog";
+
+interface Props {
+  row: Row;
+  index: number;
+  handleChange: (value: string | number | boolean, index: number) => void;
+}
+
+const InputNumber: React.FC<Props> = (props) => {
+  return (
+    <Box mb={3}>
+      <Text>{props.row.label}</Text>
+      <NumberInput onChange={(e) => props.handleChange(+e, props.index)}>
+        <NumberInputField />
+        <NumberInputStepper>
+          <NumberIncrementStepper />
+          <NumberDecrementStepper />
+        </NumberInputStepper>
+      </NumberInput>
+    </Box>
+  );
+};
+
+export default InputNumber;

web/src/interfaces/dialog.ts

@@ -1,6 +1,6 @@
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 
-type RowType = "input" | "checkbox" | "select";
+type RowType = "input" | "checkbox" | "select" | "number";
 
 export interface Row {
   type: RowType;