Skip to content

Commit cfc56a1

Browse files
necolasnecolas
committed
[change] ActivityIndicator using CSS animations
Ref #299
1 parent b1cd92a commit cfc56a1

File tree

8 files changed

+291
-57
lines changed

8 files changed

+291
-57
lines changed

‎examples/components/ActivityIndicator/ActivityIndicatorExample.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,8 @@ const ToggleAnimatingActivityIndicator = React.createClass({
5050
return (
5151
<ActivityIndicator
5252
animating={this.state.animating}
53-
style={[styles.centering, {height: 80}]}
53+
style={styles.centering}
54+
hidesWhenStopped={this.props.hidesWhenStopped}
5455
size="large"
5556
/>
5657
);
@@ -121,7 +122,12 @@ const examples = [
121122
{
122123
title: 'Start/stop',
123124
render() {
124-
return <ToggleAnimatingActivityIndicator />;
125+
return (
126+
<View style={[styles.horizontal, styles.centering]}>
127+
<ToggleAnimatingActivityIndicator />
128+
<ToggleAnimatingActivityIndicator hidesWhenStopped={false} />
129+
</View>
130+
);
125131
}
126132
},
127133
{

‎src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ body{margin:0}
55
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
66
input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none}
77
.rn_pointerEvents\\:auto, .rn_pointerEvents\\:box-only, .rn_pointerEvents\\:box-none * {pointer-events:auto}.rn_pointerEvents\\:none, .rn_pointerEvents\\:box-only *, .rn_pointerEvents\\:box-none {pointer-events:none}
8+
@keyframes rn-ActivityIndicator-animation {0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }}
89
.rn-bottom\\:0px{bottom:0px;}
910
.rn-left\\:0px{left:0px;}
1011
.rn-position\\:absolute{position:absolute;}

‎src/apis/StyleSheet/initialize.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,14 @@ const initialize = () => {
3333
'.rn_pointerEvents\\:none, .rn_pointerEvents\\:box-only *, .rn_pointerEvents\\:box-none {pointer-events:none}'
3434
);
3535

36+
injector.addRule(
37+
'activity-indicator-animation',
38+
'@keyframes rn-ActivityIndicator-animation {' +
39+
'0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }' +
40+
'100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }' +
41+
'}'
42+
);
43+
3644
StyleRegistry.initialize();
3745
};
3846

‎src/components/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap‎

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
exports[`components/ActivityIndicator default render 1`] = `
2+
<div
3+
aria-valuemax="1"
4+
aria-valuemin="0"
5+
className="
6+
rn-alignItems:center
7+
rn-backgroundColor:transparent
8+
rn-borderTopStyle:solid
9+
rn-borderRightStyle:solid
10+
rn-borderBottomStyle:solid
11+
rn-borderLeftStyle:solid
12+
rn-borderTopWidth:0px
13+
rn-borderRightWidth:0px
14+
rn-borderBottomWidth:0px
15+
rn-borderLeftWidth:0px
16+
rn-boxSizing:border-box
17+
rn-color:inherit
18+
rn-display:flex
19+
rn-flexBasis:auto
20+
rn-flexDirection:column
21+
rn-flexShrink:0
22+
rn-font:inherit
23+
rn-justifyContent:center
24+
rn-listStyle:none
25+
rn-marginTop:0px
26+
rn-marginRight:0px
27+
rn-marginBottom:0px
28+
rn-marginLeft:0px
29+
rn-minHeight:0px
30+
rn-minWidth:0px
31+
rn-paddingTop:0px
32+
rn-paddingRight:0px
33+
rn-paddingBottom:0px
34+
rn-paddingLeft:0px
35+
rn-position:relative
36+
rn-textAlign:inherit
37+
rn-textDecoration:none"
38+
role="progressbar"
39+
style={Object {}}>
40+
<div
41+
className="rn-ActivityIndicator-animation
42+
rn-alignItems:stretch
43+
rn-animationDuration:0.75s
44+
rn-animationIterationCount:infinite
45+
rn-animationName:rn-ActivityIndicator-animation
46+
rn-animationTimingFunction:linear
47+
rn-backgroundColor:transparent
48+
rn-borderTopStyle:solid
49+
rn-borderRightStyle:solid
50+
rn-borderBottomStyle:solid
51+
rn-borderLeftStyle:solid
52+
rn-borderTopWidth:0px
53+
rn-borderRightWidth:0px
54+
rn-borderBottomWidth:0px
55+
rn-borderLeftWidth:0px
56+
rn-boxSizing:border-box
57+
rn-color:inherit
58+
rn-display:flex
59+
rn-flexBasis:auto
60+
rn-flexDirection:column
61+
rn-flexShrink:0
62+
rn-font:inherit
63+
rn-height:20px
64+
rn-listStyle:none
65+
rn-marginTop:0px
66+
rn-marginRight:0px
67+
rn-marginBottom:0px
68+
rn-marginLeft:0px
69+
rn-minHeight:0px
70+
rn-minWidth:0px
71+
rn-paddingTop:0px
72+
rn-paddingRight:0px
73+
rn-paddingBottom:0px
74+
rn-paddingLeft:0px
75+
rn-position:relative
76+
rn-textAlign:inherit
77+
rn-textDecoration:none
78+
rn-width:20px"
79+
style={Object {}}>
80+
<svg
81+
height="100%"
82+
viewBox="0 0 32 32"
83+
width="100%">
84+
<circle
85+
cx="16"
86+
cy="16"
87+
fill="none"
88+
r="14"
89+
strokeWidth="4"
90+
style={
91+
Object {
92+
"opacity": 0.2,
93+
"stroke": "#1976D2",
94+
}
95+
} />
96+
<circle
97+
cx="16"
98+
cy="16"
99+
fill="none"
100+
r="14"
101+
strokeWidth="4"
102+
style={
103+
Object {
104+
"stroke": "#1976D2",
105+
"strokeDasharray": 80,
106+
"strokeDashoffset": 60,
107+
}
108+
} />
109+
</svg>
110+
</div>
111+
</div>
112+
`;
113+
114+
exports[`components/ActivityIndicator other render 1`] = `
115+
<div
116+
aria-valuemax="1"
117+
aria-valuemin="0"
118+
className="
119+
rn-alignItems:center
120+
rn-backgroundColor:transparent
121+
rn-borderTopStyle:solid
122+
rn-borderRightStyle:solid
123+
rn-borderBottomStyle:solid
124+
rn-borderLeftStyle:solid
125+
rn-borderTopWidth:0px
126+
rn-borderRightWidth:0px
127+
rn-borderBottomWidth:0px
128+
rn-borderLeftWidth:0px
129+
rn-boxSizing:border-box
130+
rn-color:inherit
131+
rn-display:flex
132+
rn-flexBasis:auto
133+
rn-flexDirection:column
134+
rn-flexShrink:0
135+
rn-font:inherit
136+
rn-justifyContent:center
137+
rn-listStyle:none
138+
rn-marginTop:0px
139+
rn-marginRight:0px
140+
rn-marginBottom:0px
141+
rn-marginLeft:0px
142+
rn-minHeight:0px
143+
rn-minWidth:0px
144+
rn-paddingTop:0px
145+
rn-paddingRight:0px
146+
rn-paddingBottom:0px
147+
rn-paddingLeft:0px
148+
rn-position:relative
149+
rn-textAlign:inherit
150+
rn-textDecoration:none"
151+
role="progressbar"
152+
style={Object {}}>
153+
<div
154+
className="rn-ActivityIndicator-animation
155+
rn-alignItems:stretch
156+
rn-animationDuration:0.75s
157+
rn-animationIterationCount:infinite
158+
rn-animationName:rn-ActivityIndicator-animation
159+
rn-animationPlayState:paused
160+
rn-animationTimingFunction:linear
161+
rn-backgroundColor:transparent
162+
rn-borderTopStyle:solid
163+
rn-borderRightStyle:solid
164+
rn-borderBottomStyle:solid
165+
rn-borderLeftStyle:solid
166+
rn-borderTopWidth:0px
167+
rn-borderRightWidth:0px
168+
rn-borderBottomWidth:0px
169+
rn-borderLeftWidth:0px
170+
rn-boxSizing:border-box
171+
rn-color:inherit
172+
rn-display:flex
173+
rn-flexBasis:auto
174+
rn-flexDirection:column
175+
rn-flexShrink:0
176+
rn-font:inherit
177+
rn-height:36px
178+
rn-listStyle:none
179+
rn-marginTop:0px
180+
rn-marginRight:0px
181+
rn-marginBottom:0px
182+
rn-marginLeft:0px
183+
rn-minHeight:0px
184+
rn-minWidth:0px
185+
rn-paddingTop:0px
186+
rn-paddingRight:0px
187+
rn-paddingBottom:0px
188+
rn-paddingLeft:0px
189+
rn-position:relative
190+
rn-textAlign:inherit
191+
rn-textDecoration:none
192+
rn-width:36px"
193+
style={Object {}}>
194+
<svg
195+
height="100%"
196+
viewBox="0 0 32 32"
197+
width="100%">
198+
<circle
199+
cx="16"
200+
cy="16"
201+
fill="none"
202+
r="14"
203+
strokeWidth="4"
204+
style={
205+
Object {
206+
"opacity": 0.2,
207+
"stroke": "#1976D2",
208+
}
209+
} />
210+
<circle
211+
cx="16"
212+
cy="16"
213+
fill="none"
214+
r="14"
215+
strokeWidth="4"
216+
style={
217+
Object {
218+
"stroke": "#1976D2",
219+
"strokeDasharray": 80,
220+
"strokeDashoffset": 60,
221+
}
222+
} />
223+
</svg>
224+
</div>
225+
</div>
226+
`;

‎src/components/ActivityIndicator/__tests__/index-test.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
/* eslint-env jasmine, jest */
22

3+
import ActivityIndicator from '..';
4+
import React from 'react';
5+
import renderer from 'react-test-renderer';
6+
37
describe('components/ActivityIndicator', () => {
4-
test.skip('NO TEST COVERAGE', () => {});
8+
test('default render', () => {
9+
const component = renderer.create(<ActivityIndicator />);
10+
expect(component.toJSON()).toMatchSnapshot();
11+
});
12+
13+
test('other render', () => {
14+
const component = renderer.create(<ActivityIndicator animating={false} hidesWhenStopped={false} size='large' />);
15+
expect(component.toJSON()).toMatchSnapshot();
16+
});
517
});

0 commit comments

Comments
 (0)