Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | import { FormEvent } from "react";
import { InputTypes } from "../../../types";
import CustomInput from "../../Inputs/CustomInput";
import { useTypingDropdownMultipleContext } from "./contexts/TypingDropdownMultipleContext";
type FormPropTypes = {
placeholder?: string;
};
function Form({ placeholder, ...props }: FormPropTypes) {
const {
toggle,
handleValueChange,
handleStringChange,
value,
setValue,
handleKeyDown,
} = useTypingDropdownMultipleContext();
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
handleValueChange(value);
setValue("");
};
return (
<form onSubmit={handleSubmit}>
<CustomInput
{...props}
onKeyDown={handleKeyDown}
onClick={toggle}
value={value}
handleChange={handleStringChange}
inputType={InputTypes.TEXT}
label={undefined}
placeholder={placeholder}
className="!w-full !h-full !outline-none !border-none !min-w-[200px] !m-0 !flex-1"
/>
</form>
);
}
export default Form;
|