123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407 |
- // @flow
-
- import * as React from 'react';
- import {Platform, StatusBar, StyleSheet, View} from "react-native";
- import type {MaterialCommunityIconsGlyphs} from "react-native-vector-icons/MaterialCommunityIcons";
- import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
- import i18n from 'i18n-js';
- import AppIntroSlider from "react-native-app-intro-slider";
- import Update from "../../constants/Update";
- import ThemeManager from "../../managers/ThemeManager";
- import LinearGradient from 'react-native-linear-gradient';
- import Mascot, {MASCOT_STYLE} from "../Mascot/Mascot";
- import * as Animatable from "react-native-animatable";
- import {Card} from "react-native-paper";
-
- type Props = {
- onDone: Function,
- isUpdate: boolean,
- isAprilFools: boolean,
- };
-
- type State = {
- currentSlide: number,
- }
-
- type Slide = {
- key: string,
- title: string,
- text: string,
- view: () => React.Node,
- mascotStyle: number,
- colors: [string, string]
- };
-
- /**
- * Class used to create intro slides
- */
- export default class CustomIntroSlider extends React.Component<Props, State> {
-
- state = {
- currentSlide: 0,
- }
-
- sliderRef: { current: null | AppIntroSlider };
-
- introSlides: Array<Slide>;
- updateSlides: Array<Slide>;
- aprilFoolsSlides: Array<Slide>;
- currentSlides: Array<Slide>;
-
- /**
- * Generates intro slides
- */
- constructor() {
- super();
- this.sliderRef = React.createRef();
- this.introSlides = [
- {
- key: '0', // Mascot
- title: i18n.t('intro.slideMain.title'),
- text: i18n.t('intro.slideMain.text'),
- view: this.getWelcomeView,
- mascotStyle: MASCOT_STYLE.NORMAL,
- colors: ['#be1522', '#57080e'],
- },
- {
- key: '1',
- title: i18n.t('intro.slidePlanex.title'),
- text: i18n.t('intro.slidePlanex.text'),
- view: () => this.getIconView("calendar-clock"),
- mascotStyle: MASCOT_STYLE.INTELLO,
- colors: ['#be1522', '#57080e'],
- },
- {
- key: '2',
- title: i18n.t('intro.slideEvents.title'),
- text: i18n.t('intro.slideEvents.text'),
- view: () => this.getIconView("calendar-star",),
- mascotStyle: MASCOT_STYLE.HAPPY,
- colors: ['#be1522', '#57080e'],
- },
- {
- key: '3',
- title: i18n.t('intro.slideServices.title'),
- text: i18n.t('intro.slideServices.text'),
- view: () => this.getIconView("view-dashboard-variant",),
- mascotStyle: MASCOT_STYLE.CUTE,
- colors: ['#be1522', '#57080e'],
- },
- {
- key: '4',
- title: i18n.t('intro.slideDone.title'),
- text: i18n.t('intro.slideDone.text'),
- view: () => this.getEndView(),
- mascotStyle: MASCOT_STYLE.COOL,
- colors: ['#9c165b', '#3e042b'],
- },
- ];
- this.updateSlides = [];
- for (let i = 0; i < Update.slidesNumber; i++) {
- this.updateSlides.push(
- {
- key: i.toString(),
- title: Update.getInstance().titleList[i],
- text: Update.getInstance().descriptionList[i],
- icon: Update.iconList[i],
- colors: Update.colorsList[i],
- },
- );
- }
-
- this.aprilFoolsSlides = [
- {
- key: '1',
- title: i18n.t('intro.aprilFoolsSlide.title'),
- text: i18n.t('intro.aprilFoolsSlide.text'),
- view: () => <View/>,
- mascotStyle: MASCOT_STYLE.NORMAL,
- colors: ['#e01928', '#be1522'],
- },
- ];
- }
-
- /**
- * Render item to be used for the intro introSlides
- *
- * @param item The item to be displayed
- * @param dimensions Dimensions of the item
- */
- getIntroRenderItem = ({item, dimensions}: { item: Slide, dimensions: { width: number, height: number } }) => {
- const index = parseInt(item.key);
- return (
- <LinearGradient
- style={[
- styles.mainContent,
- dimensions
- ]}
- colors={item.colors}
- start={{x: 0, y: 0.1}}
- end={{x: 0.1, y: 1}}
- >
- {this.state.currentSlide === index
- ? <View style={{height: "100%", flex: 1}}>
- <View style={{flex: 1}}>
- {item.view()}
- </View>
- <Animatable.View
- animation={"fadeIn"}>
- {index !== 0 && index !== this.introSlides.length -1
- ? <Animatable.View
- animation={"pulse"}
- iterationCount={"infinite"}
- duration={2000}
- style={{
- marginLeft: 30,
- marginBottom: 0,
- width: 100,
- marginTop: -30,
- }}>
- <Mascot emotion={item.mascotStyle} size={100}/>
- </Animatable.View> : null}
-
- <View style={{
- marginLeft: 50,
- width: 0,
- height: 0,
- borderLeftWidth: 20,
- borderRightWidth: 0,
- borderBottomWidth: 20,
- borderStyle: 'solid',
- backgroundColor: 'transparent',
- borderLeftColor: 'transparent',
- borderRightColor: 'transparent',
- borderBottomColor: "rgba(0,0,0,0.60)",
- }}/>
- <Card style={{
- backgroundColor: "rgba(0,0,0,0.38)",
- marginHorizontal: 20,
- borderColor: "rgba(0,0,0,0.60)",
- borderWidth: 4,
- borderRadius: 10,
- }}>
- <Card.Content>
- <Animatable.Text
- animation={"fadeIn"}
- delay={100}
- style={styles.title}>
- {item.title}
- </Animatable.Text>
- <Animatable.Text
- animation={"fadeIn"}
- delay={200}
- style={styles.text}>
- {item.text}
- </Animatable.Text>
- </Card.Content>
- </Card>
- </Animatable.View>
- </View> : null}
- </LinearGradient>
- );
- }
-
- getEndView = () => {
- return (
- <View style={{flex: 1}}>
- <View
- style={styles.center}>
- <Mascot
- size={250}
- emotion={MASCOT_STYLE.COOL}
- animated={true}
- entryAnimation={{
- animation: "slideInDown",
- duration: 2000,
- }}
- loopAnimation={{
- animation: "pulse",
- duration: 2000,
- iterationCount: "infinite"
- }}
- />
- </View>
- </View>
- );
- }
-
- getWelcomeView = () => {
- return (
- <View style={{flex: 1}}>
- <View
- style={styles.center}>
- <Mascot
- size={250}
- emotion={MASCOT_STYLE.NORMAL}
- animated={true}
- entryAnimation={{
- animation: "bounceIn",
- duration: 2000,
- }}
- />
- <Animatable.Text
- useNativeDriver={true}
- animation={"fadeInUp"}
- duration={500}
-
- style={{
- color: "#fff",
- textAlign: "center",
- fontSize: 25,
- }}>
- PABLO
- </Animatable.Text>
- <Animatable.View
- useNativeDriver={true}
- animation={"fadeInUp"}
- duration={500}
- delay={200}
-
- style={{
- position: "absolute",
- top: 210,
- left: 160,
- width: 50,
- height: 50,
- }}>
- <MaterialCommunityIcons
- style={{
- marginLeft: "auto",
- marginRight: "auto",
- marginTop: "auto",
- marginBottom: "auto",
- transform: [{rotateZ: "70deg"}],
- }}
- name={"undo"}
- color={'#fff'}
- size={40}/>
- </Animatable.View>
- </View>
- </View>
- )
- }
-
- getIconView(icon: MaterialCommunityIconsGlyphs) {
- return (
- <View style={{flex: 1}}>
- <Animatable.View
- style={styles.center}
- animation={"fadeIn"}
- >
- <MaterialCommunityIcons
- name={icon}
- color={'#fff'}
- size={200}/>
- </Animatable.View>
- </View>
- )
- }
-
- setStatusBarColor(color: string) {
- if (Platform.OS === 'android')
- StatusBar.setBackgroundColor(color, true);
- }
-
- onSlideChange = (index: number, lastIndex: number) => {
- this.setStatusBarColor(this.currentSlides[index].colors[0]);
- this.setState({currentSlide: index});
- };
-
- onSkip = () => {
- this.setStatusBarColor(this.currentSlides[this.currentSlides.length - 1].colors[0]);
- if (this.sliderRef.current != null)
- this.sliderRef.current.goToSlide(this.currentSlides.length - 1);
- }
-
- onDone = () => {
- this.setStatusBarColor(ThemeManager.getCurrentTheme().colors.surface);
- this.props.onDone();
- }
-
- renderNextButton = () => {
- return (
- <Animatable.View
- animation={"fadeIn"}
-
- style={{
- borderRadius: 25,
- padding: 5,
- backgroundColor: "rgba(0,0,0,0.2)"
- }}>
- <MaterialCommunityIcons
- name={"arrow-right"}
- color={'#fff'}
- size={40}/>
- </Animatable.View>
- )
- }
-
- renderDoneButton = () => {
- return (
- <Animatable.View
- animation={"bounceIn"}
-
- style={{
- borderRadius: 25,
- padding: 5,
- backgroundColor: "rgb(190,21,34)"
- }}>
- <MaterialCommunityIcons
- name={"check"}
- color={'#fff'}
- size={40}/>
- </Animatable.View>
- )
- }
-
- render() {
- this.currentSlides = this.introSlides;
- if (this.props.isUpdate)
- this.currentSlides = this.updateSlides;
- else if (this.props.isAprilFools)
- this.currentSlides = this.aprilFoolsSlides;
- this.setStatusBarColor(this.currentSlides[0].colors[0]);
- return (
- <AppIntroSlider
- ref={this.sliderRef}
- data={this.currentSlides}
- extraData={this.state.currentSlide}
-
- renderItem={this.getIntroRenderItem}
- renderNextButton={this.renderNextButton}
- renderDoneButton={this.renderDoneButton}
-
- onDone={this.onDone}
- onSlideChange={this.onSlideChange}
- onSkip={this.onSkip}
- />
- );
- }
-
- }
-
-
- const styles = StyleSheet.create({
- mainContent: {
- paddingBottom: 100,
- },
- text: {
- color: 'rgba(255, 255, 255, 0.8)',
- backgroundColor: 'transparent',
- textAlign: 'center',
- paddingHorizontal: 16,
- },
- title: {
- fontSize: 22,
- color: 'white',
- backgroundColor: 'transparent',
- textAlign: 'center',
- marginBottom: 16,
- },
- center: {
- marginTop: 'auto',
- marginBottom: 'auto',
- marginRight: 'auto',
- marginLeft: 'auto',
- }
- });
|