Make EditPlan scroll

This commit is contained in:
Brandon Presley 2022-07-09 17:10:28 +12:00
parent 808814cfe3
commit 978fe98393

View File

@ -1,5 +1,5 @@
import React, {useContext, useEffect, useState} from 'react'; import React, {useContext, useEffect, useState} from 'react';
import {StyleSheet, Text, View} from 'react-native'; import {ScrollView, StyleSheet, Text, View} from 'react-native';
import {Button, Dialog, Portal, Switch} from 'react-native-paper'; import {Button, Dialog, Portal, Switch} from 'react-native-paper';
import {DatabaseContext} from './App'; import {DatabaseContext} from './App';
import {Plan} from './plan'; import {Plan} from './plan';
@ -27,8 +27,8 @@ export default function EditPlan({
if (!namesResult.rows.length) return setNames([]); if (!namesResult.rows.length) return setNames([]);
setNames(namesResult.rows.raw().map(({name}) => name)); setNames(namesResult.rows.raw().map(({name}) => name));
if (!plan) return; if (!plan) return;
setDays(plan.days.split(',')); if (plan.days) setDays(plan.days.split(','));
setWorkouts(plan.workouts.split(',')); if (plan.workouts) setWorkouts(plan.workouts.split(','));
}; };
refresh(); refresh();
}, [plan, db]); }, [plan, db]);
@ -71,10 +71,12 @@ export default function EditPlan({
<Portal> <Portal>
<Dialog visible={!!plan} onDismiss={() => setPlan(undefined)}> <Dialog visible={!!plan} onDismiss={() => setPlan(undefined)}>
<Dialog.Title> <Dialog.Title>
{plan ? `Edit "${days.slice(0, 2).join(', ')}"` : 'Add a plan'} {plan?.days ? `Edit "${days.slice(0, 2).join(', ')}"` : 'Add a plan'}
</Dialog.Title> </Dialog.Title>
<Dialog.Content style={[styles.row, {justifyContent: 'space-between'}]}> <Dialog.ScrollArea>
<View> <ScrollView
style={{height: '80%'}}
contentContainerStyle={{paddingHorizontal: 24}}>
<Text style={styles.title}>Days</Text> <Text style={styles.title}>Days</Text>
{DAYS.map(day => ( {DAYS.map(day => (
<View key={day} style={[styles.row, {alignItems: 'center'}]}> <View key={day} style={[styles.row, {alignItems: 'center'}]}>
@ -88,9 +90,7 @@ export default function EditPlan({
</Text> </Text>
</View> </View>
))} ))}
</View> <Text style={[styles.title, {marginTop: 10}]}>Workouts</Text>
<View>
<Text style={styles.title}>Workouts</Text>
{names.length === 0 && ( {names.length === 0 && (
<Text style={{maxWidth: '80%'}}> <Text style={{maxWidth: '80%'}}>
No sets found. Try going to the home page and adding some No sets found. Try going to the home page and adding some
@ -110,8 +110,8 @@ export default function EditPlan({
</Text> </Text>
</View> </View>
))} ))}
</View> </ScrollView>
</Dialog.Content> </Dialog.ScrollArea>
<Dialog.Actions> <Dialog.Actions>
<Button icon="close" onPress={() => setPlan(undefined)}> <Button icon="close" onPress={() => setPlan(undefined)}>
Cancel Cancel
@ -129,9 +129,9 @@ const styles = StyleSheet.create({
title: { title: {
fontSize: 20, fontSize: 20,
marginBottom: 10, marginBottom: 10,
marginTop: -15,
}, },
row: { row: {
flexDirection: 'row', flexDirection: 'row',
flexWrap: 'wrap',
}, },
}); });