218 lines
7.3 KiB
TypeScript
218 lines
7.3 KiB
TypeScript
import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { createPortal } from 'react-dom';
|
|
import type { Destination } from '../../hooks/useTravelDestinations';
|
|
import { useDropdownPosition } from '../../hooks/useDropdownPosition';
|
|
import { MapPinIcon } from './icons/MapPinIcon';
|
|
import { ChevronIcon } from './icons/ChevronIcon';
|
|
import { CloseIcon } from './icons/CloseIcon';
|
|
|
|
interface DestinationDropdownProps {
|
|
destinations: Destination[];
|
|
loading: boolean;
|
|
onSelect: (slug: string, label: string, lat: number, lon: number) => void;
|
|
onClear?: () => void;
|
|
value?: string;
|
|
placeholder?: string;
|
|
}
|
|
|
|
export function DestinationDropdown({
|
|
destinations,
|
|
loading,
|
|
onSelect,
|
|
onClear,
|
|
value,
|
|
placeholder,
|
|
}: DestinationDropdownProps) {
|
|
const { t } = useTranslation();
|
|
const [open, setOpen] = useState(false);
|
|
const [filter, setFilter] = useState('');
|
|
const [activeIndex, setActiveIndex] = useState(-1);
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
const listRef = useRef<HTMLDivElement>(null);
|
|
const pos = useDropdownPosition(containerRef, open);
|
|
|
|
const filtered = useMemo(() => {
|
|
if (!filter) return destinations;
|
|
const lower = filter.toLowerCase();
|
|
return destinations.filter(
|
|
(d) => d.name.toLowerCase().includes(lower) || d.city?.toLowerCase().includes(lower)
|
|
);
|
|
}, [destinations, filter]);
|
|
|
|
// Close on outside click
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const handler = (e: MouseEvent) => {
|
|
if (
|
|
containerRef.current &&
|
|
!containerRef.current.contains(e.target as Node) &&
|
|
!dropdownRef.current?.contains(e.target as Node)
|
|
) {
|
|
setOpen(false);
|
|
setFilter('');
|
|
}
|
|
};
|
|
document.addEventListener('mousedown', handler);
|
|
return () => document.removeEventListener('mousedown', handler);
|
|
}, [open]);
|
|
|
|
// Scroll active item into view
|
|
useEffect(() => {
|
|
if (activeIndex < 0 || !listRef.current) return;
|
|
const item = listRef.current.children[activeIndex] as HTMLElement;
|
|
item?.scrollIntoView({ block: 'nearest' });
|
|
}, [activeIndex]);
|
|
|
|
const handleSelect = useCallback(
|
|
(dest: Destination) => {
|
|
onSelect(dest.slug, dest.name, dest.lat, dest.lon);
|
|
setOpen(false);
|
|
setFilter('');
|
|
setActiveIndex(-1);
|
|
},
|
|
[onSelect]
|
|
);
|
|
|
|
const handleKeyDown = useCallback(
|
|
(e: React.KeyboardEvent) => {
|
|
if (e.key === 'ArrowDown') {
|
|
e.preventDefault();
|
|
setActiveIndex((prev) => (prev < filtered.length - 1 ? prev + 1 : prev));
|
|
} else if (e.key === 'ArrowUp') {
|
|
e.preventDefault();
|
|
setActiveIndex((prev) => (prev > 0 ? prev - 1 : -1));
|
|
} else if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
if (activeIndex >= 0 && activeIndex < filtered.length) {
|
|
handleSelect(filtered[activeIndex]);
|
|
}
|
|
} else if (e.key === 'Escape') {
|
|
setOpen(false);
|
|
setFilter('');
|
|
}
|
|
},
|
|
[filtered, activeIndex, handleSelect]
|
|
);
|
|
|
|
const handleOpen = useCallback(() => {
|
|
setOpen(true);
|
|
setActiveIndex(-1);
|
|
// Focus input after opening
|
|
requestAnimationFrame(() => inputRef.current?.focus());
|
|
}, []);
|
|
|
|
const dropdown = open && (
|
|
<div
|
|
ref={dropdownRef}
|
|
className="bg-white dark:bg-warm-800 rounded shadow-lg border border-warm-200 dark:border-warm-700 overflow-hidden"
|
|
style={
|
|
pos
|
|
? {
|
|
position: 'fixed',
|
|
top: pos.top,
|
|
left: pos.left,
|
|
width: pos.width,
|
|
zIndex: 50,
|
|
}
|
|
: undefined
|
|
}
|
|
>
|
|
{/* Filter input */}
|
|
<div className="p-1.5 border-b border-warm-100 dark:border-warm-700">
|
|
<input
|
|
ref={inputRef}
|
|
type="text"
|
|
value={filter}
|
|
onChange={(e) => {
|
|
setFilter(e.target.value);
|
|
setActiveIndex(-1);
|
|
}}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder={t('travel.typeToFilter')}
|
|
className="w-full px-2 py-1 text-xs rounded border border-warm-200 dark:border-warm-600 bg-warm-50 dark:bg-warm-900 text-navy-950 dark:text-warm-200 placeholder-warm-400 dark:placeholder-warm-500 outline-none focus:ring-1 focus:ring-teal-400"
|
|
/>
|
|
</div>
|
|
|
|
{/* Results list */}
|
|
<div ref={listRef} className="max-h-48 overflow-y-auto">
|
|
{filtered.length === 0 ? (
|
|
<div className="px-2 py-2 text-xs text-warm-400 dark:text-warm-500 text-center">
|
|
{loading ? t('common.loading') : t('travel.noDestinations')}
|
|
</div>
|
|
) : (
|
|
filtered.map((dest, idx) => (
|
|
<button
|
|
key={dest.slug}
|
|
type="button"
|
|
className={`w-full text-left flex items-center cursor-pointer px-2 py-1.5 gap-1.5 text-xs ${
|
|
idx === activeIndex
|
|
? 'bg-teal-50 dark:bg-teal-900/30'
|
|
: 'hover:bg-warm-50 dark:hover:bg-warm-700'
|
|
}`}
|
|
onMouseEnter={() => setActiveIndex(idx)}
|
|
onMouseDown={(e) => {
|
|
e.preventDefault();
|
|
handleSelect(dest);
|
|
}}
|
|
>
|
|
<MapPinIcon className="w-3 h-3 text-warm-400 dark:text-warm-500 shrink-0" />
|
|
<span className="text-warm-700 dark:text-warm-200 truncate">
|
|
{dest.name}
|
|
{dest.city && (
|
|
<span className="text-warm-400 dark:text-warm-500"> ({dest.city})</span>
|
|
)}
|
|
</span>
|
|
</button>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div ref={containerRef} className="relative">
|
|
<div
|
|
className={`w-full flex items-center gap-1.5 px-2 py-1 text-xs rounded border ${value ? 'border-warm-200 dark:border-warm-700 bg-warm-50 dark:bg-warm-800' : 'border-warm-200 dark:border-warm-600 bg-white dark:bg-warm-800 hover:border-warm-300 dark:hover:border-warm-500'}`}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={handleOpen}
|
|
className="flex items-center gap-1.5 flex-1 min-w-0 outline-none"
|
|
>
|
|
{loading ? (
|
|
<div className="w-3 h-3 border-2 border-warm-300 dark:border-warm-600 border-t-teal-500 rounded-full animate-spin shrink-0" />
|
|
) : (
|
|
<MapPinIcon
|
|
className={`w-3 h-3 shrink-0 ${value ? 'text-red-500' : 'text-warm-400 dark:text-warm-500'}`}
|
|
/>
|
|
)}
|
|
<span
|
|
className={`flex-1 text-left truncate ${value ? 'text-navy-950 dark:text-warm-200' : 'text-warm-400 dark:text-warm-500'}`}
|
|
>
|
|
{value || placeholder || t('travel.selectDestination')}
|
|
</span>
|
|
</button>
|
|
{value && onClear ? (
|
|
<button
|
|
type="button"
|
|
onClick={onClear}
|
|
className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 shrink-0"
|
|
title={t('travel.clearDestination')}
|
|
>
|
|
<CloseIcon className="w-3 h-3" />
|
|
</button>
|
|
) : (
|
|
<ChevronIcon
|
|
direction={open ? 'up' : 'down'}
|
|
className="w-3 h-3 shrink-0 text-warm-400 dark:text-warm-500"
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{open && createPortal(dropdown, document.body)}
|
|
</div>
|
|
);
|
|
}
|