popup interaction details

GlobalFishingWatch · Apr 24, 2024 · 83c8531 · 83c8531
1 parent 0c3e027
commit 83c8531
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git a/apps/fishing-map/features/map/popups/MapPopups.tsx b/apps/fishing-map/features/map/popups/MapPopups.tsx
@@ -18,7 +18,9 @@ function MapPopups() {
 
   return (
     <Fragment>
-      {hoverInteraction && <PopupWrapper interaction={hoverInteraction} type="hover" />}
+      {hoverInteraction && !clickInteraction?.features?.length && (
+        <PopupWrapper interaction={hoverInteraction} type="hover" />
+      )}
       {clickInteraction && (
         <PopupWrapper interaction={clickInteraction} type="click" onClose={closePopup} />
       )}

diff --git a/apps/fishing-map/features/map/popups/Popup.module.css b/apps/fishing-map/features/map/popups/Popup.module.css
@@ -4,6 +4,10 @@
   z-index: 2;
 }
 
+.contentWrapper {
+  filter: var(--filter-drop-shadow);
+}
+
 .arrow {
   position: absolute;
   width: 14px;
@@ -40,7 +44,7 @@
 }
 
 .hover .content {
-  transform: translate(var(--space-XS), var(--space-S));
+  min-width: max-content;
   background: var(--color-primary-blue);
   color: var(--color-white);
   max-width: var(--sidebar-width);

diff --git a/apps/fishing-map/features/map/popups/PopupWrapper.tsx b/apps/fishing-map/features/map/popups/PopupWrapper.tsx
@@ -3,6 +3,7 @@ import cx from 'classnames'
 import { groupBy } from 'lodash'
 import { useSelector } from 'react-redux'
 import {
+  offset,
   autoPlacement,
   autoUpdate,
   useFloating,
@@ -105,9 +106,10 @@ function PopupWrapper({ interaction, type = 'hover', className = '', onClose }:
   const apiEventStatus = useSelector(selectApiEventStatus)
 
   const arrowRef = useRef<HTMLDivElement>(null)
-  const { refs, floatingStyles, placement, middlewareData /*, update, elements */ } = useFloating({
+  const { refs, floatingStyles, placement, middlewareData } = useFloating({
     whileElementsMounted: autoUpdate,
     middleware: [
+      offset(15),
       autoPlacement({ padding: 10 }),
       overflowMiddlware,
       arrow({
@@ -136,20 +138,13 @@ function PopupWrapper({ interaction, type = 'hover', className = '', onClose }:
       ),
     'category'
   )
-
-  // useEffect(() => {
-  //   if (elements.reference && elements.floating) {
-  //     const cleanup = autoUpdate(elements.reference, elements.floating, update)
-  //     return cleanup
-  //   }
-
   return (
     <div
       ref={refs.setReference}
       style={{ position: 'absolute', top, left }}
       className={cx(styles.popup, styles[type], className)}
     >
-      <div ref={refs.setFloating} style={floatingStyles}>
+      <div className={styles.contentWrapper} ref={refs.setFloating} style={floatingStyles}>
         {type === 'click' && (
           <PopupArrow ref={arrowRef} placement={placement} arrow={middlewareData.arrow} />
         )}