Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

ListAddUser modal UX improvements (#1809)

* typo

* Add loading state to ListAddUser

* Improve UI/UX of ListAddUser

authored by

Paul Frazee and committed by
GitHub
ebad6d2b 4de852de

+27 -20
+1 -1
src/lib/hooks/useIsKeyboardVisible.ts
··· 10 10 const [isKeyboardVisible, setKeyboardVisible] = useState(false) 11 11 12 12 // NOTE 13 - // only iOS suppose the "will" events 13 + // only iOS supports the "will" events 14 14 // -prf 15 15 const showEvent = 16 16 isIOS && iosUseWillEvents ? 'keyboardWillShow' : 'keyboardDidShow'
+2
src/state/models/discovery/user-autocomplete.ts
··· 48 48 // = 49 49 50 50 async setup() { 51 + this.isLoading = true 51 52 await this.rootStore.me.follows.syncIfNeeded() 52 53 runInAction(() => { 53 54 for (const did in this.rootStore.me.follows.byDid) { ··· 56 57 this.knownHandles.add(info.handle) 57 58 } 58 59 } 60 + this.isLoading = false 59 61 }) 60 62 } 61 63
+24 -19
src/view/com/modals/ListAddUser.tsx
··· 21 21 import {usePalette} from 'lib/hooks/usePalette' 22 22 import {isWeb} from 'platform/detection' 23 23 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 24 + import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' 24 25 import {cleanError} from 'lib/strings/errors' 25 26 import {sanitizeDisplayName} from 'lib/strings/display-names' 26 27 import {sanitizeHandle} from 'lib/strings/handles' 28 + import {HITSLOP_20} from '#/lib/constants' 27 29 28 30 export const snapPoints = ['90%'] 29 31 ··· 42 44 () => new UserAutocompleteModel(store), 43 45 [store], 44 46 ) 47 + const [isKeyboardVisible] = useIsKeyboardVisible() 45 48 46 49 // initial setup 47 50 useEffect(() => { ··· 69 72 <SafeAreaView 70 73 testID="listAddUserModal" 71 74 style={[pal.view, isWeb ? styles.fixedHeight : s.flex1]}> 72 - <View 73 - style={[ 74 - s.flex1, 75 - isMobile && {paddingHorizontal: 18, paddingBottom: 40}, 76 - ]}> 77 - <View style={styles.titleSection}> 78 - <Text type="title-lg" style={[pal.text, styles.title]}> 79 - Add User to List 80 - </Text> 81 - </View> 75 + <View style={[s.flex1, isMobile && {paddingHorizontal: 18}]}> 82 76 <View style={[styles.searchContainer, pal.border]}> 83 77 <FontAwesomeIcon icon="search" size={16} /> 84 78 <TextInput ··· 91 85 accessible={true} 92 86 accessibilityLabel="Search" 93 87 accessibilityHint="" 88 + autoFocus 94 89 autoCapitalize="none" 95 90 autoComplete="off" 96 91 autoCorrect={false} 92 + selectTextOnFocus 97 93 /> 98 94 {query ? ( 99 95 <Pressable ··· 101 97 accessibilityRole="button" 102 98 accessibilityLabel="Cancel search" 103 99 accessibilityHint="Exits inputting search query" 104 - onAccessibilityEscape={onPressCancelSearch}> 100 + onAccessibilityEscape={onPressCancelSearch} 101 + hitSlop={HITSLOP_20}> 105 102 <FontAwesomeIcon 106 103 icon="xmark" 107 104 size={16} ··· 110 107 </Pressable> 111 108 ) : undefined} 112 109 </View> 113 - <ScrollView style={[s.flex1]}> 114 - {autocompleteView.suggestions.length ? ( 110 + <ScrollView 111 + style={[s.flex1]} 112 + keyboardDismissMode="none" 113 + keyboardShouldPersistTaps="always"> 114 + {autocompleteView.isLoading ? ( 115 + <View style={{marginVertical: 20}}> 116 + <ActivityIndicator /> 117 + </View> 118 + ) : autocompleteView.suggestions.length ? ( 115 119 <> 116 120 {autocompleteView.suggestions.slice(0, 40).map((item, i) => ( 117 121 <UserResult ··· 134 138 </Text> 135 139 )} 136 140 </ScrollView> 137 - <View style={[styles.btnContainer]}> 141 + <View 142 + style={[ 143 + styles.btnContainer, 144 + {paddingBottom: isKeyboardVisible ? 10 : 20}, 145 + ]}> 138 146 <Button 139 147 testID="doneBtn" 140 - type="primary" 148 + type="default" 141 149 onPress={() => store.shell.closeModal()} 142 150 accessibilityLabel="Done" 143 151 accessibilityHint="" ··· 188 196 flexDirection: 'row', 189 197 alignItems: 'center', 190 198 borderTopWidth: noBorder ? 0 : 1, 191 - paddingVertical: 8, 192 199 paddingHorizontal: 8, 193 200 }, 194 201 ]}> 195 202 <View 196 203 style={{ 197 - alignSelf: 'baseline', 198 204 width: 54, 199 205 paddingLeft: 4, 200 - paddingTop: 10, 201 206 }}> 202 207 <UserAvatar size={40} avatar={profile.avatar} /> 203 208 </View> ··· 276 281 backgroundColor: colors.blue3, 277 282 }, 278 283 btnContainer: { 279 - paddingTop: 20, 284 + paddingTop: 10, 280 285 }, 281 286 })