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/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>