Event Shared Utilities

1'use client'
2 
3import { cn } from '@/lib/utils'
4import { MapPin } from 'lucide-react'
5import { lazy } from 'react'
6import type { ComponentType } from 'react'
7import type { EventSignal } from './types'
8 
9// Internal types for react-leaflet component attributes (not exported component props)
10export type LeafletMarkerAttrs = {
11  position: [number, number]
12  // eslint-disable-next-line @typescript-eslint/no-explicit-any
13  icon?: any
14  zIndexOffset?: number
15  eventHandlers?: {
16    click?: () => void
17  }
18}
19 
20// Props for the lazy-loaded leaflet map component
21export interface LazyLeafletMapConfig {
22  center: [number, number]
23  zoom: number
24  style?: React.CSSProperties
25  scrollWheelZoom?: boolean
26  tileUrl?: string
27  tileAttribution?: string
28  renderMarkers: (ctx: {
29    Marker: ComponentType<LeafletMarkerAttrs>
30    L: typeof import('leaflet')
31  }) => React.ReactNode
32}
33 
34/**
35 * Lazy-loaded Leaflet map component using React.lazy.
36 * Avoids Invalid hook call errors from dynamic import module boundaries.
37 */
38export const LazyLeafletMap = lazy<ComponentType<LazyLeafletMapConfig>>(async () => {
39  // Guard against SSR - react-leaflet/leaflet require window
40  if (typeof window === 'undefined') {
41    // eslint-disable-next-line @typescript-eslint/no-explicit-any
42    return { default: (() => null) as any }
43  }
44 
45  const { MapContainer, TileLayer, Marker } = await import('react-leaflet')
46  const L = (await import('leaflet')).default
47 
48  // Inject Leaflet CSS with deduplication
49  const LEAFLET_CSS_ID = 'leaflet-css-1.9.4'
50  if (typeof document !== 'undefined' && !document.getElementById(LEAFLET_CSS_ID)) {
51    const link = document.createElement('link')
52    link.id = LEAFLET_CSS_ID
53    link.rel = 'stylesheet'
54    link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'
55    document.head.appendChild(link)
56  }
57 
58  function LazyLeafletMapComponent(props: LazyLeafletMapConfig) {
59    const tileUrl = props.tileUrl ?? 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png'
60    const tileAttribution = props.tileAttribution ?? '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>'
61 
62    return (
63      <MapContainer
64        center={props.center}
65        zoom={props.zoom}
66        style={props.style ?? { height: '100%', width: '100%' }}
67        zoomControl={true}
68        scrollWheelZoom={props.scrollWheelZoom ?? true}
69      >
70        <TileLayer attribution={tileAttribution} url={tileUrl} />
71// … truncated