handle styled animated info

Author: ohansemmanuel

showcase/src/Body.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import styled from 'styled-components'
 import { Router } from '@reach/router'
 import { HEADER_ALLOWANCE } from './utils/constants'
@@ -21,7 +21,8 @@ import { INFO } from './constants/patternInfo'
 
 import GithubLogo from './assets/github_logo.svg'
 import InfoIllustration from './assets/light_bulb.svg'
-import { useAnimatedBulb } from './content/AnimatedBulb'
+import { useAnimatedBulb } from './content/useAnimatedBulb'
+import { useAnimatedInfo } from './content/useAnimatedInfo'
 
 const StyledAppBody = styled.div`
  background: #191921;
@@ -51,17 +52,24 @@ const PRs = PR_IDs.map(id => `${PR_ROOT}/${id}`)
 
 const Header = ({ title, patternNumber }) => {
  // animated el
- const [lightBulbEl, setlightBulbEl] = useState(null)
+ const [{ lightBulbEl, infoEl, infoTextEl }, setRefState] = useState({})
 
- const setLightBulbElRef = useCallback(node => {
+ const setRef = useCallback(node => {
  if (node !== null) {
- setlightBulbEl(node)
+ setRefState(prevRefState => ({
+ ...prevRefState,
+ [node.dataset.refkey]: node
+ }))
  }
  }, [])
 
  const animatedBulbTimeline = useAnimatedBulb({
  el: lightBulbEl
  })
+ const animatedInfoTimeline = useAnimatedInfo({
+ bgEl: infoEl,
+ textEl: infoTextEl
+ })
 
  // toggle info display
  const [isInfoShown, setInfoShown] = useState(false)
@@ -71,13 +79,29 @@ const Header = ({ title, patternNumber }) => {
  animatedBulbTimeline.replay()
  }
 
+ useEffect(() => {
+ if (!isInfoShown) {
+ return
+ }
+
+ const timer = setTimeout(() => {
+ animatedInfoTimeline.replay()
+ }, 100)
+
+ return () => clearTimeout(timer)
+ }, [isInfoShown])
+
  return (
  <StyledHeader>
  {isInfoShown && (
- <StyledInfoContainer>{INFO[patternNumber]}</StyledInfoContainer>
+ <StyledInfoContainer ref={setRef} data-refkey='infoEl'>
+ <p ref={setRef} data-refkey='infoTextEl'>
+ {INFO[patternNumber]}
+ </p>
+ </StyledInfoContainer>
  )}
  <H1>{title}</H1>
- <div ref={setLightBulbElRef}>
+ <div ref={setRef} data-refkey='lightBulbEl'>
  <InfoIllustration
  style={{ width: '30px', marginLeft: '5px', cursor: 'pointer' }}
  onClick={toggleInfo}
@@ -155,6 +179,7 @@ const RouteComponent = ({ pattern, patternNumber, isMediumOrLarger }) => {
  </StyledContentContainer>
  )
 }
+
 const Body = ({ setShowSidebar, isMediumOrLarger }) => {
  const toggleSidebar = () => setShowSidebar(val => !val)
 

showcase/src/constants/patternInfo.js

@@ -1,7 +1,6 @@
 const THE_MEDIUM_CLAP =
- "The Medium clap is such a great component to build. It's practical and poses real world problems. Note how the 'before' and 'after' demos behave in the same way but are powered by different mechanisms: an higher order component, and a custom hook!"
+ "The Medium clap is a great example component. It's practical and poses real world challenges. Note how the 'before' and 'after' demos behave similar ways, but are powered by different patterns: an higher order component, and a custom hook! Don't forget to check the code implementation 😉"
 
 export const INFO = {
- '1': THE_MEDIUM_CLAP,
- '2': 'Hola hola!!!'
+ '1': THE_MEDIUM_CLAP
 }

showcase/src/content/StyledContent.js

@@ -21,6 +21,18 @@ export const SCREEN_SIZES = {
  xl: 1140
 }
 
+export const media = Object.keys(SCREEN_SIZES).reduce((accumulator, label) => {
+ // use em in breakpoints to work properly cross-browser and support users
+ // changing their browsers font-size: https://zellwk.com/blog/media-query-units/
+ const emSize = SCREEN_SIZES[label] / 16
+ accumulator[label] = (...args) => css`
+ @media (min-width: ${emSize}em) {
+ ${css(...args)};
+ }
+ `
+ return accumulator
+}, {})
+
 export const StyledFloatingBtn = styled.button`
  background: ${() => PALE_RED};
  width: 71px;
@@ -47,24 +59,27 @@ export const Header = styled.div`
 `
 
 export const StyledInfoContainer = styled.aside`
- position: absolute;
- top: 0;
- background: red;
-`
-
-// "0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)"
+ overflow: hidden;
+ padding: 5px;
+ z-index: 10;
+ position: fixed;
+ top: initial;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ border: 0;
+ background: #191921;
+ border-top: 1px solid white;
 
-export const media = Object.keys(SCREEN_SIZES).reduce((accumulator, label) => {
- // use em in breakpoints to work properly cross-browser and support users
- // changing their browsers font-size: https://zellwk.com/blog/media-query-units/
- const emSize = SCREEN_SIZES[label] / 16
- accumulator[label] = (...args) => css`
- @media (min-width: ${emSize}em) {
- ${css(...args)};
- }
- `
- return accumulator
-}, {})
+ ${media.md`
+ position: absolute;
+ top: 20px;
+ bottom: initial;
+ right: initial;
+ left: initial;
+ border: 1px solid white;
+`}
+`
 
 export const StyledContentContainer = styled.div`
  padding: ${() => `${HEADER_ALLOWANCE}vh ${SIDEBAR_LEFT_PADDING}vw`};

showcase/src/content/AnimatedBulb.js renamed to showcase/src/content/useAnimatedBulb.js

@@ -1,4 +1,4 @@
-import React, { useState, useLayoutEffect } from 'react'
+import { useState, useLayoutEffect } from 'react'
 import mojs from 'mo-js'
 
 export const useAnimatedBulb = ({ el }) => {

showcase/src/content/useAnimatedInfo.js

@@ -0,0 +1,72 @@
+import { useState, useLayoutEffect } from 'react'
+import mojs from 'mo-js'
+
+export const useAnimatedInfo = ({ bgEl, textEl }) => {
+ const [animationTimeline, setAnimationTimeline] = useState(
+ new mojs.Timeline()
+ )
+
+ useLayoutEffect(() => {
+ if (!bgEl) {
+ return
+ }
+
+ const shiftCurve = mojs.easing.path(
+ 'M0,100 C50,100 50,100 50,50 C50,0 50,0 100,0'
+ )
+ const scaleCurveBase = mojs.easing.path(
+ 'M0,100 C21.3776817,95.8051376 50,77.3262711 50,-700 C50,80.1708527 76.6222458,93.9449005 100,100'
+ )
+ const scaleCurve = p => {
+ return 1 + scaleCurveBase(p)
+ }
+ const nScaleCurve = p => {
+ return 1 - scaleCurveBase(p) / 10
+ }
+
+ const bgAnimate = new mojs.Html({
+ el: bgEl,
+ opacity: { 0: 1 },
+ duration: 350
+ })
+
+ const movingRect = new mojs.Shape({
+ parent: bgEl,
+ shape: 'rect',
+ fill: { '#F64040': '#F64040', curve: scaleCurve },
+ radius: 10,
+ rx: 3,
+ x: { [-125]: 600, easing: shiftCurve },
+ y: 50,
+ scaleX: { 1: 1, curve: scaleCurve },
+ scaleY: { 1: 1, curve: nScaleCurve },
+ origin: { '0 50%': '100% 50%', easing: shiftCurve },
+ duration: 1000,
+ isShowEnd: false
+ })
+
+ const burst = new mojs.Burst({
+ parent: bgEl,
+ radius: { 0: 100 },
+ x: { '50%': '90%' },
+ count: 5,
+ children: {
+ shape: 'polygon',
+ fill: { cyan: 'yellow' },
+ radius: 20,
+ angle: { 360: 0 },
+ duration: 300
+ }
+ })
+
+ const updatedAnimationTimeline = animationTimeline.add([
+ bgAnimate,
+ movingRect,
+ burst
+ ])
+
+ setAnimationTimeline(updatedAnimationTimeline)
+ }, [bgEl, animationTimeline])
+
+ return animationTimeline
+}