@@ -10,10 +10,8 @@ import React, {
10
10
} from 'react'
11
11
12
12
import mojs from 'mo-js'
13
- import wordConverter from 'number-to-words'
14
13
import { generateRandomNumber } from '../utils/generateRandomNumber'
15
14
import styles from './index.css'
16
- import userStyles from './usage.css'
17
15
18
16
/** ====================================
19
17
* 🔰Hook
@@ -30,96 +28,92 @@ const useClapAnimation = ({
30
28
new mojs . Timeline ( )
31
29
)
32
30
33
- useLayoutEffect (
34
- ( ) => {
35
- if ( ! bounceEl || ! fadeEl || ! burstEl ) {
36
- return
37
- }
31
+ useLayoutEffect ( ( ) => {
32
+ if ( ! bounceEl || ! fadeEl || ! burstEl ) {
33
+ return
34
+ }
38
35
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 ) ,
79
51
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)'
109
52
}
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
+ }
110
106
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 ] )
123
117
124
118
return animationTimeline
125
119
}
@@ -147,7 +141,6 @@ const MediumClap = ({
147
141
const { count, countTotal, isClicked } = clapState
148
142
149
143
const [ { clapRef, clapCountRef, clapTotalRef } , setRefState ] = useState ( { } )
150
-
151
144
const setRef = useCallback ( node => {
152
145
if ( node !== null ) {
153
146
setRefState ( prevRefState => ( {
@@ -172,39 +165,33 @@ const MediumClap = ({
172
165
isControlled
173
166
? onClap ( )
174
167
: 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
+ } )
179
172
}
180
173
181
174
const componentJustMounted = useRef ( true )
182
175
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 ] )
192
182
193
183
const getState = useCallback ( ( ) => ( isControlled ? values : clapState ) , [
194
184
isControlled ,
195
185
clapState ,
196
186
values
197
187
] )
198
188
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 ] )
208
195
209
196
const classNames = [ styles . clap , className ] . join ( ' ' ) . trim ( )
210
197
@@ -234,7 +221,7 @@ const ClapIcon = ({ className = '', style: userStyles = {} }) => {
234
221
const classNames = [ styles . icon , isClicked ? styles . checked : '' , className ]
235
222
. join ( ' ' )
236
223
. trim ( )
237
-
224
+
238
225
return (
239
226
< span >
240
227
< svg
@@ -281,26 +268,15 @@ const CountTotal = ({ className = '', style: userStyles = {} }) => {
281
268
)
282
269
}
283
270
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
-
293
271
MediumClap . Icon = ClapIcon
294
272
MediumClap . Count = ClapCount
295
273
MediumClap . Total = CountTotal
296
- MediumClap . Info = ClapInfo
297
274
298
275
/** ====================================
299
276
* 🔰USAGE
300
277
Below's how a potential user
301
278
may consume the component API
302
279
==================================== **/
303
-
304
280
const MAXIMUM_USER_CLAP = 10
305
281
const INITIAL_STATE = {
306
282
count : 0 ,
0 commit comments