Fmt
This commit is contained in:
parent
63713c3a2b
commit
bd6b511f16
17 changed files with 544 additions and 377 deletions
|
|
@ -17,7 +17,7 @@ import { travelFieldKey, useTravelTime } from '../../hooks/useTravelTime';
|
|||
import { apiUrl, authHeaders } from '../../lib/api';
|
||||
import { useFilterCounts } from '../../hooks/useFilterCounts';
|
||||
import { trackEvent } from '../../lib/analytics';
|
||||
import { INITIAL_VIEW_STATE } from '../../lib/consts';
|
||||
import { INITIAL_VIEW_STATE, POSTCODE_SEARCH_ZOOM } from '../../lib/consts';
|
||||
import { useLicense } from '../../hooks/useLicense';
|
||||
import {
|
||||
AreaPane,
|
||||
|
|
@ -51,6 +51,8 @@ import type { MapFlyTo, MapPageProps } from './map-page/types';
|
|||
|
||||
export type { ExportState } from './map-page/types';
|
||||
|
||||
type PendingFlyTo = { lat: number; lng: number; zoom: number };
|
||||
|
||||
export default function MapPage({
|
||||
features,
|
||||
poiCategoryGroups,
|
||||
|
|
@ -150,6 +152,7 @@ export default function MapPage({
|
|||
|
||||
const mapFlyToRef = useRef<MapFlyTo | null>(null);
|
||||
const pendingCurrentLocationFlyToRef = useRef<{ lat: number; lng: number } | null>(null);
|
||||
const pendingLocationSearchFlyToRef = useRef<PendingFlyTo | null>(null);
|
||||
const mobileDrawerPanelRectRef = useRef<DOMRectReadOnly | null>(null);
|
||||
|
||||
const mapData = useMapData({
|
||||
|
|
@ -296,11 +299,27 @@ export default function MapPage({
|
|||
journeyDest,
|
||||
});
|
||||
|
||||
const consumePendingLocationSearchFlyTo = useCallback((rect?: DOMRectReadOnly | null) => {
|
||||
const pending = pendingLocationSearchFlyToRef.current;
|
||||
const panelRect = rect ?? mobileDrawerPanelRectRef.current;
|
||||
if (!pending || !panelRect) return;
|
||||
|
||||
const bottomInset = Math.max(0, window.innerHeight - panelRect.top);
|
||||
const flyTo = mapFlyToRef.current;
|
||||
if (!flyTo) return;
|
||||
flyTo(pending.lat, pending.lng, pending.zoom, {
|
||||
visibleViewportArea: { bottom: bottomInset },
|
||||
});
|
||||
pendingLocationSearchFlyToRef.current = null;
|
||||
}, []);
|
||||
|
||||
const handleLocationSearchResult = useCallback(
|
||||
(result: SearchedLocation | null) => {
|
||||
if (result) {
|
||||
if (result.markerLatitude != null && result.markerLongitude != null) {
|
||||
setCurrentLocation({ lat: result.markerLatitude, lng: result.markerLongitude });
|
||||
const markerLat = result.markerLatitude;
|
||||
const markerLng = result.markerLongitude;
|
||||
if (markerLat != null && markerLng != null) {
|
||||
setCurrentLocation({ lat: markerLat, lng: markerLng });
|
||||
} else {
|
||||
setCurrentLocation(null);
|
||||
}
|
||||
|
|
@ -312,13 +331,22 @@ export default function MapPage({
|
|||
result.openProperties,
|
||||
result.focusAddress
|
||||
);
|
||||
if (isMobile) setMobileDrawerOpen(true);
|
||||
if (isMobile) {
|
||||
pendingLocationSearchFlyToRef.current = {
|
||||
lat: markerLat ?? result.latitude,
|
||||
lng: markerLng ?? result.longitude,
|
||||
zoom: result.openProperties ? 17 : POSTCODE_SEARCH_ZOOM,
|
||||
};
|
||||
setMobileDrawerOpen(true);
|
||||
consumePendingLocationSearchFlyTo();
|
||||
}
|
||||
} else {
|
||||
setCurrentLocation(null);
|
||||
pendingLocationSearchFlyToRef.current = null;
|
||||
handleCloseSelection();
|
||||
}
|
||||
},
|
||||
[handleCloseSelection, handleLocationSearch, isMobile]
|
||||
[consumePendingLocationSearchFlyTo, handleCloseSelection, handleLocationSearch, isMobile]
|
||||
);
|
||||
|
||||
const consumePendingCurrentLocationFlyTo = useCallback((rect?: DOMRectReadOnly | null) => {
|
||||
|
|
@ -327,7 +355,9 @@ export default function MapPage({
|
|||
if (!pending || !panelRect) return;
|
||||
|
||||
const bottomInset = Math.max(0, window.innerHeight - panelRect.top);
|
||||
mapFlyToRef.current?.(pending.lat, pending.lng, 17, {
|
||||
const flyTo = mapFlyToRef.current;
|
||||
if (!flyTo) return;
|
||||
flyTo(pending.lat, pending.lng, 17, {
|
||||
visibleViewportArea: { bottom: bottomInset },
|
||||
});
|
||||
pendingCurrentLocationFlyToRef.current = null;
|
||||
|
|
@ -352,12 +382,14 @@ export default function MapPage({
|
|||
(rect: DOMRectReadOnly) => {
|
||||
mobileDrawerPanelRectRef.current = rect;
|
||||
consumePendingCurrentLocationFlyTo(rect);
|
||||
consumePendingLocationSearchFlyTo(rect);
|
||||
},
|
||||
[consumePendingCurrentLocationFlyTo]
|
||||
[consumePendingCurrentLocationFlyTo, consumePendingLocationSearchFlyTo]
|
||||
);
|
||||
|
||||
const handleMobileDrawerClose = useCallback(() => {
|
||||
pendingCurrentLocationFlyToRef.current = null;
|
||||
pendingLocationSearchFlyToRef.current = null;
|
||||
mobileDrawerPanelRectRef.current = null;
|
||||
setMobileDrawerOpen(false);
|
||||
}, []);
|
||||
|
|
@ -387,7 +419,11 @@ export default function MapPage({
|
|||
isMobile,
|
||||
flyTo: mapFlyToRef,
|
||||
onLocationSearch: handleLocationSearch,
|
||||
onOpenMobileDrawer: () => setMobileDrawerOpen(true),
|
||||
onOpenMobileDrawer: (target) => {
|
||||
pendingLocationSearchFlyToRef.current = target;
|
||||
setMobileDrawerOpen(true);
|
||||
consumePendingLocationSearchFlyTo();
|
||||
},
|
||||
});
|
||||
useHorizontalSwipeNavigationGuard();
|
||||
useMobileBackNavigationGuard(isMobile);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue