FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-18 15:36:02 +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: '', heading: '',
rows: [{ type: 'input', label: '' }], rows: [{ type: 'input', label: '' }],
}); });
const [passwordStates, setPasswordStates] = React.useState<boolean[]>([]);
const [visible, setVisible] = React.useState(false); const [visible, setVisible] = React.useState(false);
const { locale } = useLocales(); const { locale } = useLocales();
@@ -37,15 +36,7 @@ const InputDialog: React.FC = () => {
name: 'test', name: 'test',
}); });
const handlePasswordStates = (index: number) => {
setPasswordStates({
...passwordStates,
[index]: !passwordStates[index],
});
};
useNuiEvent<InputProps>('openDialog', (data) => { useNuiEvent<InputProps>('openDialog', (data) => {
setPasswordStates([]);
setFields(data); setFields(data);
setVisible(true); setVisible(true);
data.rows.forEach((row, index) => { data.rows.forEach((row, index) => {
@@ -94,13 +85,7 @@ const InputDialog: React.FC = () => {
return ( return (
<React.Fragment key={item.id}> <React.Fragment key={item.id}>
{row.type === 'input' && ( {row.type === 'input' && (
<InputField <InputField register={form.register(`test.${index}.value`)} row={row} index={index} />
register={form.register(`test.${index}.value`)}
row={row}
index={index}
passwordStates={passwordStates}
handlePasswordStates={handlePasswordStates}
/>
)} )}
{row.type === 'checkbox' && ( {row.type === 'checkbox' && (
<CheckboxField register={form.register(`test.${index}.value`)} row={row} index={index} /> <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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { IInput } from '../../../../interfaces/dialog'; import { IInput } from '../../../../interfaces/dialog';
@@ -8,32 +8,50 @@ interface Props {
register: UseFormRegisterReturn; register: UseFormRegisterReturn;
row: IInput; row: IInput;
index: number; 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 InputField: React.FC<Props> = (props) => {
const { classes } = useStyles();
return ( return (
<TextInput <>
{...props.register} {!props.row.password ? (
defaultValue={props.row.default} <TextInput
label={props.row.label} {...props.register}
description={props.row.description} defaultValue={props.row.default}
icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />} label={props.row.label}
placeholder={props.row.placeholder} description={props.row.description}
disabled={props.row.disabled} icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
type={!props.row.password || props.passwordStates[props.index] ? 'text' : 'password'} placeholder={props.row.placeholder}
rightSection={ disabled={props.row.disabled}
props.row.password && ( />
<FontAwesomeIcon ) : (
onClick={() => props.handlePasswordStates(props.index)} <PasswordInput
cursor="pointer" {...props.register}
icon={props.passwordStates[props.index] ? 'eye' : 'eye-slash'} defaultValue={props.row.default}
fixedWidth 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
/>
)}
/>
)}
</>
); );
}; };