From 3d59f60fed6f3b37d2be2e7043090be3d0b1de52 Mon Sep 17 00:00:00 2001 From: ankman007 Date: Thu, 19 Sep 2024 21:58:15 +0545 Subject: [PATCH] improved-code-structure --- .../DateField/DateFieldComponent.tsx | 2 - .../FileUpload/FileUploadComponent.tsx | 2 +- src/components/Form.tsx | 7 +- src/components/InputField.tsx | 214 +++++++----------- src/components/Select/SelectComponent.tsx | 1 - .../TextField/TextFieldComponent.tsx | 2 +- src/types/types.ts | 9 +- 7 files changed, 97 insertions(+), 140 deletions(-) diff --git a/src/components/DateField/DateFieldComponent.tsx b/src/components/DateField/DateFieldComponent.tsx index 25467b2..b984337 100644 --- a/src/components/DateField/DateFieldComponent.tsx +++ b/src/components/DateField/DateFieldComponent.tsx @@ -7,7 +7,6 @@ export const DateFieldComponent: React.FC = ({ name, value, onChange, - onBlur, localError = null, helperText, required = false, @@ -35,7 +34,6 @@ export const DateFieldComponent: React.FC = ({ name={name} value={value} onChange={handleChange} - onBlur={onBlur} fullWidth required={required} variant="outlined" diff --git a/src/components/FileUpload/FileUploadComponent.tsx b/src/components/FileUpload/FileUploadComponent.tsx index 967e427..44872c3 100644 --- a/src/components/FileUpload/FileUploadComponent.tsx +++ b/src/components/FileUpload/FileUploadComponent.tsx @@ -8,7 +8,7 @@ export const FileUploadComponent: React.FC = ({ label, const handleFileChange = (event: React.ChangeEvent) => { const file = event.target.files?.[0]; if (file) { - if (file.size > 1000000) { + if (file.size > 10000000) { setError("File size exceeds 1MB."); return; } diff --git a/src/components/Form.tsx b/src/components/Form.tsx index a629613..5f7ff6a 100644 --- a/src/components/Form.tsx +++ b/src/components/Form.tsx @@ -14,12 +14,17 @@ const Form: React.FC = () => { const [formData, setFormData] = useState({}); const [submitted, setSubmitted] = useState(false); - const handleChange = (name: string, value: string | boolean | string[]) => { + const handleChange = (name: string, value: any) => { + if (value && value.target) { + value = value.target.type === 'checkbox' ? value.target.checked : value.target.value; + } + setFormData((prevData) => ({ ...prevData, [name]: value, })); }; + const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx index f009f66..14829e1 100644 --- a/src/components/InputField.tsx +++ b/src/components/InputField.tsx @@ -1,7 +1,5 @@ -import React, { useState } from "react"; -import { SelectChangeEvent } from "@mui/material"; +import React from "react"; import { InputFieldProps } from "../types/types"; -import { validateUserInput } from "../utils/validation"; import { CheckboxComponent } from "./Checkbox/Checkbox"; import { RadioComponent } from "./Radio/RadioComponent"; import { SelectComponent } from "./Select/SelectComponent"; @@ -20,139 +18,101 @@ const InputField: React.FC = ({ onChange, value, }) => { - const [localError, setLocalError] = useState(null); - const handleBlur = () => { - const userValidation = validateUserInput(type, value, required, label); - setLocalError(userValidation); - }; - - const handleChange = ( - event: React.ChangeEvent< - HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement - > - ) => { - const target = event.target; + const renderField = () => { + switch (type) { + case "text": + case "email": + case "number": + case "password": + case "textarea": + return ( + + ); - if (target.type === "checkbox") { - handleCheckboxChange(event, target.checked); - } else if (target.type === "radio") { - onChange(target.value); - } else { - onChange(target.value); - } - }; + case "select": + return ( + + ); - const handleSelectChange = (event: SelectChangeEvent) => { - const selectedValue = event; - onChange(selectedValue); - }; + case "multi-select": + return ( + + ); - const handleCheckboxChange = ( - event: React.ChangeEvent, - checked: boolean - ) => { - onChange(checked); - }; + case "radio": + return ( + + ); - return ( -
- {["text", "email", "number", "password"].includes(type) ? ( - - ) : null} + case "checkbox": + return ( + + ); - {type === "textarea" ? ( - - ) : null} + case "file": + case "image": + return ( + + ); - {type === "select" ? ( - - ) : null} + case "date": + return ( + + ); - {type === "multi-select" ? ( - - ) : null} - - {type === "radio" ? ( - - ) : null} - - {["file", "image"].includes(type) ? ( - - ) : null} - - {type === "date" ? ( - - ) : null} + default: + return null; + } + }; - {type === "checkbox" ? ( - - ) : null} -
- ); + return
{renderField()}
; }; export default InputField; diff --git a/src/components/Select/SelectComponent.tsx b/src/components/Select/SelectComponent.tsx index 0b08fea..222b788 100644 --- a/src/components/Select/SelectComponent.tsx +++ b/src/components/Select/SelectComponent.tsx @@ -40,7 +40,6 @@ export const SelectComponent: React.FC = ({ name={name} value={value || ""} onChange={handleChange} - onBlur={handleBlur} required={required} label={label} > diff --git a/src/components/TextField/TextFieldComponent.tsx b/src/components/TextField/TextFieldComponent.tsx index b16bb98..3b762d2 100644 --- a/src/components/TextField/TextFieldComponent.tsx +++ b/src/components/TextField/TextFieldComponent.tsx @@ -32,7 +32,7 @@ export const TextFieldComponent: React.FC = ({ setError(`${label} is required.`); } else { setError(null); - setActive(true); + setActive(true) } }; diff --git a/src/types/types.ts b/src/types/types.ts index 1b1d0e7..208866c 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -53,7 +53,6 @@ export type CheckboxComponentProps = { onChange: (event: React.ChangeEvent, checked: boolean) => void; required?: boolean; - localError?: string | null; }; export type RadioComponentProps = { @@ -63,17 +62,15 @@ export type RadioComponentProps = { onChange: (event: React.ChangeEvent) => void; options: Option[]; required?: boolean; - localError?: string | null; }; export type SelectComponentProps = { name: string; label: string; - value: string; + value: unknown; // onChange: (event: SelectChangeEvent) => void; onChange: (value: string) => void; options: Option[]; - localError?: string | null; required?: boolean; }; @@ -84,7 +81,6 @@ export type MultiSelectComponentProps = { onChange: (event: SelectChangeEvent) => void; options: Option[]; required?: boolean; - localError?: string | null; }; export type TextFieldComponentProps = { @@ -94,7 +90,7 @@ export type TextFieldComponentProps = { value: string; onChange: (event: React.ChangeEvent) => void; onBlur?: () => void; - localError?: string | null; + helperText?: string; required?: boolean; }; @@ -111,7 +107,6 @@ export type DateFieldComponentProps = { value: string; onChange: (event: React.ChangeEvent) => void; onBlur?: () => void; - localError?: string | null; helperText?: string; required?: boolean; };