49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import * as React from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import { HiSearch } from "react-icons/hi";
|
|
import debounce from "lodash.debounce";
|
|
|
|
interface InputSearchProps extends React.ComponentProps<"input"> {
|
|
delay?: number;
|
|
}
|
|
|
|
const InputSearch = React.forwardRef<HTMLInputElement, InputSearchProps>(
|
|
({ className, type, onChange, delay = 100, ...props }, ref) => {
|
|
const debouncedLoadOptions = React.useMemo(
|
|
() =>
|
|
debounce((event: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (onChange) onChange(event);
|
|
}, delay),
|
|
[delay, onChange]
|
|
);
|
|
|
|
return (
|
|
<div className="flex flex-row relative">
|
|
<HiSearch className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-500" />
|
|
<input
|
|
type={type}
|
|
className={cn(
|
|
"px-3 py-2 flex h-9 w-full rounded-md border border-gray-300 bg-transparent text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
className,
|
|
"pl-10"
|
|
)}
|
|
ref={ref}
|
|
onChange={debouncedLoadOptions}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Enter" && onChange) {
|
|
event.stopPropagation();
|
|
event.preventDefault(); // Mencegah submit form default jika ada
|
|
onChange(event as any); // Panggil `onChange` langsung saat Enter ditekan
|
|
}
|
|
}}
|
|
{...props}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
InputSearch.displayName = "InputSearch";
|
|
|
|
export { InputSearch };
|