forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
dismiss keyboard on touch mute dialog (#3074)
+164
-157
+164
-157
src/components/dialogs/MutedWords.tsx
+164
-157
src/components/dialogs/MutedWords.tsx
···
1
1
import React from 'react'
2
-
import {View} from 'react-native'
2
+
import {Keyboard, View} from 'react-native'
3
3
import {msg, Trans} from '@lingui/macro'
4
4
import {useLingui} from '@lingui/react'
5
5
import {AppBskyActorDefs, sanitizeMutedWordValue} from '@atproto/api'
···
81
81
82
82
return (
83
83
<Dialog.ScrollableInner label={_(msg`Manage your muted words and tags`)}>
84
-
<Text
85
-
style={[a.text_md, a.font_bold, a.pb_sm, t.atoms.text_contrast_high]}>
86
-
<Trans>Add muted words and tags</Trans>
87
-
</Text>
88
-
<Text style={[a.pb_lg, a.leading_snug, t.atoms.text_contrast_medium]}>
89
-
<Trans>
90
-
Posts can be muted based on their text, their tags, or both.
91
-
</Trans>
92
-
</Text>
84
+
<View onTouchStart={Keyboard.dismiss}>
85
+
<Text
86
+
style={[a.text_md, a.font_bold, a.pb_sm, t.atoms.text_contrast_high]}>
87
+
<Trans>Add muted words and tags</Trans>
88
+
</Text>
89
+
<Text style={[a.pb_lg, a.leading_snug, t.atoms.text_contrast_medium]}>
90
+
<Trans>
91
+
Posts can be muted based on their text, their tags, or both.
92
+
</Trans>
93
+
</Text>
93
94
94
-
<View style={[a.pb_lg]}>
95
-
<Dialog.Input
96
-
autoCorrect={false}
97
-
autoCapitalize="none"
98
-
autoComplete="off"
99
-
label={_(msg`Enter a word or tag`)}
100
-
placeholder={_(msg`Enter a word or tag`)}
101
-
value={field}
102
-
onChangeText={value => {
103
-
if (error) {
104
-
setError('')
105
-
}
106
-
setField(value)
107
-
}}
108
-
onSubmitEditing={submit}
109
-
/>
95
+
<View style={[a.pb_lg]}>
96
+
<Dialog.Input
97
+
autoCorrect={false}
98
+
autoCapitalize="none"
99
+
autoComplete="off"
100
+
label={_(msg`Enter a word or tag`)}
101
+
placeholder={_(msg`Enter a word or tag`)}
102
+
value={field}
103
+
onChangeText={value => {
104
+
if (error) {
105
+
setError('')
106
+
}
107
+
setField(value)
108
+
}}
109
+
onSubmitEditing={submit}
110
+
/>
110
111
111
-
<Toggle.Group
112
-
label={_(msg`Toggle between muted word options.`)}
113
-
type="radio"
114
-
values={options}
115
-
onChange={setOptions}>
116
-
<View
117
-
style={[
118
-
a.pt_sm,
119
-
a.py_sm,
120
-
a.flex_row,
121
-
a.align_center,
122
-
a.gap_sm,
123
-
a.flex_wrap,
124
-
]}>
125
-
<Toggle.Item
126
-
label={_(msg`Mute this word in post text and tags`)}
127
-
name="content"
128
-
style={[a.flex_1, !gtMobile && [a.w_full, a.flex_0]]}>
129
-
<TargetToggle>
130
-
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
131
-
<Toggle.Radio />
132
-
<Toggle.Label>
133
-
<Trans>Mute in text & tags</Trans>
134
-
</Toggle.Label>
135
-
</View>
136
-
<PageText size="sm" />
137
-
</TargetToggle>
138
-
</Toggle.Item>
112
+
<Toggle.Group
113
+
label={_(msg`Toggle between muted word options.`)}
114
+
type="radio"
115
+
values={options}
116
+
onChange={setOptions}>
117
+
<View
118
+
style={[
119
+
a.pt_sm,
120
+
a.py_sm,
121
+
a.flex_row,
122
+
a.align_center,
123
+
a.gap_sm,
124
+
a.flex_wrap,
125
+
]}>
126
+
<Toggle.Item
127
+
label={_(msg`Mute this word in post text and tags`)}
128
+
name="content"
129
+
style={[a.flex_1, !gtMobile && [a.w_full, a.flex_0]]}>
130
+
<TargetToggle>
131
+
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
132
+
<Toggle.Radio />
133
+
<Toggle.Label>
134
+
<Trans>Mute in text & tags</Trans>
135
+
</Toggle.Label>
136
+
</View>
137
+
<PageText size="sm" />
138
+
</TargetToggle>
139
+
</Toggle.Item>
139
140
140
-
<Toggle.Item
141
-
label={_(msg`Mute this word in tags only`)}
142
-
name="tag"
143
-
style={[a.flex_1, !gtMobile && [a.w_full, a.flex_0]]}>
144
-
<TargetToggle>
145
-
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
146
-
<Toggle.Radio />
147
-
<Toggle.Label>
148
-
<Trans>Mute in tags only</Trans>
149
-
</Toggle.Label>
150
-
</View>
151
-
<Hashtag size="sm" />
152
-
</TargetToggle>
153
-
</Toggle.Item>
141
+
<Toggle.Item
142
+
label={_(msg`Mute this word in tags only`)}
143
+
name="tag"
144
+
style={[a.flex_1, !gtMobile && [a.w_full, a.flex_0]]}>
145
+
<TargetToggle>
146
+
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
147
+
<Toggle.Radio />
148
+
<Toggle.Label>
149
+
<Trans>Mute in tags only</Trans>
150
+
</Toggle.Label>
151
+
</View>
152
+
<Hashtag size="sm" />
153
+
</TargetToggle>
154
+
</Toggle.Item>
154
155
155
-
<Button
156
-
disabled={isPending || !field}
157
-
label={_(msg`Add mute word for configured settings`)}
158
-
size="small"
159
-
color="primary"
160
-
variant="solid"
161
-
style={[!gtMobile && [a.w_full, a.flex_0]]}
162
-
onPress={submit}>
163
-
<ButtonText>
164
-
<Trans>Add</Trans>
165
-
</ButtonText>
166
-
<ButtonIcon icon={isPending ? Loader : Plus} />
167
-
</Button>
168
-
</View>
169
-
</Toggle.Group>
156
+
<Button
157
+
disabled={isPending || !field}
158
+
label={_(msg`Add mute word for configured settings`)}
159
+
size="small"
160
+
color="primary"
161
+
variant="solid"
162
+
style={[!gtMobile && [a.w_full, a.flex_0]]}
163
+
onPress={submit}>
164
+
<ButtonText>
165
+
<Trans>Add</Trans>
166
+
</ButtonText>
167
+
<ButtonIcon icon={isPending ? Loader : Plus} />
168
+
</Button>
169
+
</View>
170
+
</Toggle.Group>
170
171
171
-
{error && (
172
-
<View
173
-
style={[
174
-
a.mb_lg,
175
-
a.flex_row,
176
-
a.rounded_sm,
177
-
a.p_md,
178
-
a.mb_xs,
179
-
t.atoms.bg_contrast_25,
180
-
{
181
-
backgroundColor: t.palette.negative_400,
182
-
},
183
-
]}>
184
-
<Text
172
+
{error && (
173
+
<View
185
174
style={[
186
-
a.italic,
187
-
{color: t.palette.white},
188
-
native({marginTop: 2}),
175
+
a.mb_lg,
176
+
a.flex_row,
177
+
a.rounded_sm,
178
+
a.p_md,
179
+
a.mb_xs,
180
+
t.atoms.bg_contrast_25,
181
+
{
182
+
backgroundColor: t.palette.negative_400,
183
+
},
189
184
]}>
190
-
{error}
191
-
</Text>
192
-
</View>
193
-
)}
185
+
<Text
186
+
style={[
187
+
a.italic,
188
+
{color: t.palette.white},
189
+
native({marginTop: 2}),
190
+
]}>
191
+
{error}
192
+
</Text>
193
+
</View>
194
+
)}
194
195
195
-
<Text
196
-
style={[
197
-
a.pt_xs,
198
-
a.text_sm,
199
-
a.italic,
200
-
a.leading_snug,
201
-
t.atoms.text_contrast_medium,
202
-
]}>
203
-
<Trans>
204
-
We recommend avoiding common words that appear in many posts, since
205
-
it can result in no posts being shown.
206
-
</Trans>
207
-
</Text>
208
-
</View>
196
+
<Text
197
+
style={[
198
+
a.pt_xs,
199
+
a.text_sm,
200
+
a.italic,
201
+
a.leading_snug,
202
+
t.atoms.text_contrast_medium,
203
+
]}>
204
+
<Trans>
205
+
We recommend avoiding common words that appear in many posts,
206
+
since it can result in no posts being shown.
207
+
</Trans>
208
+
</Text>
209
+
</View>
209
210
210
-
<Divider />
211
+
<Divider />
211
212
212
-
<View style={[a.pt_2xl]}>
213
-
<Text
214
-
style={[a.text_md, a.font_bold, a.pb_md, t.atoms.text_contrast_high]}>
215
-
<Trans>Your muted words</Trans>
216
-
</Text>
213
+
<View style={[a.pt_2xl]}>
214
+
<Text
215
+
style={[
216
+
a.text_md,
217
+
a.font_bold,
218
+
a.pb_md,
219
+
t.atoms.text_contrast_high,
220
+
]}>
221
+
<Trans>Your muted words</Trans>
222
+
</Text>
217
223
218
-
{isPreferencesLoading ? (
219
-
<Loader />
220
-
) : preferencesError || !preferences ? (
221
-
<View
222
-
style={[a.py_md, a.px_lg, a.rounded_md, t.atoms.bg_contrast_25]}>
223
-
<Text style={[a.italic, t.atoms.text_contrast_high]}>
224
-
<Trans>
225
-
We're sorry, but we weren't able to load your muted words at
226
-
this time. Please try again.
227
-
</Trans>
228
-
</Text>
229
-
</View>
230
-
) : preferences.mutedWords.length ? (
231
-
[...preferences.mutedWords]
232
-
.reverse()
233
-
.map((word, i) => (
234
-
<MutedWordRow
235
-
key={word.value + i}
236
-
word={word}
237
-
style={[i % 2 === 0 && t.atoms.bg_contrast_25]}
238
-
/>
239
-
))
240
-
) : (
241
-
<View
242
-
style={[a.py_md, a.px_lg, a.rounded_md, t.atoms.bg_contrast_25]}>
243
-
<Text style={[a.italic, t.atoms.text_contrast_high]}>
244
-
<Trans>You haven't muted any words or tags yet</Trans>
245
-
</Text>
246
-
</View>
247
-
)}
248
-
</View>
224
+
{isPreferencesLoading ? (
225
+
<Loader />
226
+
) : preferencesError || !preferences ? (
227
+
<View
228
+
style={[a.py_md, a.px_lg, a.rounded_md, t.atoms.bg_contrast_25]}>
229
+
<Text style={[a.italic, t.atoms.text_contrast_high]}>
230
+
<Trans>
231
+
We're sorry, but we weren't able to load your muted words at
232
+
this time. Please try again.
233
+
</Trans>
234
+
</Text>
235
+
</View>
236
+
) : preferences.mutedWords.length ? (
237
+
[...preferences.mutedWords]
238
+
.reverse()
239
+
.map((word, i) => (
240
+
<MutedWordRow
241
+
key={word.value + i}
242
+
word={word}
243
+
style={[i % 2 === 0 && t.atoms.bg_contrast_25]}
244
+
/>
245
+
))
246
+
) : (
247
+
<View
248
+
style={[a.py_md, a.px_lg, a.rounded_md, t.atoms.bg_contrast_25]}>
249
+
<Text style={[a.italic, t.atoms.text_contrast_high]}>
250
+
<Trans>You haven't muted any words or tags yet</Trans>
251
+
</Text>
252
+
</View>
253
+
)}
254
+
</View>
249
255
250
-
{isNative && <View style={{height: 20}} />}
256
+
{isNative && <View style={{height: 20}} />}
251
257
252
-
<Dialog.Close />
258
+
<Dialog.Close />
259
+
</View>
253
260
</Dialog.ScrollableInner>
254
261
)
255
262
}