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

feat(web/dialog): Add checkbox type

Browse Source
This commit is contained in:
Luke
2022-05-02 13:51:01 +02:00
parent a3f38723e3
commit 0259de8dfe
4 changed files with 327 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
resource/interface/client/input.lua
View File

@@ -4,12 +4,20 @@ function lib.inputDialog(heading, rows)
if input then return end if input then return end
input = promise.new() input = promise.new()
-- Backwards compat with string tables
for i = 1, #rows do
if type(rows[i]) == 'string' then
rows[i] = {type = 'input', label = rows[i]}
end
end
SetNuiFocus(true, true) SetNuiFocus(true, true)
SendNUIMessage({ SendNUIMessage({
action = 'openDialog', action = 'openDialog',
data = { data = {
heading = heading, heading = heading,
inputs = rows rows = rows
} }
}) })

526
web/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

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

@@ -9,37 +9,46 @@ import {
Input, Input,
Text, Text,
Button, Button,
Checkbox,
} 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";
// import { debugData } from "../utils/debugData"; import { debugData } from "../../utils/debugData";
import { fetchNui } from "../../utils/fetchNui"; import { fetchNui } from "../../utils/fetchNui";
interface Props { interface Props {
heading: string; heading: string;
inputs: string[]; rows: {
type: "input" | "checkbox";
label: string;
}[];
} }
// debugData([ debugData<Props>([
// { {
// action: "openDialog", action: "openDialog",
// data: { data: {
// heading: "Police locker", heading: "Police locker",
// inputs: ["Locker number", "Locker PIN"], rows: [
// }, { type: "input", label: "Locker number" },
// }, { type: "checkbox", label: "Some checkbox" },
// ]); { type: "input", label: "Locker PIN" },
{ type: "checkbox", label: "Some other checkbox" },
],
},
},
]);
const InputDialog: React.FC = () => { const InputDialog: React.FC = () => {
const [inputOptions, setInputOptions] = React.useState<Props>({ const [fields, setFields] = React.useState<Props>({
heading: "", heading: "",
inputs: [""], rows: [{ type: "input", label: "" }],
}); });
const [inputData, setInputData] = React.useState<string[]>([]); const [inputData, setInputData] = React.useState<Array<string | boolean>>([]);
const [visible, setVisible] = React.useState(false); const [visible, setVisible] = React.useState(false);
useNuiEvent<Props>("openDialog", (data) => { useNuiEvent<Props>("openDialog", (data) => {
setInputOptions(data); setFields(data);
setInputData([]); setInputData([]);
setVisible(true); setVisible(true);
}); });
@@ -51,10 +60,12 @@ const InputDialog: React.FC = () => {
const handleChange = ( const handleChange = (
e: React.ChangeEvent<HTMLInputElement>, e: React.ChangeEvent<HTMLInputElement>,
index: number index: number,
type: "input" | "checkbox"
) => { ) => {
setInputData((previousData) => { setInputData((previousData) => {
previousData[index] = e.target.value; previousData[index] =
type === "input" ? e.target.value : e.target.checked;
return previousData; return previousData;
}); });
}; };
@@ -76,13 +87,26 @@ const InputDialog: React.FC = () => {
> >
<ModalOverlay /> <ModalOverlay />
<ModalContent> <ModalContent>
<ModalHeader textAlign="center">{inputOptions.heading}</ModalHeader> <ModalHeader textAlign="center">{fields.heading}</ModalHeader>
<ModalBody fontFamily="Poppins"> <ModalBody fontFamily="Poppins" textAlign="left">
{inputOptions.inputs.map((input: string, index: number) => ( {fields.rows.map((row, index) => (
<Box mb={3} key={`input-${index}`}> <React.Fragment key={`row-${index}`}>
<Text>{input}</Text> {row.type === "input" && (
<Input onChange={(e) => handleChange(e, index)} /> <Box mb={3} key={`input-${index}`} textAlign="left">
</Box> <Text>{row.label}</Text>
<Input onChange={(e) => handleChange(e, index, "input")} />
</Box>
)}
{row.type === "checkbox" && (
<Box mb={3} key={`checkbox-${index}`}>
<Checkbox
onChange={(e) => handleChange(e, index, "checkbox")}
>
{row.label}
</Checkbox>
</Box>
)}
</React.Fragment>
))} ))}
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>

14
web/src/features/settings/index.tsx
View File

@@ -11,16 +11,16 @@ import {
import LocaleSetting from "./components/locale"; import LocaleSetting from "./components/locale";
import { useState } from "react"; import { useState } from "react";
import { useNuiEvent } from "../../hooks/useNuiEvent"; import { useNuiEvent } from "../../hooks/useNuiEvent";
import { debugData } from "../../utils/debugData"; // import { debugData } from "../../utils/debugData";
import { fetchNui } from "../../utils/fetchNui"; import { fetchNui } from "../../utils/fetchNui";
import { useLocales } from "../../providers/LocaleProvider"; import { useLocales } from "../../providers/LocaleProvider";
debugData([ // debugData([
{ // {
action: "openSettings", // action: "openSettings",
data: true, // data: true,
}, // },
]); // ]);
const Settings: React.FC = () => { const Settings: React.FC = () => {
const { isOpen, onOpen, onClose } = useDisclosure(); const { isOpen, onOpen, onClose } = useDisclosure();