@wasto/cms-components 1.5.10 → 1.5.12

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

@@ -1,108 +1,108 @@
-import { Pressable, StyleSheet, View, type LayoutChangeEvent } from "react-native";
-import { MapPin } from "lucide-react-native";
-import { useMemo, useState, type ReactNode } from "react";
-import {
-    LOCATION_CATEGORY_META,
-    type LocationCategory,
-    type MapLocation,
-} from "../../hooks/useLocations";
-import { getContrastColor } from "../../helpers/getContrastColor";
-
-export type LocationsMapViewProps = {
-    locations: MapLocation[];
-    center: { lat: number; lon: number };
-    selectedId?: string | null;
-    onSelect: (location: MapLocation) => void;
-};
-
-const PIN = 32;
-
-export function LocationsMapView({
-    locations,
-    center,
-    selectedId,
-    onSelect,
-}: LocationsMapViewProps): ReactNode {
-    const [size, setSize] = useState({ width: 1, height: 1 });
-
-    const bounds = useMemo(() => {
-        const lats = locations.map((l) => l.lat).concat(center.lat);
-        const lons = locations.map((l) => l.lon).concat(center.lon);
-        const minLat = Math.min(...lats);
-        const maxLat = Math.max(...lats);
-        const minLon = Math.min(...lons);
-        const maxLon = Math.max(...lons);
-        const latPad = Math.max((maxLat - minLat) * 0.18, 0.008);
-        const lonPad = Math.max((maxLon - minLon) * 0.18, 0.008);
-        return {
-            minLat: minLat - latPad,
-            maxLat: maxLat + latPad,
-            minLon: minLon - lonPad,
-            maxLon: maxLon + lonPad,
-        };
-    }, [center.lat, center.lon, locations]);
-
-    const onLayout = (event: LayoutChangeEvent) => {
-        const { width, height } = event.nativeEvent.layout;
-        if (width > 0 && height > 0) setSize({ width, height });
-    };
-
-    const toXY = (lat: number, lon: number) => {
-        const x =
-            ((lon - bounds.minLon) / Math.max(bounds.maxLon - bounds.minLon, 0.0001)) *
-            size.width;
-        const y =
-            (1 - (lat - bounds.minLat) / Math.max(bounds.maxLat - bounds.minLat, 0.0001)) *
-            size.height;
-        return { x, y };
-    };
-
-    return (
-        <View style={styles.canvas} onLayout={onLayout}>
-            {locations.map((loc: MapLocation) => {
-                const { x, y } = toXY(loc.lat, loc.lon);
-                const color = LOCATION_CATEGORY_META[loc.category as LocationCategory].color;
-                const selected = loc.id === selectedId;
-                const iconColor = getContrastColor(color);
-                return (
-                    <Pressable
-                        key={loc.id}
-                        onPress={() => onSelect(loc)}
-                        style={[
-                            styles.marker,
-                            {
-                                left: x - PIN / 2,
-                                top: y - PIN / 2,
-                                backgroundColor: color,
-                                borderColor: selected ? "#111827" : "#ffffff",
-                                transform: [{ scale: selected ? 1.12 : 1 }],
-                                zIndex: selected ? 2 : 1,
-                            },
-                        ]}
-                        accessibilityLabel={loc.name}
-                    >
-                        <MapPin size={16} color={iconColor} />
-                    </Pressable>
-                );
-            })}
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    canvas: {
-        flex: 1,
-        minHeight: 220,
-        backgroundColor: "#E8E8E8",
-        overflow: "hidden",
-    },
-    marker: {
-        position: "absolute",
-        width: PIN,
-        height: PIN,
-        borderRadius: PIN / 2,
-        borderWidth: 3,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-});
+import { Pressable, StyleSheet, View, type LayoutChangeEvent } from "react-native";
+import { MapPin } from "lucide-react-native";
+import { useMemo, useState, type ReactNode } from "react";
+import {
+    LOCATION_CATEGORY_META,
+    type LocationCategory,
+    type MapLocation,
+} from "../../hooks/useLocations";
+import { getContrastColor } from "../../helpers/getContrastColor";
+
+export type LocationsMapViewProps = {
+    locations: MapLocation[];
+    center: { lat: number; lon: number };
+    selectedId?: string | null;
+    onSelect: (location: MapLocation) => void;
+};
+
+const PIN = 32;
+
+export function LocationsMapView({
+    locations,
+    center,
+    selectedId,
+    onSelect,
+}: LocationsMapViewProps): ReactNode {
+    const [size, setSize] = useState({ width: 1, height: 1 });
+
+    const bounds = useMemo(() => {
+        const lats = locations.map((l) => l.lat).concat(center.lat);
+        const lons = locations.map((l) => l.lon).concat(center.lon);
+        const minLat = Math.min(...lats);
+        const maxLat = Math.max(...lats);
+        const minLon = Math.min(...lons);
+        const maxLon = Math.max(...lons);
+        const latPad = Math.max((maxLat - minLat) * 0.18, 0.008);
+        const lonPad = Math.max((maxLon - minLon) * 0.18, 0.008);
+        return {
+            minLat: minLat - latPad,
+            maxLat: maxLat + latPad,
+            minLon: minLon - lonPad,
+            maxLon: maxLon + lonPad,
+        };
+    }, [center.lat, center.lon, locations]);
+
+    const onLayout = (event: LayoutChangeEvent) => {
+        const { width, height } = event.nativeEvent.layout;
+        if (width > 0 && height > 0) setSize({ width, height });
+    };
+
+    const toXY = (lat: number, lon: number) => {
+        const x =
+            ((lon - bounds.minLon) / Math.max(bounds.maxLon - bounds.minLon, 0.0001)) *
+            size.width;
+        const y =
+            (1 - (lat - bounds.minLat) / Math.max(bounds.maxLat - bounds.minLat, 0.0001)) *
+            size.height;
+        return { x, y };
+    };
+
+    return (
+        <View style={styles.canvas} onLayout={onLayout}>
+            {locations.map((loc: MapLocation) => {
+                const { x, y } = toXY(loc.lat, loc.lon);
+                const color = LOCATION_CATEGORY_META[loc.category as LocationCategory].color;
+                const selected = loc.id === selectedId;
+                const iconColor = getContrastColor(color);
+                return (
+                    <Pressable
+                        key={loc.id}
+                        onPress={() => onSelect(loc)}
+                        style={[
+                            styles.marker,
+                            {
+                                left: x - PIN / 2,
+                                top: y - PIN / 2,
+                                backgroundColor: color,
+                                borderColor: selected ? "#111827" : "#ffffff",
+                                transform: [{ scale: selected ? 1.12 : 1 }],
+                                zIndex: selected ? 2 : 1,
+                            },
+                        ]}
+                        accessibilityLabel={loc.name}
+                    >
+                        <MapPin size={16} color={iconColor} />
+                    </Pressable>
+                );
+            })}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    canvas: {
+        flex: 1,
+        minHeight: 220,
+        backgroundColor: "#E8E8E8",
+        overflow: "hidden",
+    },
+    marker: {
+        position: "absolute",
+        width: PIN,
+        height: PIN,
+        borderRadius: PIN / 2,
+        borderWidth: 3,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});