refactor(web/input): use form control instead of controlled state

This commit is contained in:
Luke
2023-01-03 18:55:02 +01:00
parent 440a7564a3
commit d0811be0ce
9 changed files with 121 additions and 76 deletions

View File

@@ -1,28 +1,26 @@
import { TextInput } from '@mantine/core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useEffect } from 'react';
import React, { useEffect } from 'react';
import { IInput } from '../../../../interfaces/dialog';
import { UseFormRegisterReturn } from 'react-hook-form';
interface Props {
register: UseFormRegisterReturn;
row: IInput;
index: number;
handleChange: (value: string, index: number) => void;
passwordStates: boolean[];
handlePasswordStates: (index: number) => void;
}
const InputField: React.FC<Props> = (props) => {
useEffect(() => {
if (props.row.default) props.handleChange(props.row.default, props.index);
}, []);
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}
defaultValue={props.row.default}
disabled={props.row.disabled}
type={!props.row.password || props.passwordStates[props.index] ? 'text' : 'password'}
rightSection={