Teriuihi
d005b72634
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.
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import * as Yup from "yup";
|
|
import React from "react";
|
|
|
|
type InputNames = "username" | "email" | "question" | "discord" | "pc_requirements" | "age" | "pronoun" | "join_date" |
|
|
"avg_time" | "available_days" | "available_time" | "staff_experience" | "plugin_experience" | "why_staff" |
|
|
"expectations_mod" | "other";
|
|
|
|
export interface Step {
|
|
label: string;
|
|
name: InputNames;
|
|
type: "text" | "email" | "textarea" | "date" | "dropdown" | "select";
|
|
min_length: number;
|
|
max_length: number;
|
|
required: boolean;
|
|
additional_info?: string;
|
|
drop_down?: string[]
|
|
multiple?: boolean
|
|
}
|
|
|
|
export interface UserInput {
|
|
[key: string]: string;
|
|
}
|
|
|
|
export type FormData = {
|
|
steps: Step[];
|
|
backend: string;
|
|
userInput: UserInput;
|
|
spec: Yup.Schema<any>;
|
|
title: string;
|
|
}
|
|
|
|
export interface FormProperties {
|
|
path: string
|
|
formData: FormData;
|
|
}
|
|
|
|
export type FormHandlerProps = {
|
|
steps: Step[];
|
|
currentStep: number;
|
|
handleChange: (event: React.ChangeEvent<any>) => void;
|
|
setFieldTouched: (name: string) => void;
|
|
setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void;
|
|
values: UserInput;
|
|
prevLength: number;
|
|
setPrevLength: (len: number) => void;
|
|
}; |