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

feat(web/dialog): Add Select input type

Browse Source
This commit is contained in:
Luke
2022-05-02 20:06:27 +02:00
parent adafbce79f
commit 56f178af79
1 changed files with 37 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,6 +10,7 @@ import {
Text, Text,
Button, Button,
Checkbox, Checkbox,
Select,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import React from "react"; import React from "react";
import { useNuiEvent } from "../../hooks/useNuiEvent"; import { useNuiEvent } from "../../hooks/useNuiEvent";
@@ -17,11 +18,14 @@ import { useLocales } from "../../providers/LocaleProvider";
import { debugData } from "../../utils/debugData"; import { debugData } from "../../utils/debugData";
import { fetchNui } from "../../utils/fetchNui"; import { fetchNui } from "../../utils/fetchNui";
type RowType = "input" | "checkbox" | "select";
interface Props { interface Props {
heading: string; heading: string;
rows: { rows: {
type: "input" | "checkbox"; type: RowType;
label: string; label: string;
options?: { value: string; label: string }[];
}[]; }[];
} }
@@ -35,6 +39,15 @@ debugData<Props>([
{ type: "checkbox", label: "Some checkbox" }, { type: "checkbox", label: "Some checkbox" },
{ type: "input", label: "Locker PIN" }, { type: "input", label: "Locker PIN" },
{ type: "checkbox", label: "Some other checkbox" }, { type: "checkbox", label: "Some other checkbox" },
{
type: "select",
label: "Locker type",
options: [
{ value: "option1", label: "Option 1" },
{ value: "option2", label: "Option 2" },
{ value: "option3", label: "Option 3" },
],
},
], ],
}, },
}, },
@@ -60,14 +73,9 @@ const InputDialog: React.FC = () => {
fetchNui("inputData"); fetchNui("inputData");
}; };
const handleChange = ( const handleChange = (value: string | boolean, index: number) => {
e: React.ChangeEvent<HTMLInputElement>,
index: number,
type: "input" | "checkbox"
) => {
setInputData((previousData) => { setInputData((previousData) => {
previousData[index] = previousData[index] = value;
type === "input" ? e.target.value : e.target.checked;
return previousData; return previousData;
}); });
}; };
@@ -96,18 +104,37 @@ const InputDialog: React.FC = () => {
{row.type === "input" && ( {row.type === "input" && (
<Box mb={3} key={`input-${index}`} textAlign="left"> <Box mb={3} key={`input-${index}`} textAlign="left">
<Text>{row.label}</Text> <Text>{row.label}</Text>
<Input onChange={(e) => handleChange(e, index, "input")} /> <Input
onChange={(e) => handleChange(e.target.value, index)}
/>
</Box> </Box>
)} )}
{row.type === "checkbox" && ( {row.type === "checkbox" && (
<Box mb={3} key={`checkbox-${index}`}> <Box mb={3} key={`checkbox-${index}`}>
<Checkbox <Checkbox
onChange={(e) => handleChange(e, index, "checkbox")} onChange={(e) => handleChange(e.target.checked, index)}
> >
{row.label} {row.label}
</Checkbox> </Checkbox>
</Box> </Box>
)} )}
{row.type === "select" && (
<Box mb={3} key={`select-${index}`}>
<Select
onChange={(e) => handleChange(e.target.value, index)}
>
{/* Hacky workaround for selectable placeholder issue */}
<option value="" selected hidden disabled>
{row.label}
</option>
{row.options?.map((option, index) => (
<option key={`option-${index}`} value={option.value}>
{option.label}
</option>
))}
</Select>
</Box>
)}
</React.Fragment> </React.Fragment>
))} ))}
</ModalBody> </ModalBody>