fix: update #3

Author: ohansemmanuel

showcase/src/patterns/03.js

@@ -1,9 +1,11 @@
 import React, {
  useState,
+ useCallback,
  useEffect,
+ useLayoutEffect,
  useContext,
- useMemo,
  useRef,
+ useMemo,
  createContext
 } from 'react'
 
@@ -13,102 +15,113 @@ import { generateRandomNumber } from '../utils/generateRandomNumber'
 import styles from './index.css'
 
 /** ====================================
- * 🔰Hook
- Hook for Animation
-==================================== **/
+  * 🔰Hook
+  Hook for Animation
+ ==================================== **/
 
-const useClapAnimation = ({ duration: tlDuration }) => {
+const useClapAnimation = ({
+ duration: tlDuration,
+ bounceEl,
+ fadeEl,
+ burstEl
+}) => {
  const [animationTimeline, setAnimationTimeline] = useState(
  new mojs.Timeline()
  )
 
- useEffect(
- () => {
- const triangleBurst = new mojs.Burst({
- parent: '#clap',
- radius: { 50: 95 },
- count: 5,
- angle: 30,
- children: {
- shape: 'polygon',
- radius: { 6: 0 },
- scale: 1,
- stroke: 'rgba(211,84,0 ,0.5)',
- strokeWidth: 2,
- angle: 210,
- delay: 30,
- speed: 0.2,
- easing: mojs.easing.bezier(0.1, 1, 0.3, 1),
- duration: tlDuration
- }
- })
-
- const circleBurst = new mojs.Burst({
- parent: '#clap',
- radius: { 50: 75 },
- angle: 25,
- duration: tlDuration,
- children: {
- shape: 'circle',
- fill: 'rgba(149,165,166 ,0.5)',
- delay: 30,
- speed: 0.2,
- radius: { 3: 0 },
- easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
- }
- })
-
- const countAnimation = new mojs.Html({
- el: '#clapCount',
- isShowStart: false,
- isShowEnd: true,
- y: { 0: -30 },
- opacity: { 0: 1 },
+ useLayoutEffect(() => {
+ if (!bounceEl || !fadeEl || !burstEl) {
+ return
+ }
+
+ const triangleBurst = new mojs.Burst({
+ parent: burstEl,
+ radius: { 50: 95 },
+ count: 5,
+ angle: 30,
+ children: {
+ shape: 'polygon',
+ radius: { 6: 0 },
+ scale: 1,
+ stroke: 'rgba(211,84,0 ,0.5)',
+ strokeWidth: 2,
+ angle: 210,
+ delay: 30,
+ speed: 0.2,
+ easing: mojs.easing.bezier(0.1, 1, 0.3, 1),
  duration: tlDuration
- }).then({
- opacity: { 1: 0 },
- y: -80,
- delay: tlDuration / 2
- })
-
- const countTotalAnimation = new mojs.Html({
- el: '#clapCountTotal',
- isShowStart: false,
- isShowEnd: true,
- opacity: { 0: 1 },
- delay: (3 * tlDuration) / 2,
- duration: tlDuration,
- y: { 0: -3 }
- })
-
- const scaleButton = new mojs.Html({
- el: '#clap',
- duration: tlDuration,
- scale: { 1.3: 1 },
- easing: mojs.easing.out
- })
-
- const clap = document.getElementById('clap')
+ }
+ })
+
+ const circleBurst = new mojs.Burst({
+ parent: burstEl,
+ radius: { 50: 75 },
+ angle: 25,
+ duration: tlDuration,
+ children: {
+ shape: 'circle',
+ fill: 'rgba(149,165,166 ,0.5)',
+ delay: 30,
+ speed: 0.2,
+ radius: { 3: 0 },
+ easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
+ }
+ })
+
+ const countAnimation = new mojs.Html({
+ el: bounceEl,
+ isShowStart: false,
+ isShowEnd: true,
+ y: { 0: -30 },
+ opacity: { 0: 1 },
+ duration: tlDuration
+ }).then({
+ opacity: { 1: 0 },
+ y: -80,
+ delay: tlDuration / 2
+ })
+
+ const countTotalAnimation = new mojs.Html({
+ el: fadeEl,
+ isShowStart: false,
+ isShowEnd: true,
+ opacity: { 0: 1 },
+ delay: (3 * tlDuration) / 2,
+ duration: tlDuration,
+ y: { 0: -3 }
+ })
+
+ const scaleButton = new mojs.Html({
+ el: burstEl,
+ duration: tlDuration,
+ scale: { 1.3: 1 },
+ easing: mojs.easing.out
+ })
+
+ if (typeof burstEl === 'string') {
  clap.style.transform = 'scale(1, 1)'
+ const el = document.getElementById(id)
+ el.style.transform = 'scale(1, 1)'
+ } else {
+ burstEl.style.transform = 'scale(1, 1)'
+ }
 
- const updatedAnimationTimeline = animationTimeline.add([
- countAnimation,
- countTotalAnimation,
- scaleButton,
- circleBurst,
- triangleBurst
- ])
-
- setAnimationTimeline(updatedAnimationTimeline)
- },
- [tlDuration, animationTimeline]
- )
+ const updatedAnimationTimeline = animationTimeline.add([
+ countAnimation,
+ countTotalAnimation,
+ scaleButton,
+ circleBurst,
+ triangleBurst
+ ])
+
+ setAnimationTimeline(updatedAnimationTimeline)
+ }, [tlDuration, animationTimeline, bounceEl, fadeEl, burstEl])
 
  return animationTimeline
 }
 /** ====================================
- * 🔰 MediumClap
-==================================== **/
+  * 🔰 MediumClap
+ ==================================== **/
 const initialState = {
  count: 0,
  countTotal: generateRandomNumber(500, 10000),
@@ -123,7 +136,24 @@ const MediumClap = ({ children, onClap }) => {
  const [clapState, setClapState] = useState(initialState)
  const { count, countTotal, isClicked } = clapState
 
- const animationTimeline = useClapAnimation({ duration: 300 })
+ const [{ clapRef, clapCountRef, clapTotalRef }, setRefState] = useState({})
+
+ const setRef = useCallback(node => {
+ if (node !== null) {
+ setRefState(prevRefState => ({
+ ...prevRefState,
+ [node.dataset.refkey]: node
+ }))
+ }
+ }, [])
+
+ const animationTimeline = useClapAnimation({
+ duration: 300,
+ bounceEl: clapCountRef,
+ fadeEl: clapTotalRef,
+ burstEl: clapRef
+ })
+
  const handleClapClick = () => {
  // 👉 prop from HOC
  animationTimeline.replay()
@@ -137,38 +167,41 @@ const MediumClap = ({ children, onClap }) => {
 
  const componentJustMounted = useRef(true)
 
- useEffect(
- () => {
- if (!componentJustMounted.current) {
- onClap(clapState)
- }
- componentJustMounted.current = false
- },
- [count, onClap]
- )
+ useEffect(() => {
+ if (!componentJustMounted.current) {
+ onClap(clapState)
+ }
+ componentJustMounted.current = false
+ }, [count, onClap])
 
  const memoizedValue = useMemo(
  () => ({
  count,
  countTotal,
- isClicked
+ isClicked,
+ setRef
  }),
- [count, countTotal, isClicked]
+ [count, countTotal, isClicked, setRef]
  )
 
  return (
  <Provider value={memoizedValue}>
- <button id='clap' className={styles.clap} onClick={handleClapClick}>
+ <button
+ ref={setRef}
+ data-refkey='clapRef'
+ className={styles.clap}
+ onClick={handleClapClick}
+ >
  {children}
  </button>
  </Provider>
  )
 }
 
 /** ====================================
- * 🔰SubComponents
-Smaller Component used by <MediumClap />
-==================================== **/
+  * 🔰SubComponents
+ Smaller Component used by <MediumClap />
+ ==================================== **/
 
 const ClapIcon = () => {
  const { isClicked } = useContext(MediumClapContext)
@@ -187,17 +220,17 @@ const ClapIcon = () => {
  )
 }
 const ClapCount = () => {
- const { count } = useContext(MediumClapContext)
+ const { count, setRef } = useContext(MediumClapContext)
  return (
- <span id='clapCount' className={styles.count}>
+ <span ref={setRef} data-refkey='clapCountRef' className={styles.count}>
  +{count}
  </span>
  )
 }
 const CountTotal = () => {
- const { countTotal } = useContext(MediumClapContext)
+ const { countTotal, setRef } = useContext(MediumClapContext)
  return (
- <span id='clapCountTotal' className={styles.total}>
+ <span ref={setRef} data-refkey='clapTotalRef' className={styles.total}>
  {countTotal}
  </span>
  )
@@ -218,10 +251,10 @@ MediumClap.Total = CountTotal
 MediumClap.Info = ClapInfo
 
 /** ====================================
- * 🔰USAGE
- Below's how a potential user
- may consume the component API
-==================================== **/
+  * 🔰USAGE
+  Below's how a potential user
+  may consume the component API
+ ==================================== **/
 
 const Usage = () => {
  const [total, setTotal] = useState(0)