refactor(web/dialog): split interfaces (#68)

* tweak(interface/menu): SetNuiFocusKeepInput

Default to allow input; disable with "disableInput = false" during registration.

* refactor(web/dialog): Split interfaces

for better typing of row options for different input types

* fix(web/dialog): Use proper type for onChange event

Co-authored-by: Linden <65407488+thelindat@users.noreply.github.com>

web/src/features/dialog/InputDialog.tsx

@@ -9,19 +9,19 @@ import {
 } from "@chakra-ui/react";
 import React from "react";
 import { useNuiEvent } from "../../hooks/useNuiEvent";
+import { useKeyPress } from "../../hooks/useKeyPress";
 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 { IInput, ICheckbox, ISelect, INumber } from "../../interfaces/dialog";
+import InputField from "./components/input";
 import CheckboxField from "./components/checkbox";
 import SelectField from "./components/select";
-import { useKeyPress } from "../../hooks/useKeyPress";
+import NumberField from "./components/number";
 
 interface Props {
   heading: string;
-  rows: Row[];
+  rows: Array<IInput | ICheckbox | ISelect | INumber>;
 }
 
 // debugData<Props>([
@@ -111,10 +111,10 @@ const InputDialog: React.FC = () => {
         <ModalContent>
           <ModalHeader textAlign="center">{fields.heading}</ModalHeader>
           <ModalBody fontFamily="Poppins" textAlign="left">
-            {fields.rows.map((row, index) => (
+            {fields.rows.map((row: IInput | ICheckbox | ISelect | INumber, index) => (
               <React.Fragment key={`row-${index}`}>
                 {row.type === "input" && (
-                  <Input
+                  <InputField
                     key={`input-${index}`}
                     row={row}
                     index={index}
@@ -138,7 +138,7 @@ const InputDialog: React.FC = () => {
                   />
                 )}
                 {row.type === "number" && (
-                  <InputNumber
+                  <NumberField
                     row={row}
                     index={index}
                     handleChange={handleChange}

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

@@ -1,11 +1,11 @@
 import { Box, Checkbox } from "@chakra-ui/react";
 import { useEffect } from "react";
-import { Row } from "../../../interfaces/dialog";
+import { ICheckbox } from "../../../interfaces/dialog";
 
 interface Props {
-  row: Row;
+  row: ICheckbox;
   index: number;
-  handleChange: (value: string | boolean, index: number) => void;
+  handleChange: (value: boolean, index: number) => void;
 }
 
 const CheckboxField: React.FC<Props> = (props) => {
@@ -17,7 +17,7 @@ const CheckboxField: React.FC<Props> = (props) => {
     <>
       <Box mb={3} key={`checkbox-${props.index}`}>
         <Checkbox
-          onChange={(e) => props.handleChange(e.target.checked, props.index)}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => props.handleChange(e.target.checked, props.index)}
           defaultChecked={props.row.checked}
         >
           {props.row.label}

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

@@ -8,12 +8,12 @@ import {
 } from "@chakra-ui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useEffect } from "react";
-import { Row } from "../../../interfaces/dialog";
+import { IInput } from "../../../interfaces/dialog";
 
 interface Props {
-  row: Row;
+  row: IInput;
   index: number;
-  handleChange: (value: string | number | boolean, index: number) => void;
+  handleChange: (value: string, index: number) => void;
   passwordStates: boolean[];
   handlePasswordStates: (index: number) => void;
 }
@@ -35,7 +35,7 @@ const InputField: React.FC<Props> = (props) => {
             />
           )}
           <Input
-            onChange={(e) => props.handleChange(e.target.value, props.index)}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => props.handleChange(e.target.value, props.index)}
             placeholder={props.row.placeholder}
             defaultValue={props.row.default}
             type={

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

@@ -8,15 +8,15 @@ import {
   NumberDecrementStepper,
 } from "@chakra-ui/react";
 import { useEffect } from "react";
-import { Row } from "../../../interfaces/dialog";
+import { INumber } from "../../../interfaces/dialog";
 
 interface Props {
-  row: Row;
+  row: INumber;
   index: number;
-  handleChange: (value: string | number | boolean, index: number) => void;
+  handleChange: (value: number, index: number) => void;
 }
 
-const InputNumber: React.FC<Props> = (props) => {
+const NumberField: React.FC<Props> = (props) => {
   useEffect(() => {
     if(props.row.default) props.handleChange(props.row.default, props.index);
   }, []);
@@ -24,7 +24,7 @@ const InputNumber: React.FC<Props> = (props) => {
   return (
     <Box mb={3}>
       <Text>{props.row.label}</Text>
-      <NumberInput onChange={(e) => props.handleChange(+e, props.index)} defaultValue={props.row.default}>
+      <NumberInput onChange={(val: string) => props.handleChange(+val, props.index)} defaultValue={props.row.default}>
         <NumberInputField placeholder={props.row.placeholder} />
         <NumberInputStepper>
           <NumberIncrementStepper />
@@ -35,4 +35,4 @@ const InputNumber: React.FC<Props> = (props) => {
   );
 };
 
-export default InputNumber;
+export default NumberField;

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

@@ -1,11 +1,11 @@
 import { Box, Select } from "@chakra-ui/react";
 import { useEffect } from "react";
-import { Row } from "../../../interfaces/dialog";
+import { ISelect } from "../../../interfaces/dialog";
 
 interface Props {
-  row: Row;
+  row: ISelect;
   index: number;
-  handleChange: (value: string | boolean, index: number) => void;
+  handleChange: (value: string, index: number) => void;
 }
 
 const SelectField: React.FC<Props> = (props) => {

web/src/interfaces/dialog.ts

@@ -1,14 +1,30 @@
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 
-type RowType = "input" | "checkbox" | "select" | "number";
-
-export interface Row {
-  type: RowType;
+export interface IInput {
+  type: "input",
   label: string;
   placeholder?: string;
-  default?: string | number;
-  checked?: boolean;
-  options?: { value: string; label?: string }[];
+  default?: string;
   password?: boolean;
   icon?: IconProp;
 }
+
+export interface ICheckbox {
+  type: "checkbox",
+  label: string;
+  checked?: boolean;
+}
+
+export interface ISelect {
+  type: "select",
+  label: string;
+  default?: string;
+  options?: { value: string; label?: string }[];
+}
+
+export interface INumber {
+  type: "number",
+  label: string;
+  placeholder?: string;
+  default?: number;
+}