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

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

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
/>
)}
/>
)}
</>
);
};