forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
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
+1
-1
src/lib/hooks/useIsKeyboardVisible.ts
+2
src/state/models/discovery/user-autocomplete.ts
+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
+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
})