Skip to content

Commit 11c6737

Browse files
ohansemmanuelohansemmanuel
committed
update #3 #4 #5 
1 parent 1f466cb commit 11c6737

File tree

6 files changed

+233
-476
lines changed

6 files changed

+233
-476
lines changed

‎showcase/package.json

-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@
3232
"dependencies": {
3333
"@reach/router": "^1.2.1",
3434
"mo-js": "^0.288.2",
35-
"number-to-words": "^1.2.4",
3635
"prop-types": "^15.7.2",
3736
"react": "^16.10.2",
3837
"react-dom": "^16.10.2",

‎showcase/src/patterns/03.js

+15-21
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ 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'
1615

@@ -175,12 +174,10 @@ const MediumClap = ({ children, onClap }) => {
175174

176175
const memoizedValue = useMemo(
177176
() => ({
178-
count,
179-
countTotal,
180-
isClicked,
177+
...clapState,
181178
setRef
182179
}),
183-
[count, countTotal, isClicked, setRef]
180+
[clapState, setRef]
184181
)
185182

186183
return (
@@ -235,25 +232,18 @@ const CountTotal = () => {
235232
)
236233
}
237234

238-
const ClapInfo = ({ info }) => {
239-
const { countTotal } = useContext(MediumClapContext)
240-
return (
241-
<div className={styles.info}>
242-
{info || wordConverter.toWords(countTotal)} claps!
243-
</div>
244-
)
245-
}
246-
247235
MediumClap.Icon = ClapIcon
248236
MediumClap.Count = ClapCount
249237
MediumClap.Total = CountTotal
250-
MediumClap.Info = ClapInfo
251238

252239
/** ====================================
253240
* 🔰USAGE
254241
Below's how a potential user
255242
may consume the component API
256243
==================================== **/
244+
const Info = ({ info }) => {
245+
return <div className={styles.info}>{info}</div>
246+
}
257247

258248
const Usage = () => {
259249
const [total, setTotal] = useState(0)
@@ -263,12 +253,16 @@ const Usage = () => {
263253
}
264254

265255
return (
266-
<MediumClap onClap={onClap}>
267-
<MediumClap.Icon />
268-
<MediumClap.Total />
269-
<MediumClap.Count />
270-
<MediumClap.Info info={`Your article has been clapped ${total} times`} />
271-
</MediumClap>
256+
<div style={{ width: '100%' }}>
257+
<MediumClap onClap={onClap}>
258+
<MediumClap.Icon />
259+
<MediumClap.Total />
260+
<MediumClap.Count />
261+
</MediumClap>
262+
{!!total && (
263+
<Info info={`Your article has been clapped ${total} times`} />
264+
)}
265+
</div>
272266
)
273267
}
274268

‎showcase/src/patterns/04.js

+104-116
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ 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'
1615
import userStyles from './usage.css'
@@ -30,96 +29,93 @@ const useClapAnimation = ({
3029
new mojs.Timeline()
3130
)
3231

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

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 },
37+
const triangleBurst = new mojs.Burst({
38+
parent: burstEl,
39+
radius: { 50: 95 },
40+
count: 5,
41+
angle: 30,
42+
children: {
43+
shape: 'polygon',
44+
radius: { 6: 0 },
45+
scale: 1,
46+
stroke: 'rgba(211,84,0 ,0.5)',
47+
strokeWidth: 2,
48+
angle: 210,
49+
delay: 30,
50+
speed: 0.2,
51+
easing: mojs.easing.bezier(0.1, 1, 0.3, 1),
7952
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-
clap.style.transform = 'scale(1, 1)'
105-
const el = document.getElementById(id)
106-
el.style.transform = 'scale(1, 1)'
107-
} else {
108-
burstEl.style.transform = 'scale(1, 1)'
10953
}
54+
})
11055

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-
)
56+
const circleBurst = new mojs.Burst({
57+
parent: burstEl,
58+
radius: { 50: 75 },
59+
angle: 25,
60+
duration: tlDuration,
61+
children: {
62+
shape: 'circle',
63+
fill: 'rgba(149,165,166 ,0.5)',
64+
delay: 30,
65+
speed: 0.2,
66+
radius: { 3: 0 },
67+
easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
68+
}
69+
})
70+
71+
const countAnimation = new mojs.Html({
72+
el: bounceEl,
73+
isShowStart: false,
74+
isShowEnd: true,
75+
y: { 0: -30 },
76+
opacity: { 0: 1 },
77+
duration: tlDuration
78+
}).then({
79+
opacity: { 1: 0 },
80+
y: -80,
81+
delay: tlDuration / 2
82+
})
83+
84+
const countTotalAnimation = new mojs.Html({
85+
el: fadeEl,
86+
isShowStart: false,
87+
isShowEnd: true,
88+
opacity: { 0: 1 },
89+
delay: (3 * tlDuration) / 2,
90+
duration: tlDuration,
91+
y: { 0: -3 }
92+
})
93+
94+
const scaleButton = new mojs.Html({
95+
el: burstEl,
96+
duration: tlDuration,
97+
scale: { 1.3: 1 },
98+
easing: mojs.easing.out
99+
})
100+
101+
if (typeof burstEl === 'string') {
102+
clap.style.transform = 'scale(1, 1)'
103+
const el = document.getElementById(id)
104+
el.style.transform = 'scale(1, 1)'
105+
} else {
106+
burstEl.style.transform = 'scale(1, 1)'
107+
}
108+
109+
const updatedAnimationTimeline = animationTimeline.add([
110+
countAnimation,
111+
countTotalAnimation,
112+
scaleButton,
113+
circleBurst,
114+
triangleBurst
115+
])
116+
117+
setAnimationTimeline(updatedAnimationTimeline)
118+
}, [tlDuration, animationTimeline, bounceEl, fadeEl, burstEl])
123119

124120
return animationTimeline
125121
}
@@ -174,24 +170,19 @@ const MediumClap = ({
174170

175171
const componentJustMounted = useRef(true)
176172

177-
useEffect(
178-
() => {
179-
if (!componentJustMounted.current) {
180-
onClap(clapState)
181-
}
182-
componentJustMounted.current = false
183-
},
184-
[count, onClap]
185-
)
173+
useEffect(() => {
174+
if (!componentJustMounted.current) {
175+
onClap(clapState)
176+
}
177+
componentJustMounted.current = false
178+
}, [count, onClap])
186179

187180
const memoizedValue = useMemo(
188181
() => ({
189-
count,
190-
countTotal,
191-
isClicked,
182+
...clapState,
192183
setRef
193184
}),
194-
[count, countTotal, isClicked, setRef]
185+
[clapState, setRef]
195186
)
196187

197188
const classNames = [styles.clap, className].join(' ').trim()
@@ -269,25 +260,18 @@ const CountTotal = ({ className = '', style: userStyles = {} }) => {
269260
)
270261
}
271262

272-
const ClapInfo = ({ info }) => {
273-
const { countTotal } = useContext(MediumClapContext)
274-
return (
275-
<div className={styles.info}>
276-
{info || wordConverter.toWords(countTotal)} claps!
277-
</div>
278-
)
279-
}
280-
281263
MediumClap.Icon = ClapIcon
282264
MediumClap.Count = ClapCount
283265
MediumClap.Total = CountTotal
284-
MediumClap.Info = ClapInfo
285266

286267
/** ====================================
287268
* 🔰USAGE
288269
Below's how a potential user
289270
may consume the component API
290271
==================================== **/
272+
const Info = ({ info }) => {
273+
return <div className={styles.info}>{info}</div>
274+
}
291275

292276
const Usage = () => {
293277
const [total, setTotal] = useState(0)
@@ -297,12 +281,16 @@ const Usage = () => {
297281
}
298282

299283
return (
300-
<MediumClap onClap={onClap} className={userStyles.clap}>
301-
<MediumClap.Icon className={userStyles.icon} />
302-
<MediumClap.Total className={userStyles.total} />
303-
<MediumClap.Count className={userStyles.count} />
304-
<MediumClap.Info info={`Your article has been clapped ${total} times`} />
305-
</MediumClap>
284+
<div style={{ width: '100%' }}>
285+
<MediumClap onClap={onClap} className={userStyles.clap}>
286+
<MediumClap.Icon className={userStyles.icon} />
287+
<MediumClap.Total className={userStyles.total} />
288+
<MediumClap.Count className={userStyles.count} />
289+
</MediumClap>
290+
{!!total && (
291+
<Info info={`Your article has been clapped ${total} times`} />
292+
)}
293+
</div>
306294
)
307295
}
308296

0 commit comments

Comments
 (0)