From 1c2d862d6d238ea81550cdae1ef4c342451ffe57 Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Sun, 30 May 2021 10:08:45 +0200
Subject: [PATCH] New props parameters.
---
src/components/Auth/InputField/InputField.tsx | 30 ++++++++++++++++---
1 file changed, 26 insertions(+), 4 deletions(-)
diff --git a/src/components/Auth/InputField/InputField.tsx b/src/components/Auth/InputField/InputField.tsx
index 758c1f4..af97fa3 100644
--- a/src/components/Auth/InputField/InputField.tsx
+++ b/src/components/Auth/InputField/InputField.tsx
@@ -15,11 +15,11 @@ type Props = {
* Takes error from react-hook-form and is thrown if
* the component is not valid.
*/
- error: boolean;
+ error?: boolean;
/**
* Message to display if the component is not valid.
*/
- errorMessage: string;
+ errorMessage?: string;
/**
* React-hook-form control.
*/
@@ -28,10 +28,28 @@ type Props = {
* Validation rules.
*/
rules?: Partial<unknown>;
+ /**
+ * HTML type of input.
+ */
+ type: string;
+
+ /**
+ * MUI props override for defining style on fly.
+ */
+ InputLabelProps?: Record<string, boolean>;
};
export const InputField: FC<Props> = (props: Props) => {
- const { name, label, error, errorMessage, control, rules } = props;
+ const {
+ name,
+ label,
+ error,
+ type,
+ errorMessage,
+ control,
+ rules,
+ InputLabelProps,
+ } = props;
return (
<Controller
name={name}
@@ -41,7 +59,7 @@ export const InputField: FC<Props> = (props: Props) => {
<TextField
variant="outlined"
margin="normal"
- type={name}
+ type={type}
required
fullWidth
id={name}
@@ -53,6 +71,7 @@ export const InputField: FC<Props> = (props: Props) => {
autoFocus
error={error}
helperText={error && errorMessage}
+ InputLabelProps={{ ...InputLabelProps, shrink: true }}
/>
)}
/>
@@ -61,4 +80,7 @@ export const InputField: FC<Props> = (props: Props) => {
InputField.defaultProps = {
rules: undefined,
+ error: false,
+ errorMessage: '',
+ InputLabelProps: {},
};
--
GitLab