leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix list selection and other tickets

Browse Source
This commit is contained in:
Thomas Demirdjian
2025-09-09 11:57:21 +02:00
parent 69977aba2b
commit 11f65023b7
23 changed files with 483 additions and 1397 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Playback/RecordPlayback.js
+20 -1
View File
@@ -8,7 +8,7 @@ import React, {
useRef,
useState,
} from "react";
import { Text, View } from "react-native";
import { Alert, Text, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Svg, { Circle } from "react-native-svg";
import GradientButton from "../../components/GradientButton";
@@ -355,6 +355,25 @@ const RecordPlayback = ({ route }) => {
clearInterval(checkSongEndRef.current);
checkSongEndRef.current = null;
}
// Inform the user when using a simulator where recording isn't supported
const msg = String(e?.message || e || "");
if (/not supported on the simulator/i.test(msg)) {
Alert.alert(
"Indisponible sur simulateur",
"L’enregistrement vidéo n’est pas disponible sur le simulateur. Merci d’utiliser un appareil réel.",
[
{
text: "OK",
onPress: () => {
try {
goBack();
} catch (_) {}
},
},
],
{ cancelable: false }
);
}
}
};
src/screens/Profile/Profile.js
+2 -2
View File
@@ -65,7 +65,7 @@ const Profile = () => {
setFollowers(
Array.isArray(currentUserData?.followedBy)
? currentUserData.followedBy.length
: 0
: 0,
);
return;
}
@@ -230,7 +230,7 @@ const Profile = () => {
<Page
backgroundImg={background.profileBG}
headerType="NAVIGATE"
hideBackButton={isSelf}
hideBackButton={params?.noBack}
contentContainerStyle={{
paddingBottom: gutters * 2,
}}
src/screens/Studio/ChooseGenre.js
+12 -48
View File
@@ -1,26 +1,14 @@
import { View, Text, FlatList } from "react-native";
import { View } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import { FONT_FAMILY } from "../../styles/Fonts";
import { Palette } from "../../styles";
import { CHOOSE_GENRE } from "../../data/data";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import _ from "lodash";
import ListSelection from "../../components/ListSelection/ListSelection";
const ChooseGenre = ({ selected = [], setSelected }) => {
const [containerLayout, setContainerLayout] = useState(null);
const onPressSelect = (item) => {
if (!setSelected) return;
const value = item?.title;
const list = _.isArray(selected) ? selected : [];
const exists = _.includes(list, value);
if (exists) {
setSelected(_.filter(list, (v) => !_.isEqual(v, value)));
} else if (_.size(list) < 2) {
setSelected([...list, value]);
}
};
// Selection handled by ListSelection
return (
<View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
@@ -33,45 +21,21 @@ const ChooseGenre = ({ selected = [], setSelected }) => {
onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
>
<ItemContainer height={containerLayout?.height}>
<FlatList
data={CHOOSE_GENRE}
<ListSelection
options={CHOOSE_GENRE}
variant="titleDescription"
selected={selected}
setSelected={setSelected}
multiple
maxSelection={2}
getItemValue={(item) => item?.title}
contentContainerStyle={{
gap: 16,
flexGrow: 1,
zIndex: 2,
paddingTop: 5,
}}
renderItem={({ item, index }) => {
const list = Array.isArray(selected) ? selected : [];
const selectedItem = _.includes(list, item.title);
return (
<View style={{ paddingHorizontal: 5 }}>
<CreateLyricsHeader
colors={[Palette.tran, Palette.tran]}
tint={selectedItem ? "default" : "dark"}
onPress={() => onPressSelect(item)}
containerStyle={{
borderWidth: selectedItem ? 2 : 0,
borderColor: selectedItem ? "#F94697" : "transparent",
}}
>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
{item.title}
</Text>{" "}
: {item.description}
</Text>
</CreateLyricsHeader>
</View>
);
}}
itemOuterStyle={{ paddingHorizontal: 5 }}
/>
</ItemContainer>
</View>
src/screens/Studio/ChooseInstruments.js
+12 -41
View File
@@ -1,25 +1,16 @@
import { View, Text, FlatList, StyleSheet } from "react-native";
import { View, StyleSheet } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { BlurView } from "expo-blur";
import { INSTRUMENTS } from "../../data/data";
import ListSelection from "../../components/ListSelection/ListSelection";
const ChooseInstruments = ({ selected = [], setSelected }) => {
const [containerLayout, setContainerLayout] = useState(null);
const onPressSelect = (item) => {
if (!setSelected) return;
const list = Array.isArray(selected) ? selected : [];
const exists = list.includes(item);
if (exists) {
setSelected(list.filter((v) => v !== item));
} else if (list.length < 5) {
setSelected([...list, item]);
}
};
// Selection handled by ListSelection
return (
<View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
@@ -32,36 +23,16 @@ const ChooseInstruments = ({ selected = [], setSelected }) => {
onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
>
<ItemContainer height={containerLayout?.height}>
<FlatList
data={INSTRUMENTS}
showsVerticalScrollIndicator={false}
<ListSelection
options={INSTRUMENTS}
variant="simple"
selected={selected}
setSelected={setSelected}
multiple
maxSelection={5}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => {
const list = Array.isArray(selected) ? selected : [];
const selectedItem = list.includes(item);
return (
<CreateLyricsHeader
onPress={() => onPressSelect(item)}
tint={selectedItem ? "default" : "dark"}
colors={[Palette.tran, Palette.tran]}
containerStyle={{
...styles.itemContainer,
borderWidth: selectedItem ? 2 : 0,
borderColor: selectedItem ? "#F94697" : "transparent",
}}
>
<View
style={{
height: 40,
justifyContent: "center",
}}
>
<Text style={styles.itemText}>{item}</Text>
</View>
</CreateLyricsHeader>
);
}}
itemContainerStyle={styles.itemContainer}
itemTextStyle={styles.itemText}
/>
</ItemContainer>
</View>
src/screens/Studio/ChooseRhythm.js
+10 -38
View File
@@ -1,55 +1,27 @@
import { View, Text, FlatList, StyleSheet } from "react-native";
import React, { useState } from "react";
import { View, StyleSheet } from "react-native";
import React from "react";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { RHYTHM } from "../../data/data";
import ListSelection from "../../components/ListSelection/ListSelection";
const ChooseRhythm = ({ selected, setSelected }) => {
const onPressSelect = (item) => {
if (!setSelected) return;
if (selected === item) setSelected(null);
else setSelected(item);
};
return (
<View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
<CreateLyricsHeader title="Choisis un rythme" />
<View style={{ flex: 1 }}>
<ItemContainer height={340}>
<FlatList
data={RHYTHM}
showsVerticalScrollIndicator={false}
<ListSelection
options={RHYTHM}
variant="simple"
selected={selected}
setSelected={setSelected}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => {
const selectedItem = selected === item;
return (
<CreateLyricsHeader
onPress={() => onPressSelect(item)}
tint={selectedItem ? "default" : "dark"}
// Keep transparent colors; highlight selection with border only
colors={[Palette.tran, Palette.tran]}
containerStyle={{
...styles.itemContainer,
borderWidth: selectedItem ? 2 : 0,
borderColor: selectedItem ? "#F94697" : "transparent",
}}
>
<View
style={{
height: 40,
justifyContent: "center",
}}
>
<Text style={styles.itemText}>{item}</Text>
</View>
</CreateLyricsHeader>
);
}}
itemContainerStyle={styles.itemContainer}
itemTextStyle={styles.itemText}
/>
</ItemContainer>
</View>
src/screens/Studio/CustomizeVoice.js
+10 -51
View File
@@ -1,11 +1,10 @@
import { View, Text, FlatList, StyleSheet, SectionList } from "react-native";
import { View, StyleSheet } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import { Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { VOICE } from "../../data/data";
import ListSelection from "../../components/ListSelection/ListSelection";
const CustomizeVoice = ({ selected = {}, setSelected }) => {
const [containerLayout, setContainerLayout] = useState(null);
@@ -33,49 +32,13 @@ const CustomizeVoice = ({ selected = {}, setSelected }) => {
>
<ItemContainer height={containerLayout?.height}>
<View style={{ flex: 1, gap: 10 }}>
<SectionList
sections={VOICE}
showsVerticalScrollIndicator={false}
<ListSelection
options={VOICE}
variant="sectioned"
selected={selected}
setSelected={setSelected}
contentContainerStyle={styles.contentContainer}
renderItem={({ item, section }) => {
const cat = section?.title;
const selectedItem = selected?.[cat] === item;
return (
<CreateLyricsHeader
onPress={() => onPressSelect(cat, item)}
tint={selectedItem ? "default" : "dark"}
// Ne pas changer le blur; garder fond transparent comme ChooseInstruments
colors={[Palette.tran, Palette.tran]}
containerStyle={{
...styles.itemContainer,
borderWidth: selectedItem ? 2 : 0,
borderColor: selectedItem ? "#F94697" : "transparent",
}}
>
<View
style={{
height: 40,
justifyContent: "center",
}}
>
<Text style={styles.itemText}>{item}</Text>
</View>
</CreateLyricsHeader>
);
}}
renderSectionHeader={({ section: { title } }) => (
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterBold,
left: 10,
}}
>
{title}
</Text>
)}
itemContainerStyle={styles.itemContainer}
/>
</View>
</ItemContainer>
@@ -109,9 +72,5 @@ const styles = StyleSheet.create({
elevation: 5,
},
itemText: {
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
},
// itemText was used in legacy implementation; kept here for consistency if needed later
});
src/screens/Writing/CreateLyricsWithAi.js
+40
View File
@@ -159,6 +159,45 @@ const CreateLyricsWithAi = () => {
customStructure,
]);
const isNextDisabled = React.useMemo(() => {
switch (selectedIndex) {
case 0: {
const hasObjective = typeof objective === "string" && objective.length > 0;
const hasOther = typeof otherObjective === "string" && otherObjective.trim().length > 0;
return !(hasObjective || hasOther);
}
case 1: {
const hasContext = typeof context === "string" && context.trim().length > 0;
return !hasContext;
}
case 2: {
const hasEmotion =
(emotion && typeof emotion === "object" && !!emotion.title) ||
(typeof emotion === "string" && emotion.trim().length > 0);
return !hasEmotion;
}
case 3: {
const hasStyle = typeof style === "string" && style.length > 0;
const hasOther = typeof otherStyle === "string" && otherStyle.trim().length > 0;
return !(hasStyle || hasOther);
}
case 4: {
const hasAudience = typeof audience === "string" && audience.trim().length > 0;
return !hasAudience;
}
case 5: {
const hasStructure = typeof structure === "string" && structure.length > 0;
return !hasStructure;
}
case 7: {
const hasRhymes = typeof rhymes === "string" && rhymes.length > 0;
return !hasRhymes;
}
default:
return false;
}
}, [selectedIndex, objective, otherObjective, context, emotion, style, otherStyle, audience, structure, rhymes]);
const onPressNext = async () => {
// Si l'utilisateur a déjà des paroles et vient de finir CustomizeSongStructure (index 6),
// sauter Rhymes et CreatingLyrics et aller directement sur Lyrics
@@ -362,6 +401,7 @@ const CreateLyricsWithAi = () => {
{selectedIndex !== 8 && (
<GradientButton
title={selectedIndex === 7 ? "Générer" : "Suivant"}
disabled={isNextDisabled}
onPress={onPressNext}
/>
)}
src/screens/Writing/CustomizeSongStructure.js
+21 -11
View File
@@ -1,5 +1,6 @@
import { View, StyleSheet, Image, Platform, Text } from "react-native";
import React, { useMemo, useState, useCallback, useEffect } from "react";
import Animated, { useAnimatedRef } from "react-native-reanimated";
import { BlurView } from "expo-blur";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { Palette, Style } from "../../styles";
@@ -11,6 +12,7 @@ import { icons } from "../../assets";
// onChange: callback that receives array like ['couplet','refrain',...]
const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
const [containerLayout, setContainerLayout] = useState(null);
const scrollRef = useAnimatedRef();
// Build stable keyed data like { 'couplet-1': { label, value }, ... }
const data = useMemo(() => {
@@ -78,17 +80,25 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
subTitle="Réorganise par glisser-déposer"
/>
<View style={{ flex: 1 }} onLayout={(e) => setContainerLayout(e.nativeEvent.layout)}>
<Sortable.Grid
columns={1}
rowGap={12}
data={items}
renderItem={({ item }) => <Row item={item} />}
customHandle
onDragEnd={({ data: newData }) => {
const values = (newData || []).map((it) => it?.value).filter(Boolean);
onChange?.(values);
}}
/>
<Animated.ScrollView
ref={scrollRef}
contentContainerStyle={{ paddingVertical: 4, paddingBottom: 24 }}
showsVerticalScrollIndicator={false}
>
<Sortable.Grid
columns={1}
rowGap={12}
data={items}
renderItem={({ item }) => <Row item={item} />}
customHandle
// Enable auto-scroll when dragging near edges
scrollableRef={scrollRef}
onDragEnd={({ data: newData }) => {
const values = (newData || []).map((it) => it?.value).filter(Boolean);
onChange?.(values);
}}
/>
</Animated.ScrollView>
</View>
</View>
);
src/screens/Writing/EmotionConvey.js
+16 -44
View File
@@ -1,10 +1,9 @@
import { View, Text, FlatList } from "react-native";
import { View } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { EMOTION_CONVEY } from "../../data/data";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import ListSelection from "../../components/ListSelection/ListSelection";
const EmotionConvey = ({
selected: selectedProp,
@@ -15,14 +14,7 @@ const EmotionConvey = ({
const selected = selectedProp ?? internalSelected;
const setSelected = setSelectedProp ?? setInternalSelected;
const onPressSelect = (item) => {
// item is full object { title, description, color }
if (selected?.title === item.title) {
setSelected(null);
} else {
setSelected({ title: item.title, description: item.description });
}
};
// Selection handled by ListSelection
return (
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
@@ -36,45 +28,25 @@ const EmotionConvey = ({
onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
>
<ItemContainer height={containerLayout?.height}>
<FlatList
data={EMOTION_CONVEY}
<ListSelection
options={EMOTION_CONVEY}
variant="emotion"
selected={selected}
setSelected={setSelected}
// Ensure selection remains an object {title, description}
formatSelectedValue={(item) => ({
title: item.title,
description: item.description,
})}
// selected is object; compare via selected.title
selectedValueExtractor={(s) => (s && s.title) || s}
contentContainerStyle={{
gap: 16,
flexGrow: 1,
zIndex: 2,
paddingTop: 5,
}}
renderItem={({ item, index }) => {
const selectedItem = selected?.title === item.title;
return (
<View style={{ paddingHorizontal: 5 }}>
<CreateLyricsHeader
colors={item.color}
tint={"dark"}
onPress={() => onPressSelect(item)}
containerStyle={{
borderWidth: selectedItem ? 2 : 0,
borderColor: selectedItem ? "#F94697" : "transparent",
borderRadius: 14,
}}
>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
{item.title}
</Text>{" "}
: {item.description}
</Text>
</CreateLyricsHeader>
</View>
);
}}
itemOuterStyle={{ paddingHorizontal: 5 }}
/>
</ItemContainer>
</View>
src/screens/Writing/Goals.js
+12 -48
View File
@@ -1,21 +1,12 @@
import {
View,
Text,
FlatList,
StyleSheet,
Pressable,
KeyboardAvoidingView,
Platform,
} from "react-native";
import { View, StyleSheet } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { Palette, Style } from "../../styles";
import { Palette } from "../../styles";
import { GOALS } from "../../data/data";
import { FONT_FAMILY } from "../../styles/Fonts";
import CustomInput from "./components/CustomInput";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import { useKeyboard } from "@react-native-community/hooks";
import { responsiveHeight } from "react-native-responsive-dimensions";
import ListSelection from "../../components/ListSelection/ListSelection";
const Goals = ({
selected: selectedProp,
@@ -28,48 +19,21 @@ const Goals = ({
const selected = selectedProp ?? internalSelected;
const setSelected = setSelectedProp ?? setInternalSelected;
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
};
// Selection handled by ListSelection
return (
<View style={{ flex: 1, gap: 16, marginTop: 16 }}>
<View style={{ gap: 10 }}>
<CreateLyricsHeader title="Quels sont tes objectifs ?" />
<CreateLyricsHeader title="Quels est ton objectif ?" />
<ItemContainer>
<FlatList
data={GOALS}
showsVerticalScrollIndicator={false}
<ListSelection
options={GOALS}
variant="simple"
selected={selected}
setSelected={setSelected}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => {
const selectedItem = selected === item;
return (
<CreateLyricsHeader
onPress={() => onPressSelect(item)}
tint={selectedItem ? "default" : "dark"}
colors={[Palette.tran, Palette.tran]}
containerStyle={{
...styles.itemContainer,
borderWidth: selectedItem ? 2 : 0,
borderColor: selectedItem ? "#F94697" : "transparent",
}}
>
<View
style={{
height: 54,
...Style.containerCenter,
}}
>
<Text style={styles.itemText}>{item}</Text>
</View>
</CreateLyricsHeader>
);
}}
itemContainerStyle={styles.itemContainer}
itemTextStyle={styles.itemText}
/>
</ItemContainer>
</View>
src/screens/Writing/Rhymes.js
+13 -41
View File
@@ -1,59 +1,31 @@
import { View, Text, StyleSheet } from "react-native";
import { View, StyleSheet } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { BlurView } from "expo-blur";
import { Palette, Style } from "../../styles";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import ListSelection from "../../components/ListSelection/ListSelection";
const Rhymes = ({ selected: selectedProp, setSelected: setSelectedProp }) => {
const [internalSelected, setInternalSelected] = useState(null);
const selected = selectedProp ?? internalSelected;
const setSelected = setSelectedProp ?? setInternalSelected;
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
};
// Selection handled by ListSelection
return (
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
<CreateLyricsHeader title="Avec ou sans rimes" />
<ItemContainer height={200}>
<View style={{ gap: 10 }}>
{["Avec rimes", "Sans rimes", "Mélange des deux"].map(
(item, index) => {
const selectedItem = selected === item;
return (
<CreateLyricsHeader
key={index}
onPress={() => onPressSelect(item)}
tint={selectedItem ? "default" : "dark"}
colors={[Palette.tran, Palette.tran]}
containerStyle={{
...styles.itemContainer,
borderWidth: selectedItem ? 2 : 0,
borderColor: selectedItem ? "#F94697" : "transparent",
}}
>
<View
style={{
height: 54,
...Style.containerCenter,
paddingHorizontal: 14,
}}
>
<Text style={styles.dropzone}>{item}</Text>
</View>
</CreateLyricsHeader>
);
}
)}
</View>
<ListSelection
options={["Avec rimes", "Sans rimes", "Mélange des deux"]}
variant="simple"
selected={selected}
setSelected={setSelected}
contentContainerStyle={{ gap: 10 }}
itemContainerStyle={styles.itemContainer}
itemTextStyle={styles.dropzone}
/>
</ItemContainer>
</View>
);
src/screens/Writing/SongStructure.js
+10 -37
View File
@@ -1,10 +1,11 @@
import { View, Text, StyleSheet, FlatList } from "react-native";
import { View, StyleSheet } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { SONG_STRUCTURE } from "../../data/data";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import ListSelection from "../../components/ListSelection/ListSelection";
const SongStructure = ({
selected: selectedProp,
@@ -14,13 +15,7 @@ const SongStructure = ({
const selected = selectedProp ?? internalSelected;
const setSelected = setSelectedProp ?? setInternalSelected;
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
};
// Selection handled by ListSelection
return (
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
@@ -29,36 +24,14 @@ const SongStructure = ({
subTitle="Sélectionne une structure."
/>
<ItemContainer>
<FlatList
data={SONG_STRUCTURE}
showsVerticalScrollIndicator={false}
<ListSelection
options={SONG_STRUCTURE}
variant="simple"
selected={selected}
setSelected={setSelected}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => {
const selectedItem = selected === item;
return (
<CreateLyricsHeader
onPress={() => onPressSelect(item)}
tint={selectedItem ? "default" : "dark"}
colors={[Palette.tran, Palette.tran]}
containerStyle={{
...styles.itemContainer,
borderWidth: selectedItem ? 2 : 0,
borderColor: selectedItem ? "#F94697" : "transparent",
}}
>
<View
style={{
height: 40,
paddingHorizontal: 14,
justifyContent: "center",
}}
>
<Text style={styles.itemText}>{item}</Text>
</View>
</CreateLyricsHeader>
);
}}
itemContainerStyle={styles.itemContainer}
itemTextStyle={styles.itemText}
/>
</ItemContainer>
</View>
src/screens/Writing/SongStyle.js
+11 -45
View File
@@ -1,12 +1,12 @@
import { View, Text, FlatList, Pressable, StyleSheet } from "react-native";
import { View, StyleSheet } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { BlurView } from "expo-blur";
import { GOALS, SONG_STYLE } from "../../data/data";
import { Palette, Style } from "../../styles";
import { SONG_STYLE } from "../../data/data";
import { Palette } from "../../styles";
import CustomInput from "./components/CustomInput";
import { FONT_FAMILY } from "../../styles/Fonts";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import ListSelection from "../../components/ListSelection/ListSelection";
const SongStyle = ({
selected: selectedProp,
@@ -18,13 +18,7 @@ const SongStyle = ({
const selected = selectedProp ?? internalSelected;
const setSelected = setSelectedProp ?? setInternalSelected;
const onPressSelect = (item) => {
if (selected === item) {
setSelected(null);
} else {
setSelected(item);
}
};
// Selection handled by ListSelection
return (
<View style={{ flex: 1, gap: 16, marginTop: 16 }}>
@@ -34,41 +28,13 @@ const SongStyle = ({
subTitle="Choisis l'ambiance émotions que tu veux faire passer."
/>
<ItemContainer>
<FlatList
data={SONG_STYLE}
showsVerticalScrollIndicator={false}
<ListSelection
options={SONG_STYLE}
variant="titleDescription"
selected={selected}
setSelected={setSelected}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => {
const selectedItem = selected === item.title;
return (
<CreateLyricsHeader
colors={[Palette.tran, Palette.tran]}
tint={selectedItem ? "default" : "dark"}
onPress={() => onPressSelect(item.title)}
containerStyle={{
...styles.itemContainer,
borderWidth: selectedItem ? 2 : 0,
borderColor: selectedItem ? "#F94697" : "transparent",
}}
>
<View style={{ paddingVertical: 6 }}>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
{item.title}
</Text>{" "}
: {item.description}
</Text>
</View>
</CreateLyricsHeader>
);
}}
itemContainerStyle={styles.itemContainer}
/>
</ItemContainer>
</View>