Philip Cesar Garay
126 lines
3.6 KiB
JavaScript
126 lines
3.6 KiB
JavaScript
import { View, Text, Image, StyleSheet, Dimensions } from "react-native";
|
|
import React, { useRef, useState } from "react";
|
|
import Page from "../../layouts/Page";
|
|
import { ai, background } from "../../assets";
|
|
import MusicLandHeader from "../../components/MusicLandHeader";
|
|
import GradientButton from "../../components/GradientButton";
|
|
import { goBack, navigate } from "../../navigation/NavigationService";
|
|
import { Routes } from "../../navigation";
|
|
import { gutters } from "../../styles";
|
|
import SwiperFlatList from "react-native-swiper-flatlist";
|
|
import ChooseGenre from "./ChooseGenre";
|
|
import CustomizeVoice from "./CustomizeVoice";
|
|
import ChooseInstruments from "./ChooseInstruments";
|
|
import ChooseRhythm from "./ChooseRhythm";
|
|
import CreatingSong from "./CreatingSong";
|
|
|
|
const { width } = Dimensions.get("window");
|
|
|
|
const ComposeSong = () => {
|
|
const scrollRef = useRef(null);
|
|
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
const [progress, setProgress] = useState(18);
|
|
const [containerLayout, setContainerLayout] = useState(null);
|
|
|
|
const onPressNext = () => {
|
|
setSelectedIndex(selectedIndex + 1);
|
|
setProgress(progress + 9);
|
|
scrollRef.current.scrollToIndex({
|
|
index: selectedIndex + 1,
|
|
animated: true,
|
|
});
|
|
};
|
|
|
|
const onPressBack = () => {
|
|
if (selectedIndex > 0) {
|
|
setSelectedIndex(selectedIndex - 1);
|
|
setProgress(progress - 9);
|
|
scrollRef.current.scrollToIndex({
|
|
index: selectedIndex - 1,
|
|
animated: true,
|
|
});
|
|
} else {
|
|
goBack();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Page backgroundImg={background.studioBG2} headerType="NONE">
|
|
<MusicLandHeader onPressBack={onPressBack} progress={progress} />
|
|
<View style={{ flex: 1, paddingBottom: gutters, gap: 48 }}>
|
|
<View
|
|
style={{ flex: 1 }}
|
|
onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
|
|
>
|
|
<SwiperFlatList
|
|
style={{ width, left: -gutters }}
|
|
ref={scrollRef}
|
|
disableGesture
|
|
>
|
|
<View
|
|
style={{
|
|
width: width,
|
|
height: containerLayout?.height,
|
|
paddingHorizontal: gutters,
|
|
}}
|
|
>
|
|
<ChooseGenre />
|
|
</View>
|
|
<View
|
|
style={{
|
|
width: width,
|
|
height: containerLayout?.height,
|
|
paddingHorizontal: gutters,
|
|
}}
|
|
>
|
|
<CustomizeVoice />
|
|
</View>
|
|
<View
|
|
style={{
|
|
width: width,
|
|
height: containerLayout?.height,
|
|
paddingHorizontal: gutters,
|
|
}}
|
|
>
|
|
<ChooseInstruments />
|
|
</View>
|
|
<View
|
|
style={{
|
|
width: width,
|
|
height: containerLayout?.height,
|
|
paddingHorizontal: gutters,
|
|
}}
|
|
>
|
|
<ChooseRhythm />
|
|
</View>
|
|
<View
|
|
style={{
|
|
width: width,
|
|
height: containerLayout?.height,
|
|
paddingHorizontal: gutters,
|
|
}}
|
|
>
|
|
<CreatingSong active={selectedIndex === 4} />
|
|
</View>
|
|
</SwiperFlatList>
|
|
</View>
|
|
{selectedIndex !== 4 && (
|
|
<GradientButton title="Suivant" onPress={onPressNext} />
|
|
)}
|
|
</View>
|
|
</Page>
|
|
);
|
|
};
|
|
|
|
export default ComposeSong;
|
|
|
|
const styles = StyleSheet.create({
|
|
img: {
|
|
width: "100%",
|
|
height: "70%",
|
|
position: "absolute",
|
|
bottom: -40,
|
|
right: -30,
|
|
},
|
|
});
|