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, ActivityIndicator,
Image, Image,
Pressable, Pressable,
ScrollView,
StyleSheet, StyleSheet,
Text, Text,
TextInput, TextInput,
useWindowDimensions,
View, View,
KeyboardAvoidingView, KeyboardAvoidingView,
Platform, Platform,
@@ -86,6 +88,10 @@ const PouchReady = () => {
const [coverProgress, setCoverProgress] = useState(0) const [coverProgress, setCoverProgress] = useState(0)
const coverProgressIntervalRef = useRef(null) const coverProgressIntervalRef = useRef(null)
const coverProgressStartRef = 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 () => { const showGenerationLoading = useCallback(async () => {
setIsAwaitingGenerationStart(true) setIsAwaitingGenerationStart(true)
@@ -497,41 +503,54 @@ const PouchReady = () => {
/> />
</Pressable> </Pressable>
{isPresetDropdownOpen && ( {isPresetDropdownOpen && (
<View style={styles.dropdownList}> <View
{COVER_STYLE_PRESETS.map((styleOption, index) => { style={[
const isActive = selectedPresetStyle === styleOption styles.dropdownList,
const isLast = index === COVER_STYLE_PRESETS.length - 1 !isWeb && dropdownMaxHeight ? { maxHeight: dropdownMaxHeight } : null,
return ( ]}
<Pressable >
key={styleOption} <ScrollView
style={[ bounces={false}
styles.dropdownOption, showsVerticalScrollIndicator={false}
!isLast ? styles.dropdownOptionDivider : null, nestedScrollEnabled
isActive ? styles.dropdownOptionActive : null, keyboardShouldPersistTaps="handled"
]} contentContainerStyle={styles.dropdownListContent}
onPress={() => { >
setSelectedPresetStyle(styleOption) {COVER_STYLE_PRESETS.map((styleOption, index) => {
setIsPresetDropdownOpen(false) const isActive = selectedPresetStyle === styleOption
}} const isLast = index === COVER_STYLE_PRESETS.length - 1
> return (
<Text <Pressable
key={styleOption}
style={[ style={[
styles.dropdownOptionLabel, styles.dropdownOption,
isActive ? styles.dropdownOptionLabelActive : null, !isLast ? styles.dropdownOptionDivider : null,
isActive ? styles.dropdownOptionActive : null,
]} ]}
onPress={() => {
setSelectedPresetStyle(styleOption)
setIsPresetDropdownOpen(false)
}}
> >
{styleOption} <Text
</Text> style={[
{isActive && ( styles.dropdownOptionLabel,
<Image isActive ? styles.dropdownOptionLabelActive : null,
source={icons.check} ]}
style={styles.dropdownOptionIcon} >
resizeMode="contain" {styleOption}
/> </Text>
)} {isActive && (
</Pressable> <Image
) source={icons.check}
})} style={styles.dropdownOptionIcon}
resizeMode="contain"
/>
)}
</Pressable>
)
})}
</ScrollView>
</View> </View>
)} )}
</View> </View>
@@ -798,6 +817,9 @@ const styles = StyleSheet.create({
backgroundColor: 'rgba(12,10,18,0.95)', backgroundColor: 'rgba(12,10,18,0.95)',
overflow: 'hidden', overflow: 'hidden',
}, },
dropdownListContent: {
paddingVertical: 2,
},
dropdownOption: { dropdownOption: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',