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
|
import React from "react";
import styles from "./Input.css";
import animations from "styles/animations.css";
function InputField({className, type, id, value, onChange, inputType}) {
// idk how to do this less uglily
switch (inputType) {
case "textarea":
return <textarea className={className} type={type} id={id} value={value} onChange={onChange} />;
default:
break;
}
return <input className={className} type={type} id={id} value={value} onChange={onChange} />;
}
export default function Input({className, type, field, title, setField, validateField, inputType}) {
return (
<div className={styles.container + (className ? " " + className : "")}>
<div className={styles.row}>
<label htmlFor={title} className={styles.label}>{title}</label>
<h3 className={(field?.animating ? animations.shake : "")}
onAnimationEnd={() => {setField({...field, animating: false});}}>
{field?.erroring ? validateField(field) : null}
</h3>
</div>
<InputField className={styles.input}
inputType={inputType}
type={type}
id={title}
value={field?.target?.value ?? ""}
onChange={(event) => {setField({...field,
erroring: true,
target: event.target});}}
field={field} />
</div>
);
}
|
