@wasto/cms-components 1.5.10 → 1.5.11

package/src/components/locations-map/LocationsMap.native.tsx

@@ -1,260 +1,260 @@
-import {
-    Camera,
-    GeoJSONSource,
-    Layer,
-    Map,
-    type CameraRef,
-    type GeoJSONSourceRef,
-    type PressEventWithFeatures,
-} from "@maplibre/maplibre-react-native";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { StyleSheet, View, type NativeSyntheticEvent } from "react-native";
-import {
-    LOCATION_CATEGORY_META,
-    REUNION_CENTER,
-    isValidLatLon,
-    type LocationCategory,
-    type MapLocation,
-} from "../../hooks/useLocations";
-import type { LocationsMapViewProps } from "./LocationsMapView";
-import { LocationsMapShell, type LocationsMapProps } from "./LocationsMapShell";
-
-export type { LocationsMapProps };
-
-const MAP_STYLE = "https://tiles.openfreemap.org/styles/liberty";
-const CLUSTER_RADIUS = 56;
-const CLUSTER_MAX_ZOOM = 16;
-const ZOOM_MIN = 8;
-const ZOOM_MAX = 18;
-const FIT_PADDING = { top: 48, right: 48, bottom: 48, left: 48 };
-
-function toGeoJson(locations: MapLocation[]): GeoJSON.FeatureCollection {
-    return {
-        type: "FeatureCollection",
-        features: locations.map((loc) => ({
-            type: "Feature",
-            geometry: { type: "Point", coordinates: [loc.lon, loc.lat] },
-            properties: {
-                id: loc.id,
-                color: LOCATION_CATEGORY_META[loc.category as LocationCategory].color,
-            },
-        })),
-    };
-}
-
-function boundsFromLocations(locations: MapLocation[]): [number, number, number, number] | null {
-    if (locations.length === 0) return null;
-    let west = locations[0]!.lon;
-    let east = locations[0]!.lon;
-    let south = locations[0]!.lat;
-    let north = locations[0]!.lat;
-    for (const loc of locations) {
-        west = Math.min(west, loc.lon);
-        east = Math.max(east, loc.lon);
-        south = Math.min(south, loc.lat);
-        north = Math.max(north, loc.lat);
-    }
-    const pad = west === east && south === north ? 0.01 : 0;
-    return [west - pad, south - pad, east + pad, north + pad];
-}
-
-function isClusterFeature(feature: GeoJSON.Feature): boolean {
-    const props = feature.properties ?? {};
-    return props.cluster === true || typeof props.point_count === "number";
-}
-
-function NativeMapCanvas({
-    locations,
-    center,
-    selectedId,
-    onSelect,
-}: LocationsMapViewProps) {
-    const cameraRef = useRef<CameraRef>(null);
-    const sourceRef = useRef<GeoJSONSourceRef>(null);
-    const [mapReady, setMapReady] = useState(false);
-
-    const safeCenter = useMemo(() => {
-        if (isValidLatLon(center.lat, center.lon)) return center;
-        return REUNION_CENTER;
-    }, [center]);
-
-    const validLocations = useMemo(
-        () => locations.filter((loc) => isValidLatLon(loc.lat, loc.lon)),
-        [locations],
-    );
-
-    const geojson = useMemo(() => toGeoJson(validLocations), [validLocations]);
-
-    const locationById = useMemo(() => {
-        const byId: Record<string, MapLocation> = {};
-        for (const loc of validLocations) byId[loc.id] = loc;
-        return byId;
-    }, [validLocations]);
-
-    const fitToLocations = useCallback(() => {
-        const bounds = boundsFromLocations(validLocations);
-        if (!bounds) return;
-        cameraRef.current?.fitBounds(bounds, { duration: 400, padding: FIT_PADDING });
-    }, [validLocations]);
-
-    useEffect(() => {
-        if (!mapReady) return;
-        fitToLocations();
-    }, [mapReady, fitToLocations]);
-
-    const onMapLoaded = useCallback(() => {
-        setMapReady(true);
-    }, []);
-
-    const onSourcePress = useCallback(
-        async (event: NativeSyntheticEvent<PressEventWithFeatures>) => {
-            if (typeof event.stopPropagation === "function") {
-                event.stopPropagation();
-            }
-            const feature = event.nativeEvent.features[0];
-            if (!feature) return;
-
-            if (isClusterFeature(feature)) {
-                const clusterId = Number(feature.properties?.cluster_id);
-                const coords =
-                    feature.geometry.type === "Point"
-                        ? (feature.geometry.coordinates as [number, number])
-                        : event.nativeEvent.lngLat;
-                try {
-                    const expansion =
-                        Number.isFinite(clusterId)
-                            ? await sourceRef.current?.getClusterExpansionZoom(clusterId)
-                            : undefined;
-                    const zoom = Math.min(
-                        ZOOM_MAX,
-                        typeof expansion === "number" && Number.isFinite(expansion)
-                            ? expansion
-                            : 14,
-                    );
-                    cameraRef.current?.easeTo({
-                        center: coords,
-                        zoom,
-                        duration: 400,
-                        easing: "ease",
-                    });
-                } catch {
-                    /* ignore native cluster lookup errors */
-                }
-                return;
-            }
-
-            const id = feature.properties?.id;
-            const loc = typeof id === "string" ? locationById[id] : undefined;
-            if (loc) onSelect(loc);
-        },
-        [locationById, onSelect],
-    );
-
-    const selectedKey = selectedId ?? "";
-
-    return (
-        <View style={styles.container}>
-            <Map
-                style={styles.map}
-                mapStyle={MAP_STYLE}
-                onDidFinishLoadingMap={onMapLoaded}
-            >
-                <Camera
-                    ref={cameraRef}
-                    initialViewState={{
-                        zoom: 10,
-                        center: [safeCenter.lon, safeCenter.lat],
-                    }}
-                    minZoom={ZOOM_MIN}
-                    maxZoom={ZOOM_MAX}
-                />
-                {mapReady && validLocations.length > 0 ? (
-                    <GeoJSONSource
-                        id="locations"
-                        ref={sourceRef}
-                        data={geojson}
-                        cluster
-                        clusterRadius={CLUSTER_RADIUS}
-                        clusterMaxZoom={CLUSTER_MAX_ZOOM}
-                        onPress={onSourcePress}
-                    >
-                        <Layer
-                            id="locations-clusters"
-                            type="circle"
-                            filter={["has", "point_count"]}
-                            paint={{
-                                "circle-color": [
-                                    "step",
-                                    ["get", "point_count"],
-                                    "#34d399",
-                                    15,
-                                    "#10b981",
-                                    50,
-                                    "#059669",
-                                ],
-                                "circle-radius": [
-                                    "step",
-                                    ["get", "point_count"],
-                                    18,
-                                    15,
-                                    24,
-                                    50,
-                                    32,
-                                ],
-                                "circle-stroke-color": "#ffffff",
-                                "circle-stroke-width": 2,
-                            }}
-                        />
-                        <Layer
-                            id="locations-cluster-count"
-                            type="symbol"
-                            filter={["has", "point_count"]}
-                            layout={{
-                                "text-field": ["get", "point_count_abbreviated"],
-                                "text-font": ["Noto Sans Regular"],
-                                "text-size": 12,
-                                "text-allow-overlap": true,
-                            }}
-                            paint={{ "text-color": "#ffffff" }}
-                        />
-                        <Layer
-                            id="locations-points"
-                            type="circle"
-                            filter={["!", ["has", "point_count"]]}
-                            paint={{
-                                "circle-radius": [
-                                    "case",
-                                    ["==", ["get", "id"], selectedKey],
-                                    12,
-                                    8,
-                                ],
-                                "circle-color": ["get", "color"],
-                                "circle-stroke-color": [
-                                    "case",
-                                    ["==", ["get", "id"], selectedKey],
-                                    "#111827",
-                                    "#ffffff",
-                                ],
-                                "circle-stroke-width": 2,
-                            }}
-                        />
-                    </GeoJSONSource>
-                ) : null}
-            </Map>
-        </View>
-    );
-}
-
-export function LocationsMap(props: LocationsMapProps) {
-    return <LocationsMapShell {...props} MapCanvas={NativeMapCanvas} />;
-}
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        minHeight: 220,
-    },
-    map: {
-        flex: 1,
-    },
-});
+import {
+    Camera,
+    GeoJSONSource,
+    Layer,
+    Map,
+    type CameraRef,
+    type GeoJSONSourceRef,
+    type PressEventWithFeatures,
+} from "@maplibre/maplibre-react-native";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { StyleSheet, View, type NativeSyntheticEvent } from "react-native";
+import {
+    LOCATION_CATEGORY_META,
+    REUNION_CENTER,
+    isValidLatLon,
+    type LocationCategory,
+    type MapLocation,
+} from "../../hooks/useLocations";
+import type { LocationsMapViewProps } from "./LocationsMapView";
+import { LocationsMapShell, type LocationsMapProps } from "./LocationsMapShell";
+
+export type { LocationsMapProps };
+
+const MAP_STYLE = "https://tiles.openfreemap.org/styles/liberty";
+const CLUSTER_RADIUS = 56;
+const CLUSTER_MAX_ZOOM = 16;
+const ZOOM_MIN = 8;
+const ZOOM_MAX = 18;
+const FIT_PADDING = { top: 48, right: 48, bottom: 48, left: 48 };
+
+function toGeoJson(locations: MapLocation[]): GeoJSON.FeatureCollection {
+    return {
+        type: "FeatureCollection",
+        features: locations.map((loc) => ({
+            type: "Feature",
+            geometry: { type: "Point", coordinates: [loc.lon, loc.lat] },
+            properties: {
+                id: loc.id,
+                color: LOCATION_CATEGORY_META[loc.category as LocationCategory].color,
+            },
+        })),
+    };
+}
+
+function boundsFromLocations(locations: MapLocation[]): [number, number, number, number] | null {
+    if (locations.length === 0) return null;
+    let west = locations[0]!.lon;
+    let east = locations[0]!.lon;
+    let south = locations[0]!.lat;
+    let north = locations[0]!.lat;
+    for (const loc of locations) {
+        west = Math.min(west, loc.lon);
+        east = Math.max(east, loc.lon);
+        south = Math.min(south, loc.lat);
+        north = Math.max(north, loc.lat);
+    }
+    const pad = west === east && south === north ? 0.01 : 0;
+    return [west - pad, south - pad, east + pad, north + pad];
+}
+
+function isClusterFeature(feature: GeoJSON.Feature): boolean {
+    const props = feature.properties ?? {};
+    return props.cluster === true || typeof props.point_count === "number";
+}
+
+function NativeMapCanvas({
+    locations,
+    center,
+    selectedId,
+    onSelect,
+}: LocationsMapViewProps) {
+    const cameraRef = useRef<CameraRef>(null);
+    const sourceRef = useRef<GeoJSONSourceRef>(null);
+    const [mapReady, setMapReady] = useState(false);
+
+    const safeCenter = useMemo(() => {
+        if (isValidLatLon(center.lat, center.lon)) return center;
+        return REUNION_CENTER;
+    }, [center]);
+
+    const validLocations = useMemo(
+        () => locations.filter((loc) => isValidLatLon(loc.lat, loc.lon)),
+        [locations],
+    );
+
+    const geojson = useMemo(() => toGeoJson(validLocations), [validLocations]);
+
+    const locationById = useMemo(() => {
+        const byId: Record<string, MapLocation> = {};
+        for (const loc of validLocations) byId[loc.id] = loc;
+        return byId;
+    }, [validLocations]);
+
+    const fitToLocations = useCallback(() => {
+        const bounds = boundsFromLocations(validLocations);
+        if (!bounds) return;
+        cameraRef.current?.fitBounds(bounds, { duration: 400, padding: FIT_PADDING });
+    }, [validLocations]);
+
+    useEffect(() => {
+        if (!mapReady) return;
+        fitToLocations();
+    }, [mapReady, fitToLocations]);
+
+    const onMapLoaded = useCallback(() => {
+        setMapReady(true);
+    }, []);
+
+    const onSourcePress = useCallback(
+        async (event: NativeSyntheticEvent<PressEventWithFeatures>) => {
+            if (typeof event.stopPropagation === "function") {
+                event.stopPropagation();
+            }
+            const feature = event.nativeEvent.features[0];
+            if (!feature) return;
+
+            if (isClusterFeature(feature)) {
+                const clusterId = Number(feature.properties?.cluster_id);
+                const coords =
+                    feature.geometry.type === "Point"
+                        ? (feature.geometry.coordinates as [number, number])
+                        : event.nativeEvent.lngLat;
+                try {
+                    const expansion =
+                        Number.isFinite(clusterId)
+                            ? await sourceRef.current?.getClusterExpansionZoom(clusterId)
+                            : undefined;
+                    const zoom = Math.min(
+                        ZOOM_MAX,
+                        typeof expansion === "number" && Number.isFinite(expansion)
+                            ? expansion
+                            : 14,
+                    );
+                    cameraRef.current?.easeTo({
+                        center: coords,
+                        zoom,
+                        duration: 400,
+                        easing: "ease",
+                    });
+                } catch {
+                    /* ignore native cluster lookup errors */
+                }
+                return;
+            }
+
+            const id = feature.properties?.id;
+            const loc = typeof id === "string" ? locationById[id] : undefined;
+            if (loc) onSelect(loc);
+        },
+        [locationById, onSelect],
+    );
+
+    const selectedKey = selectedId ?? "";
+
+    return (
+        <View style={styles.container}>
+            <Map
+                style={styles.map}
+                mapStyle={MAP_STYLE}
+                onDidFinishLoadingMap={onMapLoaded}
+            >
+                <Camera
+                    ref={cameraRef}
+                    initialViewState={{
+                        zoom: 10,
+                        center: [safeCenter.lon, safeCenter.lat],
+                    }}
+                    minZoom={ZOOM_MIN}
+                    maxZoom={ZOOM_MAX}
+                />
+                {mapReady && validLocations.length > 0 ? (
+                    <GeoJSONSource
+                        id="locations"
+                        ref={sourceRef}
+                        data={geojson}
+                        cluster
+                        clusterRadius={CLUSTER_RADIUS}
+                        clusterMaxZoom={CLUSTER_MAX_ZOOM}
+                        onPress={onSourcePress}
+                    >
+                        <Layer
+                            id="locations-clusters"
+                            type="circle"
+                            filter={["has", "point_count"]}
+                            paint={{
+                                "circle-color": [
+                                    "step",
+                                    ["get", "point_count"],
+                                    "#34d399",
+                                    15,
+                                    "#10b981",
+                                    50,
+                                    "#059669",
+                                ],
+                                "circle-radius": [
+                                    "step",
+                                    ["get", "point_count"],
+                                    18,
+                                    15,
+                                    24,
+                                    50,
+                                    32,
+                                ],
+                                "circle-stroke-color": "#ffffff",
+                                "circle-stroke-width": 2,
+                            }}
+                        />
+                        <Layer
+                            id="locations-cluster-count"
+                            type="symbol"
+                            filter={["has", "point_count"]}
+                            layout={{
+                                "text-field": ["get", "point_count_abbreviated"],
+                                "text-font": ["Noto Sans Regular"],
+                                "text-size": 12,
+                                "text-allow-overlap": true,
+                            }}
+                            paint={{ "text-color": "#ffffff" }}
+                        />
+                        <Layer
+                            id="locations-points"
+                            type="circle"
+                            filter={["!", ["has", "point_count"]]}
+                            paint={{
+                                "circle-radius": [
+                                    "case",
+                                    ["==", ["get", "id"], selectedKey],
+                                    12,
+                                    8,
+                                ],
+                                "circle-color": ["get", "color"],
+                                "circle-stroke-color": [
+                                    "case",
+                                    ["==", ["get", "id"], selectedKey],
+                                    "#111827",
+                                    "#ffffff",
+                                ],
+                                "circle-stroke-width": 2,
+                            }}
+                        />
+                    </GeoJSONSource>
+                ) : null}
+            </Map>
+        </View>
+    );
+}
+
+export function LocationsMap(props: LocationsMapProps) {
+    return <LocationsMapShell {...props} MapCanvas={NativeMapCanvas} />;
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        minHeight: 220,
+    },
+    map: {
+        flex: 1,
+    },
+});

package/src/components/locations-map/LocationsMap.tsx

@@ -1,13 +1,13 @@
-import type { ReactNode } from "react";
-/** Explicit `.web` — Metro platform extensions were not applied for this nested import. */
-import { LocationsMapView } from "./LocationsMapView.web";
-import { LocationsMapShell, type LocationsMapProps } from "./LocationsMapShell";
-
-export type { LocationsMapProps };
-
-/**
- * Web MapLibre canvas. Native uses `LocationsMap.native.tsx` instead of this file.
- */
-export function LocationsMap(props: LocationsMapProps): ReactNode {
-    return <LocationsMapShell {...props} MapCanvas={LocationsMapView} />;
-}
+import type { ReactNode } from "react";
+/** Explicit `.web` — Metro platform extensions were not applied for this nested import. */
+import { LocationsMapView } from "./LocationsMapView.web";
+import { LocationsMapShell, type LocationsMapProps } from "./LocationsMapShell";
+
+export type { LocationsMapProps };
+
+/**
+ * Web MapLibre canvas. Native uses `LocationsMap.native.tsx` instead of this file.
+ */
+export function LocationsMap(props: LocationsMapProps): ReactNode {
+    return <LocationsMapShell {...props} MapCanvas={LocationsMapView} />;
+}

package/src/components/locations-map/LocationsMap.web.tsx

@@ -1,10 +1,10 @@
-import type { ReactNode } from "react";
-import { LocationsMapView } from "./LocationsMapView";
-import { LocationsMapShell, type LocationsMapProps } from "./LocationsMapShell";
-
-export type { LocationsMapProps };
-
-/** Web entry: ensures MapLibre `.web` canvas (not the pin-only fallback). */
-export function LocationsMap(props: LocationsMapProps): ReactNode {
-    return <LocationsMapShell {...props} MapCanvas={LocationsMapView} />;
-}
+import type { ReactNode } from "react";
+import { LocationsMapView } from "./LocationsMapView";
+import { LocationsMapShell, type LocationsMapProps } from "./LocationsMapShell";
+
+export type { LocationsMapProps };
+
+/** Web entry: ensures MapLibre `.web` canvas (not the pin-only fallback). */
+export function LocationsMap(props: LocationsMapProps): ReactNode {
+    return <LocationsMapShell {...props} MapCanvas={LocationsMapView} />;
+}