59 lines
1.9 KiB
JavaScript
59 lines
1.9 KiB
JavaScript
import React, { useState } from "react";
|
|
import { View } from "react-native";
|
|
import ItemContainer from "../../components/ItemContainer/ItemContainer";
|
|
import ListSelection from "../../components/ListSelection/ListSelection";
|
|
import { EMOTION_CONVEY } from "../../data/data";
|
|
import CreateLyricsHeader from "./components/CreateLyricsHeader";
|
|
|
|
const EmotionConvey = ({
|
|
selected: selectedProp,
|
|
setSelected: setSelectedProp,
|
|
}) => {
|
|
const [containerLayout, setContainerLayout] = useState(null);
|
|
const [internalSelected, setInternalSelected] = useState(null);
|
|
const selected = selectedProp ?? internalSelected;
|
|
const setSelected = setSelectedProp ?? setInternalSelected;
|
|
|
|
// Selection handled by ListSelection
|
|
|
|
return (
|
|
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
|
|
<CreateLyricsHeader
|
|
title={`Quelle émotion veux-tu\ntransmettre ?`}
|
|
subTitle="Sélectionne une seule intention émotionnelle."
|
|
/>
|
|
|
|
<View
|
|
style={{ flex: 1 }}
|
|
onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
|
|
>
|
|
<ItemContainer height={containerLayout?.height}>
|
|
<ListSelection
|
|
disableHover
|
|
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,
|
|
}}
|
|
itemOuterStyle={{ paddingHorizontal: 5 }}
|
|
/>
|
|
</ItemContainer>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default EmotionConvey;
|