Skip to content

Commit b71cebd

Browse files
TotomIncdanilowoz
andauthored
fix(svg): migrate defaultProps to default parameters (#305)
Co-authored-by: Danilo Woznica <[email protected]>
1 parent 7799084 commit b71cebd

File tree

9 files changed

+302
-247
lines changed

9 files changed

+302
-247
lines changed

package-lock.json

Lines changed: 288 additions & 157 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/web/Svg.tsx

Lines changed: 14 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,23 @@ import uid from '../shared/uid'
44
import { IContentLoaderProps } from './'
55

66
const SVG: React.FC<IContentLoaderProps> = ({
7-
animate,
7+
animate = true,
88
animateBegin,
9-
backgroundColor,
10-
backgroundOpacity,
11-
baseUrl,
9+
backgroundColor = '#f5f6f7',
10+
backgroundOpacity = 1,
11+
baseUrl = '',
1212
children,
13-
foregroundColor,
14-
foregroundOpacity,
15-
gradientRatio,
16-
gradientDirection,
13+
foregroundColor = '#eee',
14+
foregroundOpacity = 1,
15+
gradientRatio = 2,
16+
gradientDirection = 'left-right',
1717
uniqueKey,
18-
interval,
19-
rtl,
20-
speed,
21-
style,
22-
title,
23-
beforeMask,
18+
interval = 0.25,
19+
rtl = false,
20+
speed = 1.2,
21+
style = {},
22+
title = 'Loading...',
23+
beforeMask = null,
2424
...props
2525
}) => {
2626
const fixedId = uniqueKey || uid()
@@ -114,22 +114,4 @@ const SVG: React.FC<IContentLoaderProps> = ({
114114
)
115115
}
116116

117-
SVG.defaultProps = {
118-
animate: true,
119-
backgroundColor: '#f5f6f7',
120-
backgroundOpacity: 1,
121-
baseUrl: '',
122-
foregroundColor: '#eee',
123-
foregroundOpacity: 1,
124-
gradientRatio: 2,
125-
gradientDirection: 'left-right',
126-
id: null,
127-
interval: 0.25,
128-
rtl: false,
129-
speed: 1.2,
130-
style: {},
131-
title: 'Loading...',
132-
beforeMask: null,
133-
}
134-
135117
export default SVG

src/web/__tests__/ContentLoader.test.tsx

Lines changed: 0 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -58,22 +58,15 @@ describe('ContentLoader', () => {
5858
</ContentLoader>
5959
)
6060

61-
const { props: propsFromEmpty } = noPropsComponent.getRenderOutput()
6261
const { props: propsFromFullfield } = withPropsComponent.getRenderOutput()
6362

6463
it("`speed` is a number and it's used", () => {
65-
// defaultProps
66-
expect(typeof propsFromEmpty.speed).toBe('number')
67-
expect(propsFromEmpty.speed).toBe(1.2)
6864
// custom props
6965
expect(typeof propsFromFullfield.speed).toBe('number')
7066
expect(propsFromFullfield.speed).toBe(10)
7167
})
7268

7369
it("`interval` is a number and it's used", () => {
74-
// defaultProps
75-
expect(typeof propsFromEmpty.interval).toBe('number')
76-
expect(propsFromEmpty.interval).toBe(0.25)
7770
// custom props
7871
expect(typeof propsFromFullfield.interval).toBe('number')
7972
expect(propsFromFullfield.interval).toBe(0.5)
@@ -92,63 +85,42 @@ describe('ContentLoader', () => {
9285
})
9386

9487
it("`gradientRatio` is a number and it's used", () => {
95-
// defaultProps
96-
expect(typeof propsFromEmpty.gradientRatio).toBe('number')
97-
expect(propsFromEmpty.gradientRatio).toBe(2)
9888
// custom props
9989
expect(typeof propsFromFullfield.gradientRatio).toBe('number')
10090
expect(propsFromFullfield.gradientRatio).toBe(0.5)
10191
})
10292

10393
it("`gradientDirection` is a string and it's used", () => {
104-
// defaultProps
105-
expect(typeof propsFromEmpty.gradientDirection).toBe('string')
106-
expect(propsFromEmpty.gradientDirection).toBe('left-right')
10794
// custom props
10895
expect(typeof propsFromFullfield.gradientDirection).toBe('string')
10996
expect(propsFromFullfield.gradientDirection).toBe('top-bottom')
11097
})
11198

11299
it("`animate` is a boolean and it's used", () => {
113-
// defaultProps
114-
expect(typeof propsFromEmpty.animate).toBe('boolean')
115-
expect(propsFromEmpty.animate).toBe(true)
116100
// custom props
117101
expect(typeof propsFromFullfield.animate).toBe('boolean')
118102
expect(propsFromFullfield.animate).toBe(false)
119103
})
120104

121105
it("`backgroundColor` is a string and it's used", () => {
122-
// defaultProps
123-
expect(typeof propsFromEmpty.backgroundColor).toBe('string')
124-
expect(propsFromEmpty.backgroundColor).toBe('#f5f6f7')
125106
// custom props
126107
expect(typeof propsFromFullfield.backgroundColor).toBe('string')
127108
expect(propsFromFullfield.backgroundColor).toBe('#000')
128109
})
129110

130111
it("`foregroundColor` is a string and it's used", () => {
131-
// defaultProps
132-
expect(typeof propsFromEmpty.foregroundColor).toBe('string')
133-
expect(propsFromEmpty.foregroundColor).toBe('#eee')
134112
// custom props
135113
expect(typeof propsFromFullfield.foregroundColor).toBe('string')
136114
expect(propsFromFullfield.foregroundColor).toBe('#fff')
137115
})
138116

139117
it("`backgroundOpacity` is a number and it's used", () => {
140-
// defaultProps
141-
expect(typeof propsFromEmpty.backgroundOpacity).toBe('number')
142-
expect(propsFromEmpty.backgroundOpacity).toBe(1)
143118
// custom props
144119
expect(typeof propsFromFullfield.backgroundOpacity).toBe('number')
145120
expect(propsFromFullfield.backgroundOpacity).toBe(0.06)
146121
})
147122

148123
it("`foregroundOpacity` is a number and it's used", () => {
149-
// defaultProps
150-
expect(typeof propsFromEmpty.foregroundOpacity).toBe('number')
151-
expect(propsFromEmpty.foregroundOpacity).toBe(1)
152124
// custom props
153125
expect(typeof propsFromFullfield.foregroundOpacity).toBe('number')
154126
expect(propsFromFullfield.foregroundOpacity).toBe(0.12)
@@ -161,60 +133,41 @@ describe('ContentLoader', () => {
161133
})
162134

163135
it("`style` is an object and it's used", () => {
164-
// defaultProps
165-
expect(propsFromEmpty.style).toMatchObject({})
166136
// custom props
167137
expect(propsFromFullfield.style).toMatchObject({ marginBottom: '10px' })
168138
})
169139

170140
it("`rtl` is a boolean and it's used", () => {
171-
// defaultProps
172-
expect(typeof propsFromEmpty.rtl).toBe('boolean')
173-
expect(propsFromEmpty.rtl).toBe(false)
174141
// custom props
175142
expect(typeof propsFromFullfield.rtl).toBe('boolean')
176143
expect(propsFromFullfield.rtl).toBe(true)
177144
})
178145

179146
it("`title` is a string and it's used", () => {
180-
// defaultProps
181-
expect(typeof propsFromEmpty.title).toBe('string')
182-
expect(propsFromEmpty.title).toBe('Loading...')
183147
// custom props
184148
expect(typeof propsFromFullfield.title).toBe('string')
185149
expect(propsFromFullfield.title).toBe('My custom loading title')
186150
})
187151

188152
it("`baseUrl` is a string and it's used", () => {
189-
// defaultProps
190-
expect(typeof propsFromEmpty.baseUrl).toBe('string')
191-
expect(propsFromEmpty.baseUrl).toBe('')
192153
// custom props
193154
expect(typeof propsFromFullfield.baseUrl).toBe('string')
194155
expect(propsFromFullfield.baseUrl).toBe('/mypage')
195156
})
196157

197158
it("`uniqueKey` is a string and it's used", () => {
198-
// defaultProps
199-
expect(typeof propsFromEmpty.uniqueKey).toBe('undefined')
200-
expect(propsFromEmpty.uniqueKey).toBe(undefined)
201159
// custom props
202160
expect(typeof propsFromFullfield.uniqueKey).toBe('string')
203161
expect(propsFromFullfield.uniqueKey).toBe('my-id')
204162
})
205163

206164
it("`beforeMask` is a JSX Element and it's used", () => {
207-
// defaultProps
208-
expect(typeof propsFromEmpty.beforeMask).toBe('object')
209-
expect(propsFromEmpty.beforeMask).toBe(null)
210165
// custom props
211166
expect(typeof propsFromFullfield.beforeMask).toBe('object')
212167
expect(propsFromFullfield.beforeMask).toEqual(<rect />)
213168
})
214169

215170
it("`animateBegin` is a string and it's used", () => {
216-
// defaultProps
217-
expect(propsFromEmpty.animateBegin).toBe(undefined)
218171
// custom props
219172
expect(typeof propsFromFullfield.animateBegin).toBe('string')
220173
expect(propsFromFullfield.animateBegin).toEqual('5s')

src/web/__tests__/__snapshots__/snapshots.test.tsx.snap

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
exports[`ContentLoader snapshots renders correctly the basic version 1`] = `
44
<svg
55
aria-labelledby="snapshots-aria"
6-
id={null}
76
role="img"
87
style={Object {}}
98
viewBox="0 0 476 124"
@@ -121,7 +120,6 @@ exports[`ContentLoader snapshots renders correctly the basic version 1`] = `
121120
exports[`ContentLoader snapshots renders correctly with beforeMask 1`] = `
122121
<svg
123122
aria-labelledby="snapshots-aria"
124-
id={null}
125123
role="img"
126124
style={Object {}}
127125
>
@@ -205,7 +203,6 @@ exports[`ContentLoader snapshots renders correctly with beforeMask 1`] = `
205203
exports[`ContentLoader snapshots renders correctly with beforeMask 2`] = `
206204
<svg
207205
aria-labelledby="snapshots-aria"
208-
id={null}
209206
role="img"
210207
style={Object {}}
211208
>
@@ -283,7 +280,6 @@ exports[`ContentLoader snapshots renders correctly with beforeMask 2`] = `
283280
exports[`ContentLoader snapshots renders correctly with viewBox defined 1`] = `
284281
<svg
285282
aria-labelledby="snapshots-aria"
286-
id={null}
287283
role="img"
288284
style={Object {}}
289285
viewBox="0 0 100 100"
@@ -402,7 +398,6 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined and size
402398
<svg
403399
aria-labelledby="snapshots-aria"
404400
height={100}
405-
id={null}
406401
role="img"
407402
style={Object {}}
408403
viewBox="0 0 100 100"
@@ -521,7 +516,6 @@ exports[`ContentLoader snapshots renders correctly with viewBox defined and size
521516
exports[`ContentLoader snapshots renders correctly with viewBox empty 1`] = `
522517
<svg
523518
aria-labelledby="snapshots-aria"
524-
id={null}
525519
role="img"
526520
style={Object {}}
527521
viewBox=""

src/web/__tests__/presets/__snapshots__/BulletListStyle.test.tsx.snap

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
exports[`BulletListStyle renders correctly 1`] = `
44
<svg
55
aria-labelledby="BulletListStyle-aria"
6-
id={null}
76
role="img"
87
style={Object {}}
98
viewBox="0 0 245 125"

src/web/__tests__/presets/__snapshots__/CodeStyle.test.tsx.snap

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
exports[`CodeStyle renders correctly 1`] = `
44
<svg
55
aria-labelledby="CodeStyle-aria"
6-
id={null}
76
role="img"
87
style={Object {}}
98
viewBox="0 0 340 84"

src/web/__tests__/presets/__snapshots__/FacebookStyle.test.tsx.snap

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
exports[`FacebookStyle renders correctly 1`] = `
44
<svg
55
aria-labelledby="FacebookStyle-aria"
6-
id={null}
76
role="img"
87
style={Object {}}
98
viewBox="0 0 476 124"

src/web/__tests__/presets/__snapshots__/InstagramStyle.test.tsx.snap

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
exports[`InstagramStyle renders correctly 1`] = `
44
<svg
55
aria-labelledby="InstagramStyle-aria"
6-
id={null}
76
role="img"
87
style={Object {}}
98
viewBox="0 0 400 460"

src/web/__tests__/presets/__snapshots__/ListStyle.test.tsx.snap

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
exports[`ListStyle renders correctly 1`] = `
44
<svg
55
aria-labelledby="ListStyle-aria"
6-
id={null}
76
role="img"
87
style={Object {}}
98
viewBox="0 0 400 110"

0 commit comments

Comments
 (0)