Animated

seasketch · Jan 2, 2024 · 86dac77 · 86dac77
1 parent 4a84833
commit 86dac77
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 22 deletions.
diff --git a/packages/client/src/admin/data/InteractivitySettings.tsx b/packages/client/src/admin/data/InteractivitySettings.tsx
@@ -112,7 +112,7 @@ export default function InteractivitySettings({
     if (type && settings && type !== settings.type) {
       save();
     }
-  }, [type]);
+  }, [save, type, settings?.type]);
 
   const selectedType = type || settings?.type || InteractivityType.None;
   return (

diff --git a/packages/client/src/dataLayers/LayerInteractivityManager.ts b/packages/client/src/dataLayers/LayerInteractivityManager.ts
@@ -261,8 +261,8 @@ export default class LayerInteractivityManager extends EventEmitter {
 
   private statesDiffer(prev: MapContextInterface, next: MapContextInterface) {
     return (
-      prev.bannerMessages.join("") !== next.bannerMessages.join("") ||
-      prev.fixedBlocks.join("") !== next.fixedBlocks.join("") ||
+      prev.bannerMessages?.join("") !== next.bannerMessages?.join("") ||
+      prev.fixedBlocks?.join("") !== next.fixedBlocks?.join("") ||
       prev.tooltip !== next.tooltip ||
       prev.sidebarPopupContent !== next.sidebarPopupContent ||
       prev.sidebarPopupTitle !== next.sidebarPopupTitle
@@ -396,10 +396,18 @@ export default class LayerInteractivityManager extends EventEmitter {
               },
             });
           }
+          const titleContent = Mustache.render(
+            interactivitySetting.title || "",
+            {
+              ...mustacheHelpers,
+              ...top.properties,
+            }
+          );
+
           this.setState((prev) => ({
             ...prev,
             sidebarPopupContent: content,
-            sidebarPopupTitle: interactivitySetting.title,
+            sidebarPopupTitle: titleContent,
           }));
         }
       } else if (

diff --git a/packages/client/src/dataLayers/SidebarPopup.tsx b/packages/client/src/dataLayers/SidebarPopup.tsx
@@ -1,26 +1,26 @@
+import { AnimatePresence, motion } from "framer-motion";
+
 require("./sidebar-popup.css");
 
 export default function SidebarPopup(props: { content?: string, title?: string; onClose: () => void }) {
-  // const fullSidebarContext = useContext(FullSidebarContext);
-
-  // useEffect(() => {
-  //   if (props.content && fullSidebarContext.open) {
-  //     fullSidebarContext.setOpen(false);
-  //   }
-  // }, [props.content, fullSidebarContext]);
-  if (!props.content) {
-    return null;
-  }
   return (
-    <div className="sidebar-popup z-10 absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
-      <div className="w-96 bg-white text-sm h-full  pointer-events-auto shadow-xl flex flex-col right-0 absolute">
-        <div className="flex items-center p-4 py-2 bg-gray-100 border-b">
-          <h3 className="flex-1 truncate text-lg font-light">{props.title}</h3>
-          <button onClick={props.onClose} className="flex-none bg-gray-400 hover:bg-gray-500   rounded-full p-1 cursor-pointer focus:ring-blue-300"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" className="w-5 h-5 text-white"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button>
+    <AnimatePresence>
+      {props.content && <motion.div
+        transition={{ duration: 0.2, ease: "easeInOut" }}
+        initial={{ opacity: 0, translateX: 200 }}
+        animate={{ opacity: 1, translateX: 0 }}
+        exit={{ opacity: 0, translateX: 200 }}
+        className="sidebar-popup z-10 absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
+        <div className="w-72 sm:w-96 bg-white text-sm h-full  pointer-events-auto shadow-xl flex flex-col right-0 absolute">
+          <div className="flex items-center p-4 py-2 bg-gray-100 border-b">
+            <h3 className="flex-1 truncate text-lg font-light">{props.title}</h3>
+            <button onClick={props.onClose} className="flex-none bg-gray-400 hover:bg-gray-500   rounded-full p-1 cursor-pointer focus:ring-blue-300"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" className="w-5 h-5 text-white"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg></button>
+          </div>
+
+          <div className="p-4 overflow-y-auto flex-1" dangerouslySetInnerHTML={{ __html: props.content }} />
         </div>
+      </motion.div>}
 
-        <div className="p-4 overflow-y-auto flex-1" dangerouslySetInnerHTML={{ __html: props.content }} />
-      </div>
-    </div>
+    </AnimatePresence>
   )
 }