Bottom align save button on set form
This commit is contained in:
parent
780500ac75
commit
228383ed23
|
@ -90,7 +90,7 @@ export default function EditSet() {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={{padding: PADDING}}>
|
<View style={{padding: PADDING, flex: 1}}>
|
||||||
<SetForm save={save} set={set} />
|
<SetForm save={save} set={set} />
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
|
|
107
SetForm.tsx
107
SetForm.tsx
|
@ -1,5 +1,5 @@
|
||||||
import React, {useCallback, useContext, useRef, useState} from 'react';
|
import React, {useCallback, useContext, useRef, useState} from 'react';
|
||||||
import {TextInput} from 'react-native';
|
import {TextInput, View} from 'react-native';
|
||||||
import DocumentPicker from 'react-native-document-picker';
|
import DocumentPicker from 'react-native-document-picker';
|
||||||
import {Button, Card, TouchableRipple} from 'react-native-paper';
|
import {Button, Card, TouchableRipple} from 'react-native-paper';
|
||||||
import ConfirmDialog from './ConfirmDialog';
|
import ConfirmDialog from './ConfirmDialog';
|
||||||
|
@ -13,11 +13,9 @@ import {useSettings} from './use-settings';
|
||||||
export default function SetForm({
|
export default function SetForm({
|
||||||
save,
|
save,
|
||||||
set,
|
set,
|
||||||
next,
|
|
||||||
}: {
|
}: {
|
||||||
set: Set;
|
set: Set;
|
||||||
save: (set: Set) => void;
|
save: (set: Set) => void;
|
||||||
next?: () => void;
|
|
||||||
}) {
|
}) {
|
||||||
const [name, setName] = useState(set.name);
|
const [name, setName] = useState(set.name);
|
||||||
const [reps, setReps] = useState(set.reps.toString());
|
const [reps, setReps] = useState(set.reps.toString());
|
||||||
|
@ -86,59 +84,60 @@ export default function SetForm({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<MassiveInput
|
<View style={{flex: 1}}>
|
||||||
label="Name"
|
|
||||||
value={name}
|
|
||||||
onChangeText={handleName}
|
|
||||||
autoCorrect={false}
|
|
||||||
autoFocus={!name}
|
|
||||||
onSubmitEditing={() => repsRef.current?.focus()}
|
|
||||||
/>
|
|
||||||
<MassiveInput
|
|
||||||
label="Reps"
|
|
||||||
keyboardType="numeric"
|
|
||||||
value={reps}
|
|
||||||
onChangeText={setReps}
|
|
||||||
onSubmitEditing={() => weightRef.current?.focus()}
|
|
||||||
selection={selection}
|
|
||||||
onSelectionChange={e => setSelection(e.nativeEvent.selection)}
|
|
||||||
autoFocus={!!name}
|
|
||||||
innerRef={repsRef}
|
|
||||||
/>
|
|
||||||
<MassiveInput
|
|
||||||
label="Weight"
|
|
||||||
keyboardType="numeric"
|
|
||||||
value={weight}
|
|
||||||
onChangeText={setWeight}
|
|
||||||
onSubmitEditing={handleSubmit}
|
|
||||||
innerRef={weightRef}
|
|
||||||
/>
|
|
||||||
{!!settings.showUnit && (
|
|
||||||
<MassiveInput
|
<MassiveInput
|
||||||
autoCapitalize="none"
|
label="Name"
|
||||||
label="Unit"
|
value={name}
|
||||||
value={unit}
|
onChangeText={handleName}
|
||||||
onChangeText={handleUnit}
|
autoCorrect={false}
|
||||||
innerRef={unitRef}
|
autoFocus={!name}
|
||||||
|
onSubmitEditing={() => repsRef.current?.focus()}
|
||||||
/>
|
/>
|
||||||
)}
|
<MassiveInput
|
||||||
{!!settings.images && newImage && (
|
label="Reps"
|
||||||
<TouchableRipple
|
keyboardType="numeric"
|
||||||
style={{marginBottom: MARGIN}}
|
value={reps}
|
||||||
onPress={changeImage}
|
onChangeText={setReps}
|
||||||
onLongPress={() => setShowRemove(true)}>
|
onSubmitEditing={() => weightRef.current?.focus()}
|
||||||
<Card.Cover source={{uri: newImage}} />
|
selection={selection}
|
||||||
</TouchableRipple>
|
onSelectionChange={e => setSelection(e.nativeEvent.selection)}
|
||||||
)}
|
autoFocus={!!name}
|
||||||
{!!settings.images && !newImage && (
|
innerRef={repsRef}
|
||||||
<Button
|
/>
|
||||||
style={{marginBottom: MARGIN}}
|
<MassiveInput
|
||||||
onPress={changeImage}
|
label="Weight"
|
||||||
icon="add-photo-alternate">
|
keyboardType="numeric"
|
||||||
Image
|
value={weight}
|
||||||
</Button>
|
onChangeText={setWeight}
|
||||||
)}
|
onSubmitEditing={handleSubmit}
|
||||||
{next && <Button icon="navigate-next">Next</Button>}
|
innerRef={weightRef}
|
||||||
|
/>
|
||||||
|
{!!settings.showUnit && (
|
||||||
|
<MassiveInput
|
||||||
|
autoCapitalize="none"
|
||||||
|
label="Unit"
|
||||||
|
value={unit}
|
||||||
|
onChangeText={handleUnit}
|
||||||
|
innerRef={unitRef}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{!!settings.images && newImage && (
|
||||||
|
<TouchableRipple
|
||||||
|
style={{marginBottom: MARGIN}}
|
||||||
|
onPress={changeImage}
|
||||||
|
onLongPress={() => setShowRemove(true)}>
|
||||||
|
<Card.Cover source={{uri: newImage}} />
|
||||||
|
</TouchableRipple>
|
||||||
|
)}
|
||||||
|
{!!settings.images && !newImage && (
|
||||||
|
<Button
|
||||||
|
style={{marginBottom: MARGIN}}
|
||||||
|
onPress={changeImage}
|
||||||
|
icon="add-photo-alternate">
|
||||||
|
Image
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
<Button
|
<Button
|
||||||
disabled={!name}
|
disabled={!name}
|
||||||
mode="contained"
|
mode="contained"
|
||||||
|
|
Loading…
Reference in New Issue
Block a user