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

chore(web): add prettier and format

Browse Source
This commit is contained in:
Luke
2022-08-27 15:58:36 +02:00
parent cc76d23419
commit 4a5251b60b
44 changed files with 2933 additions and 1984 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
web/src/features/dialog/AlertDialog.tsx
View File

@@ -7,12 +7,12 @@ import {
AlertDialogOverlay,
useDisclosure,
Button,
} from "@chakra-ui/react";
import { useRef, useState } from "react";
import ReactMarkdown from "react-markdown";
import { useNuiEvent } from "../../hooks/useNuiEvent";
import { fetchNui } from "../../utils/fetchNui";
import { useLocales } from "../../providers/LocaleProvider";
} from '@chakra-ui/react';
import { useRef, useState } from 'react';
import ReactMarkdown from 'react-markdown';
import { useNuiEvent } from '../../hooks/useNuiEvent';
import { fetchNui } from '../../utils/fetchNui';
import { useLocales } from '../../providers/LocaleProvider';
export interface AlertProps {
header: string;
@@ -26,16 +26,16 @@ const AlertDialog: React.FC = () => {
const { isOpen, onOpen, onClose } = useDisclosure();
const cancelRef = useRef(null);
const [dialogData, setDialogData] = useState<AlertProps>({
header: "",
content: "",
header: '',
content: '',
});
const closeAlert = (button: string) => {
onClose();
fetchNui("closeAlert", button);
fetchNui('closeAlert', button);
};
useNuiEvent("sendAlert", (data: AlertProps) => {
useNuiEvent('sendAlert', (data: AlertProps) => {
setDialogData(data);
onOpen();
});
@@ -48,7 +48,7 @@ const AlertDialog: React.FC = () => {
isOpen={isOpen}
isCentered={dialogData.centered}
closeOnOverlayClick={false}
onEsc={() => closeAlert("cancel")}
onEsc={() => closeAlert('cancel')}
>
<AlertDialogOverlay />
<AlertDialogContent fontFamily="Inter">
@@ -60,14 +60,11 @@ const AlertDialog: React.FC = () => {
</AlertDialogBody>
<AlertDialogFooter>
{dialogData.cancel && (
<Button onClick={() => closeAlert("cancel")} mr={3}>
<Button onClick={() => closeAlert('cancel')} mr={3}>
{locale.ui.cancel}
</Button>
)}
<Button
colorScheme={dialogData.cancel ? "blue" : undefined}
onClick={() => closeAlert("confirm")}
>
<Button colorScheme={dialogData.cancel ? 'blue' : undefined} onClick={() => closeAlert('confirm')}>
{locale.ui.confirm}
</Button>
</AlertDialogFooter>

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

@@ -1,28 +1,14 @@
import {
Modal,
ModalOverlay,
ModalContent,
ModalFooter,
ModalHeader,
ModalBody,
Button,
} from "@chakra-ui/react";
import React from "react";
import { useNuiEvent } from "../../hooks/useNuiEvent";
import { useLocales } from "../../providers/LocaleProvider";
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";
import { Modal, ModalOverlay, ModalContent, ModalFooter, ModalHeader, ModalBody, Button } from '@chakra-ui/react';
import React from 'react';
import { useNuiEvent } from '../../hooks/useNuiEvent';
import { useLocales } from '../../providers/LocaleProvider';
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';
export interface InputProps {
heading: string;
@@ -31,12 +17,10 @@ export interface InputProps {
const InputDialog: React.FC = () => {
const [fields, setFields] = React.useState<InputProps>({
heading: "",
rows: [{ type: "input", label: "" }],
heading: '',
rows: [{ type: 'input', label: '' }],
});
const [inputData, setInputData] = React.useState<
Array<string | number | boolean>
>([]);
const [inputData, setInputData] = React.useState<Array<string | number | boolean>>([]);
const [passwordStates, setPasswordStates] = React.useState<boolean[]>([]);
const [visible, setVisible] = React.useState(false);
const { locale } = useLocales();
@@ -48,7 +32,7 @@ const InputDialog: React.FC = () => {
});
};
useNuiEvent<InputProps>("openDialog", (data) => {
useNuiEvent<InputProps>('openDialog', (data) => {
setPasswordStates([]);
setFields(data);
setInputData([]);
@@ -57,7 +41,7 @@ const InputDialog: React.FC = () => {
const handleClose = () => {
setVisible(false);
fetchNui("inputData");
fetchNui('inputData');
};
const handleChange = (value: string | number | boolean, index: number) => {
@@ -69,74 +53,38 @@ const InputDialog: React.FC = () => {
const handleConfirm = () => {
setVisible(false);
fetchNui("inputData", inputData);
fetchNui('inputData', inputData);
};
return (
<>
<Modal
isOpen={visible}
onClose={handleClose}
isCentered
closeOnEsc
closeOnOverlayClick={false}
size="xs"
>
<Modal isOpen={visible} onClose={handleClose} isCentered closeOnEsc closeOnOverlayClick={false} size="xs">
<ModalOverlay />
<ModalContent
onKeyDown={(e) => {
if (e.key === "Enter" && visible) return handleConfirm();
if (e.key === 'Enter' && visible) return handleConfirm();
}}
>
<ModalHeader textAlign="center">{fields.heading}</ModalHeader>
<ModalBody fontFamily="Poppins" textAlign="left">
{fields.rows.map(
(
row: IInput | ICheckbox | ISelect | INumber | ISlider,
index
) => (
<React.Fragment key={`row-${index}`}>
{row.type === "input" && (
<InputField
key={`input-${index}`}
row={row}
index={index}
handleChange={handleChange}
passwordStates={passwordStates}
handlePasswordStates={handlePasswordStates}
/>
)}
{row.type === "checkbox" && (
<CheckboxField
row={row}
index={index}
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>
)
)}
{fields.rows.map((row: IInput | ICheckbox | ISelect | INumber | ISlider, index) => (
<React.Fragment key={`row-${index}`}>
{row.type === 'input' && (
<InputField
key={`input-${index}`}
row={row}
index={index}
handleChange={handleChange}
passwordStates={passwordStates}
handlePasswordStates={handlePasswordStates}
/>
)}
{row.type === 'checkbox' && <CheckboxField row={row} index={index} 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>
))}
</ModalBody>
<ModalFooter>
<Button mr={3} onClick={handleClose}>

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

@@ -1,6 +1,6 @@
import { Box, Checkbox } from "@chakra-ui/react";
import { useEffect } from "react";
import { ICheckbox } from "../../../interfaces/dialog";
import { Box, Checkbox } from '@chakra-ui/react';
import { useEffect } from 'react';
import { ICheckbox } from '../../../interfaces/dialog';
interface Props {
row: ICheckbox;
@@ -10,7 +10,7 @@ interface Props {
const CheckboxField: React.FC<Props> = (props) => {
useEffect(() => {
if(props.row.checked) props.handleChange(props.row.checked, props.index);
if (props.row.checked) props.handleChange(props.row.checked, props.index);
}, []);
return (

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

@@ -1,14 +1,7 @@
import {
Box,
InputGroup,
InputLeftElement,
InputRightElement,
Text,
Input,
} from "@chakra-ui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useEffect } from "react";
import { IInput } from "../../../interfaces/dialog";
import { Box, InputGroup, InputLeftElement, InputRightElement, Text, Input } from '@chakra-ui/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useEffect } from 'react';
import { IInput } from '../../../interfaces/dialog';
interface Props {
row: IInput;
@@ -20,7 +13,7 @@ interface Props {
const InputField: React.FC<Props> = (props) => {
useEffect(() => {
if(props.row.default) props.handleChange(props.row.default, props.index);
if (props.row.default) props.handleChange(props.row.default, props.index);
}, []);
return (
@@ -29,20 +22,13 @@ const InputField: React.FC<Props> = (props) => {
<Text>{props.row.label}</Text>
<InputGroup>
{props.row.icon && (
<InputLeftElement
pointerEvents="none"
children={<FontAwesomeIcon icon={props.row.icon} />}
/>
<InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} />} />
)}
<Input
onChange={(e: React.ChangeEvent<HTMLInputElement>) => props.handleChange(e.target.value, props.index)}
placeholder={props.row.placeholder}
defaultValue={props.row.default}
type={
!props.row.password || props.passwordStates[props.index]
? "text"
: "password"
}
type={!props.row.password || props.passwordStates[props.index] ? 'text' : 'password'}
/>
{props.row.password && (
<InputRightElement
@@ -51,7 +37,7 @@ const InputField: React.FC<Props> = (props) => {
children={
<FontAwesomeIcon
fixedWidth
icon={props.passwordStates[props.index] ? "eye" : "eye-slash"}
icon={props.passwordStates[props.index] ? 'eye' : 'eye-slash'}
fontSize="1em"
style={{ paddingRight: 8 }}
/>

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

@@ -6,9 +6,9 @@ import {
NumberInputStepper,
NumberIncrementStepper,
NumberDecrementStepper,
} from "@chakra-ui/react";
import { useEffect } from "react";
import { INumber } from "../../../interfaces/dialog";
} from '@chakra-ui/react';
import { useEffect } from 'react';
import { INumber } from '../../../interfaces/dialog';
interface Props {
row: INumber;

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

@@ -1,6 +1,6 @@
import { Box, Select } from "@chakra-ui/react";
import { useEffect } from "react";
import { ISelect } from "../../../interfaces/dialog";
import { Box, Select } from '@chakra-ui/react';
import { useEffect } from 'react';
import { ISelect } from '../../../interfaces/dialog';
interface Props {
row: ISelect;
@@ -10,9 +10,9 @@ interface Props {
const SelectField: React.FC<Props> = (props) => {
useEffect(() => {
if(props.row.default) {
if (props.row.default) {
props.row.options?.map((option) => {
if(props.row.default === option.value) {
if (props.row.default === option.value) {
props.handleChange(option.value, props.index);
}
});
@@ -24,12 +24,14 @@ const SelectField: React.FC<Props> = (props) => {
<Box mb={3} key={`select-${props.index}`}>
<Select
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => props.handleChange(e.target.value, props.index)}
defaultValue={props.row.default || ""}
defaultValue={props.row.default || ''}
>
{/* Hacky workaround for selectable placeholder issue */}
{!props.row.default && (<option value="" hidden disabled>
{props.row.label}
</option>)}
{!props.row.default && (
<option value="" hidden disabled>
{props.row.label}
</option>
)}
{props.row.options?.map((option, index) => (
<option key={`option-${index}`} value={option.value}>
{option.label || option.value}

15
web/src/features/dialog/components/slider.tsx
View File

@@ -1,6 +1,6 @@
import { Box, Text, Slider, SliderTrack, SliderFilledTrack, SliderThumb, HStack, Tooltip } from "@chakra-ui/react";
import { useEffect, useState } from "react";
import { ISlider } from "../../../interfaces/dialog";
import { Box, Text, Slider, SliderTrack, SliderFilledTrack, SliderThumb, HStack, Tooltip } from '@chakra-ui/react';
import { useEffect, useState } from 'react';
import { ISlider } from '../../../interfaces/dialog';
interface Props {
row: ISlider;
@@ -10,7 +10,7 @@ interface Props {
const SliderField: React.FC<Props> = (props) => {
useEffect(() => {
if(props.row.default) props.handleChange(props.row.default, props.index);
if (props.row.default) props.handleChange(props.row.default, props.index);
}, []);
const [sliderValue, setSliderValue] = useState(props.row.default || props.row.min || 0);
@@ -30,12 +30,7 @@ const SliderField: React.FC<Props> = (props) => {
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<Tooltip
hasArrow
label={sliderValue}
placement="bottom"
gutter={10}
>
<Tooltip hasArrow label={sliderValue} placement="bottom" gutter={10}>
<SliderThumb />
</Tooltip>
</Slider>