From cb5dac6151caae46f433f17aed2d7dadb24ae61b Mon Sep 17 00:00:00 2001 From: ANTOND <71350868+antond15@users.noreply.github.com> Date: Tue, 9 Aug 2022 23:50:14 +0200 Subject: [PATCH] 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 | 16 +++++----- .../features/dialog/components/checkbox.tsx | 8 ++--- web/src/features/dialog/components/input.tsx | 8 ++--- web/src/features/dialog/components/number.tsx | 12 ++++---- web/src/features/dialog/components/select.tsx | 6 ++-- web/src/interfaces/dialog.ts | 30 ++++++++++++++----- 6 files changed, 48 insertions(+), 32 deletions(-) diff --git a/web/src/features/dialog/InputDialog.tsx b/web/src/features/dialog/InputDialog.tsx index 5cbbc60..4880acd 100644 --- a/web/src/features/dialog/InputDialog.tsx +++ b/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; } // debugData([ @@ -111,10 +111,10 @@ const InputDialog: React.FC = () => { {fields.heading} - {fields.rows.map((row, index) => ( + {fields.rows.map((row: IInput | ICheckbox | ISelect | INumber, index) => ( {row.type === "input" && ( - { /> )} {row.type === "number" && ( - void; + handleChange: (value: boolean, index: number) => void; } const CheckboxField: React.FC = (props) => { @@ -17,7 +17,7 @@ const CheckboxField: React.FC = (props) => { <> props.handleChange(e.target.checked, props.index)} + onChange={(e: React.ChangeEvent) => props.handleChange(e.target.checked, props.index)} defaultChecked={props.row.checked} > {props.row.label} diff --git a/web/src/features/dialog/components/input.tsx b/web/src/features/dialog/components/input.tsx index 23a6667..7fd1fdd 100644 --- a/web/src/features/dialog/components/input.tsx +++ b/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.handleChange(e.target.value, props.index)} + onChange={(e: React.ChangeEvent) => props.handleChange(e.target.value, props.index)} placeholder={props.row.placeholder} defaultValue={props.row.default} type={ diff --git a/web/src/features/dialog/components/number.tsx b/web/src/features/dialog/components/number.tsx index 61d0eb5..d5e74c0 100644 --- a/web/src/features/dialog/components/number.tsx +++ b/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) => { +const NumberField: React.FC = (props) => { useEffect(() => { if(props.row.default) props.handleChange(props.row.default, props.index); }, []); @@ -24,7 +24,7 @@ const InputNumber: React.FC = (props) => { return ( {props.row.label} - props.handleChange(+e, props.index)} defaultValue={props.row.default}> + props.handleChange(+val, props.index)} defaultValue={props.row.default}> @@ -35,4 +35,4 @@ const InputNumber: React.FC = (props) => { ); }; -export default InputNumber; +export default NumberField; diff --git a/web/src/features/dialog/components/select.tsx b/web/src/features/dialog/components/select.tsx index e4b2c95..c374756 100644 --- a/web/src/features/dialog/components/select.tsx +++ b/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) => { diff --git a/web/src/interfaces/dialog.ts b/web/src/interfaces/dialog.ts index d2f4a08..1a7eec1 100644 --- a/web/src/interfaces/dialog.ts +++ b/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; +}