update #4

showcase/src/patterns/index.js

@@ -10,7 +10,6 @@ import React, {
 } from 'react'
 
 import mojs from 'mo-js'
-import wordConverter from 'number-to-words'
 import { generateRandomNumber } from '../utils/generateRandomNumber'
 import styles from './index.css'
 import userStyles from './usage.css'
@@ -30,96 +29,93 @@ const useClapAnimation = ({
     new mojs.Timeline()
   )
 
-  useLayoutEffect(
-    () => {
-      if (!bounceEl || !fadeEl || !burstEl) {
-        return
-      }
+  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
-        }
-      })
-
-      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 },
+    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: 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, bounceEl, fadeEl, burstEl]
-  )
+    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, bounceEl, fadeEl, burstEl])
 
   return animationTimeline
 }
@@ -174,15 +170,12 @@ const MediumClap = ({
 
   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(
     () => ({
@@ -269,26 +262,18 @@ const CountTotal = ({ className = '', style: userStyles = {} }) => {
   )
 }
 
-const ClapInfo = ({ info }) => {
-  const { countTotal } = useContext(MediumClapContext)
-  return (
-    <div className={styles.info}>
-      {info || wordConverter.toWords(countTotal)} claps!
-    </div>
-  )
-}
-
 MediumClap.Icon = ClapIcon
 MediumClap.Count = ClapCount
 MediumClap.Total = CountTotal
-MediumClap.Info = ClapInfo
 
 /** ====================================
       *        🔰USAGE
       Below's how a potential user
       may consume the component API
   ==================================== **/
-
+const Info = ({ info }) => {
+  return <div className={styles.info}>{info}</div>
+}
 const Usage = () => {
   const [total, setTotal] = useState(0)
 
@@ -297,12 +282,16 @@ const Usage = () => {
   }
 
   return (
-    <MediumClap onClap={onClap} className={userStyles.clap}>
-      <MediumClap.Icon className={userStyles.icon} />
-      <MediumClap.Total className={userStyles.total} />
-      <MediumClap.Count className={userStyles.count} />
-      <MediumClap.Info info={`Your article has been clapped ${total} times`} />
-    </MediumClap>
+    <div style={{ width: '100%' }}>
+      <MediumClap onClap={onClap} className={userStyles.clap}>
+        <MediumClap.Icon className={userStyles.icon} />
+        <MediumClap.Total className={userStyles.total} />
+        <MediumClap.Count className={userStyles.count} />
+      </MediumClap>
+      {!!total && (
+        <Info info={`Your article has been clapped ${total} times`} />
+      )}
+    </div>
   )
 }