Make EditPlan scroll
This commit is contained in:
parent
808814cfe3
commit
978fe98393
24
EditPlan.tsx
24
EditPlan.tsx
|
@ -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',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue
Block a user