Skip to content

Commit 3ddc534

Browse files
LiamMorrowLiamMorrow
committed
fix: Ensure dialogs with text move with the keyboard
1 parent cb94d74 commit 3ddc534

3 files changed

Lines changed: 138 additions & 120 deletions

File tree

‎app/components/presentation/potential-sets-addition-actions-dialog.tsx‎

Lines changed: 43 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { spacing } from '@/hooks/useAppTheme';
22
import { PotentialSet } from '@/models/session-models';
33
import { T } from '@tolgee/react';
44
import { useEffect, useState } from 'react';
5+
import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
56
import {
67
Button,
78
Dialog,
@@ -45,44 +46,49 @@ export default function PotentialSetAdditionalActionsDialog({
4546
};
4647
return (
4748
<Portal>
48-
<Dialog visible={open} onDismiss={close}>
49-
<Dialog.Title>
50-
<T keyName="SelectReps" />
51-
</Dialog.Title>
52-
<Dialog.Content
53-
style={{
54-
flexDirection: 'row',
55-
gap: spacing[2],
56-
alignItems: 'center',
57-
}}
58-
>
59-
<TextInput
60-
style={{ flex: 1 }}
61-
label={<T keyName="Reps" />}
62-
inputMode="numeric"
63-
value={repCountText}
64-
selectTextOnFocus
65-
error={!isValid}
66-
onChangeText={setRepCountText}
67-
autoFocus
68-
/>
69-
<IconButton
70-
mode="outlined"
71-
icon={'close'}
72-
onPress={() => {
73-
setRepCountText('');
74-
updateRepCount(undefined);
75-
close();
49+
<KeyboardAvoidingView
50+
behavior={'height'}
51+
style={{ flex: 1, pointerEvents: 'box-none' }}
52+
>
53+
<Dialog visible={open} onDismiss={close}>
54+
<Dialog.Title>
55+
<T keyName="SelectReps" />
56+
</Dialog.Title>
57+
<Dialog.Content
58+
style={{
59+
flexDirection: 'row',
60+
gap: spacing[2],
61+
alignItems: 'center',
7662
}}
77-
/>
78-
</Dialog.Content>
79-
<Dialog.Actions>
80-
<Button onPress={close}>{<T keyName="Cancel" />}</Button>
81-
<Button disabled={!isValid} onPress={save}>
82-
{<T keyName="Save" />}
83-
</Button>
84-
</Dialog.Actions>
85-
</Dialog>
63+
>
64+
<TextInput
65+
style={{ flex: 1 }}
66+
label={<T keyName="Reps" />}
67+
inputMode="numeric"
68+
value={repCountText}
69+
selectTextOnFocus
70+
error={!isValid}
71+
onChangeText={setRepCountText}
72+
autoFocus
73+
/>
74+
<IconButton
75+
mode="outlined"
76+
icon={'close'}
77+
onPress={() => {
78+
setRepCountText('');
79+
updateRepCount(undefined);
80+
close();
81+
}}
82+
/>
83+
</Dialog.Content>
84+
<Dialog.Actions>
85+
<Button onPress={close}>{<T keyName="Cancel" />}</Button>
86+
<Button disabled={!isValid} onPress={save}>
87+
{<T keyName="Save" />}
88+
</Button>
89+
</Dialog.Actions>
90+
</Dialog>
91+
</KeyboardAvoidingView>
8692
</Portal>
8793
);
8894
}

‎app/components/presentation/weight-dialog.tsx‎

Lines changed: 55 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { T } from '@tolgee/react';
55
import BigNumber from 'bignumber.js';
66
import { ReactNode, useEffect, useState } from 'react';
77
import { View } from 'react-native';
8+
import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
89
import {
910
Button,
1011
Dialog,
@@ -88,58 +89,63 @@ export default function WeightDialog(props: WeightDialogProps) {
8889

8990
return (
9091
<Portal>
91-
<Dialog visible={props.open} onDismiss={props.onClose}>
92-
<Dialog.Title>{props.label ?? <T keyName="Weight" />}</Dialog.Title>
93-
<Dialog.Content>
94-
<View style={{ gap: spacing[2] }}>
95-
<TextInput
96-
testID="weight-input"
97-
label={props.label ?? <T keyName="Weight" />}
98-
right={<TextInput.Affix text={weightSuffix} />}
99-
selectTextOnFocus
100-
mode="outlined"
101-
inputMode="decimal"
102-
keyboardType="decimal-pad"
103-
value={text}
104-
onChangeText={handleTextChange}
105-
style={{ backgroundColor: theme.colors.elevation.level3 }}
106-
/>
107-
<View
108-
style={{
109-
flexDirection: 'row',
110-
gap: spacing[2],
111-
justifyContent: 'center',
112-
}}
113-
>
114-
<Button
115-
icon={'minus'}
92+
<KeyboardAvoidingView
93+
behavior={'height'}
94+
style={{ flex: 1, pointerEvents: 'box-none' }}
95+
>
96+
<Dialog visible={props.open} onDismiss={props.onClose}>
97+
<Dialog.Title>{props.label ?? <T keyName="Weight" />}</Dialog.Title>
98+
<Dialog.Content>
99+
<View style={{ gap: spacing[2] }}>
100+
<TextInput
101+
testID="weight-input"
102+
label={props.label ?? <T keyName="Weight" />}
103+
right={<TextInput.Affix text={weightSuffix} />}
104+
selectTextOnFocus
116105
mode="outlined"
117-
testID="decrement-weight"
118-
onPress={decrementWeight}
106+
inputMode="decimal"
107+
keyboardType="decimal-pad"
108+
value={text}
109+
onChangeText={handleTextChange}
110+
style={{ backgroundColor: theme.colors.elevation.level3 }}
111+
/>
112+
<View
113+
style={{
114+
flexDirection: 'row',
115+
gap: spacing[2],
116+
justifyContent: 'center',
117+
}}
119118
>
120-
<WeightFormat weight={nonZeroIncrement} />
121-
</Button>
122-
<Button
123-
icon={'plus'}
124-
mode="outlined"
125-
testID="increment-weight"
126-
onPress={incrementWeight}
127-
>
128-
<WeightFormat weight={nonZeroIncrement} />
129-
</Button>
119+
<Button
120+
icon={'minus'}
121+
mode="outlined"
122+
testID="decrement-weight"
123+
onPress={decrementWeight}
124+
>
125+
<WeightFormat weight={nonZeroIncrement} />
126+
</Button>
127+
<Button
128+
icon={'plus'}
129+
mode="outlined"
130+
testID="increment-weight"
131+
onPress={incrementWeight}
132+
>
133+
<WeightFormat weight={nonZeroIncrement} />
134+
</Button>
135+
</View>
136+
{props.children}
130137
</View>
131-
{props.children}
132-
</View>
133-
</Dialog.Content>
134-
<Dialog.Actions>
135-
<Button onPress={props.onClose} testID="close">
136-
<T keyName="Close" />
137-
</Button>
138-
<Button onPress={onSaveClick} testID="save">
139-
<T keyName="Save" />
140-
</Button>
141-
</Dialog.Actions>
142-
</Dialog>
138+
</Dialog.Content>
139+
<Dialog.Actions>
140+
<Button onPress={props.onClose} testID="close">
141+
<T keyName="Close" />
142+
</Button>
143+
<Button onPress={onSaveClick} testID="save">
144+
<T keyName="Save" />
145+
</Button>
146+
</Dialog.Actions>
147+
</Dialog>
148+
</KeyboardAvoidingView>
143149
</Portal>
144150
);
145151
}

‎app/components/presentation/weighted-exercise.tsx‎

Lines changed: 40 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import PreviousExerciseViewer from '@/components/presentation/previous-exercixe-
2121
import ConfirmationDialog from '@/components/presentation/confirmation-dialog';
2222
import ExerciseNotesDisplay from '@/components/presentation/exercise-notes-display';
2323
import { WeightAppliesTo } from '@/store/current-session';
24-
import MenuItem from 'react-native-paper/lib/typescript/components/Menu/MenuItem';
24+
import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
2525

2626
interface WeightedExerciseProps {
2727
recordedExercise: RecordedExercise;
@@ -203,39 +203,45 @@ export default function WeightedExercise(props: WeightedExerciseProps) {
203203
close={() => setAdditionalPotentialSetIndex(-1)}
204204
/>
205205
<Portal>
206-
<Dialog visible={notesDialogOpen}>
207-
<Dialog.Title>
208-
<T
209-
keyName="SessionNotesFor{name}"
210-
params={{ name: recordedExercise.blueprint.name }}
211-
/>
212-
</Dialog.Title>
213-
<Dialog.Content>
214-
<TextInput
215-
value={editorNotes}
216-
multiline
217-
mode="outlined"
218-
onChangeText={setEditorNotes}
219-
/>
220-
</Dialog.Content>
221-
<Dialog.Actions>
222-
<Button
223-
testID="cancel-notes"
224-
onPress={() => setNotesDialogOpen(false)}
225-
>
226-
<T keyName="Cancel" />
227-
</Button>
228-
<Button
229-
testID="save-notes"
230-
onPress={() => {
231-
updateNotesForExercise(editorNotes);
232-
setNotesDialogOpen(false);
233-
}}
234-
>
235-
<T keyName="Save" />
236-
</Button>
237-
</Dialog.Actions>
238-
</Dialog>
206+
<KeyboardAvoidingView
207+
behavior={'height'}
208+
style={{ flex: 1, pointerEvents: 'box-none' }}
209+
>
210+
<Dialog visible={notesDialogOpen}>
211+
<Dialog.Title>
212+
<T
213+
keyName="SessionNotesFor{name}"
214+
params={{ name: recordedExercise.blueprint.name }}
215+
/>
216+
</Dialog.Title>
217+
<Dialog.Content>
218+
<TextInput
219+
value={editorNotes}
220+
multiline
221+
mode="outlined"
222+
numberOfLines={6}
223+
onChangeText={setEditorNotes}
224+
/>
225+
</Dialog.Content>
226+
<Dialog.Actions>
227+
<Button
228+
testID="cancel-notes"
229+
onPress={() => setNotesDialogOpen(false)}
230+
>
231+
<T keyName="Cancel" />
232+
</Button>
233+
<Button
234+
testID="save-notes"
235+
onPress={() => {
236+
updateNotesForExercise(editorNotes);
237+
setNotesDialogOpen(false);
238+
}}
239+
>
240+
<T keyName="Save" />
241+
</Button>
242+
</Dialog.Actions>
243+
</Dialog>
244+
</KeyboardAvoidingView>
239245
</Portal>
240246
<ConfirmationDialog
241247
headline={t('RemoveExerciseQuestion')}

0 commit comments

Comments
 (0)