Thomas Demirdjian
102 lines
2.8 KiB
JavaScript
102 lines
2.8 KiB
JavaScript
import { View, Text, FlatList, StyleSheet, Pressable } from "react-native";
|
||
import React, { useState } from "react";
|
||
import CreateLyricsHeader from "./components/CreateLyricsHeader";
|
||
import { Palette, Style } from "../../styles";
|
||
import { GOALS } from "../../data/data";
|
||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||
import CustomInput from "./components/CustomInput";
|
||
import ItemContainer from "../../components/ItemContainer/ItemContainer";
|
||
|
||
const Goals = ({ selected: selectedProp, setSelected: setSelectedProp, otherObjective, setOtherObjective }) => {
|
||
const [internalSelected, setInternalSelected] = useState(null);
|
||
|
||
const selected = selectedProp ?? internalSelected;
|
||
const setSelected = setSelectedProp ?? setInternalSelected;
|
||
|
||
const onPressSelect = (item) => {
|
||
if (selected === item) {
|
||
setSelected(null);
|
||
} else {
|
||
setSelected(item);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<View style={{ flex: 1, gap: 16, marginTop: 16 }}>
|
||
<View style={{ gap: 10 }}>
|
||
<CreateLyricsHeader title="Quels sont tes objectifs ?" />
|
||
<ItemContainer>
|
||
<FlatList
|
||
data={GOALS}
|
||
showsVerticalScrollIndicator={false}
|
||
contentContainerStyle={styles.contentContainer}
|
||
renderItem={({ item }) => {
|
||
const selectedItem = selected === item;
|
||
|
||
return (
|
||
<CreateLyricsHeader
|
||
onPress={() => onPressSelect(item)}
|
||
tint={selectedItem ? "default" : "dark"}
|
||
colors={
|
||
selectedItem
|
||
? ["#FFFFFF00", "#FFFFFF"]
|
||
: [Palette.tran, Palette.tran]
|
||
}
|
||
containerStyle={{
|
||
...styles.itemContainer,
|
||
}}
|
||
>
|
||
<View
|
||
style={{
|
||
height: 40,
|
||
...Style.containerCenter,
|
||
}}
|
||
>
|
||
<Text style={styles.itemText}>{item}</Text>
|
||
</View>
|
||
</CreateLyricsHeader>
|
||
);
|
||
}}
|
||
/>
|
||
</ItemContainer>
|
||
</View>
|
||
<CustomInput
|
||
label="Tu as un autre objectif?"
|
||
placeholder="Décrire l’objectif"
|
||
value={otherObjective}
|
||
setValue={setOtherObjective}
|
||
/>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
export default Goals;
|
||
|
||
const styles = StyleSheet.create({
|
||
contentContainer: {
|
||
flexGrow: 1,
|
||
padding: 8,
|
||
gap: 10,
|
||
backgroundColor: "#FFFFFF00",
|
||
paddingBottom: 50,
|
||
},
|
||
itemContainer: {
|
||
borderRadius: 14,
|
||
shadowColor: "#00000040",
|
||
shadowOffset: {
|
||
width: 0,
|
||
height: 2,
|
||
},
|
||
shadowOpacity: 0.25,
|
||
shadowRadius: 3.84,
|
||
|
||
elevation: 5,
|
||
},
|
||
itemText: {
|
||
fontSize: 16,
|
||
color: Palette.white,
|
||
fontFamily: FONT_FAMILY.InterRegular,
|
||
textAlign: "center",
|
||
},
|
||
});
|