FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-17 15:06:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
ANTOND
2022-08-09 23:50:14 +02:00
committed by GitHub
parent de8fb447a9
commit cb5dac6151
6 changed files with 48 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/features/dialog/components/checkbox.tsx
View File

@@ -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}

8
web/src/features/dialog/components/input.tsx
View File

@@ -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={

12
web/src/features/dialog/components/number.tsx
View File

@@ -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;

6
web/src/features/dialog/components/select.tsx
View File

@@ -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) => {