109 lines
3.3 KiB
TypeScript
109 lines
3.3 KiB
TypeScript
import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
|
|
type SearchType = {
|
|
searchNm: string;
|
|
searchPk: string;
|
|
};
|
|
type thisProps = {
|
|
label: string | undefined;
|
|
initValue: string | undefined;
|
|
setValue: (searchNm?: string) => void;
|
|
setRtnData: (rtnData: any) => void;
|
|
searchList?: any[];
|
|
};
|
|
export default function SearchInputText({
|
|
label = undefined,
|
|
initValue = undefined,
|
|
setValue = () => {},
|
|
setRtnData = () => {},
|
|
searchList = undefined,
|
|
}: thisProps) {
|
|
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [textValue, setTextValue] = useState(initValue || "");
|
|
|
|
const wrapperRef = useRef<HTMLDivElement>(null);
|
|
const handleInputChange = useCallback(
|
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const value = e.target.value;
|
|
|
|
setTextValue(value);
|
|
setValue(value);
|
|
if (value && value!=='') {
|
|
setIsOpen(true);
|
|
} else {
|
|
setIsOpen(false);
|
|
}
|
|
},
|
|
[setValue]
|
|
);
|
|
|
|
const handleSuggestionClick = useCallback(
|
|
(searchNm: string) => {
|
|
// Do not update textValue to keep input unchanged on suggestion click
|
|
setValue(searchNm);
|
|
setIsOpen(false);
|
|
setRtnData(searchList?.find((item) => item.searchNm === searchNm) || {});
|
|
},
|
|
[searchList, setRtnData, setValue]
|
|
);
|
|
|
|
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}
|
|
/* onFocus={() => setIsOpen(true)} */
|
|
className="w-full h-[3.2rem] !text-xl pl-3 text-gray-600 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
placeholder={`${label}을(를) 입력하세요`}
|
|
/>
|
|
{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 && searchList.length > 0 ? (
|
|
searchList.map((item: SearchType, index: number) => (
|
|
<div
|
|
key={index}
|
|
className="w-full cursor-pointer overflow-auto px-5 py-3 text-left !text-xl hover:bg-gray-100"
|
|
onClick={() => handleSuggestionClick(item.searchNm)}
|
|
role="button"
|
|
tabIndex={0}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
handleSuggestionClick(item.searchNm);
|
|
}
|
|
}}
|
|
>
|
|
{item.searchPk?.substring(0, 10)}
|
|
<span className="float-right">{item.searchNm}</span>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="!text-xl w-full px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto">
|
|
검색 결과가 없습니다.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|