forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Autofocus the alt text input on all platforms, improve dismissability on native (#2690)
* sneak in a eslint fix
* autofocus the alt text input whenever we open the modal
* properly use the hook
+25
-2
+1
-1
src/state/modals/index.tsx
+1
-1
src/state/modals/index.tsx
···
6
6
import {ImageModel} from '#/state/models/media/image'
7
7
import {GalleryModel} from '#/state/models/media/gallery'
8
8
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
9
-
import {EmbedPlayerSource} from '#/lib/strings/embed-player.ts'
9
+
import {EmbedPlayerSource} from '#/lib/strings/embed-player'
10
10
import {ThreadgateSetting} from '../queries/threadgate'
11
11
12
12
export interface ConfirmModal {
+24
-1
src/view/com/modals/AltImage.tsx
+24
-1
src/view/com/modals/AltImage.tsx
···
4
4
StyleSheet,
5
5
TouchableOpacity,
6
6
View,
7
+
TextInput as RNTextInput,
7
8
useWindowDimensions,
9
+
ScrollView as RNScrollView,
8
10
} from 'react-native'
9
11
import {ScrollView, TextInput} from './util'
10
12
import {Image} from 'expo-image'
···
13
15
import {enforceLen} from 'lib/strings/helpers'
14
16
import {MAX_ALT_TEXT} from 'lib/constants'
15
17
import {useTheme} from 'lib/ThemeContext'
18
+
import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
16
19
import {Text} from '../util/text/Text'
17
20
import LinearGradient from 'react-native-linear-gradient'
18
21
import {isWeb} from 'platform/detection'
···
34
37
const [altText, setAltText] = useState(image.altText)
35
38
const windim = useWindowDimensions()
36
39
const {closeModal} = useModalControls()
40
+
const inputRef = React.useRef<RNTextInput>(null)
41
+
const scrollViewRef = React.useRef<RNScrollView>(null)
42
+
const keyboardShown = useIsKeyboardVisible()
43
+
44
+
// Autofocus hack when we open the modal. We have to wait for the animation to complete first
45
+
React.useEffect(() => {
46
+
setTimeout(() => {
47
+
inputRef.current?.focus()
48
+
}, 500)
49
+
}, [])
50
+
51
+
// We'd rather be at the bottom here so that we can easily dismiss the modal instead of having to scroll
52
+
// (especially on android, it acts weird)
53
+
React.useEffect(() => {
54
+
if (keyboardShown[0]) {
55
+
scrollViewRef.current?.scrollToEnd()
56
+
}
57
+
}, [keyboardShown])
37
58
38
59
const imageStyles = useMemo<ImageStyle>(() => {
39
60
const maxWidth = isWeb ? 450 : windim.width
···
71
92
testID="altTextImageModal"
72
93
style={[pal.view, styles.scrollContainer]}
73
94
keyboardShouldPersistTaps="always"
95
+
ref={scrollViewRef}
74
96
nativeID="imageAltText">
75
97
<View style={styles.scrollInner}>
76
98
<View style={[pal.viewLight, styles.imageContainer]}>
···
97
119
accessibilityLabel={_(msg`Image alt text`)}
98
120
accessibilityHint=""
99
121
accessibilityLabelledBy="imageAltText"
100
-
autoFocus
122
+
// @ts-ignore This is fine, type is weird on the BottomSheetTextInput
123
+
ref={inputRef}
101
124
/>
102
125
<View style={styles.buttonControls}>
103
126
<TouchableOpacity