Skip to content

Commit 52f85ef

Browse files
committed
update #5
1 parent 32719e5 commit 52f85ef

File tree

1 file changed

+99
-123
lines changed

1 file changed

+99
-123
lines changed

showcase/src/patterns/index.js

Lines changed: 99 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,8 @@ import React, {
1010
} from 'react'
1111

1212
import mojs from 'mo-js'
13-
import wordConverter from 'number-to-words'
1413
import { generateRandomNumber } from '../utils/generateRandomNumber'
1514
import styles from './index.css'
16-
import userStyles from './usage.css'
1715

1816
/** ====================================
1917
* 🔰Hook
@@ -30,96 +28,92 @@ const useClapAnimation = ({
3028
new mojs.Timeline()
3129
)
3230

33-
useLayoutEffect(
34-
() => {
35-
if (!bounceEl || !fadeEl || !burstEl) {
36-
return
37-
}
31+
useLayoutEffect(() => {
32+
if (!bounceEl || !fadeEl || !burstEl) {
33+
return
34+
}
3835

39-
const triangleBurst = new mojs.Burst({
40-
parent: burstEl,
41-
radius: { 50: 95 },
42-
count: 5,
43-
angle: 30,
44-
children: {
45-
shape: 'polygon',
46-
radius: { 6: 0 },
47-
scale: 1,
48-
stroke: 'rgba(211,84,0 ,0.5)',
49-
strokeWidth: 2,
50-
angle: 210,
51-
delay: 30,
52-
speed: 0.2,
53-
easing: mojs.easing.bezier(0.1, 1, 0.3, 1),
54-
duration: tlDuration
55-
}
56-
})
57-
58-
const circleBurst = new mojs.Burst({
59-
parent: burstEl,
60-
radius: { 50: 75 },
61-
angle: 25,
62-
duration: tlDuration,
63-
children: {
64-
shape: 'circle',
65-
fill: 'rgba(149,165,166 ,0.5)',
66-
delay: 30,
67-
speed: 0.2,
68-
radius: { 3: 0 },
69-
easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
70-
}
71-
})
72-
73-
const countAnimation = new mojs.Html({
74-
el: bounceEl,
75-
isShowStart: false,
76-
isShowEnd: true,
77-
y: { 0: -30 },
78-
opacity: { 0: 1 },
36+
const triangleBurst = new mojs.Burst({
37+
parent: burstEl,
38+
radius: { 50: 95 },
39+
count: 5,
40+
angle: 30,
41+
children: {
42+
shape: 'polygon',
43+
radius: { 6: 0 },
44+
scale: 1,
45+
stroke: 'rgba(211,84,0 ,0.5)',
46+
strokeWidth: 2,
47+
angle: 210,
48+
delay: 30,
49+
speed: 0.2,
50+
easing: mojs.easing.bezier(0.1, 1, 0.3, 1),
7951
duration: tlDuration
80-
}).then({
81-
opacity: { 1: 0 },
82-
y: -80,
83-
delay: tlDuration / 2
84-
})
85-
86-
const countTotalAnimation = new mojs.Html({
87-
el: fadeEl,
88-
isShowStart: false,
89-
isShowEnd: true,
90-
opacity: { 0: 1 },
91-
delay: (3 * tlDuration) / 2,
92-
duration: tlDuration,
93-
y: { 0: -3 }
94-
})
95-
96-
const scaleButton = new mojs.Html({
97-
el: burstEl,
98-
duration: tlDuration,
99-
scale: { 1.3: 1 },
100-
easing: mojs.easing.out
101-
})
102-
103-
if (typeof burstEl === 'string') {
104-
const id = burstEl.slice(1, burstEl.length)
105-
const el = document.getElementById(id)
106-
el.style.transform = 'scale(1, 1)'
107-
} else {
108-
burstEl.style.transform = 'scale(1, 1)'
10952
}
53+
})
54+
55+
const circleBurst = new mojs.Burst({
56+
parent: burstEl,
57+
radius: { 50: 75 },
58+
angle: 25,
59+
duration: tlDuration,
60+
children: {
61+
shape: 'circle',
62+
fill: 'rgba(149,165,166 ,0.5)',
63+
delay: 30,
64+
speed: 0.2,
65+
radius: { 3: 0 },
66+
easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
67+
}
68+
})
69+
70+
const countAnimation = new mojs.Html({
71+
el: bounceEl,
72+
isShowStart: false,
73+
isShowEnd: true,
74+
y: { 0: -30 },
75+
opacity: { 0: 1 },
76+
duration: tlDuration
77+
}).then({
78+
opacity: { 1: 0 },
79+
y: -80,
80+
delay: tlDuration / 2
81+
})
82+
83+
const countTotalAnimation = new mojs.Html({
84+
el: fadeEl,
85+
isShowStart: false,
86+
isShowEnd: true,
87+
opacity: { 0: 1 },
88+
delay: (3 * tlDuration) / 2,
89+
duration: tlDuration,
90+
y: { 0: -3 }
91+
})
92+
93+
const scaleButton = new mojs.Html({
94+
el: burstEl,
95+
duration: tlDuration,
96+
scale: { 1.3: 1 },
97+
easing: mojs.easing.out
98+
})
99+
100+
if (typeof burstEl === 'string') {
101+
const el = document.getElementById(id)
102+
el.style.transform = 'scale(1, 1)'
103+
} else {
104+
burstEl.style.transform = 'scale(1, 1)'
105+
}
110106

111-
const updatedAnimationTimeline = animationTimeline.add([
112-
countAnimation,
113-
countTotalAnimation,
114-
scaleButton,
115-
circleBurst,
116-
triangleBurst
117-
])
118-
119-
setAnimationTimeline(updatedAnimationTimeline)
120-
},
121-
[tlDuration, animationTimeline, bounceEl, fadeEl, burstEl]
122-
)
107+
const updatedAnimationTimeline = animationTimeline.add([
108+
countAnimation,
109+
countTotalAnimation,
110+
scaleButton,
111+
circleBurst,
112+
triangleBurst
113+
])
114+
115+
setAnimationTimeline(updatedAnimationTimeline)
116+
}, [tlDuration, animationTimeline, bounceEl, fadeEl, burstEl])
123117

124118
return animationTimeline
125119
}
@@ -147,7 +141,6 @@ const MediumClap = ({
147141
const { count, countTotal, isClicked } = clapState
148142

149143
const [{ clapRef, clapCountRef, clapTotalRef }, setRefState] = useState({})
150-
151144
const setRef = useCallback(node => {
152145
if (node !== null) {
153146
setRefState(prevRefState => ({
@@ -172,39 +165,33 @@ const MediumClap = ({
172165
isControlled
173166
? onClap()
174167
: setClapState({
175-
count: Math.min(count + 1, MAXIMUM_USER_CLAP),
176-
countTotal: count < MAXIMUM_USER_CLAP ? countTotal + 1 : countTotal,
177-
isClicked: true
178-
})
168+
count: Math.min(count + 1, MAXIMUM_USER_CLAP),
169+
countTotal: count < MAXIMUM_USER_CLAP ? countTotal + 1 : countTotal,
170+
isClicked: true
171+
})
179172
}
180173

181174
const componentJustMounted = useRef(true)
182175

183-
useEffect(
184-
() => {
185-
if (!componentJustMounted.current && !isControlled) {
186-
onClap(clapState)
187-
}
188-
componentJustMounted.current = false
189-
},
190-
[count, onClap, isControlled]
191-
)
176+
useEffect(() => {
177+
if (!componentJustMounted.current && !isControlled) {
178+
onClap(clapState)
179+
}
180+
componentJustMounted.current = false
181+
}, [count, onClap, isControlled])
192182

193183
const getState = useCallback(() => (isControlled ? values : clapState), [
194184
isControlled,
195185
clapState,
196186
values
197187
])
198188

199-
const memoizedValue = useMemo(
200-
() => {
201-
return {
202-
...getState(),
203-
setRef
204-
}
205-
},
206-
[getState, setRef]
207-
)
189+
const memoizedValue = useMemo(() => {
190+
return {
191+
...getState(),
192+
setRef
193+
}
194+
}, [getState, setRef])
208195

209196
const classNames = [styles.clap, className].join(' ').trim()
210197

@@ -234,7 +221,7 @@ const ClapIcon = ({ className = '', style: userStyles = {} }) => {
234221
const classNames = [styles.icon, isClicked ? styles.checked : '', className]
235222
.join(' ')
236223
.trim()
237-
224+
238225
return (
239226
<span>
240227
<svg
@@ -281,26 +268,15 @@ const CountTotal = ({ className = '', style: userStyles = {} }) => {
281268
)
282269
}
283270

284-
const ClapInfo = ({ info }) => {
285-
const { countTotal } = useContext(MediumClapContext)
286-
return (
287-
<div className={styles.info}>
288-
{info || wordConverter.toWords(countTotal)} claps!
289-
</div>
290-
)
291-
}
292-
293271
MediumClap.Icon = ClapIcon
294272
MediumClap.Count = ClapCount
295273
MediumClap.Total = CountTotal
296-
MediumClap.Info = ClapInfo
297274

298275
/** ====================================
299276
* 🔰USAGE
300277
Below's how a potential user
301278
may consume the component API
302279
==================================== **/
303-
304280
const MAXIMUM_USER_CLAP = 10
305281
const INITIAL_STATE = {
306282
count: 0,

0 commit comments

Comments
 (0)