Skip to content
This repository was archived by the owner on Feb 23, 2021. It is now read-only.

Commit e9bf3c5

Browse files
Move LoadNetworkSpinner to spinner.js for reuse
1 parent 16ba3c9 commit e9bf3c5

File tree

3 files changed

+62
-50
lines changed

3 files changed

+62
-50
lines changed

src/component/spinner.js

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import {
66
ViewPropTypes,
77
} from 'react-native';
88
import PropTypes from 'prop-types';
9-
import { color } from './style';
9+
import Text from '../component/text';
10+
import { color, font } from './style';
1011
import Icon from './icon';
1112
import Svg, { Path, Circle, Defs, Stop, LinearGradient } from './svg';
1213

@@ -29,6 +30,46 @@ export const SmallSpinner = ({ ...props }) => (
2930
/>
3031
);
3132

33+
//
34+
// Load Network Spinner
35+
//
36+
37+
const size = 80;
38+
const progressWidth = 3;
39+
40+
const loadNetworkStyles = StyleSheet.create({
41+
bolt: {
42+
height: 126 / 4.5,
43+
width: 64 / 4.5,
44+
},
45+
copy: {
46+
fontSize: font.sizeXS,
47+
marginTop: 5,
48+
color: color.white,
49+
textAlign: 'center',
50+
},
51+
});
52+
53+
export const LoadNetworkSpinner = ({ percentage, msg, style }) => (
54+
<View style={style}>
55+
<ResizeableSpinner
56+
percentage={percentage}
57+
size={size}
58+
progressWidth={progressWidth}
59+
gradient="loadNetworkGrad"
60+
icon="lightning-bolt"
61+
iconStyles={loadNetworkStyles.bolt}
62+
/>
63+
<Text style={loadNetworkStyles.copy}>{msg}</Text>
64+
</View>
65+
);
66+
67+
LoadNetworkSpinner.propTypes = {
68+
percentage: PropTypes.number.isRequired,
69+
msg: PropTypes.string.isRequired,
70+
style: ViewPropTypes.style,
71+
};
72+
3273
//
3374
// Resizeable Spinner
3475
//

src/view/loader-syncing.js

Lines changed: 4 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react';
2-
import { StyleSheet, View, ViewPropTypes } from 'react-native';
2+
import { StyleSheet, View } from 'react-native';
33
import PropTypes from 'prop-types';
44
import Background from '../component/background';
5-
import { Text, H1Text, CopyText } from '../component/text';
5+
import { H1Text, CopyText } from '../component/text';
66
import MainContent from '../component/main-content';
7-
import { ResizeableSpinner } from '../component/spinner';
7+
import { LoadNetworkSpinner } from '../component/spinner';
88
import { DownButton } from '../component/button';
9-
import { color, font } from '../component/style';
9+
import { color } from '../component/style';
1010

1111
const styles = StyleSheet.create({
1212
spinner: {
@@ -37,46 +37,6 @@ LoaderSyncingView.propTypes = {
3737
store: PropTypes.object.isRequired,
3838
};
3939

40-
//
41-
// Load Network Spinner
42-
//
43-
44-
const size = 80;
45-
const progressWidth = 3;
46-
47-
const loadNetworkStyles = StyleSheet.create({
48-
bolt: {
49-
height: 126 / 4.5,
50-
width: 64 / 4.5,
51-
},
52-
copy: {
53-
fontSize: font.sizeXS,
54-
marginTop: 5,
55-
color: color.white,
56-
textAlign: 'center',
57-
},
58-
});
59-
60-
export const LoadNetworkSpinner = ({ percentage, msg, style }) => (
61-
<View style={style}>
62-
<ResizeableSpinner
63-
percentage={percentage}
64-
size={size}
65-
progressWidth={progressWidth}
66-
gradient="loadNetworkGrad"
67-
icon="lightning-bolt"
68-
iconStyles={loadNetworkStyles.bolt}
69-
/>
70-
<Text style={loadNetworkStyles.copy}>{msg}</Text>
71-
</View>
72-
);
73-
74-
LoadNetworkSpinner.propTypes = {
75-
percentage: PropTypes.number.isRequired,
76-
msg: PropTypes.string.isRequired,
77-
style: ViewPropTypes.style,
78-
};
79-
8040
//
8141
// Copy Section
8242
//

stories/component/spinner.js

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React from 'react';
22
import { storiesOf } from '@storybook/react';
33
import MainContent from '../../src/component/main-content';
4-
import { SmallSpinner } from '../../src/component/spinner';
5-
import { LoadNetworkSpinner } from '../../src/view/loader-syncing';
4+
import { SmallSpinner, LoadNetworkSpinner } from '../../src/component/spinner';
65
import { color } from '../../src/component/style';
76
import Background from '../../src/component/background';
87

@@ -18,8 +17,20 @@ storiesOf('Spinner', module)
1817
))
1918
.add('Load Network Spinner', () => (
2019
<MainContent style={{ alignItems: 'flex-start', flexDirection: 'row' }}>
21-
<LoadNetworkSpinner percentage={30} msg="Loading network..." />
22-
<LoadNetworkSpinner percentage={50} msg="Almost done..." />
23-
<LoadNetworkSpinner percentage={100} msg="Just a few seconds..." />
20+
<LoadNetworkSpinner
21+
percentage={30}
22+
msg="Loading network..."
23+
style={{ margin: 20 }}
24+
/>
25+
<LoadNetworkSpinner
26+
percentage={50}
27+
msg="Almost done..."
28+
style={{ margin: 20 }}
29+
/>
30+
<LoadNetworkSpinner
31+
percentage={100}
32+
msg="Just a few seconds..."
33+
style={{ margin: 20 }}
34+
/>
2435
</MainContent>
2536
));

0 commit comments

Comments
 (0)