replaced select position element by toast

lib/src/Components/Map/Subcomponents/SelectPosition.tsx

@@ -1,52 +0,0 @@
-import { DomEvent } from 'leaflet'
-import { useEffect, useRef } from 'react'
-
-import type { Item } from '#types/Item'
-import type { LayerProps } from '#types/LayerProps'
-
-export const SelectPosition = ({
-  setSelectNewItemPosition,
-  selectNewItemPosition,
-}: {
-  setSelectNewItemPosition: React.Dispatch<React.SetStateAction<Item | LayerProps | null>>
-  selectNewItemPosition?: Item | LayerProps | null
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (containerRef.current) {
-      DomEvent.disableClickPropagation(containerRef.current)
-      DomEvent.disableScrollPropagation(containerRef.current)
-    }
-  }, [])
-
-  return (
-    <div
-      ref={containerRef}
-      className='tw:animate-pulseGrow tw:button tw:z-1000 tw:absolute tw:right-5 tw:top-4 tw:drop-shadow-md'
-    >
-      <label
-        className='tw:btn tw:btn-sm tw:rounded-2xl tw:btn-circle tw:btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
-        onClick={(e) => {
-          e.stopPropagation()
-          e.preventDefault()
-          setSelectNewItemPosition(null)
-        }}
-      >
-        <p className='tw:text-center '>✕</p>
-      </label>
-      <div className='tw:alert tw:bg-base-100 tw:text-base-content'>
-        <div>
-          {selectNewItemPosition && 'layer' in selectNewItemPosition && (
-            <span className='tw:text-lg'>
-              Select new position of <b>{selectNewItemPosition.name}</b> on the map!
-            </span>
-          )}
-          {selectNewItemPosition && 'markerIcon' in selectNewItemPosition && (
-            <span className='tw:text-lg'>Select position on the map!</span>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

lib/src/Components/Map/Subcomponents/SelectPositionToast.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useRef } from 'react'
+import { toast } from 'react-toastify'
+
+import type { Item } from '#types/Item'
+import type { LayerProps } from '#types/LayerProps'
+
+interface SelectPositionToastProps {
+  selectNewItemPosition: Item | LayerProps | null
+  setSelectNewItemPosition: React.Dispatch<React.SetStateAction<Item | LayerProps | null>>
+}
+
+export const SelectPositionToast = ({
+  selectNewItemPosition,
+  setSelectNewItemPosition,
+}: SelectPositionToastProps) => {
+  const toastIdRef = useRef<string | number | null>(null)
+
+  // Escape-Key Listener
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && selectNewItemPosition) {
+        toast.dismiss('select-position-toast')
+        toastIdRef.current = null
+        setSelectNewItemPosition(null)
+      }
+    }
+
+    window.addEventListener('keydown', handleEscape)
+    return () => window.removeEventListener('keydown', handleEscape)
+  }, [selectNewItemPosition, setSelectNewItemPosition])
+
+  useEffect(() => {
+    if (selectNewItemPosition && !toastIdRef.current) {
+      let message = ''
+      if ('layer' in selectNewItemPosition) {
+        message = `Select the new position of ${selectNewItemPosition.name} on the map!`
+      } else if ('markerIcon' in selectNewItemPosition) {
+        message = 'Select the position on the map!'
+      }
+
+      const CloseButton = () => (
+        <button
+          onClick={() => {
+            toast.dismiss('select-position-toast')
+            toastIdRef.current = null
+            setSelectNewItemPosition(null)
+          }}
+          className='tw:btn tw:btn-sm tw:btn-ghost tw:btn-circle tw:absolute tw:top-0 tw:right-0'
+        >
+          ✕
+        </button>
+      )
+
+      toastIdRef.current = toast(
+        <div>
+          {message}
+          <CloseButton />
+        </div>,
+        {
+          toastId: 'select-position-toast',
+          autoClose: false,
+          closeButton: false,
+          closeOnClick: false,
+          draggable: false,
+        },
+      )
+    }
+
+    if (!selectNewItemPosition && toastIdRef.current) {
+      toast.dismiss(toastIdRef.current)
+      toastIdRef.current = null
+    }
+  }, [selectNewItemPosition, setSelectNewItemPosition])
+
+  return null
+}

lib/src/Components/Map/UtopiaMapInner.tsx

@@ -42,7 +42,7 @@ import { LayerControl } from './Subcomponents/Controls/LayerControl'
 import { SearchControl } from './Subcomponents/Controls/SearchControl'
 import { TagsControl } from './Subcomponents/Controls/TagsControl'
 import { TextView } from './Subcomponents/ItemPopupComponents/TextView'
-import { SelectPosition } from './Subcomponents/SelectPosition'
+import { SelectPositionToast } from './Subcomponents/SelectPositionToast'
 
 import type { Feature, Geometry as GeoJSONGeometry, GeoJsonObject } from 'geojson'
 
@@ -317,12 +317,10 @@ export function UtopiaMapInner({
       )}
       <MapEventListener />
       <AddButton triggerAction={setSelectNewItemPosition} />
-      {selectNewItemPosition != null && (
-        <SelectPosition
-          selectNewItemPosition={selectNewItemPosition}
-          setSelectNewItemPosition={setSelectNewItemPosition}
-        />
-      )}
+      <SelectPositionToast
+        selectNewItemPosition={selectNewItemPosition}
+        setSelectNewItemPosition={setSelectNewItemPosition}
+      />
     </div>
   )
 }