wehub-resource-sync
381 lines
14 KiB
TypeScript
381 lines
14 KiB
TypeScript
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||
import { flushSync } from 'react-dom';
|
||
import {
|
||
IcClock,
|
||
IcClose,
|
||
IcLocation,
|
||
IcMic,
|
||
IcNavBack,
|
||
} from '../../res/icons';
|
||
import { useLocale } from '../../locale';
|
||
import { googleLangCode } from '../../utils/placeUtils';
|
||
import { useMapBackHandler } from '../../hooks/useMapBackHandler';
|
||
import { useMapGestures } from '../../hooks/useMapGestures';
|
||
import { useMapStrings } from '../../hooks/useMapStrings';
|
||
import {
|
||
useMapStore,
|
||
selectCurrentLocation,
|
||
selectGoogle,
|
||
type MapSearchHistoryEntry,
|
||
} from '../../state';
|
||
import { formatDistanceLabelMeters } from '../../utils/placeUtils';
|
||
import { getAutocompleteOffline } from '../../utils/offlinePlaceStore';
|
||
import { hasGoogleMapsApiKey } from '../../utils/googleMapsConfig';
|
||
import { KeyboardService } from '@/os/keyboard';
|
||
|
||
type RouteSide = 'origin' | 'destination';
|
||
|
||
type PlacePrediction = {
|
||
placeId: string;
|
||
mainText: string;
|
||
secondaryText: string;
|
||
distanceMeters?: number;
|
||
};
|
||
|
||
const AUTOCOMPLETE_DEBOUNCE_MS = 280;
|
||
|
||
export const RoutePointPickerOverlay: React.FC<{
|
||
mode: RouteSide;
|
||
initialQuery?: string;
|
||
searchHistory: MapSearchHistoryEntry[];
|
||
counterpart: { name: string } | null;
|
||
continuationDuration?: string | null;
|
||
viewportCenter?: { lat: number; lng: number } | null;
|
||
onClose: () => void;
|
||
onChooseOnMap: (side: RouteSide) => void;
|
||
onSelectPlace: (placeId: string, title: string, subtitle?: string) => void;
|
||
}> = ({
|
||
mode,
|
||
initialQuery = '',
|
||
searchHistory,
|
||
counterpart,
|
||
continuationDuration,
|
||
viewportCenter,
|
||
onClose,
|
||
onChooseOnMap,
|
||
onSelectPlace,
|
||
}) => {
|
||
const { bindTap } = useMapGestures();
|
||
const google = useMapStore(selectGoogle);
|
||
const currentLocation = useMapStore(selectCurrentLocation);
|
||
const locale = useLocale();
|
||
const s = useMapStrings();
|
||
|
||
const [query, setQuery] = useState(initialQuery);
|
||
const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
|
||
const [predictions, setPredictions] = useState<PlacePrediction[]>([]);
|
||
const [suggestionsLoading, setSuggestionsLoading] = useState(false);
|
||
const inputRef = useRef<HTMLInputElement>(null);
|
||
|
||
useMapBackHandler(
|
||
() => {
|
||
onClose();
|
||
return true;
|
||
},
|
||
{ priority: 700 },
|
||
);
|
||
|
||
useEffect(() => {
|
||
const t = window.setTimeout(() => setDebouncedQuery(query), AUTOCOMPLETE_DEBOUNCE_MS);
|
||
return () => window.clearTimeout(t);
|
||
}, [query]);
|
||
|
||
useEffect(() => {
|
||
if (!google) return;
|
||
void google.maps.importLibrary('places');
|
||
}, [google]);
|
||
|
||
useEffect(() => {
|
||
const trimmedQuery = debouncedQuery.trim();
|
||
if (!trimmedQuery) {
|
||
setPredictions([]);
|
||
setSuggestionsLoading(false);
|
||
return;
|
||
}
|
||
|
||
let cancelled = false;
|
||
setSuggestionsLoading(true);
|
||
|
||
const run = async () => {
|
||
const offline = await getAutocompleteOffline({
|
||
input: trimmedQuery,
|
||
locale,
|
||
placesOnly: true,
|
||
});
|
||
if (cancelled) return;
|
||
if (offline.source === 'autocomplete_index') {
|
||
console.log(`[Map][离线] 路线选点提示: "${trimmedQuery}" 命中 autocomplete_index -> ${offline.predictions.length} 个地点`);
|
||
setPredictions(
|
||
offline.predictions.map((item) => ({
|
||
placeId: item.place_id,
|
||
mainText: item.main_text,
|
||
secondaryText: item.secondary_text,
|
||
distanceMeters: item.distance_meters,
|
||
})),
|
||
);
|
||
setSuggestionsLoading(false);
|
||
return;
|
||
}
|
||
|
||
if (!google || !hasGoogleMapsApiKey()) {
|
||
const fallback = await getAutocompleteOffline({
|
||
input: trimmedQuery,
|
||
locale,
|
||
placesOnly: true,
|
||
allowSearchIndexFallback: true,
|
||
});
|
||
if (cancelled) return;
|
||
if (fallback.predictions.length > 0) {
|
||
console.log(`[Map][离线未命中] 路线选点提示: "${trimmedQuery}" 没有 autocomplete_index，Google key 不可用，使用 search_index 兜底 -> ${fallback.predictions.length} 个地点`);
|
||
setPredictions(
|
||
fallback.predictions.map((item) => ({
|
||
placeId: item.place_id,
|
||
mainText: item.main_text,
|
||
secondaryText: item.secondary_text,
|
||
distanceMeters: item.distance_meters,
|
||
})),
|
||
);
|
||
setSuggestionsLoading(false);
|
||
return;
|
||
}
|
||
console.log(`[Map][离线未命中] 路线选点提示: "${trimmedQuery}" 未命中 autocomplete_index/search_index，Google key 不可用`);
|
||
setPredictions([]);
|
||
setSuggestionsLoading(false);
|
||
return;
|
||
}
|
||
|
||
console.log(`[Map][在线] 路线选点提示: "${trimmedQuery}" 离线未命中，调用 Google Place Autocomplete`);
|
||
const service = new google.maps.places.AutocompleteService();
|
||
const biasLat = viewportCenter?.lat ?? currentLocation.latitude;
|
||
const biasLng = viewportCenter?.lng ?? currentLocation.longitude;
|
||
const locationForBias =
|
||
typeof biasLat === 'number' && typeof biasLng === 'number'
|
||
? new google.maps.LatLng(biasLat, biasLng)
|
||
: undefined;
|
||
|
||
const placeReq: google.maps.places.AutocompletionRequest = {
|
||
input: debouncedQuery,
|
||
language: googleLangCode(locale),
|
||
...(locationForBias
|
||
? { locationBias: { center: locationForBias, radius: 5000 }, origin: locationForBias }
|
||
: {}),
|
||
};
|
||
|
||
service.getPlacePredictions(placeReq, (results, status) => {
|
||
if (cancelled) return;
|
||
if (status !== google.maps.places.PlacesServiceStatus.OK || !results) {
|
||
console.log(`[Map][离线未命中] 路线选点提示: "${trimmedQuery}" 在线提示失败或无结果 (${status})`);
|
||
setPredictions([]);
|
||
setSuggestionsLoading(false);
|
||
return;
|
||
}
|
||
|
||
console.log(`[Map][在线] 路线选点提示: "${trimmedQuery}" -> ${results.length} 个地点`);
|
||
setPredictions(
|
||
results.map((item) => ({
|
||
placeId: item.place_id,
|
||
mainText: item.structured_formatting?.main_text ?? item.description ?? '',
|
||
secondaryText: item.structured_formatting?.secondary_text ?? '',
|
||
distanceMeters: item.distance_meters ?? undefined,
|
||
})),
|
||
);
|
||
setSuggestionsLoading(false);
|
||
});
|
||
};
|
||
|
||
void run();
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, [debouncedQuery, google, currentLocation.latitude, currentLocation.longitude, viewportCenter?.lat, viewportCenter?.lng, locale]);
|
||
|
||
const placeHistory = useMemo(
|
||
() =>
|
||
searchHistory.filter(
|
||
(item): item is MapSearchHistoryEntry & { kind: 'place'; placeId: string } =>
|
||
item.kind === 'place' && typeof item.placeId === 'string' && item.placeId.length > 0,
|
||
),
|
||
[searchHistory],
|
||
);
|
||
|
||
const placeholder = mode === 'origin' ? s.route_setup_select_start : s.route_setup_select_dest;
|
||
|
||
const handleSelect = (placeId: string, title: string, subtitle?: string) => {
|
||
KeyboardService.hide();
|
||
inputRef.current?.blur();
|
||
onSelectPlace(placeId, title, subtitle);
|
||
};
|
||
|
||
const showHistory = query.trim().length === 0;
|
||
|
||
return (
|
||
<div className="absolute inset-0 z-40 bg-app-surface pointer-events-auto">
|
||
<div className="flex h-full flex-col pt-10">
|
||
<div className="px-3 pb-2">
|
||
<div className="flex items-center gap-3">
|
||
<button
|
||
type="button"
|
||
className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-gray-700 active:bg-gray-100"
|
||
{...bindTap<HTMLButtonElement>(
|
||
{ kind: 'action', id: 'routePicker.close' },
|
||
{ onTrigger: onClose },
|
||
)}
|
||
>
|
||
<IcNavBack size={24} />
|
||
</button>
|
||
<div className="flex h-12 flex-1 items-center gap-2 rounded-full bg-gray-100 px-4">
|
||
<input
|
||
ref={inputRef}
|
||
type="text"
|
||
autoFocus
|
||
value={query}
|
||
placeholder={placeholder}
|
||
className="flex-1 bg-transparent text-lg text-gray-900 outline-none placeholder:text-gray-500"
|
||
onChange={(e) => setQuery(e.target.value)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
|
||
e.preventDefault();
|
||
if (predictions[0]) {
|
||
handleSelect(
|
||
predictions[0].placeId,
|
||
predictions[0].mainText,
|
||
predictions[0].secondaryText || undefined,
|
||
);
|
||
}
|
||
}
|
||
}}
|
||
/>
|
||
{query ? (
|
||
<button
|
||
type="button"
|
||
className="text-app-text-muted"
|
||
{...bindTap<HTMLButtonElement>(
|
||
{ kind: 'action', id: 'routePicker.clearQuery' },
|
||
{
|
||
onTrigger: () => {
|
||
flushSync(() => {
|
||
setQuery('');
|
||
setDebouncedQuery('');
|
||
});
|
||
inputRef.current?.focus();
|
||
},
|
||
},
|
||
)}
|
||
>
|
||
<IcClose size={22} />
|
||
</button>
|
||
) : (
|
||
<IcMic size={22} className="text-app-text-muted" />
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="min-h-0 flex-1 overflow-y-auto pb-24">
|
||
{showHistory ? (
|
||
<>
|
||
<button
|
||
type="button"
|
||
className="flex w-full items-center gap-4 px-4 py-4 text-left active:bg-gray-50"
|
||
{...bindTap<HTMLButtonElement>(
|
||
{ kind: 'action', id: 'routePicker.chooseOnMap' },
|
||
{
|
||
onTrigger: () => {
|
||
KeyboardService.hide();
|
||
inputRef.current?.blur();
|
||
onChooseOnMap(mode);
|
||
},
|
||
},
|
||
)}
|
||
>
|
||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-100 text-app-text-muted">
|
||
<IcLocation size={20} />
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="truncate text-lg text-gray-900">{s.select_on_map}</div>
|
||
</div>
|
||
</button>
|
||
|
||
{placeHistory.map((item) => (
|
||
<button
|
||
key={item.id}
|
||
type="button"
|
||
className="flex w-full items-start gap-4 px-4 py-4 text-left active:bg-gray-50"
|
||
{...bindTap<HTMLButtonElement>(
|
||
{ kind: 'action', id: 'routePicker.history.select' },
|
||
{
|
||
onTrigger: () => handleSelect(item.placeId, item.text, item.subtitle),
|
||
},
|
||
)}
|
||
>
|
||
<div className="mt-1 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gray-100 text-app-text-muted">
|
||
<IcClock size={18} />
|
||
</div>
|
||
<div className="min-w-0 flex-1 border-b border-gray-100 pb-4">
|
||
<div className="truncate text-[17px] font-medium text-gray-900">{item.text}</div>
|
||
{item.subtitle ? (
|
||
<div className="truncate text-sm text-app-text-muted">{item.subtitle}</div>
|
||
) : null}
|
||
</div>
|
||
</button>
|
||
))}
|
||
</>
|
||
) : (
|
||
<div className="py-1">
|
||
{suggestionsLoading ? (
|
||
<div className="p-8 text-center text-app-text-muted">{s.search_searching}</div>
|
||
) : predictions.length > 0 ? (
|
||
predictions.map((item) => (
|
||
<button
|
||
key={item.placeId}
|
||
type="button"
|
||
className="flex w-full items-start gap-4 px-4 py-4 text-left active:bg-gray-50"
|
||
{...bindTap<HTMLButtonElement>(
|
||
{ kind: 'action', id: 'routePicker.prediction.select' },
|
||
{
|
||
onTrigger: () => handleSelect(
|
||
item.placeId,
|
||
item.mainText,
|
||
item.secondaryText || undefined,
|
||
),
|
||
},
|
||
)}
|
||
>
|
||
<div className="mt-1 flex min-w-[52px] shrink-0 flex-col items-center text-app-text-muted">
|
||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100">
|
||
<IcLocation size={17} />
|
||
</div>
|
||
<span className="mt-1 text-xs text-gray-400">
|
||
{formatDistanceLabelMeters(item.distanceMeters, locale)}
|
||
</span>
|
||
</div>
|
||
<div className="min-w-0 flex-1 border-b border-gray-100 pb-4">
|
||
<div className="truncate text-[17px] font-medium text-gray-900">{item.mainText}</div>
|
||
<div className="truncate text-sm text-app-text-muted">{item.secondaryText}</div>
|
||
</div>
|
||
<div className="pt-1 text-gray-500">
|
||
<IcNavBack size={18} className="rotate-180 -rotate-45" />
|
||
</div>
|
||
</button>
|
||
))
|
||
) : (
|
||
<div className="p-8 text-center text-app-text-muted">{s.search_no_results}</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{showHistory && counterpart ? (
|
||
<div className="absolute inset-x-0 bottom-0 border-t border-gray-100 bg-app-surface px-4 py-4 shadow-up">
|
||
<div className="text-[17px] font-medium text-gray-900">{s.route_continue_to}{counterpart.name}</div>
|
||
{continuationDuration ? (
|
||
<div className="mt-1 text-sm text-app-text-muted">{continuationDuration}</div>
|
||
) : null}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|