Spaces:
Running
Running
File size: 1,881 Bytes
db37e88 d79e40f 15193ea db37e88 15193ea db37e88 15193ea db37e88 15193ea db37e88 | 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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | import styles from "./TextInput.module.css";
import React from "react";
import { FileUploadIcon } from "../../../Icons/FileUploadIcon";
interface InputFieldProps {
label: string;
value: string;
width?: string;
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
onIconMouseDown?: (
event: React.MouseEvent<SVGSVGElement, MouseEvent>,
) => void;
onFocus?: React.FocusEventHandler<HTMLInputElement>;
onBlur?: React.FocusEventHandler<HTMLInputElement>;
children?: React.ReactNode;
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
inputRef?: React.Ref<HTMLInputElement>;
fileUpload?: boolean;
onFileChange?: (files: File[] | null) => void;
}
function PromptInput(props: Readonly<InputFieldProps>) {
const fileInputRef = React.useRef<HTMLInputElement>(null);
const handleIconClick = () => {
fileInputRef.current?.click();
};
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.files && event.target.files.length > 0) {
props.onFileChange?.(Array.from(event.target.files));
} else {
props.onFileChange?.(null);
}
};
return (
<div className={styles.backgroundContainer}>
<input
className={styles.input}
type={"text"}
placeholder={props.label}
autoComplete={"off"}
value={props.value}
onChange={props.onChange}
onKeyDown={props.onKeyDown}
/>
{
<>
<input
id={"file-input"}
type="file"
ref={fileInputRef}
onChange={handleFileChange}
className={styles.hiddenFileInput}
multiple={true}
/>
<div className={styles.iconContainer} onClick={handleIconClick}>
<FileUploadIcon />
</div>
</>
}
</div>
);
}
export default PromptInput;
|