```
add authentication routes, components, and pages including AuthHome, Login, and SignUp, and implement form fields utility functions ```
This commit is contained in:
40
002_source/ionic_mobile/src/components/CustomField/index.tsx
Normal file
40
002_source/ionic_mobile/src/components/CustomField/index.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import { IonInput, IonLabel } from '@ionic/react';
|
||||
import styles from './style.module.scss';
|
||||
|
||||
function CustomField({
|
||||
field,
|
||||
errors,
|
||||
}: {
|
||||
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;
|
||||
}): 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 };
|
Reference in New Issue
Block a user