diff options
| -rw-r--r-- | src/lib/hooks/useIsKeyboardVisible.ts | 2 | ||||
| -rw-r--r-- | src/state/models/discovery/user-autocomplete.ts | 2 | ||||
| -rw-r--r-- | src/view/com/modals/ListAddUser.tsx | 43 |
3 files changed, 27 insertions, 20 deletions
diff --git a/src/lib/hooks/useIsKeyboardVisible.ts b/src/lib/hooks/useIsKeyboardVisible.ts index 5b2a86eb0..38fc80bde 100644 --- a/src/lib/hooks/useIsKeyboardVisible.ts +++ b/src/lib/hooks/useIsKeyboardVisible.ts @@ -10,7 +10,7 @@ export function useIsKeyboardVisible({ const [isKeyboardVisible, setKeyboardVisible] = useState(false) // NOTE - // only iOS suppose the "will" events + // only iOS supports the "will" events // -prf const showEvent = isIOS && iosUseWillEvents ? 'keyboardWillShow' : 'keyboardDidShow' diff --git a/src/state/models/discovery/user-autocomplete.ts b/src/state/models/discovery/user-autocomplete.ts index 25ce859d2..f28869e83 100644 --- a/src/state/models/discovery/user-autocomplete.ts +++ b/src/state/models/discovery/user-autocomplete.ts @@ -48,6 +48,7 @@ export class UserAutocompleteModel { // = async setup() { + this.isLoading = true await this.rootStore.me.follows.syncIfNeeded() runInAction(() => { for (const did in this.rootStore.me.follows.byDid) { @@ -56,6 +57,7 @@ export class UserAutocompleteModel { this.knownHandles.add(info.handle) } } + this.isLoading = false }) } diff --git a/src/view/com/modals/ListAddUser.tsx b/src/view/com/modals/ListAddUser.tsx index 6ee20ff13..a04e2d186 100644 --- a/src/view/com/modals/ListAddUser.tsx +++ b/src/view/com/modals/ListAddUser.tsx @@ -21,9 +21,11 @@ import {s, colors} from 'lib/styles' import {usePalette} from 'lib/hooks/usePalette' import {isWeb} from 'platform/detection' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' import {cleanError} from 'lib/strings/errors' import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeHandle} from 'lib/strings/handles' +import {HITSLOP_20} from '#/lib/constants' export const snapPoints = ['90%'] @@ -42,6 +44,7 @@ export const Component = observer(function Component({ () => new UserAutocompleteModel(store), [store], ) + const [isKeyboardVisible] = useIsKeyboardVisible() // initial setup useEffect(() => { @@ -69,16 +72,7 @@ export const Component = observer(function Component({ <SafeAreaView testID="listAddUserModal" style={[pal.view, isWeb ? styles.fixedHeight : s.flex1]}> - <View - style={[ - s.flex1, - isMobile && {paddingHorizontal: 18, paddingBottom: 40}, - ]}> - <View style={styles.titleSection}> - <Text type="title-lg" style={[pal.text, styles.title]}> - Add User to List - </Text> - </View> + <View style={[s.flex1, isMobile && {paddingHorizontal: 18}]}> <View style={[styles.searchContainer, pal.border]}> <FontAwesomeIcon icon="search" size={16} /> <TextInput @@ -91,9 +85,11 @@ export const Component = observer(function Component({ accessible={true} accessibilityLabel="Search" accessibilityHint="" + autoFocus autoCapitalize="none" autoComplete="off" autoCorrect={false} + selectTextOnFocus /> {query ? ( <Pressable @@ -101,7 +97,8 @@ export const Component = observer(function Component({ accessibilityRole="button" accessibilityLabel="Cancel search" accessibilityHint="Exits inputting search query" - onAccessibilityEscape={onPressCancelSearch}> + onAccessibilityEscape={onPressCancelSearch} + hitSlop={HITSLOP_20}> <FontAwesomeIcon icon="xmark" size={16} @@ -110,8 +107,15 @@ export const Component = observer(function Component({ </Pressable> ) : undefined} </View> - <ScrollView style={[s.flex1]}> - {autocompleteView.suggestions.length ? ( + <ScrollView + style={[s.flex1]} + keyboardDismissMode="none" + keyboardShouldPersistTaps="always"> + {autocompleteView.isLoading ? ( + <View style={{marginVertical: 20}}> + <ActivityIndicator /> + </View> + ) : autocompleteView.suggestions.length ? ( <> {autocompleteView.suggestions.slice(0, 40).map((item, i) => ( <UserResult @@ -134,10 +138,14 @@ export const Component = observer(function Component({ </Text> )} </ScrollView> - <View style={[styles.btnContainer]}> + <View + style={[ + styles.btnContainer, + {paddingBottom: isKeyboardVisible ? 10 : 20}, + ]}> <Button testID="doneBtn" - type="primary" + type="default" onPress={() => store.shell.closeModal()} accessibilityLabel="Done" accessibilityHint="" @@ -188,16 +196,13 @@ function UserResult({ flexDirection: 'row', alignItems: 'center', borderTopWidth: noBorder ? 0 : 1, - paddingVertical: 8, paddingHorizontal: 8, }, ]}> <View style={{ - alignSelf: 'baseline', width: 54, paddingLeft: 4, - paddingTop: 10, }}> <UserAvatar size={40} avatar={profile.avatar} /> </View> @@ -276,6 +281,6 @@ const styles = StyleSheet.create({ backgroundColor: colors.blue3, }, btnContainer: { - paddingTop: 20, + paddingTop: 10, }, }) |