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

refactor(web/input): use mantine password field component

Browse Source
This commit is contained in:
Luke
2023-01-04 13:47:37 +01:00
parent 4f2eaeae15
commit 855405da77
2 changed files with 42 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,7 +27,6 @@ const InputDialog: React.FC = () => {
heading: '',
rows: [{ type: 'input', label: '' }],
});
const [passwordStates, setPasswordStates] = React.useState<boolean[]>([]);
const [visible, setVisible] = React.useState(false);
const { locale } = useLocales();
@@ -37,15 +36,7 @@ const InputDialog: React.FC = () => {
name: 'test',
});
const handlePasswordStates = (index: number) => {
setPasswordStates({
...passwordStates,
[index]: !passwordStates[index],
});
};
useNuiEvent<InputProps>('openDialog', (data) => {
setPasswordStates([]);
setFields(data);
setVisible(true);
data.rows.forEach((row, index) => {
@@ -94,13 +85,7 @@ const InputDialog: React.FC = () => {
return (
<React.Fragment key={item.id}>
{row.type === 'input' && (
<InputField
register={form.register(`test.${index}.value`)}
row={row}
index={index}
passwordStates={passwordStates}
handlePasswordStates={handlePasswordStates}
/>
<InputField register={form.register(`test.${index}.value`)} row={row} index={index} />
)}
{row.type === 'checkbox' && (
<CheckboxField register={form.register(`test.${index}.value`)} row={row} index={index} />

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

@@ -1,4 +1,4 @@
import { TextInput } from '@mantine/core';
import { createStyles, PasswordInput, TextInput } from '@mantine/core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useEffect } from 'react';
import { IInput } from '../../../../interfaces/dialog';
@@ -8,32 +8,50 @@ interface Props {
register: UseFormRegisterReturn;
row: IInput;
index: number;
passwordStates: boolean[];
handlePasswordStates: (index: number) => void;
}
const useStyles = createStyles((theme) => ({
eyeIcon: {
color: theme.colors.dark[2],
},
}));
const InputField: React.FC<Props> = (props) => {
const { classes } = useStyles();
return (
<TextInput
{...props.register}
defaultValue={props.row.default}
label={props.row.label}
description={props.row.description}
icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
placeholder={props.row.placeholder}
disabled={props.row.disabled}
type={!props.row.password || props.passwordStates[props.index] ? 'text' : 'password'}
rightSection={
props.row.password && (
<FontAwesomeIcon
onClick={() => props.handlePasswordStates(props.index)}
cursor="pointer"
icon={props.passwordStates[props.index] ? 'eye' : 'eye-slash'}
fixedWidth
/>
)
}
/>
<>
{!props.row.password ? (
<TextInput
{...props.register}
defaultValue={props.row.default}
label={props.row.label}
description={props.row.description}
icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
placeholder={props.row.placeholder}
disabled={props.row.disabled}
/>
) : (
<PasswordInput
{...props.register}
defaultValue={props.row.default}
label={props.row.label}
description={props.row.description}
icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
placeholder={props.row.placeholder}
disabled={props.row.disabled}
visibilityToggleIcon={({ reveal, size }) => (
<FontAwesomeIcon
icon={reveal ? 'eye-slash' : 'eye'}
fontSize={size}
cursor="pointer"
className={classes.eyeIcon}
fixedWidth
/>
)}
/>
)}
</>
);
};