Move cursor to next input for workouts editing
This commit is contained in:
parent
4ba5b204f2
commit
71c358a532
|
@ -4,8 +4,8 @@ import {
|
|||
useNavigation,
|
||||
useRoute,
|
||||
} from '@react-navigation/native';
|
||||
import React, {useCallback, useContext, useState} from 'react';
|
||||
import {ScrollView, View} from 'react-native';
|
||||
import React, {useCallback, useContext, useRef, useState} from 'react';
|
||||
import {ScrollView, TextInput, View} from 'react-native';
|
||||
import DocumentPicker from 'react-native-document-picker';
|
||||
import {Button, Card, IconButton, TouchableRipple} from 'react-native-paper';
|
||||
import ConfirmDialog from './ConfirmDialog';
|
||||
|
@ -33,6 +33,10 @@ export default function EditWorkout() {
|
|||
const [sets, setSets] = useState(params.value.sets?.toString() ?? '3');
|
||||
const {toast} = useContext(SnackbarContext);
|
||||
const navigation = useNavigation();
|
||||
const setsRef = useRef<TextInput>(null);
|
||||
const stepsRef = useRef<TextInput>(null);
|
||||
const minutesRef = useRef<TextInput>(null);
|
||||
const secondsRef = useRef<TextInput>(null);
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
|
@ -107,6 +111,11 @@ export default function EditWorkout() {
|
|||
toast('Commas and single quotes would break CSV exports', 6000);
|
||||
};
|
||||
|
||||
const submitName = () => {
|
||||
if (settings.steps) stepsRef.current?.focus();
|
||||
else setsRef.current?.focus();
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={{padding: PADDING}}>
|
||||
<ScrollView style={{height: '90%'}}>
|
||||
|
@ -115,33 +124,42 @@ export default function EditWorkout() {
|
|||
label="Name"
|
||||
value={name}
|
||||
onChangeText={handleName}
|
||||
onSubmitEditing={submitName}
|
||||
/>
|
||||
{!!settings.steps && (
|
||||
<MassiveInput
|
||||
innerRef={stepsRef}
|
||||
selectTextOnFocus={false}
|
||||
value={steps}
|
||||
onChangeText={handleSteps}
|
||||
label="Steps"
|
||||
multiline
|
||||
onSubmitEditing={setsRef.current?.focus}
|
||||
/>
|
||||
)}
|
||||
<MassiveInput
|
||||
innerRef={setsRef}
|
||||
value={sets}
|
||||
onChangeText={setSets}
|
||||
label="Sets per workout"
|
||||
keyboardType="numeric"
|
||||
onSubmitEditing={minutesRef.current?.focus}
|
||||
/>
|
||||
<MassiveInput
|
||||
innerRef={minutesRef}
|
||||
onSubmitEditing={secondsRef.current?.focus}
|
||||
value={minutes}
|
||||
onChangeText={setMinutes}
|
||||
label="Rest minutes"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
<MassiveInput
|
||||
innerRef={secondsRef}
|
||||
value={seconds}
|
||||
onChangeText={setSeconds}
|
||||
label="Rest seconds"
|
||||
keyboardType="numeric"
|
||||
blurOnSubmit
|
||||
/>
|
||||
{uri ? (
|
||||
<TouchableRipple
|
||||
|
|
|
@ -18,6 +18,7 @@ export default function MassiveInput(
|
|||
style={{marginBottom: MARGIN, minWidth: 100}}
|
||||
selectTextOnFocus
|
||||
ref={props.innerRef}
|
||||
blurOnSubmit={false}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
|
10
SetForm.tsx
10
SetForm.tsx
|
@ -1,5 +1,5 @@
|
|||
import React, {useContext, useRef, useState} from 'react';
|
||||
import {ScrollView, View} from 'react-native';
|
||||
import {ScrollView, TextInput, View} from 'react-native';
|
||||
import {Button, Text} from 'react-native-paper';
|
||||
import MassiveInput from './MassiveInput';
|
||||
import {SnackbarContext} from './MassiveSnack';
|
||||
|
@ -25,9 +25,9 @@ export default function SetForm({
|
|||
end: set.reps.toString().length,
|
||||
});
|
||||
const {toast} = useContext(SnackbarContext);
|
||||
const weightRef = useRef<any>(null);
|
||||
const repsRef = useRef<any>(null);
|
||||
const unitRef = useRef<any>(null);
|
||||
const weightRef = useRef<TextInput>(null);
|
||||
const repsRef = useRef<TextInput>(null);
|
||||
const unitRef = useRef<TextInput>(null);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
console.log(`${SetForm.name}.handleSubmit:`, {set});
|
||||
|
@ -72,7 +72,6 @@ export default function SetForm({
|
|||
onChangeText={handleName}
|
||||
autoCorrect={false}
|
||||
autoFocus={!name}
|
||||
blurOnSubmit={false}
|
||||
onSubmitEditing={() => repsRef.current?.focus()}
|
||||
/>
|
||||
<MassiveInput
|
||||
|
@ -84,7 +83,6 @@ export default function SetForm({
|
|||
selection={selection}
|
||||
onSelectionChange={e => setSelection(e.nativeEvent.selection)}
|
||||
autoFocus={!!name}
|
||||
blurOnSubmit={false}
|
||||
innerRef={repsRef}
|
||||
/>
|
||||
<MassiveInput
|
||||
|
|
Loading…
Reference in New Issue
Block a user