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

refactor(web/input): input dialog mantine rewrite

Browse Source
This commit is contained in:
Luke
2022-12-16 15:00:01 +01:00
parent f24e43a1a4
commit c419474969
8 changed files with 108 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -57,13 +57,7 @@ const AlertDialog: React.FC = () => {
<ReactMarkdown>{dialogData.content}</ReactMarkdown> <ReactMarkdown>{dialogData.content}</ReactMarkdown>
<Group position="right" spacing={10}> <Group position="right" spacing={10}>
{dialogData.cancel && ( {dialogData.cancel && (
<Button <Button uppercase variant="default" onClick={() => closeAlert('cancel')} mr={3}>
uppercase
variant="default"
sx={{ transition: '150ms' }}
onClick={() => closeAlert('cancel')}
mr={3}
>
{dialogData.labels?.cancel || locale.ui.cancel} {dialogData.labels?.cancel || locale.ui.cancel}
</Button> </Button>
)} )}

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

@@ -1,4 +1,4 @@
import { Modal, ModalOverlay, ModalContent, ModalFooter, ModalHeader, ModalBody, Button } from '@chakra-ui/react'; import { Group, Modal, Button, Stack } from '@mantine/core';
import React from 'react'; import React from 'react';
import { useNuiEvent } from '../../hooks/useNuiEvent'; import { useNuiEvent } from '../../hooks/useNuiEvent';
import { useLocales } from '../../providers/LocaleProvider'; import { useLocales } from '../../providers/LocaleProvider';
@@ -62,42 +62,48 @@ const InputDialog: React.FC = () => {
return ( return (
<> <>
<Modal isOpen={visible} onClose={handleClose} isCentered closeOnEsc closeOnOverlayClick={false} size="xs"> <Modal
<ModalOverlay /> opened={visible}
<ModalContent onClose={handleClose}
onKeyDown={(e) => { centered
if (e.key === 'Enter' && visible) return handleConfirm(); closeOnClickOutside={false}
}} size="xs"
> onKeyDown={(e) => {
<ModalHeader textAlign="center">{fields.heading}</ModalHeader> if (e.key === 'Enter' && visible) return handleConfirm();
<ModalBody fontFamily="Poppins" textAlign="left"> }}
{fields.rows.map((row: IInput | ICheckbox | ISelect | INumber | ISlider, index) => ( styles={{ title: { textAlign: 'center', width: '100%', fontSize: 18 } }}
<React.Fragment key={`row-${index}-${row.type}-${row.label}`}> title={fields.heading}
{row.type === 'input' && ( withCloseButton={false}
<InputField overlayOpacity={0.5}
row={row} exitTransitionDuration={150}
index={index} >
handleChange={handleChange} <Stack>
passwordStates={passwordStates} {fields.rows.map((row: IInput | ICheckbox | ISelect | INumber | ISlider, index) => (
handlePasswordStates={handlePasswordStates} <React.Fragment key={`row-${index}-${row.type}-${row.label}`}>
/> {row.type === 'input' && (
)} <InputField
{row.type === 'checkbox' && <CheckboxField row={row} index={index} handleChange={handleChange} />} row={row}
{row.type === 'select' && <SelectField row={row} index={index} handleChange={handleChange} />} index={index}
{row.type === 'number' && <NumberField row={row} index={index} handleChange={handleChange} />} handleChange={handleChange}
{row.type === 'slider' && <SliderField row={row} index={index} handleChange={handleChange} />} passwordStates={passwordStates}
</React.Fragment> handlePasswordStates={handlePasswordStates}
))} />
</ModalBody> )}
<ModalFooter> {row.type === 'checkbox' && <CheckboxField row={row} index={index} handleChange={handleChange} />}
<Button mr={3} onClick={handleClose}> {row.type === 'select' && <SelectField row={row} index={index} handleChange={handleChange} />}
{locale.ui.close} {row.type === 'number' && <NumberField row={row} index={index} handleChange={handleChange} />}
{row.type === 'slider' && <SliderField row={row} index={index} handleChange={handleChange} />}
</React.Fragment>
))}
<Group position="right" spacing={10}>
<Button uppercase variant="default" onClick={handleClose} mr={3}>
{locale.ui.cancel}
</Button> </Button>
<Button colorScheme="blue" onClick={handleConfirm}> <Button uppercase variant="light" onClick={handleClose}>
{locale.ui.confirm} {locale.ui.confirm}
</Button> </Button>
</ModalFooter> </Group>
</ModalContent> </Stack>
</Modal> </Modal>
</> </>
); );

19
web/src/features/dialog/components/fields/checkbox.tsx
View File

@@ -1,7 +1,6 @@
import { Box, Checkbox, HStack, Text } from '@chakra-ui/react'; import { Checkbox } from '@mantine/core';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { ICheckbox } from '../../../../interfaces/dialog'; import { ICheckbox } from '../../../../interfaces/dialog';
import Label from '../Label';
interface Props { interface Props {
row: ICheckbox; row: ICheckbox;
@@ -15,16 +14,12 @@ const CheckboxField: React.FC<Props> = (props) => {
}, []); }, []);
return ( return (
<> <Checkbox
<Box mb={3}> sx={{ display: 'flex' }}
<Checkbox label={props.row.label}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => props.handleChange(e.target.checked, props.index)} onChange={(e: React.ChangeEvent<HTMLInputElement>) => props.handleChange(e.target.checked, props.index)}
defaultChecked={props.row.checked} defaultChecked={props.row.checked}
> />
<Label label={props.row.label} description={props.row.description} />
</Checkbox>
</Box>
</>
); );
}; };

51
web/src/features/dialog/components/fields/input.tsx
View File

@@ -1,8 +1,7 @@
import { Box, InputGroup, InputLeftElement, InputRightElement, Input } from '@chakra-ui/react'; import { TextInput } from '@mantine/core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { IInput } from '../../../../interfaces/dialog'; import { IInput } from '../../../../interfaces/dialog';
import Label from '../Label';
interface Props { interface Props {
row: IInput; row: IInput;
@@ -18,37 +17,25 @@ const InputField: React.FC<Props> = (props) => {
}, []); }, []);
return ( return (
<> <TextInput
<Box mb={3} textAlign="left"> label={props.row.label}
<Label label={props.row.label} description={props.row.description} /> description={props.row.description}
<InputGroup> icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
{props.row.icon && ( placeholder={props.row.placeholder}
<InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} /> defaultValue={props.row.default}
)} disabled={props.row.disabled}
<Input type={!props.row.password || props.passwordStates[props.index] ? 'text' : 'password'}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => props.handleChange(e.target.value, props.index)} rightSection={
placeholder={props.row.placeholder} props.row.password && (
defaultValue={props.row.default} <FontAwesomeIcon
type={!props.row.password || props.passwordStates[props.index] ? 'text' : 'password'} onClick={() => props.handlePasswordStates(props.index)}
isDisabled={props.row.disabled} cursor="pointer"
icon={props.passwordStates[props.index] ? 'eye' : 'eye-slash'}
fixedWidth
/> />
{props.row.password && ( )
<InputRightElement }
cursor="pointer" />
onClick={() => props.handlePasswordStates(props.index)}
children={
<FontAwesomeIcon
fixedWidth
icon={props.passwordStates[props.index] ? 'eye' : 'eye-slash'}
fontSize="1em"
style={{ paddingRight: 8 }}
/>
}
/>
)}
</InputGroup>
</Box>
</>
); );
}; };

44
web/src/features/dialog/components/fields/number.tsx
View File

@@ -1,17 +1,7 @@
import { import { NumberInput } from '@mantine/core';
Box,
NumberInput,
NumberInputField,
NumberInputStepper,
NumberIncrementStepper,
NumberDecrementStepper,
InputLeftElement,
InputGroup,
} from '@chakra-ui/react';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { INumber } from '../../../../interfaces/dialog'; import { INumber } from '../../../../interfaces/dialog';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Label from '../Label';
interface Props { interface Props {
row: INumber; row: INumber;
@@ -25,28 +15,16 @@ const NumberField: React.FC<Props> = (props) => {
}, []); }, []);
return ( return (
<Box mb={3}> <NumberInput
<Label label={props.row.label} description={props.row.description} /> label={props.row.label}
<InputGroup> description={props.row.description}
<NumberInput defaultValue={props.row.default}
onChange={(val: string) => props.handleChange(+val, props.index)} min={props.row.min}
defaultValue={props.row.default} max={props.row.max}
min={props.row.min} disabled={props.row.disabled}
max={props.row.max} onChange={(value) => props.handleChange(value as number, props.index)}
isDisabled={props.row.disabled} icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
w="100%" />
>
{props.row.icon && (
<InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} />
)}
<NumberInputField placeholder={props.row.placeholder} pl={props.row.icon ? '40px' : undefined} />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
</InputGroup>
</Box>
); );
}; };

32
web/src/features/dialog/components/fields/select.tsx
View File

@@ -1,4 +1,4 @@
import { Box, Select } from '@chakra-ui/react'; import { Select } from '@mantine/core';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { ISelect } from '../../../../interfaces/dialog'; import { ISelect } from '../../../../interfaces/dialog';
@@ -8,6 +8,7 @@ interface Props {
handleChange: (value: string, index: number) => void; handleChange: (value: string, index: number) => void;
} }
// TODO: set label to value of value when there is no label provided
const SelectField: React.FC<Props> = (props) => { const SelectField: React.FC<Props> = (props) => {
useEffect(() => { useEffect(() => {
if (props.row.default) { if (props.row.default) {
@@ -20,27 +21,14 @@ const SelectField: React.FC<Props> = (props) => {
}, []); }, []);
return ( return (
<> <Select
<Box mb={3}> onChange={(value) => props.handleChange(value as string, props.index)}
<Select defaultValue={props.row.default || ''}
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => props.handleChange(e.target.value, props.index)} disabled={props.row.disabled}
defaultValue={props.row.default || ''} data={props.row.options}
isDisabled={props.row.disabled} label={props.row.label}
> description={props.row.description}
{/* Hacky workaround for selectable placeholder issue */} />
{!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}
</option>
))}
</Select>
</Box>
</>
); );
}; };

45
web/src/features/dialog/components/fields/slider.tsx
View File

@@ -1,7 +1,6 @@
import { Box, Text, Slider, SliderTrack, SliderFilledTrack, SliderThumb, HStack, Tooltip } from '@chakra-ui/react'; import { Box, Slider, Text } from '@mantine/core';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { ISlider } from '../../../../interfaces/dialog'; import { ISlider } from '../../../../interfaces/dialog';
import Label from '../Label';
interface Props { interface Props {
row: ISlider; row: ISlider;
@@ -17,31 +16,23 @@ const SliderField: React.FC<Props> = (props) => {
const [sliderValue, setSliderValue] = useState(props.row.default || props.row.min || 0); const [sliderValue, setSliderValue] = useState(props.row.default || props.row.min || 0);
return ( return (
<> <Box>
<Box mb={3}> <Text sx={{ fontSize: 14, fontWeight: 500 }}>{props.row.label}</Text>
<Label label={props.row.label} description={props.row.description} /> <Slider
<Slider mb={10}
onChangeEnd={(val: number) => props.handleChange(val, props.index)} onChangeEnd={(val: number) => props.handleChange(val, props.index)}
onChange={(val: number) => setSliderValue(val)} onChange={(val: number) => setSliderValue(val)}
defaultValue={props.row.default || props.row.min || 0} defaultValue={props.row.default || props.row.min || 0}
min={props.row.min} min={props.row.min}
max={props.row.max} max={props.row.max}
step={props.row.step} step={props.row.step}
isDisabled={props.row.disabled} disabled={props.row.disabled}
> marks={[
<SliderTrack> { value: props.row.min || 0, label: props.row.min || 0 },
<SliderFilledTrack /> { value: props.row.max || 100, label: props.row.max || 100 },
</SliderTrack> ]}
<Tooltip hasArrow label={sliderValue} placement="bottom" gutter={10}> />
<SliderThumb /> </Box>
</Tooltip>
</Slider>
<HStack justifyContent="space-between">
<Text fontSize="sm">{props.row.min || 0}</Text>
<Text fontSize="sm">{props.row.max || 100}</Text>
</HStack>
</Box>
</>
); );
}; };

3
web/src/interfaces/dialog.ts
View File

@@ -1,4 +1,5 @@
import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { SelectItem } from '@mantine/core';
export interface IInput { export interface IInput {
type: 'input'; type: 'input';
@@ -23,7 +24,7 @@ export interface ISelect {
type: 'select'; type: 'select';
label: string; label: string;
default?: string; default?: string;
options?: { value: string; label?: string }[]; options: Array<SelectItem>;
disabled?: boolean; disabled?: boolean;
description?: string; description?: string;
} }