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