Carlos Florêncio
105 lines
2.8 KiB
TypeScript
105 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import { Input } from "@kandev/ui/input";
|
|
import { IconSearch, IconX, IconLoader2 } from "@tabler/icons-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface TaskSearchInputProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
placeholder?: string;
|
|
debounceMs?: number;
|
|
isLoading?: boolean;
|
|
className?: string;
|
|
autoFocus?: boolean;
|
|
}
|
|
|
|
export function TaskSearchInput({
|
|
value,
|
|
onChange,
|
|
placeholder = "Search tasks...",
|
|
debounceMs = 300,
|
|
isLoading = false,
|
|
className,
|
|
autoFocus = false,
|
|
}: TaskSearchInputProps) {
|
|
const [localValue, setLocalValue] = useState(value);
|
|
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
|
const inputRef = useRef<HTMLInputElement | null>(null);
|
|
|
|
// Sync local value when external value changes
|
|
useEffect(() => {
|
|
setLocalValue(value);
|
|
}, [value]);
|
|
|
|
// Focus on mount when requested (e.g. when the mobile search bar expands)
|
|
useEffect(() => {
|
|
if (autoFocus) {
|
|
inputRef.current?.focus();
|
|
}
|
|
}, [autoFocus]);
|
|
|
|
const handleChange = useCallback(
|
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const newValue = e.target.value;
|
|
setLocalValue(newValue);
|
|
|
|
// Clear existing timeout
|
|
if (timeoutRef.current) {
|
|
clearTimeout(timeoutRef.current);
|
|
}
|
|
|
|
// Debounce the onChange callback
|
|
timeoutRef.current = setTimeout(() => {
|
|
onChange(newValue);
|
|
}, debounceMs);
|
|
},
|
|
[onChange, debounceMs],
|
|
);
|
|
|
|
const handleClear = useCallback(() => {
|
|
setLocalValue("");
|
|
onChange("");
|
|
if (timeoutRef.current) {
|
|
clearTimeout(timeoutRef.current);
|
|
}
|
|
}, [onChange]);
|
|
|
|
// Cleanup timeout on unmount
|
|
useEffect(() => {
|
|
return () => {
|
|
if (timeoutRef.current) {
|
|
clearTimeout(timeoutRef.current);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className={cn("relative", className)}>
|
|
{isLoading ? (
|
|
<IconLoader2 className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground pointer-events-none animate-spin" />
|
|
) : (
|
|
<IconSearch className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground pointer-events-none" />
|
|
)}
|
|
<Input
|
|
ref={inputRef}
|
|
type="text"
|
|
value={localValue}
|
|
onChange={handleChange}
|
|
placeholder={placeholder}
|
|
className="pl-8 pr-8 w-full border border-border text-[16px] md:text-[16px] lg:text-xs/relaxed"
|
|
/>
|
|
{localValue && !isLoading && (
|
|
<button
|
|
type="button"
|
|
onClick={handleClear}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
|
>
|
|
<IconX className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|