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

feat: scrollable styles pochette

Browse Source
This commit is contained in:
Leon
2026-02-26 15:37:53 +01:00
parent 98efb55611
commit f58292ce5c
1 changed files with 54 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/cover/PouchReady.js
+54 -32
View File
@@ -5,9 +5,11 @@ import {
ActivityIndicator,
Image,
Pressable,
ScrollView,
StyleSheet,
Text,
TextInput,
useWindowDimensions,
View,
KeyboardAvoidingView,
Platform,
@@ -86,6 +88,10 @@ const PouchReady = () => {
const [coverProgress, setCoverProgress] = useState(0)
const coverProgressIntervalRef = useRef(null)
const coverProgressStartRef = useRef(null)
const { height: windowHeight } = useWindowDimensions()
const dropdownMaxHeight = !isWeb
? Math.max(220, Math.min(340, Math.round(windowHeight * 0.45)))
: null
const showGenerationLoading = useCallback(async () => {
setIsAwaitingGenerationStart(true)
@@ -497,41 +503,54 @@ const PouchReady = () => {
/>
</Pressable>
{isPresetDropdownOpen && (
<View style={styles.dropdownList}>
{COVER_STYLE_PRESETS.map((styleOption, index) => {
const isActive = selectedPresetStyle === styleOption
const isLast = index === COVER_STYLE_PRESETS.length - 1
return (
<Pressable
key={styleOption}
style={[
styles.dropdownOption,
!isLast ? styles.dropdownOptionDivider : null,
isActive ? styles.dropdownOptionActive : null,
]}
onPress={() => {
setSelectedPresetStyle(styleOption)
setIsPresetDropdownOpen(false)
}}
>
<Text
<View
style={[
styles.dropdownList,
!isWeb && dropdownMaxHeight ? { maxHeight: dropdownMaxHeight } : null,
]}
>
<ScrollView
bounces={false}
showsVerticalScrollIndicator={false}
nestedScrollEnabled
keyboardShouldPersistTaps="handled"
contentContainerStyle={styles.dropdownListContent}
>
{COVER_STYLE_PRESETS.map((styleOption, index) => {
const isActive = selectedPresetStyle === styleOption
const isLast = index === COVER_STYLE_PRESETS.length - 1
return (
<Pressable
key={styleOption}
style={[
styles.dropdownOptionLabel,
isActive ? styles.dropdownOptionLabelActive : null,
styles.dropdownOption,
!isLast ? styles.dropdownOptionDivider : null,
isActive ? styles.dropdownOptionActive : null,
]}
onPress={() => {
setSelectedPresetStyle(styleOption)
setIsPresetDropdownOpen(false)
}}
>
{styleOption}
</Text>
{isActive && (
<Image
source={icons.check}
style={styles.dropdownOptionIcon}
resizeMode="contain"
/>
)}
</Pressable>
)
})}
<Text
style={[
styles.dropdownOptionLabel,
isActive ? styles.dropdownOptionLabelActive : null,
]}
>
{styleOption}
</Text>
{isActive && (
<Image
source={icons.check}
style={styles.dropdownOptionIcon}
resizeMode="contain"
/>
)}
</Pressable>
)
})}
</ScrollView>
</View>
)}
</View>
@@ -798,6 +817,9 @@ const styles = StyleSheet.create({
backgroundColor: 'rgba(12,10,18,0.95)',
overflow: 'hidden',
},
dropdownListContent: {
paddingVertical: 2,
},
dropdownOption: {
flexDirection: 'row',
alignItems: 'center',