Skip to content

Commit 43bb686

Browse files
simform-solutionssimform-solutions
authored
Merge pull request #6 from simformsolutions/develop
Design Fix
2 parents e6b2d63 + 0dfc0e1 commit 43bb686

File tree

2 files changed

+114
-77
lines changed

2 files changed

+114
-77
lines changed

‎components/Spinner.js‎

Lines changed: 113 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,29 @@ function getSpinnerBackgroundStyle (spinnerType, customButtonStyle, defaultButto
2020
let width = height;
2121
let backgroundColor = customButtonStyle.backgroundColor ? customButtonStyle.backgroundColor : defaultButtonStyle.backgroundColor;
2222
let margin = customButtonStyle.margin ? customButtonStyle.margin : defaultButtonStyle.margin;
23+
let marginTop = customButtonStyle.marginTop ? customButtonStyle.marginTop : defaultButtonStyle.margin;
24+
let marginBottom = customButtonStyle.marginBottom ? customButtonStyle.marginBottom : defaultButtonStyle.margin;
25+
let marginLeft = customButtonStyle.marginLeft ? customButtonStyle.marginLeft : defaultButtonStyle.margin;
26+
let marginRight = customButtonStyle.marginRight ? customButtonStyle.marginRight : defaultButtonStyle.margin;
27+
let marginVertical = customButtonStyle.marginVertical ? customButtonStyle.marginVertical : defaultButtonStyle.margin;
28+
let marginHorizontal = customButtonStyle.marginHorizontal ? customButtonStyle.marginHorizontal : defaultButtonStyle.margin;
2329
let customSpinnerStyle = {
2430
height,
2531
width,
2632
backgroundColor,
2733
margin,
34+
marginVertical,
35+
marginHorizontal,
36+
marginTop,
37+
marginBottom,
38+
marginLeft,
39+
marginRight,
2840
borderRadius,
2941
justifyContent: 'center',
3042
alignItems: 'center',
3143
};
44+
console.log('customButtonStyle = ', customButtonStyle)
45+
console.log('customSpinnerStyle = ', customSpinnerStyle)
3246
switch (spinnerType) {
3347
case 'BallIndicator':
3448
return customSpinnerStyle;
@@ -108,76 +122,91 @@ const SpinnerComponent = (props) => {
108122
let customButtonStyle = StyleSheet.flatten(buttonStyle);
109123
let defaultButtonStyle = StyleSheet.flatten(styles.defaultButtonStyle);
110124
let height = customButtonStyle.height ? customButtonStyle.height : defaultButtonStyle.height;
125+
let width = customButtonStyle.width ? customButtonStyle.width : defaultButtonStyle.width;
111126
let customSpinnerStyle = getSpinnerBackgroundStyle(spinnerType, customButtonStyle, defaultButtonStyle, spinnerOptions);
112127
switch (spinnerType) {
113128
case 'BallIndicator':
114129
return (
115-
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
116-
<BallIndicator
117-
color={spinnerColor || 'rgb(255, 255, 255)'}
118-
count={indicatorCount}
119-
size={height - 20}
120-
/>
121-
</Animatable.View>
130+
<View style={{ width: width, alignItems: 'center', justifyContent: 'center' }}>
131+
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
132+
<BallIndicator
133+
color={spinnerColor || 'rgb(255, 255, 255)'}
134+
count={indicatorCount}
135+
size={height - 20}
136+
/>
137+
</Animatable.View>
138+
</View>
122139
);
123140
case 'BarIndicator':
124141
return (
125-
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
126-
<BarIndicator
127-
color={spinnerColor || 'rgb(255, 255, 255)'}
128-
count={indicatorCount}
129-
size={height - 10}
130-
/>
131-
</Animatable.View>
142+
<View style={{ width: width, alignItems: 'center', justifyContent: 'center' }}>
143+
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
144+
<BarIndicator
145+
color={spinnerColor || 'rgb(255, 255, 255)'}
146+
count={indicatorCount}
147+
size={height - 10}
148+
/>
149+
</Animatable.View>
150+
</View>
132151
);
133152
case 'DotIndicator':
134153
return (
135-
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
136-
<DotIndicator
137-
color={spinnerColor || 'rgb(255, 255, 255)'}
138-
count={indicatorCount}
139-
size={size}
140-
/>
141-
</Animatable.View>
154+
<View style={{ width: width, alignItems: 'center', justifyContent: 'center' }}>
155+
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
156+
<DotIndicator
157+
color={spinnerColor || 'rgb(255, 255, 255)'}
158+
count={indicatorCount}
159+
size={size}
160+
/>
161+
</Animatable.View>
162+
</View>
142163
);
143164
case 'MaterialIndicator':
144165
// Note: To overcome https://github.com/n4kz/react-native-indicators/issues/11 and
145166
// https://github.com/n4kz/react-native-indicators/issues/6 ActivityIndicator is used in android
146167
if (Platform.OS === 'android') {
147168
return (
169+
<View style={{ width: width, alignItems: 'center', justifyContent: 'center' }}>
170+
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
171+
<ActivityIndicator
172+
color={spinnerColor || 'rgb(255, 255, 255)'}
173+
size={height - 10}
174+
/>
175+
</Animatable.View>
176+
</View>
177+
);
178+
}
179+
return (
180+
<View style={{ width: width, alignItems: 'center', justifyContent: 'center' }}>
148181
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
149-
<ActivityIndicator
182+
<MaterialIndicator
150183
color={spinnerColor || 'rgb(255, 255, 255)'}
151184
size={height - 10}
152185
/>
153186
</Animatable.View>
187+
</View>
154188
);
155-
}
156-
return (
157-
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
158-
<MaterialIndicator
159-
color={spinnerColor || 'rgb(255, 255, 255)'}
160-
size={height - 10}
161-
/>
162-
</Animatable.View>
163-
);
164189
case 'PacmanIndicator':
165190
return (
166-
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
167-
<PacmanIndicator
168-
color={spinnerColor || 'rgb(255, 255, 255)'}
169-
size={height - 10}
170-
/>
171-
</Animatable.View>
191+
<View style={{ width: width, alignItems: 'center', justifyContent: 'center' }}>
192+
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
193+
<PacmanIndicator
194+
color={spinnerColor || 'rgb(255, 255, 255)'}
195+
size={height - 10}
196+
/>
197+
</Animatable.View>
198+
</View>
172199
);
173200
case 'PulseIndicator':
174201
return (
175-
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
176-
<PulseIndicator
177-
color={spinnerColor || 'rgb(255, 255, 255)'}
178-
size={height}
179-
/>
180-
</Animatable.View>
202+
<View style={{ width: width, alignItems: 'center', justifyContent: 'center' }}>
203+
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
204+
<PulseIndicator
205+
color={spinnerColor || 'rgb(255, 255, 255)'}
206+
size={height}
207+
/>
208+
</Animatable.View>
209+
</View>
181210
);
182211
case 'SkypeIndicator':
183212
let minScale = 0.2;
@@ -189,26 +218,30 @@ const SpinnerComponent = (props) => {
189218
maxScale = spinnerOptions.maxScale;
190219
}
191220
return (
192-
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
193-
<SkypeIndicator
194-
color={spinnerColor || 'rgb(255, 255, 255)'}
195-
count={indicatorCount}
196-
// size={height - (10 * spinnerOptions.maxScale)}
197-
size={height - 10}
198-
// minScale={minScale}
199-
// maxScale={maxScale}
200-
/>
201-
</Animatable.View>
221+
<View style={{ width: width, alignItems: 'center', justifyContent: 'center' }}>
222+
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
223+
<SkypeIndicator
224+
color={spinnerColor || 'rgb(255, 255, 255)'}
225+
count={indicatorCount}
226+
// size={height - (10 * spinnerOptions.maxScale)}
227+
size={height - 10}
228+
// minScale={minScale}
229+
// maxScale={maxScale}
230+
/>
231+
</Animatable.View>
232+
</View>
202233
);
203234
case 'UIActivityIndicator':
204235
return (
205-
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
206-
<UIActivityIndicator
207-
color={spinnerColor || 'rgb(255, 255, 255)'}
208-
count={indicatorCount}
209-
size={height - 10}
210-
/>
211-
</Animatable.View>
236+
<View style={{ width: width, alignItems: 'center', justifyContent: 'center' }}>
237+
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
238+
<UIActivityIndicator
239+
color={spinnerColor || 'rgb(255, 255, 255)'}
240+
count={indicatorCount}
241+
size={height - 10}
242+
/>
243+
</Animatable.View>
244+
</View>
212245
);
213246
case 'WaveIndicator':
214247
let waveFactor = 0.54;
@@ -220,25 +253,29 @@ const SpinnerComponent = (props) => {
220253
waveMode = spinnerOptions.waveMode;
221254
}
222255
return (
223-
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
224-
<WaveIndicator
225-
color={spinnerColor || 'rgb(255, 255, 255)'}
226-
count={indicatorCount}
227-
size={height - 10}
228-
waveFactor={waveFactor}
229-
waveMode={waveMode}
230-
/>
231-
</Animatable.View>
256+
<View style={{ width: width, alignItems: 'center', justifyContent: 'center' }}>
257+
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
258+
<WaveIndicator
259+
color={spinnerColor || 'rgb(255, 255, 255)'}
260+
count={indicatorCount}
261+
size={height - 10}
262+
waveFactor={waveFactor}
263+
waveMode={waveMode}
264+
/>
265+
</Animatable.View>
266+
</View>
232267
);
233268
default:
234269
return (
235-
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
236-
<BallIndicator
237-
color={spinnerColor || 'rgb(255, 255, 255)'}
238-
count={indicatorCount}
239-
size={height - 20}
240-
/>
241-
</Animatable.View>
270+
<View style={{ width: width, alignItems: 'center', justifyContent: 'center' }}>
271+
<Animatable.View animation={animationType || 'fadeIn'} style={[styles.defaultSpinnerContainerStyle, customSpinnerStyle]}>
272+
<BallIndicator
273+
color={spinnerColor || 'rgb(255, 255, 255)'}
274+
count={indicatorCount}
275+
size={height - 20}
276+
/>
277+
</Animatable.View>
278+
</View>
242279
);
243280
}
244281
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-spinner-button",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"description": "This is a react-native button component with a spinner. You can load a spinner or a button from the same component depending on a flag. for eg, you have a button. And on press of that button you are doing something and wants the user to show a spinner, all you have to do is use this component. You can pass along a boolean flag. The component will render a spinner if the flag is true and button if the flag is false.",
55
"author": "Rupal Patel <[email protected]>",
66
"main": "./components/SpinnerButton.js",

0 commit comments

Comments
 (0)