toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

use last index to modify buttons texts

Browse source
This commit is contained in:
Pablo Velez Vidal 2022-10-27 14:23:14 +02:00
parent 92087b8c3f
commit 50b832fbad
2 changed files with 70 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/screens/onboarding/index.tsx
View file

@ -27,19 +27,30 @@ const Onboarding = ({
const translateX = useSharedValue(0);
const styles = getStyleSheet(theme);
const [currentIndex, setCurrentIndex] = useState(0);
const [isLastSlide, setIsLastSlide] = useState(false);
const lastSlideIndex = slidesData.length - 1;
const slidesRef = useRef(null);
const nextSlide = () => {
console.log('\n*** slidesRef 1\n');
if (slidesRef.current && currentIndex < slidesData.length - 1) {
console.log('\n*** slidesRef 2\n');
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
slidesRef.current.scrollToIndex({index: currentIndex + 1});
const nextSlideIndex = currentIndex + 1;
if (slidesRef.current && currentIndex < lastSlideIndex) {
console.log('*** current slide', currentIndex);
console.log('*** next slide', nextSlideIndex);
moveToSlide(nextSlideIndex);
} else {
console.log('*** end of slide');
console.log('*** end of slide', lastSlideIndex);
}
};
const moveToSlide = (slideIndexToMove: number) => {
if (slideIndexToMove === lastSlideIndex) {
setIsLastSlide(true);
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
slidesRef?.current?.scrollToIndex({index: slideIndexToMove});
};
const signInHandler = () => {
console.log('sign in handler');
};
@ -100,8 +111,10 @@ const Onboarding = ({
data={slidesData}
theme={theme}
scrollX={scrollX}
isLastSlide={isLastSlide}
nextSlideHandler={nextSlide}
signInHandler={signInHandler}
moveToSlide={moveToSlide}
/>
</View>
);

72
app/screens/onboarding/paginator.tsx
View file

@ -2,7 +2,7 @@
// See LICENSE.txt for license information.
import React from 'react';
import {View, Animated, useWindowDimensions} from 'react-native';
import {View, Animated, useWindowDimensions, TouchableOpacity} from 'react-native';
import Button from 'react-native-button';
import CompassIcon from '@app/components/compass_icon';
@ -14,8 +14,10 @@ type Props = {
data: any;
theme: Theme;
scrollX: any;
isLastSlide: boolean;
nextSlideHandler: any;
signInHandler: any;
moveToSlide: any;
};
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
@ -49,10 +51,39 @@ const Paginator = ({
scrollX,
nextSlideHandler,
signInHandler,
moveToSlide,
isLastSlide,
}: Props) => {
const styles = getStyleSheet(theme);
const {width} = useWindowDimensions();
let mainButtonText = (
<>
<FormattedText
id='mobile.onboarding.next'
defaultMessage='Next'
style={buttonTextStyle(theme, 'm', 'primary', 'default')}
/>
<CompassIcon
name='arrow-forward-ios'
style={styles.rowIcon}
/>
</>
);
let mainButtonAction = nextSlideHandler;
if (isLastSlide) {
mainButtonText = (
<FormattedText
id='mobile.onboarding.sign_in_to_get_started'
defaultMessage='Sign in to get started'
style={buttonTextStyle(theme, 'm', 'primary', 'default')}
/>
);
mainButtonAction = signInHandler;
}
return (
<View style={{flexDirection: 'column', height: 150}}>
<View style={{flexDirection: 'row', height: 5}}>
@ -66,35 +97,32 @@ const Paginator = ({
});
return (
<Animated.View
style={[styles.dot, {
shadowOffset: {width: 0, height: 13},
shadowOpacity: 0.7,
shadowColor: theme.buttonBg,
shadowRadius: 6,
elevation: 3,
opacity,
}]}
<TouchableOpacity
onPress={() => moveToSlide(i)}
key={item.id}
/>
>
<Animated.View
style={[styles.dot, {
shadowOffset: {width: 0, height: 13},
shadowOpacity: 0.7,
shadowColor: theme.buttonBg,
shadowRadius: 6,
elevation: 3,
opacity,
}]}
key={item.id}
/>
</TouchableOpacity>
);
})}
</View>
<View style={{marginTop: 15}}>
<Button
testID='mobile.onboaring.next'
onPress={() => nextSlideHandler()}
containerStyle={[styles.button, buttonBackgroundStyle(theme, 'm', 'primary', 'default')]}
onPress={() => mainButtonAction()}
containerStyle={[styles.button, buttonBackgroundStyle(theme, 'lg', 'primary', 'default')]}
>
<FormattedText
id='mobile.onboarding.next'
defaultMessage='Next'
style={buttonTextStyle(theme, 'm', 'primary', 'default')}
/>
<CompassIcon
name='arrow-forward-ios'
style={styles.rowIcon}
/>
{mainButtonText}
</Button>
<Button
testID='mobile.onboaring.sign_in'