Merge pull request #60 from agile-ts/develop

Develop

Author: bennobuilder

src/_pages/LandingPage/components/HeaderView/components/Astronaut/astronauts/AstronautDark.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 
 type Props = {
-  onMouseEnter: (event: React.MouseEvent<SVGGElement, MouseEvent>) => void;
+  onMouseEnter?: (event: React.MouseEvent<SVGGElement, MouseEvent>) => void;
+  onMouseLeave?: (event: React.MouseEvent<SVGGElement, MouseEvent>) => void;
   className?: string;
 };
 
 const AstronautDark: React.FC<Props> = (props) => {
-  const { onMouseEnter, className } = props;
+  const { onMouseEnter, onMouseLeave, className } = props;
   return (
     <svg
       className={className}
@@ -20,7 +21,8 @@ const AstronautDark: React.FC<Props> = (props) => {
       </defs>
       <g
         clipPath="url(#_clipPath_DJqdLJjPMCQuZbt7zMmdGqTw0kfPk0A5)"
-        onMouseEnter={onMouseEnter}>
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}>
         <path
           fill="none"
           stroke="#A2C1E4"

src/_pages/LandingPage/components/HeaderView/components/Astronaut/astronauts/AstronautLight.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 
 type Props = {
-  onMouseEnter: (event: React.MouseEvent<SVGGElement, MouseEvent>) => void;
+  onMouseEnter?: (event: React.MouseEvent<SVGGElement, MouseEvent>) => void;
+  onMouseLeave?: (event: React.MouseEvent<SVGGElement, MouseEvent>) => void;
   className?: string;
 };
 
 const AstronautLight: React.FC<Props> = (props) => {
-  const { onMouseEnter, className } = props;
+  const { onMouseEnter, onMouseLeave, className } = props;
   return (
     <svg
       className={className}
@@ -20,7 +21,8 @@ const AstronautLight: React.FC<Props> = (props) => {
       </defs>
       <g
         clipPath="url(#_clipPath_STwyEDuuaNbGIKbAX7KqxcyghTzV9bZj)"
-        onMouseEnter={onMouseEnter}>
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}>
         <path
           fill="none"
           stroke="#A2C1E4"

src/_pages/LandingPage/components/HeaderView/components/Astronaut/index.tsx

@@ -12,7 +12,8 @@ type Props = { className?: string };
 const Astronaut: React.FC<Props> = (props) => {
   const { className } = props;
   const [timing] = useState(200);
-  const [isRaised, setIsRaised] = React.useState(false);
+  const [isRaised, setIsRaised] = useState(false);
+  const [isOnAstronaut, setIsOnAstronaut] = useState(false);
   const animated_Astronaut = useSpring({
     transform: isRaised ? `translateY(-${30}px)` : `translateY(0px)`,
     config: {
@@ -23,10 +24,20 @@ const Astronaut: React.FC<Props> = (props) => {
   });
   const dark = useAgile(core.ui.ASTRONAUT_DARK);
 
+  const [mounted, setMounted] = useState(false);
+  // The astronaut theme on SSR is always the default theme but the site theme
+  // can be in a different mode. React hydration doesn't update DOM styles
+  // that come from SSR. Hence force a re-render after mounting to apply the
+  // current relevant styles. There will be a flash seen of the original
+  // styles seen using this current approach but that's probably ok. Fixing
+  // the flash will require changing the theming approach and is not worth it
+  // at this point.
   useEffect(() => {
-    if (!isRaised) {
-      return;
-    }
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isRaised) return;
 
     const timeoutId = setTimeout(() => {
       core.ui.toggleAstronautColor(!dark);
@@ -36,19 +47,35 @@ const Astronaut: React.FC<Props> = (props) => {
     return () => clearTimeout(timeoutId);
   }, [isRaised, timing]);
 
-  function trigger() {
-    setIsRaised(true);
-  }
+  const onMouseEnter = () => {
+    if (!isOnAstronaut) {
+      setIsOnAstronaut(true);
+      setIsRaised(true);
+    }
+  };
+
+  const onMouseLeave = () => {
+    // to prevent endless bouncer
+    setTimeout(() => {
+      setIsOnAstronaut(false);
+    }, 1100);
+  };
 
   return (
-    <div className={clsx(styles.Container, className)}>
+    <div key={String(mounted)} className={clsx(styles.Container, className)}>
       <animated.div
         style={animated_Astronaut}
         className={styles.ImageContainer}>
         {dark ? (
-          <AstronautDark onMouseEnter={trigger} />
+          <AstronautDark
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+          />
         ) : (
-          <AstronautLight onMouseEnter={trigger} />
+          <AstronautLight
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+          />
         )}
       </animated.div>
       <div className={styles.Text}>Poke me 👆 to mutate my color State.</div>