40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { IonInput, IonLabel } from '@ionic/react';
|
|
import styles from './style.module.scss';
|
|
|
|
interface CustomFieldProps {
|
|
field: {
|
|
id: string;
|
|
label: string;
|
|
required: boolean;
|
|
input: {
|
|
props: { type: string; placeholder: string };
|
|
state: {
|
|
value: string;
|
|
reset: (newValue: any) => void;
|
|
onIonChange: (e: any) => Promise<void>;
|
|
onKeyUp: (e: any) => Promise<void>;
|
|
};
|
|
};
|
|
};
|
|
errors: any;
|
|
}
|
|
|
|
function CustomField({ field, errors }: CustomFieldProps): React.JSX.Element {
|
|
const error = errors && errors.filter((e) => e.id === field.id)[0];
|
|
const errorMessage = error && errors.filter((e) => e.id === field.id)[0].message;
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.field}>
|
|
<IonLabel className={styles.fieldLabel}>
|
|
{field.label}
|
|
{error && <p className="animate__animated animate__bounceIn">{errorMessage}</p>}
|
|
</IonLabel>
|
|
<IonInput className={styles.customInput} {...field.input.props} {...field.input.state} />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export { CustomField };
|