Skip to content

Commit 3084708

Browse files
auserauser
committed
Simplified the rendering between platforms, allow dotStyles to manage all dot styles (active and inactive)
1 parent 9633cb9 commit 3084708

File tree

1 file changed

+99
-93
lines changed

1 file changed

+99
-93
lines changed

‎AppIntro.js‎

Lines changed: 99 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,6 @@ const defaulStyles = {
6262
},
6363
activeDotStyle: {
6464
backgroundColor: '#fff',
65-
width: 13,
66-
height: 13,
67-
borderRadius: 7,
68-
marginLeft: 7,
69-
marginRight: 7,
70-
marginTop: 7,
71-
marginBottom: 7,
7265
},
7366
paginationContainer: {
7467
position: 'absolute',
@@ -188,72 +181,119 @@ export default class AppIntro extends Component {
188181
};
189182
}
190183

191-
renderSkipButton = () => {
192-
if (this.props.renderSkipButton) {
193-
return (
194-
<Animated.View style={[this.styles.btnContainer, {
195-
opacity: this.state.skipFadeOpacity,
196-
transform: [{
197-
translateX: this.state.skipFadeOpacity.interpolate({
198-
inputRange: [0, 1],
199-
outputRange: [0, 15],
200-
}),
201-
}],
202-
}]}
203-
>
204-
<TouchableOpacity
205-
style={this.styles.full}
206-
onPress={isSkipBtnShow ? () => this.props.onSkipBtnClick(index) : null}
207-
>
208-
<Text style={[this.styles.controllText, { color: rightTextColor }]}>{this.props.skipBtnLabel}</Text>
209-
</TouchableOpacity>
210-
</Animated.View>
211-
)
212-
}
213-
}
214-
215-
renderDoneButton = () => {
216-
if (this.props.renderDoneButton) {
217-
return (
218-
<View style={this.styles.btnContainer}>
219-
<Animated.View style={[this.styles.full, { height: 0 }, {
220-
opacity: this.state.doneFadeOpacity,
184+
renderSkipButton = (isSkipBtnShow, index) => {
185+
if (this.props.showSkipButton) {
186+
if (Platform.OS === 'ios') {
187+
return (
188+
<Animated.View style={[this.styles.btnContainer, {
189+
opacity: this.state.skipFadeOpacity,
221190
transform: [{
222191
translateX: this.state.skipFadeOpacity.interpolate({
223192
inputRange: [0, 1],
224-
outputRange: [0, 20],
193+
outputRange: [0, 15],
225194
}),
226195
}],
227196
}]}
228197
>
229-
<View style={this.styles.full}>
230-
<Text style={[this.styles.controllText, {
231-
color: rightTextColor, paddingRight: 30,
232-
}]}
233-
>{this.props.doneBtnLabel}</Text>
234-
</View>
198+
<TouchableOpacity
199+
style={this.styles.full}
200+
onPress={isSkipBtnShow ? () => this.props.onSkipBtnClick(index) : null}
201+
>
202+
<Text style={[this.styles.controllText, { color: this.props.rightTextColor }]}>{this.props.skipBtnLabel}</Text>
203+
</TouchableOpacity>
235204
</Animated.View>
236-
<Animated.View style={[this.styles.full, { height: 0 }, { opacity: this.state.nextOpacity }]}>
205+
)
206+
} else {
207+
return (
208+
<View style={[this.styles.btnContainer, {
209+
paddingBottom: 5,
210+
opacity: isSkipBtnShow ? 1 : 0,
211+
}]}
212+
>
213+
<TouchableOpacity
214+
style={this.styles.full}
215+
onPress={isSkipBtnShow ? () => this.props.onSkipBtnClick(index) : null}
216+
>
217+
<Text style={[this.styles.controllText, { color: this.props.leftTextColor }]}>{this.props.skipBtnLabel}</Text>
218+
</TouchableOpacity>
219+
</View>
220+
)
221+
}
222+
}
223+
}
224+
225+
renderDoneButton = (isDoneBtnShow, context) => {
226+
if (this.props.showDoneButton) {
227+
if (Platform.OS === 'ios') {
228+
return (
229+
<View style={this.styles.btnContainer}>
230+
<Animated.View style={[this.styles.full, { height: 0 }, {
231+
opacity: this.state.doneFadeOpacity,
232+
transform: [{
233+
translateX: this.state.skipFadeOpacity.interpolate({
234+
inputRange: [0, 1],
235+
outputRange: [0, 20],
236+
}),
237+
}],
238+
}]}
239+
>
240+
<View style={this.styles.full}>
241+
<Text style={[this.styles.controllText, {
242+
color: rightTextColor, paddingRight: 30,
243+
}]}
244+
>{this.props.doneBtnLabel}</Text>
245+
</View>
246+
</Animated.View>
247+
<Animated.View style={[this.styles.full, { height: 0 }, { opacity: this.state.nextOpacity }]}>
248+
<TouchableOpacity style={this.styles.full}
249+
onPress={ isDoneBtnShow ?
250+
this.props.onDoneBtnClick : this.onNextBtnClick.bind(this, context)}
251+
>
252+
<Text style={[this.styles.nextButtonText, { color: this.props.rightTextColor }]}>{this.props.nextBtnLabel}</Text>
253+
</TouchableOpacity>
254+
</Animated.View>
255+
</View>
256+
)
257+
} else {
258+
return (
259+
<View style={[this.styles.btnContainer, { height: 0, paddingBottom: 5 }]}>
237260
<TouchableOpacity style={this.styles.full}
238261
onPress={ isDoneBtnShow ?
239262
this.props.onDoneBtnClick : this.onNextBtnClick.bind(this, context)}
240263
>
241-
<Text style={[this.styles.nextButtonText, { color: rightTextColor }]}>{this.props.nextBtnLabel}</Text>
264+
<Text style={[this.styles.nextButtonText, { color: this.props.rightTextColor }]}>
265+
{isDoneBtnShow ? this.props.doneBtnLabel : this.props.nextBtnLabel}
266+
</Text>
242267
</TouchableOpacity>
243-
</Animated.View>
268+
</View>
269+
)
270+
}
271+
}
272+
}
273+
274+
renderDots = (dots) => {
275+
if (this.props.showDots) {
276+
return (
277+
<View style={this.styles.dotContainer}>
278+
{dots}
244279
</View>
245280
)
246281
}
247282
}
248283

249284
renderPagination = (index, total, context) => {
285+
console.log('renderPagination ->', index, total);
250286
const { activeDotColor, dotColor, rightTextColor, leftTextColor } = this.props;
251287
const ActiveDot = (
252288
<View
253-
style={[this.styles.activeDotStyle, { backgroundColor: activeDotColor }]}
289+
style={[this.styles.dotStyle, this.styles.activeDotStyle, { backgroundColor: activeDotColor }]}
254290
/>
255291
);
256-
const Dot = <View style={[this.styles.dotStyle, { backgroundColor: dotColor }]} />;
292+
const Dot = (
293+
<View
294+
style={[this.styles.dotStyle, { backgroundColor: dotColor }]} />
295+
);
296+
257297
let dots = [];
258298
for (let i = 0; i < total; i++) {
259299
dots.push(i === index ?
@@ -277,49 +317,13 @@ export default class AppIntro extends Component {
277317
isDoneBtnShow = false;
278318
isSkipBtnShow = true;
279319
}
280-
let controllBts;
281-
if (Platform.OS === 'ios') {
282-
controllBts = (
283-
<View style={[this.styles.paginationContainer]}>
284-
{this.renderSkipButton()}
285-
<View style={this.styles.dotContainer}>
286-
{dots}
287-
</View>
288-
{this.renderDoneButton()}
289-
</View>
290-
);
291-
} else {
292-
controllBts = (
293-
<View style={[this.styles.paginationContainer]}>
294-
<View style={[this.styles.btnContainer, {
295-
paddingBottom: 5,
296-
opacity: isSkipBtnShow ? 1 : 0,
297-
}]}
298-
>
299-
<TouchableOpacity
300-
style={this.styles.full}
301-
onPress={isSkipBtnShow ? () => this.props.onSkipBtnClick(index) : null}
302-
>
303-
<Text style={[this.styles.controllText, { color: leftTextColor }]}>{this.props.skipBtnLabel}</Text>
304-
</TouchableOpacity>
305-
</View>
306-
<View style={this.styles.dotContainer}>
307-
{dots}
308-
</View>
309-
<View style={[this.styles.btnContainer, { height: 0, paddingBottom: 5 }]}>
310-
<TouchableOpacity style={this.styles.full}
311-
onPress={ isDoneBtnShow ?
312-
this.props.onDoneBtnClick : this.onNextBtnClick.bind(this, context)}
313-
>
314-
<Text style={[this.styles.nextButtonText, { color: rightTextColor }]}>
315-
{isDoneBtnShow ? this.props.doneBtnLabel : this.props.nextBtnLabel}
316-
</Text>
317-
</TouchableOpacity>
318-
</View>
319-
</View>
320-
);
321-
}
322-
return controllBts;
320+
return (
321+
<View style={[this.styles.paginationContainer]}>
322+
{this.renderSkipButton(isSkipBtnShow, index)}
323+
{this.renderDots(dots)}
324+
{this.renderDoneButton(isDoneBtnShow, context)}
325+
</View>
326+
);
323327
}
324328

325329
renderBasicSlidePage = (index, {
@@ -454,6 +458,7 @@ AppIntro.propTypes = {
454458
defaultIndex: PropTypes.number,
455459
showSkipButton: PropTypes.bool,
456460
showDoneButton: PropTypes.bool,
461+
showDots: PropTypes.bool,
457462
renderDoneButton: PropTypes.element,
458463
renderSkipButton: PropTypes.element
459464
};
@@ -473,5 +478,6 @@ AppIntro.defaultProps = {
473478
nextBtnLabel: '›',
474479
defaultIndex: 0,
475480
showSkipButton: true,
476-
showDoneButton: true
481+
showDoneButton: true,
482+
showDots: true
477483
};

0 commit comments

Comments
 (0)