94 lines
2.6 KiB
JavaScript
94 lines
2.6 KiB
JavaScript
import { View, StyleSheet } from "react-native";
|
|
import React, { useMemo, useState } from "react";
|
|
import CreateLyricsHeader from "./components/CreateLyricsHeader";
|
|
import { OTHER_STYLE_OPTION, 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,
|
|
setSelected: setSelectedProp,
|
|
otherStyle,
|
|
setOtherStyle,
|
|
}) => {
|
|
const [internalSelected, setInternalSelected] = useState(null);
|
|
const selected = selectedProp ?? internalSelected;
|
|
const setSelected = setSelectedProp ?? setInternalSelected;
|
|
|
|
const songStyleOptions = useMemo(() => SONG_STYLE ?? [], []);
|
|
|
|
const handleOtherStyleChange = (value) => {
|
|
setOtherStyle?.(value);
|
|
const trimmed = value?.trim() ?? "";
|
|
if (trimmed.length) {
|
|
if (selected !== OTHER_STYLE_OPTION) {
|
|
setSelected(OTHER_STYLE_OPTION);
|
|
}
|
|
} else if (selected === OTHER_STYLE_OPTION) {
|
|
setSelected(null);
|
|
}
|
|
};
|
|
|
|
// Selection handled by ListSelection
|
|
|
|
return (
|
|
<View style={{ flex: 1, gap: 16, marginTop: 16 }}>
|
|
<View style={{ gap: 10 }}>
|
|
<CreateLyricsHeader
|
|
title={`Quel est le style de ta chanson ?`}
|
|
subTitle="Choisis l'ambiance émotions que tu veux faire passer."
|
|
/>
|
|
<ItemContainer>
|
|
<ListSelection
|
|
options={songStyleOptions}
|
|
variant="titleDescription"
|
|
selected={selected}
|
|
setSelected={setSelected}
|
|
contentContainerStyle={styles.contentContainer}
|
|
itemContainerStyle={styles.itemContainer}
|
|
/>
|
|
</ItemContainer>
|
|
</View>
|
|
<CustomInput
|
|
label="Tu as un autre style de chanson ?"
|
|
placeholder="Décrire le style"
|
|
value={otherStyle}
|
|
setValue={handleOtherStyleChange}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default SongStyle;
|
|
|
|
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",
|
|
},
|
|
});
|