@wasto/cms-components 1.5.10 → 1.5.11

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

@@ -1,331 +1,331 @@
-import {
-    createElement,
-    useEffect,
-    useMemo,
-    useRef,
-    useState,
-} from "react";
-import { StyleSheet, Text, View } from "react-native";
-import type { Map as MapLibreMap, Marker } from "maplibre-gl";
-import {
-    LOCATION_CATEGORY_META,
-    REUNION_CENTER,
-    isValidLatLon,
-    type LocationCategory,
-} from "../../hooks/useLocations";
-import { getContrastColor } from "../../helpers/getContrastColor";
-import type { LocationsMapViewProps } from "./LocationsMapView";
-
-import "maplibre-gl/dist/maplibre-gl.css";
-
-/** Vector style (parity with native). Raster fallback if OpenFreeMap fails (CSP/iframe). */
-const OPENFREEMAP_STYLE = "https://tiles.openfreemap.org/styles/liberty";
-const OSM_RASTER_STYLE = {
-    version: 8 as const,
-    sources: {
-        osm: {
-            type: "raster" as const,
-            tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
-            tileSize: 256,
-            attribution: "© OpenStreetMap contributors",
-        },
-    },
-    layers: [{ id: "osm", type: "raster" as const, source: "osm" }],
-};
-const MAX_MARKERS = 80;
-
-/** maplibre-gl@4 dynamic import may be `{ default: ns }` under Metro/webpack. */
-type MapLibreGL = {
-    Map: new (options: {
-        container: HTMLElement;
-        style: string | typeof OSM_RASTER_STYLE;
-        center: [number, number];
-        zoom: number;
-    }) => MapLibreMap;
-    Marker: new (options?: { element?: HTMLElement; anchor?: string }) => Marker;
-    LngLatBounds: new (
-        sw: [number, number],
-        ne: [number, number],
-    ) => { extend: (coord: [number, number]) => unknown };
-};
-
-async function loadMapLibre(): Promise<MapLibreGL> {
-    const mod = await import("maplibre-gl");
-    return ((mod as { default?: MapLibreGL }).default ?? mod) as MapLibreGL;
-}
-
-function buildMarkerElement(category: LocationCategory, selected: boolean) {
-    const color =
-        LOCATION_CATEGORY_META[category]?.color ??
-        LOCATION_CATEGORY_META.recycling.color;
-    const iconColor = getContrastColor(color);
-    const el = document.createElement("button");
-    el.type = "button";
-    el.setAttribute("aria-label", LOCATION_CATEGORY_META[category]?.label ?? "Lieu");
-    el.style.cssText = [
-        "display:flex",
-        "align-items:center",
-        "justify-content:center",
-        "width:32px",
-        "height:32px",
-        "padding:0",
-        "border:none",
-        "background:transparent",
-        "cursor:pointer",
-    ].join(";");
-    el.innerHTML = `
-    <span style="
-      display:flex;align-items:center;justify-content:center;
-      width:32px;height:32px;border-radius:9999px;
-      background:${color};
-      border:3px solid ${selected ? "#111827" : "#ffffff"};
-      box-shadow:0 1px 3px rgba(0,0,0,0.25);
-      transform:scale(${selected ? 1.12 : 1});
-    ">
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
-        stroke="${iconColor}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/>
-        <circle cx="12" cy="10" r="3"/>
-      </svg>
-    </span>
-  `;
-    return el;
-}
-
-/**
- * Web MapLibre GL JS canvas (Metro resolves `.web.tsx` over the pin fallback).
- * Same OpenFreeMap style as native + Studio PWA preview.
- */
-export function LocationsMapView({
-    locations,
-    center,
-    selectedId,
-    onSelect,
-}: LocationsMapViewProps) {
-    const containerRef = useRef<HTMLDivElement | null>(null);
-    const mapRef = useRef<MapLibreMap | null>(null);
-    const maplibreRef = useRef<MapLibreGL | null>(null);
-    const markersRef = useRef<Array<{ id: string; marker: Marker }>>([]);
-    const onSelectRef = useRef(onSelect);
-    const [mapReady, setMapReady] = useState(false);
-    const [mapError, setMapError] = useState<string | null>(null);
-
-    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],
-    );
-
-    useEffect(() => {
-        onSelectRef.current = onSelect;
-    }, [onSelect]);
-
-    useEffect(() => {
-        let cancelled = false;
-        let resizeObserver: ResizeObserver | null = null;
-
-        async function init() {
-            if (!containerRef.current || mapRef.current) return;
-            try {
-                const maplibregl = await loadMapLibre();
-                if (cancelled || !containerRef.current) return;
-                maplibreRef.current = maplibregl;
-
-                const map = new maplibregl.Map({
-                    container: containerRef.current,
-                    style: OPENFREEMAP_STYLE,
-                    center: [safeCenter.lon, safeCenter.lat],
-                    zoom: 10,
-                });
-                mapRef.current = map;
-
-                let usedRasterFallback = false;
-                const doResize = () => {
-                    try {
-                        map.resize();
-                    } catch {
-                        /* ignore */
-                    }
-                };
-
-                map.on("load", () => {
-                    doResize();
-                    requestAnimationFrame(doResize);
-                    if (!cancelled) {
-                        setMapError(null);
-                        setMapReady(true);
-                    }
-                });
-
-                map.on("error", (e: { error?: { message?: string } }) => {
-                    const msg =
-                        typeof e?.error?.message === "string"
-                            ? e.error.message
-                            : "Erreur chargement carte";
-                    // OpenFreeMap / vector tiles often blocked in iframe → OSM raster
-                    if (!usedRasterFallback && !cancelled) {
-                        usedRasterFallback = true;
-                        try {
-                            map.setStyle(OSM_RASTER_STYLE as never);
-                            return;
-                        } catch {
-                            /* fall through */
-                        }
-                    }
-                    if (!cancelled) setMapError(msg);
-                });
-
-                if (typeof ResizeObserver !== "undefined" && containerRef.current) {
-                    resizeObserver = new ResizeObserver(() => doResize());
-                    resizeObserver.observe(containerRef.current);
-                }
-
-                requestAnimationFrame(() => {
-                    doResize();
-                    setTimeout(doResize, 50);
-                    setTimeout(doResize, 200);
-                });
-            } catch (err) {
-                if (!cancelled) {
-                    setMapError(
-                        err instanceof Error
-                            ? err.message
-                            : "Impossible de charger MapLibre",
-                    );
-                }
-            }
-        }
-
-        void init();
-
-        return () => {
-            cancelled = true;
-            resizeObserver?.disconnect();
-            for (const m of markersRef.current) m.marker.remove();
-            markersRef.current = [];
-            mapRef.current?.remove();
-            mapRef.current = null;
-            maplibreRef.current = null;
-            setMapReady(false);
-        };
-        // Init once; center used only as initial camera
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    useEffect(() => {
-        if (!mapReady) return;
-        const map = mapRef.current;
-        const maplibregl = maplibreRef.current;
-        if (!map || !maplibregl) return;
-
-        for (const m of markersRef.current) m.marker.remove();
-        markersRef.current = [];
-
-        const visible = validLocations.slice(0, MAX_MARKERS);
-        for (const loc of visible) {
-            const el = buildMarkerElement(
-                loc.category as LocationCategory,
-                selectedId === loc.id,
-            );
-            el.addEventListener("click", (e) => {
-                e.stopPropagation();
-                onSelectRef.current(loc);
-            });
-            const marker = new maplibregl.Marker({ element: el, anchor: "center" })
-                .setLngLat([loc.lon, loc.lat])
-                .addTo(map);
-            markersRef.current.push({ id: loc.id, marker });
-        }
-    }, [validLocations, selectedId, mapReady]);
-
-    const locationsKey = useMemo(
-        () => validLocations.map((l) => l.id).join("|"),
-        [validLocations],
-    );
-
-    useEffect(() => {
-        if (!mapReady) return;
-        const map = mapRef.current;
-        const maplibregl = maplibreRef.current;
-        if (!map || !maplibregl) return;
-
-        const visible = validLocations.slice(0, MAX_MARKERS);
-        if (visible.length === 0) return;
-
-        if (visible.length === 1) {
-            map.easeTo({
-                center: [visible[0]!.lon, visible[0]!.lat],
-                zoom: 13,
-                duration: 350,
-            });
-            return;
-        }
-
-        const bounds = new maplibregl.LngLatBounds(
-            [visible[0]!.lon, visible[0]!.lat],
-            [visible[0]!.lon, visible[0]!.lat],
-        );
-        for (const loc of visible) bounds.extend([loc.lon, loc.lat]);
-        map.fitBounds(bounds, { padding: 56, maxZoom: 13, duration: 350 });
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- locationsKey captures set
-    }, [locationsKey, mapReady]);
-
-    useEffect(() => {
-        if (!mapReady) return;
-        const map = mapRef.current;
-        if (!map || !selectedId) return;
-        const loc = validLocations.find((l) => l.id === selectedId);
-        if (!loc) return;
-        map.easeTo({
-            center: [loc.lon, loc.lat],
-            zoom: Math.max(map.getZoom(), 13),
-            duration: 350,
-        });
-    }, [selectedId, validLocations, mapReady]);
-
-    return (
-        <View style={styles.wrap}>
-            {createElement("div", {
-                ref: containerRef,
-                className: "wasto-locations-map",
-                style: {
-                    position: "absolute",
-                    inset: 0,
-                    width: "100%",
-                    height: "100%",
-                    minHeight: 220,
-                },
-            })}
-            {mapError ? (
-                <View style={styles.errorOverlay} pointerEvents="none">
-                    <Text style={styles.errorText}>Carte indisponible : {mapError}</Text>
-                </View>
-            ) : null}
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    wrap: {
-        flex: 1,
-        minHeight: 220,
-        position: "relative",
-        overflow: "hidden",
-    },
-    errorOverlay: {
-        ...StyleSheet.absoluteFillObject,
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: "rgba(245,245,245,0.92)",
-        paddingHorizontal: 16,
-    },
-    errorText: {
-        fontSize: 12,
-        textAlign: "center",
-        opacity: 0.7,
-    },
-});
+import {
+    createElement,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from "react";
+import { StyleSheet, Text, View } from "react-native";
+import type { Map as MapLibreMap, Marker } from "maplibre-gl";
+import {
+    LOCATION_CATEGORY_META,
+    REUNION_CENTER,
+    isValidLatLon,
+    type LocationCategory,
+} from "../../hooks/useLocations";
+import { getContrastColor } from "../../helpers/getContrastColor";
+import type { LocationsMapViewProps } from "./LocationsMapView";
+
+import "maplibre-gl/dist/maplibre-gl.css";
+
+/** Vector style (parity with native). Raster fallback if OpenFreeMap fails (CSP/iframe). */
+const OPENFREEMAP_STYLE = "https://tiles.openfreemap.org/styles/liberty";
+const OSM_RASTER_STYLE = {
+    version: 8 as const,
+    sources: {
+        osm: {
+            type: "raster" as const,
+            tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
+            tileSize: 256,
+            attribution: "© OpenStreetMap contributors",
+        },
+    },
+    layers: [{ id: "osm", type: "raster" as const, source: "osm" }],
+};
+const MAX_MARKERS = 80;
+
+/** maplibre-gl@4 dynamic import may be `{ default: ns }` under Metro/webpack. */
+type MapLibreGL = {
+    Map: new (options: {
+        container: HTMLElement;
+        style: string | typeof OSM_RASTER_STYLE;
+        center: [number, number];
+        zoom: number;
+    }) => MapLibreMap;
+    Marker: new (options?: { element?: HTMLElement; anchor?: string }) => Marker;
+    LngLatBounds: new (
+        sw: [number, number],
+        ne: [number, number],
+    ) => { extend: (coord: [number, number]) => unknown };
+};
+
+async function loadMapLibre(): Promise<MapLibreGL> {
+    const mod = await import("maplibre-gl");
+    return ((mod as { default?: MapLibreGL }).default ?? mod) as MapLibreGL;
+}
+
+function buildMarkerElement(category: LocationCategory, selected: boolean) {
+    const color =
+        LOCATION_CATEGORY_META[category]?.color ??
+        LOCATION_CATEGORY_META.recycling.color;
+    const iconColor = getContrastColor(color);
+    const el = document.createElement("button");
+    el.type = "button";
+    el.setAttribute("aria-label", LOCATION_CATEGORY_META[category]?.label ?? "Lieu");
+    el.style.cssText = [
+        "display:flex",
+        "align-items:center",
+        "justify-content:center",
+        "width:32px",
+        "height:32px",
+        "padding:0",
+        "border:none",
+        "background:transparent",
+        "cursor:pointer",
+    ].join(";");
+    el.innerHTML = `
+    <span style="
+      display:flex;align-items:center;justify-content:center;
+      width:32px;height:32px;border-radius:9999px;
+      background:${color};
+      border:3px solid ${selected ? "#111827" : "#ffffff"};
+      box-shadow:0 1px 3px rgba(0,0,0,0.25);
+      transform:scale(${selected ? 1.12 : 1});
+    ">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
+        stroke="${iconColor}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/>
+        <circle cx="12" cy="10" r="3"/>
+      </svg>
+    </span>
+  `;
+    return el;
+}
+
+/**
+ * Web MapLibre GL JS canvas (Metro resolves `.web.tsx` over the pin fallback).
+ * Same OpenFreeMap style as native + Studio PWA preview.
+ */
+export function LocationsMapView({
+    locations,
+    center,
+    selectedId,
+    onSelect,
+}: LocationsMapViewProps) {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const mapRef = useRef<MapLibreMap | null>(null);
+    const maplibreRef = useRef<MapLibreGL | null>(null);
+    const markersRef = useRef<Array<{ id: string; marker: Marker }>>([]);
+    const onSelectRef = useRef(onSelect);
+    const [mapReady, setMapReady] = useState(false);
+    const [mapError, setMapError] = useState<string | null>(null);
+
+    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],
+    );
+
+    useEffect(() => {
+        onSelectRef.current = onSelect;
+    }, [onSelect]);
+
+    useEffect(() => {
+        let cancelled = false;
+        let resizeObserver: ResizeObserver | null = null;
+
+        async function init() {
+            if (!containerRef.current || mapRef.current) return;
+            try {
+                const maplibregl = await loadMapLibre();
+                if (cancelled || !containerRef.current) return;
+                maplibreRef.current = maplibregl;
+
+                const map = new maplibregl.Map({
+                    container: containerRef.current,
+                    style: OPENFREEMAP_STYLE,
+                    center: [safeCenter.lon, safeCenter.lat],
+                    zoom: 10,
+                });
+                mapRef.current = map;
+
+                let usedRasterFallback = false;
+                const doResize = () => {
+                    try {
+                        map.resize();
+                    } catch {
+                        /* ignore */
+                    }
+                };
+
+                map.on("load", () => {
+                    doResize();
+                    requestAnimationFrame(doResize);
+                    if (!cancelled) {
+                        setMapError(null);
+                        setMapReady(true);
+                    }
+                });
+
+                map.on("error", (e: { error?: { message?: string } }) => {
+                    const msg =
+                        typeof e?.error?.message === "string"
+                            ? e.error.message
+                            : "Erreur chargement carte";
+                    // OpenFreeMap / vector tiles often blocked in iframe → OSM raster
+                    if (!usedRasterFallback && !cancelled) {
+                        usedRasterFallback = true;
+                        try {
+                            map.setStyle(OSM_RASTER_STYLE as never);
+                            return;
+                        } catch {
+                            /* fall through */
+                        }
+                    }
+                    if (!cancelled) setMapError(msg);
+                });
+
+                if (typeof ResizeObserver !== "undefined" && containerRef.current) {
+                    resizeObserver = new ResizeObserver(() => doResize());
+                    resizeObserver.observe(containerRef.current);
+                }
+
+                requestAnimationFrame(() => {
+                    doResize();
+                    setTimeout(doResize, 50);
+                    setTimeout(doResize, 200);
+                });
+            } catch (err) {
+                if (!cancelled) {
+                    setMapError(
+                        err instanceof Error
+                            ? err.message
+                            : "Impossible de charger MapLibre",
+                    );
+                }
+            }
+        }
+
+        void init();
+
+        return () => {
+            cancelled = true;
+            resizeObserver?.disconnect();
+            for (const m of markersRef.current) m.marker.remove();
+            markersRef.current = [];
+            mapRef.current?.remove();
+            mapRef.current = null;
+            maplibreRef.current = null;
+            setMapReady(false);
+        };
+        // Init once; center used only as initial camera
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+        if (!mapReady) return;
+        const map = mapRef.current;
+        const maplibregl = maplibreRef.current;
+        if (!map || !maplibregl) return;
+
+        for (const m of markersRef.current) m.marker.remove();
+        markersRef.current = [];
+
+        const visible = validLocations.slice(0, MAX_MARKERS);
+        for (const loc of visible) {
+            const el = buildMarkerElement(
+                loc.category as LocationCategory,
+                selectedId === loc.id,
+            );
+            el.addEventListener("click", (e) => {
+                e.stopPropagation();
+                onSelectRef.current(loc);
+            });
+            const marker = new maplibregl.Marker({ element: el, anchor: "center" })
+                .setLngLat([loc.lon, loc.lat])
+                .addTo(map);
+            markersRef.current.push({ id: loc.id, marker });
+        }
+    }, [validLocations, selectedId, mapReady]);
+
+    const locationsKey = useMemo(
+        () => validLocations.map((l) => l.id).join("|"),
+        [validLocations],
+    );
+
+    useEffect(() => {
+        if (!mapReady) return;
+        const map = mapRef.current;
+        const maplibregl = maplibreRef.current;
+        if (!map || !maplibregl) return;
+
+        const visible = validLocations.slice(0, MAX_MARKERS);
+        if (visible.length === 0) return;
+
+        if (visible.length === 1) {
+            map.easeTo({
+                center: [visible[0]!.lon, visible[0]!.lat],
+                zoom: 13,
+                duration: 350,
+            });
+            return;
+        }
+
+        const bounds = new maplibregl.LngLatBounds(
+            [visible[0]!.lon, visible[0]!.lat],
+            [visible[0]!.lon, visible[0]!.lat],
+        );
+        for (const loc of visible) bounds.extend([loc.lon, loc.lat]);
+        map.fitBounds(bounds, { padding: 56, maxZoom: 13, duration: 350 });
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- locationsKey captures set
+    }, [locationsKey, mapReady]);
+
+    useEffect(() => {
+        if (!mapReady) return;
+        const map = mapRef.current;
+        if (!map || !selectedId) return;
+        const loc = validLocations.find((l) => l.id === selectedId);
+        if (!loc) return;
+        map.easeTo({
+            center: [loc.lon, loc.lat],
+            zoom: Math.max(map.getZoom(), 13),
+            duration: 350,
+        });
+    }, [selectedId, validLocations, mapReady]);
+
+    return (
+        <View style={styles.wrap}>
+            {createElement("div", {
+                ref: containerRef,
+                className: "wasto-locations-map",
+                style: {
+                    position: "absolute",
+                    inset: 0,
+                    width: "100%",
+                    height: "100%",
+                    minHeight: 220,
+                },
+            })}
+            {mapError ? (
+                <View style={styles.errorOverlay} pointerEvents="none">
+                    <Text style={styles.errorText}>Carte indisponible : {mapError}</Text>
+                </View>
+            ) : null}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    wrap: {
+        flex: 1,
+        minHeight: 220,
+        position: "relative",
+        overflow: "hidden",
+    },
+    errorOverlay: {
+        ...StyleSheet.absoluteFillObject,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "rgba(245,245,245,0.92)",
+        paddingHorizontal: 16,
+    },
+    errorText: {
+        fontSize: 12,
+        textAlign: "center",
+        opacity: 0.7,
+    },
+});