58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import {
|
|
FilledInputProps,
|
|
InputProps,
|
|
OutlinedInputProps,
|
|
TextField
|
|
} from "@mui/material";
|
|
import React, { useState } from "react";
|
|
|
|
interface Props {
|
|
value: string;
|
|
onChange: React.Dispatch<React.SetStateAction<string>>;
|
|
delayMS?: number;
|
|
variant?: "standard" | "filled" | "outlined" | undefined;
|
|
title?: string;
|
|
size?: "small" | "medium" | undefined;
|
|
inputProps?:
|
|
| Partial<InputProps>
|
|
| Partial<FilledInputProps>
|
|
| Partial<OutlinedInputProps>
|
|
| undefined;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
const DelayedTextField = (props: Props) => {
|
|
const { value, onChange, delayMS, variant, title, size, inputProps, disabled } = props;
|
|
|
|
const delay = delayMS ? delayMS : 1000;
|
|
const [inputValue, setInputValue] = useState(value);
|
|
const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>(setTimeout(() => {}, 0));
|
|
|
|
//const timeout = useRef(null); //global variable
|
|
|
|
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
clearTimeout(timeoutId); // Clear previous timeout
|
|
const newValue = event.target.value;
|
|
setInputValue(newValue);
|
|
|
|
setTimeoutId(
|
|
setTimeout(() => {
|
|
onChange(newValue); // Update the value after the delay
|
|
}, delay)
|
|
);
|
|
};
|
|
|
|
return (
|
|
<TextField
|
|
value={inputValue}
|
|
variant={variant}
|
|
title={title}
|
|
InputProps={inputProps}
|
|
onChange={e => handleInputChange(e)}
|
|
size={size}
|
|
disabled={disabled}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default DelayedTextField;
|