140 lines
4.3 KiB
TypeScript
140 lines
4.3 KiB
TypeScript
import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
|
|
type SearchType = {
|
|
bscFctNm: string;
|
|
bscFctCd: string;
|
|
};
|
|
|
|
type thisProps = {
|
|
label: string | undefined;
|
|
initValue: string | undefined;
|
|
setValue: (searchNm?: string) => void;
|
|
setRtnData: (rtnData: any) => void;
|
|
searchList?: SearchType[];
|
|
};
|
|
|
|
export default function SearchInputText({
|
|
label = undefined,
|
|
initValue = undefined,
|
|
setValue = () => {},
|
|
setRtnData = () => {},
|
|
searchList = [],
|
|
}: thisProps) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [textValue, setTextValue] = useState(initValue || "");
|
|
const [highlightIndex, setHighlightIndex] = useState<number>(-1);
|
|
|
|
const wrapperRef = useRef<HTMLDivElement>(null);
|
|
|
|
const handleInputChange = useCallback(
|
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const value = e.target.value;
|
|
setTextValue(value);
|
|
setValue(value);
|
|
setHighlightIndex(-1);
|
|
setIsOpen(value !== "");
|
|
},
|
|
[setValue]
|
|
);
|
|
|
|
const handleSuggestionClick = useCallback(
|
|
(searchNm: string) => {
|
|
setValue(searchNm);
|
|
setTextValue(searchNm);
|
|
setIsOpen(false);
|
|
setRtnData(searchList?.find((item) => item.bscFctNm === searchNm) || {});
|
|
},
|
|
[searchList, setRtnData, setValue]
|
|
);
|
|
|
|
const handleKeyDown = useCallback(
|
|
(e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (!isOpen || searchList.length === 0) return;
|
|
|
|
if (e.key === "ArrowDown") {
|
|
e.preventDefault();
|
|
setHighlightIndex((prev) => (prev + 1) % searchList.length);
|
|
} else if (e.key === "ArrowUp") {
|
|
e.preventDefault();
|
|
setHighlightIndex((prev) =>
|
|
prev <= 0 ? searchList.length - 1 : prev - 1
|
|
);
|
|
} else if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
if (searchList.length === 1 && searchList[0]) {
|
|
handleSuggestionClick(searchList[0].bscFctNm);
|
|
} else if (highlightIndex >= 0 && highlightIndex < searchList.length && searchList[highlightIndex]) {
|
|
handleSuggestionClick(searchList[highlightIndex].bscFctNm);
|
|
}
|
|
}
|
|
},
|
|
[highlightIndex, isOpen, searchList, handleSuggestionClick]
|
|
);
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (
|
|
wrapperRef.current &&
|
|
!wrapperRef.current.contains(event.target as Node)
|
|
) {
|
|
setIsOpen(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => {
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div ref={wrapperRef} className="relative">
|
|
<input
|
|
type="text"
|
|
value={textValue || ""}
|
|
onChange={handleInputChange}
|
|
onKeyDown={handleKeyDown}
|
|
className="w-full h-8 text-xs pl-2 pr-2 text-gray-600 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
|
|
placeholder={`${label}을(를) 입력하세요`}
|
|
onClick={() => {
|
|
setTextValue("");
|
|
setValue("");
|
|
setIsOpen(false);
|
|
}}
|
|
/>
|
|
{isOpen && (
|
|
<div className="absolute top-full left-0 z-50 mb-2 max-h-72 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
|
|
<div className="max-h-72">
|
|
{searchList.length > 0 ? (
|
|
searchList.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className={`w-full cursor-pointer px-3 py-2 text-left text-xs ${
|
|
highlightIndex === index
|
|
? "bg-blue-50"
|
|
: "hover:bg-gray-50"
|
|
}`}
|
|
onClick={() => handleSuggestionClick(item.bscFctNm)}
|
|
role="button"
|
|
tabIndex={0}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
handleSuggestionClick(item.bscFctNm);
|
|
}
|
|
}}
|
|
>
|
|
<span className="float-left">{item.bscFctNm}</span>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="text-xs w-full px-3 py-2 hover:bg-gray-50 cursor-pointer text-gray-500">
|
|
검색 결과가 없습니다.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|