@wasto/cms-components 1.5.10

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

@@ -0,0 +1,527 @@
+import { useEffect, useMemo, useRef, useState, type ComponentType, type ReactNode } from "react";
+import {
+    ActivityIndicator,
+    Pressable,
+    ScrollView,
+    StyleSheet,
+    Text,
+    View,
+} from "react-native";
+import { ChevronRight, MapPin, X } from "lucide-react-native";
+import Animated, {
+    Easing,
+    interpolate,
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+} from "react-native-reanimated";
+import { useTheme } from "../../contexts/ThemeContext";
+import type { ResolvedTheme } from "../../types/Theme";
+import {
+    LOCATION_CATEGORY_META,
+    useLocations,
+    type LocationCategory,
+    type MapLocation,
+} from "../../hooks/useLocations";
+import { LocationSheet } from "./LocationSheet";
+import type { LocationsMapViewProps } from "./LocationsMapView";
+import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
+import { getContrastColor } from "../../helpers/getContrastColor";
+import { Header } from "../header/Header";
+import { SPACE } from "../../helpers/layout";
+
+export type LocationsMapProps = {
+    fullScreen?: boolean;
+    showFilters?: boolean;
+    /** Header flottant au-dessus de la carte (titre + cloche + profil). */
+    overlayHeader?: boolean;
+    overlayTitle?: string;
+};
+
+const CATEGORIES = Object.keys(LOCATION_CATEGORY_META) as LocationCategory[];
+const NOOP_NAV = { canGoBack: () => false, goBack: () => undefined };
+const PANEL_OPEN = { duration: 300, easing: Easing.out(Easing.cubic) };
+const PANEL_CLOSE = { duration: 260, easing: Easing.in(Easing.cubic) };
+
+export type LocationsMapShellProps = LocationsMapProps & {
+    MapCanvas: ComponentType<LocationsMapViewProps>;
+};
+
+function RoundCtrl({
+    onPress,
+    children,
+    label,
+    radius,
+    backgroundColor,
+    borderColor,
+}: {
+    onPress: () => void;
+    children: ReactNode;
+    label: string;
+    radius: number;
+    backgroundColor: string;
+    borderColor: string;
+}) {
+    return (
+        <Pressable
+            onPress={onPress}
+            accessibilityLabel={label}
+            style={[
+                styles.roundCtrl,
+                {
+                    borderRadius: radius,
+                    backgroundColor,
+                    borderColor,
+                },
+            ]}
+        >
+            {children}
+        </Pressable>
+    );
+}
+
+function FilterPanel({
+    title,
+    onClose,
+    children,
+}: {
+    title: string;
+    onClose: () => void;
+    children: ReactNode;
+}) {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const progress = useSharedValue(0);
+    const widthSv = useSharedValue(0);
+    const closing = useRef(false);
+    const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    useEffect(() => {
+        return () => {
+            if (closeTimer.current) clearTimeout(closeTimer.current);
+        };
+    }, []);
+
+    const close = () => {
+        if (closing.current) return;
+        closing.current = true;
+        progress.value = withTiming(0, PANEL_CLOSE);
+        closeTimer.current = setTimeout(onClose, PANEL_CLOSE.duration);
+    };
+
+    const panelStyle = useAnimatedStyle(() => {
+        const width = widthSv.value;
+        if (width <= 0) return { opacity: 0 };
+        return {
+            opacity: 1,
+            transform: [
+                { translateX: interpolate(progress.value, [0, 1], [-width, 0]) },
+            ],
+        };
+    }, []);
+
+    return (
+        <Animated.View
+            onLayout={(event) => {
+                const nextWidth = event.nativeEvent.layout.width;
+                if (nextWidth <= 0) return;
+                const firstLayout = widthSv.value <= 0;
+                widthSv.value = nextWidth;
+                if (firstLayout) progress.value = withTiming(1, PANEL_OPEN);
+            }}
+            style={[styles.filterPanelOuter, panelStyle]}
+        >
+            <View
+                style={[
+                    styles.filterPanel,
+                    cardStyle(theme),
+                    { borderRadius: t.radii.lg },
+                ]}
+            >
+                <View style={styles.filterPanelHead}>
+                    <Text style={[styles.filterPanelTitle, { color: theme.colors.onSurface }]}>
+                        {title}
+                    </Text>
+                    <Pressable
+                        onPress={close}
+                        hitSlop={8}
+                        accessibilityRole="button"
+                        accessibilityLabel="Fermer les filtres"
+                        style={[
+                            styles.closeBtn,
+                            {
+                                backgroundColor: theme.colors.background,
+                                borderRadius: t.radii.pill,
+                            },
+                        ]}
+                    >
+                        <X size={16} color={theme.colors.onSurface} />
+                    </Pressable>
+                </View>
+                {children}
+            </View>
+        </Animated.View>
+    );
+}
+
+export function LocationsMapShell({
+    fullScreen = false,
+    showFilters = true,
+    overlayHeader = false,
+    overlayTitle = "Carte",
+    MapCanvas,
+}: LocationsMapShellProps): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const themedStyles = createThemedStyles(theme);
+    const { locations, isLoading, error, center } = useLocations();
+    const [filters, setFilters] = useState<Set<LocationCategory>>(new Set());
+    const [selected, setSelected] = useState<MapLocation | null>(null);
+    const [filtersOpen, setFiltersOpen] = useState(false);
+
+    const toggle = (category: LocationCategory) => {
+        setFilters((prev) => {
+            const next = new Set(prev);
+            if (next.has(category)) next.delete(category);
+            else next.add(category);
+            return next;
+        });
+    };
+
+    const visible = useMemo(() => {
+        if (filters.size === 0) return locations;
+        return locations.filter((loc) => filters.has(loc.category));
+    }, [filters, locations]);
+
+    const selectedCategories = CATEGORIES.filter((c) => filters.has(c));
+    const showChipBar = selectedCategories.length > 0;
+
+    const filterLabel =
+        filters.size === 0
+            ? "Tous les points"
+            : filters.size === 1
+              ? LOCATION_CATEGORY_META[[...filters][0]!].label
+              : `${filters.size} filtres`;
+
+    const selectLocation = (location: MapLocation) => {
+        setSelected(location);
+        setFiltersOpen(false);
+    };
+
+    const roundRadius = t.radii.pill;
+
+    return (
+        <View style={[styles.wrap, fullScreen && styles.fullScreen]}>
+            <View
+                style={[
+                    styles.mapShell,
+                    themedStyles.mapShell,
+                    fullScreen ? styles.mapShellFull : styles.mapShellFixed,
+                ]}
+            >
+                {isLoading ? (
+                    <View style={styles.center}>
+                        <ActivityIndicator color={theme.colors.primary} />
+                        <Text style={themedStyles.muted}>Chargement de la carte…</Text>
+                    </View>
+                ) : (
+                    <>
+                        <MapCanvas
+                            locations={visible}
+                            center={center}
+                            selectedId={selected?.id}
+                            onSelect={selectLocation}
+                        />
+                        {error ? (
+                            <View style={[styles.center, styles.mapOverlayMessage]} pointerEvents="none">
+                                <Text style={{ color: theme.colors.error, textAlign: "center" }}>
+                                    {error}
+                                </Text>
+                            </View>
+                        ) : null}
+                        {!error && visible.length === 0 ? (
+                            <View style={[styles.center, styles.mapOverlayMessage]} pointerEvents="none">
+                                <Text style={themedStyles.muted}>Aucun point à afficher.</Text>
+                            </View>
+                        ) : null}
+                    </>
+                )}
+            </View>
+
+            <View style={styles.topOverlay} pointerEvents="box-none">
+                {overlayHeader ? (
+                    <Header
+                        overlay
+                        options={{ title: overlayTitle, headerBackVisible: false }}
+                        route={{ name: overlayTitle }}
+                        navigation={NOOP_NAV}
+                    />
+                ) : null}
+
+                {showFilters ? (
+                    <View style={styles.filtersOverlay} pointerEvents="box-none">
+                        {showChipBar ? (
+                            <ScrollView
+                                horizontal
+                                showsHorizontalScrollIndicator={false}
+                                style={styles.chipScrollView}
+                                contentContainerStyle={styles.chipScroll}
+                            >
+                                <RoundCtrl
+                                    label="Ouvrir les filtres"
+                                    onPress={() => setFiltersOpen(true)}
+                                    radius={roundRadius}
+                                    backgroundColor={theme.colors.surface}
+                                    borderColor={theme.colors.border}
+                                >
+                                    <ChevronRight size={16} color={theme.colors.onSurface} />
+                                </RoundCtrl>
+                                {selectedCategories.map((category) => {
+                                    const meta = LOCATION_CATEGORY_META[category];
+                                    const fg = getContrastColor(meta.color);
+                                    return (
+                                        <Pressable
+                                            key={category}
+                                            onPress={() => toggle(category)}
+                                            style={[
+                                                styles.chip,
+                                                {
+                                                    backgroundColor: meta.color,
+                                                    borderRadius: t.radii.pill,
+                                                },
+                                            ]}
+                                        >
+                                            <Text style={[styles.chipText, { color: fg }]}>
+                                                {meta.label}
+                                            </Text>
+                                        </Pressable>
+                                    );
+                                })}
+                                <RoundCtrl
+                                    label="Effacer les filtres"
+                                    onPress={() => setFilters(new Set())}
+                                    radius={roundRadius}
+                                    backgroundColor={theme.colors.surface}
+                                    borderColor={theme.colors.border}
+                                >
+                                    <X size={16} color={theme.colors.onSurface} />
+                                </RoundCtrl>
+                            </ScrollView>
+                        ) : (
+                            <Pressable
+                                onPress={() => setFiltersOpen(true)}
+                                style={[
+                                    styles.filterTrigger,
+                                    cardStyle(theme),
+                                    { borderRadius: t.radii.pill },
+                                ]}
+                            >
+                                <Text style={[styles.filterTriggerText, { color: theme.colors.onSurface }]}>
+                                    {filterLabel}
+                                </Text>
+                                <ChevronRight size={16} color={theme.colors.onSurface} />
+                            </Pressable>
+                        )}
+                        {filtersOpen ? (
+                            <FilterPanel title={filterLabel} onClose={() => setFiltersOpen(false)}>
+                                <View style={styles.filterList}>
+                                    {CATEGORIES.map((category) => {
+                                        const meta = LOCATION_CATEGORY_META[category];
+                                        const active = filters.has(category);
+                                        const bg = active ? meta.color : theme.colors.background;
+                                        const fg = active ? getContrastColor(meta.color) : t.colors.muted;
+                                        return (
+                                            <Pressable
+                                                key={category}
+                                                onPress={() => toggle(category)}
+                                                style={[
+                                                    styles.filterRow,
+                                                    {
+                                                        backgroundColor: bg,
+                                                        borderRadius: t.radii.md,
+                                                    },
+                                                ]}
+                                            >
+                                                <MapPin size={16} color={fg} />
+                                                <Text style={[styles.filterRowText, { color: fg }]}>
+                                                    {meta.label}
+                                                </Text>
+                                            </Pressable>
+                                        );
+                                    })}
+                                </View>
+                            </FilterPanel>
+                        ) : null}
+                    </View>
+                ) : null}
+            </View>
+
+            {selected ? (
+                <View style={styles.sheetOverlay} pointerEvents="box-none">
+                    <LocationSheet location={selected} onClose={() => setSelected(null)} />
+                </View>
+            ) : null}
+        </View>
+    );
+}
+
+const createThemedStyles = (theme: ResolvedTheme) =>
+    StyleSheet.create({
+        mapShell: {
+            backgroundColor: theme.colors.surface,
+            borderRadius: theme.radii.lg,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            ...theme.shadow.soft,
+        },
+        muted: {
+            color: theme.colors.muted ?? theme.colors.onBackground,
+        },
+    });
+
+const styles = StyleSheet.create({
+    wrap: {
+        position: "relative",
+    },
+    fullScreen: {
+        flex: 1,
+    },
+    topOverlay: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 2,
+    },
+    filtersOverlay: {
+        overflow: "visible",
+        paddingBottom: 8,
+    },
+    filterTrigger: {
+        alignSelf: "flex-start",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+        marginHorizontal: SPACE.pageX,
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+    },
+    filterTriggerText: {
+        fontSize: 14,
+        fontWeight: "700",
+    },
+    chipScrollView: {
+        alignSelf: "stretch",
+        flexGrow: 0,
+        overflow: "visible",
+    },
+    chipScroll: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+        paddingHorizontal: SPACE.pageX,
+        paddingVertical: 8,
+        flexGrow: 0,
+    },
+    chip: {
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+    },
+    chipText: {
+        fontSize: 13,
+        fontWeight: "700",
+    },
+    roundCtrl: {
+        width: SPACE.iconHit,
+        height: SPACE.iconHit,
+        alignItems: "center",
+        justifyContent: "center",
+        borderWidth: 1,
+        ...({
+            shadowColor: "#0F172A",
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.08,
+            shadowRadius: 3,
+            elevation: 2,
+        } as const),
+    },
+    closeBtn: {
+        width: 28,
+        height: 28,
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+        flexShrink: 0,
+    },
+    filterPanelOuter: {
+        position: "absolute",
+        top: 0,
+        left: SPACE.pageX,
+        right: SPACE.pageX,
+        zIndex: 4,
+    },
+    filterPanel: {
+        overflow: "hidden",
+        paddingHorizontal: 16,
+        paddingTop: 18,
+        paddingBottom: 20,
+        gap: 16,
+    },
+    filterPanelHead: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    filterPanelTitle: {
+        fontSize: 15,
+        fontWeight: "800",
+    },
+    filterList: {
+        gap: 10,
+    },
+    filterRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+        paddingHorizontal: 14,
+        paddingVertical: 12,
+    },
+    filterRowText: {
+        fontSize: 14,
+        fontWeight: "600",
+    },
+    mapShell: {
+        overflow: "hidden",
+        position: "relative",
+    },
+    mapShellFixed: {
+        height: 320,
+    },
+    mapShellFull: {
+        flex: 1,
+        minHeight: 280,
+        borderRadius: 0,
+        borderWidth: 0,
+    },
+    sheetOverlay: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        zIndex: 3,
+        justifyContent: "flex-end",
+    },
+    center: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 16,
+        gap: 8,
+    },
+    mapOverlayMessage: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: "rgba(255,255,255,0.72)",
+        zIndex: 1,
+    },
+});

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

@@ -0,0 +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",
+    },
+});