109 lines
2.7 KiB
TypeScript
109 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
SetStateAction,
|
|
Dispatch,
|
|
useState,
|
|
useEffect,
|
|
useRef,
|
|
useMemo,
|
|
} from "react";
|
|
import IconButton from "@mui/material/IconButton";
|
|
import Tooltip from "@mui/material/Tooltip";
|
|
import SearchIcon from "@mui/icons-material/Search";
|
|
import { useDebounce } from "../hooks/useDebounce";
|
|
import { TableData } from "@/data/nodeData";
|
|
import {
|
|
Autocomplete,
|
|
Box,
|
|
Container,
|
|
InputAdornment,
|
|
Stack,
|
|
TextField,
|
|
} from "@mui/material";
|
|
|
|
export interface SearchBarProps {
|
|
tableData: TableData[];
|
|
setFilteredList: Dispatch<SetStateAction<TableData[]>>;
|
|
}
|
|
|
|
export function SearchBar(props: SearchBarProps) {
|
|
let { tableData, setFilteredList } = props;
|
|
const [search, setSearch] = useState<string>("");
|
|
const debouncedSearch = useDebounce(search, 250);
|
|
|
|
// Define a function to handle the Esc key press
|
|
function handleEsc(event: React.KeyboardEvent<HTMLDivElement>) {
|
|
if (event.key === "Escape") {
|
|
console.log("Escape key pressed");
|
|
setSearch("");
|
|
setFilteredList(tableData);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (debouncedSearch) {
|
|
const filtered: TableData[] = tableData.filter((row) => {
|
|
return row.name.toLowerCase().includes(debouncedSearch.toLowerCase());
|
|
});
|
|
setFilteredList(filtered);
|
|
}
|
|
}, [debouncedSearch, tableData, setFilteredList]);
|
|
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (e.target.value === "") {
|
|
setFilteredList(tableData);
|
|
}
|
|
setSearch(e.target.value);
|
|
};
|
|
|
|
const suggestions = useMemo(
|
|
() => tableData.map((row) => row.name),
|
|
[tableData],
|
|
);
|
|
|
|
return (
|
|
<Autocomplete
|
|
freeSolo
|
|
options={suggestions}
|
|
onKeyDown={handleEsc}
|
|
onChange={(event, value) => {
|
|
// do something with the selected value
|
|
if (value === null) {
|
|
setSearch("");
|
|
setFilteredList(tableData);
|
|
} else {
|
|
setSearch(value);
|
|
}
|
|
}}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
fullWidth
|
|
label="Search"
|
|
variant="outlined"
|
|
value={search}
|
|
onChange={handleInputChange}
|
|
autoComplete="nickname"
|
|
InputProps={{
|
|
...params.InputProps,
|
|
// endAdornment: (
|
|
// <InputAdornment position="end">
|
|
// <IconButton>
|
|
// <SearchIcon />
|
|
// </IconButton>
|
|
// </InputAdornment>
|
|
// ),
|
|
}}
|
|
>
|
|
{/* {suggestions.map((item, index) => (
|
|
<option key={index} onClick={() => handleSelect(item)}>
|
|
{item}
|
|
</option>
|
|
))} */}
|
|
</TextField>
|
|
)}
|
|
/>
|
|
);
|
|
}
|