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

refactor(web): prettier format for input dialog

Browse Source
This commit is contained in:
Luke
2022-08-26 18:50:08 +02:00
parent ae25d109fc
commit 9bd0b52749
1 changed files with 25 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
web/src/features/dialog/InputDialog.tsx
View File

@@ -1,24 +1,16 @@
import { import { Modal, ModalOverlay, ModalContent, ModalFooter, ModalHeader, ModalBody, Button } from '@chakra-ui/react';
Modal, import React from 'react';
ModalOverlay, import { useNuiEvent } from '../../hooks/useNuiEvent';
ModalContent, import { useKeyPress } from '../../hooks/useKeyPress';
ModalFooter, import { useLocales } from '../../providers/LocaleProvider';
ModalHeader, import { debugData } from '../../utils/debugData';
ModalBody, import { fetchNui } from '../../utils/fetchNui';
Button, import { IInput, ICheckbox, ISelect, INumber, ISlider } from '../../interfaces/dialog';
} from "@chakra-ui/react"; import InputField from './components/input';
import React from "react"; import CheckboxField from './components/checkbox';
import { useNuiEvent } from "../../hooks/useNuiEvent"; import SelectField from './components/select';
import { useKeyPress } from "../../hooks/useKeyPress"; import NumberField from './components/number';
import { useLocales } from "../../providers/LocaleProvider"; import SliderField from './components/slider';
import { debugData } from "../../utils/debugData";
import { fetchNui } from "../../utils/fetchNui";
import { IInput, ICheckbox, ISelect, INumber, ISlider } from "../../interfaces/dialog";
import InputField from "./components/input";
import CheckboxField from "./components/checkbox";
import SelectField from "./components/select";
import NumberField from "./components/number";
import SliderField from "./components/slider";
interface Props { interface Props {
heading: string; heading: string;
@@ -53,12 +45,10 @@ interface Props {
const InputDialog: React.FC = () => { const InputDialog: React.FC = () => {
const [fields, setFields] = React.useState<Props>({ const [fields, setFields] = React.useState<Props>({
heading: "", heading: '',
rows: [{ type: "input", label: "" }], rows: [{ type: 'input', label: '' }],
}); });
const [inputData, setInputData] = React.useState< const [inputData, setInputData] = React.useState<Array<string | number | boolean>>([]);
Array<string | number | boolean>
>([]);
const [passwordStates, setPasswordStates] = React.useState<boolean[]>([]); const [passwordStates, setPasswordStates] = React.useState<boolean[]>([]);
const [visible, setVisible] = React.useState(false); const [visible, setVisible] = React.useState(false);
const { locale } = useLocales(); const { locale } = useLocales();
@@ -70,7 +60,7 @@ const InputDialog: React.FC = () => {
}); });
}; };
useNuiEvent<Props>("openDialog", (data) => { useNuiEvent<Props>('openDialog', (data) => {
setPasswordStates([]); setPasswordStates([]);
setFields(data); setFields(data);
setInputData([]); setInputData([]);
@@ -79,7 +69,7 @@ const InputDialog: React.FC = () => {
const handleClose = () => { const handleClose = () => {
setVisible(false); setVisible(false);
fetchNui("inputData"); fetchNui('inputData');
}; };
const handleChange = (value: string | number | boolean, index: number) => { const handleChange = (value: string | number | boolean, index: number) => {
@@ -91,19 +81,12 @@ const InputDialog: React.FC = () => {
const handleConfirm = () => { const handleConfirm = () => {
setVisible(false); setVisible(false);
fetchNui("inputData", inputData); fetchNui('inputData', inputData);
}; };
return ( return (
<> <>
<Modal <Modal isOpen={visible} onClose={handleClose} isCentered closeOnEsc closeOnOverlayClick={false} size="xs">
isOpen={visible}
onClose={handleClose}
isCentered
closeOnEsc
closeOnOverlayClick={false}
size="xs"
>
<ModalOverlay /> <ModalOverlay />
<ModalContent <ModalContent
onKeyDown={(e) => { onKeyDown={(e) => {
@@ -114,7 +97,7 @@ const InputDialog: React.FC = () => {
<ModalBody fontFamily="Poppins" textAlign="left"> <ModalBody fontFamily="Poppins" textAlign="left">
{fields.rows.map((row: IInput | ICheckbox | ISelect | INumber | ISlider, index) => ( {fields.rows.map((row: IInput | ICheckbox | ISelect | INumber | ISlider, index) => (
<React.Fragment key={`row-${index}`}> <React.Fragment key={`row-${index}`}>
{row.type === "input" && ( {row.type === 'input' && (
<InputField <InputField
key={`input-${index}`} key={`input-${index}`}
row={row} row={row}
@@ -124,34 +107,10 @@ const InputDialog: React.FC = () => {
handlePasswordStates={handlePasswordStates} handlePasswordStates={handlePasswordStates}
/> />
)} )}
{row.type === "checkbox" && ( {row.type === 'checkbox' && <CheckboxField row={row} index={index} handleChange={handleChange} />}
<CheckboxField {row.type === 'select' && <SelectField row={row} index={index} handleChange={handleChange} />}
row={row} {row.type === 'number' && <NumberField row={row} index={index} handleChange={handleChange} />}
index={index} {row.type === 'slider' && <SliderField row={row} index={index} handleChange={handleChange} />}
handleChange={handleChange}
/>
)}
{row.type === "select" && (
<SelectField
row={row}
index={index}
handleChange={handleChange}
/>
)}
{row.type === "number" && (
<NumberField
row={row}
index={index}
handleChange={handleChange}
/>
)}
{row.type === "slider" && (
<SliderField
row={row}
index={index}
handleChange={handleChange}
/>
)}
</React.Fragment> </React.Fragment>
))} ))}
</ModalBody> </ModalBody>