Altitude/SiteFrontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add react-select component and integrate into FormHTML

Browse Source 
Added `react-select` library dependency to `package.json` and lock file. Created a new `FormHTML` component in `formHTML.tsx` to handle form field rendering, including support for `select` fields using `react-select` for multi-select functionality.
This commit is contained in:
auto
2024-08-10 00:25:44 +02:00
parent 51642612ec
commit d005b72634
6 changed files with 620 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/form/genericForm.tsx
+8 -35
View File
@@ -4,6 +4,8 @@ import {useNavigate} from 'react-router-dom'
import {ErrorMessage, Field, Form, FormikProvider, FormikValues, useFormik} from "formik";
import {Step, UserInput, FormData} from './formInterfaces';
import * as Yup from "yup";
import formHTML from "./formHTML";
import FormHTML from "./formHTML";
const GenericForm = (formData: FormData) => {
const steps: Step[] = formData.steps;
@@ -16,6 +18,7 @@ const GenericForm = (formData: FormData) => {
const [currentStep, setCurrentStep] = useState<number>(0);
const handleSubmit = async (formikValues: FormikValues) => {
console.log(JSON.stringify(formikValues))
try {
const response = await fetch(backend, {
method: 'POST',
@@ -71,6 +74,7 @@ const GenericForm = (formData: FormData) => {
handleChange,
values,
setFieldTouched,
setFieldValue,
} = formik;
const [prevLength, setPrevLength] = useState(0);
@@ -99,41 +103,10 @@ const GenericForm = (formData: FormData) => {
</label>
</label>
<label>
{
steps[currentStep].drop_down ? (
<Field as="select"
name={steps[currentStep].name}
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
handleChange(e);
if (prevLength !== values[steps[currentStep].name].length) {
setFieldTouched(steps[currentStep].name);
setPrevLength(values[steps[currentStep].name].length);
}
}}>
{steps[currentStep].drop_down?.map((option, i) => (
<option key={i} value={option}>
{option}
</option>
))}
</Field>
) : (
<Field
type={steps[currentStep].type}
name={steps[currentStep].name}
required={steps[currentStep].required}
min={steps[currentStep].min_length}
max={steps[currentStep].max_length}
as={(steps[currentStep].type === "textarea") ? "textarea" : "input"}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
handleChange(e);
if (prevLength !== values[steps[currentStep].name].length) {
setFieldTouched(steps[currentStep].name);
setPrevLength(values[steps[currentStep].name].length);
}
}}
/>
)
}
<FormHTML steps={steps} currentStep={currentStep} handleChange={handleChange}
setFieldTouched={setFieldTouched} setFieldValue={setFieldValue} values={values}
prevLength={prevLength} setPrevLength={setPrevLength}>
</FormHTML>
</label>
</div>
<div>