forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[🐴] use Toggle component in settings screen (#4048)
* use Toggle component
* nits + notifs sounds native only
authored by
Samuel Newman
and committed by
GitHub
da2bdf5d
d639c40e
+62
-102
-76
src/components/RadioGroup.tsx
-76
src/components/RadioGroup.tsx
···
1
-
import React from 'react'
2
-
import {View, ViewProps} from 'react-native'
3
-
4
-
import {atoms as a, useTheme} from '#/alf'
5
-
import {Button} from './Button'
6
-
import {Text} from './Typography'
7
-
8
-
export function RadioGroup<T extends string | number>({
9
-
value,
10
-
onSelect,
11
-
items,
12
-
...props
13
-
}: ViewProps & {
14
-
value: T
15
-
onSelect: (value: T) => void
16
-
items: Array<{label: string; value: T}>
17
-
}) {
18
-
return (
19
-
<View {...props}>
20
-
{items.map(item => (
21
-
<Button
22
-
label={item.label}
23
-
key={item.value}
24
-
variant="ghost"
25
-
color="secondary"
26
-
size="small"
27
-
onPress={() => onSelect(item.value)}
28
-
style={[a.justify_between, a.px_sm]}>
29
-
<Text style={a.text_md}>{item.label}</Text>
30
-
<RadioIcon selected={value === item.value} />
31
-
</Button>
32
-
))}
33
-
</View>
34
-
)
35
-
}
36
-
37
-
function RadioIcon({selected}: {selected: boolean}) {
38
-
const t = useTheme()
39
-
return (
40
-
<View
41
-
style={[
42
-
{
43
-
width: 30,
44
-
height: 30,
45
-
borderWidth: 2,
46
-
borderColor: selected
47
-
? t.palette.primary_500
48
-
: t.palette.contrast_200,
49
-
},
50
-
selected
51
-
? {
52
-
backgroundColor:
53
-
t.name === 'light'
54
-
? t.palette.primary_100
55
-
: t.palette.primary_900,
56
-
}
57
-
: t.atoms.bg,
58
-
a.align_center,
59
-
a.justify_center,
60
-
a.rounded_full,
61
-
]}>
62
-
{selected && (
63
-
<View
64
-
style={[
65
-
{
66
-
width: 18,
67
-
height: 18,
68
-
backgroundColor: t.palette.primary_500,
69
-
},
70
-
a.rounded_full,
71
-
]}
72
-
/>
73
-
)}
74
-
</View>
75
-
)
76
-
}
+62
-26
src/screens/Messages/Settings.tsx
+62
-26
src/screens/Messages/Settings.tsx
···
8
8
9
9
import {CommonNavigatorParams} from '#/lib/routes/types'
10
10
import {useGate} from '#/lib/statsig/statsig'
11
+
import {isNative} from '#/platform/detection'
11
12
import {useUpdateActorDeclaration} from '#/state/queries/messages/actor-declaration'
12
13
import {useProfileQuery} from '#/state/queries/profile'
13
14
import {useSession} from '#/state/session'
···
15
16
import {ViewHeader} from '#/view/com/util/ViewHeader'
16
17
import {CenteredView} from '#/view/com/util/Views'
17
18
import {atoms as a} from '#/alf'
19
+
import {Divider} from '#/components/Divider'
18
20
import * as Toggle from '#/components/forms/Toggle'
19
-
import {RadioGroup} from '#/components/RadioGroup'
20
21
import {Text} from '#/components/Typography'
21
22
import {useBackgroundNotificationPreferences} from '../../../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
22
23
import {ClipClopGate} from './gate'
···
39
40
})
40
41
41
42
const onSelectItem = useCallback(
42
-
(key: string) => {
43
+
(keys: string[]) => {
44
+
const key = keys[0]
45
+
if (!key) return
43
46
updateDeclaration(key as AllowIncoming)
44
47
},
45
48
[updateDeclaration],
···
48
51
const gate = useGate()
49
52
if (!gate('dms')) return <ClipClopGate />
50
53
54
+
console.log(profile?.associated?.chat?.allowIncoming)
55
+
51
56
return (
52
57
<CenteredView sideBorders style={a.h_full_vh}>
53
58
<ViewHeader title={_(msg`Settings`)} showOnDesktop showBorder />
54
-
<View style={[a.px_md, a.py_lg, a.gap_md]}>
55
-
<Text style={[a.text_xl, a.font_bold, a.px_sm]}>
59
+
<View style={[a.p_lg, a.gap_md]}>
60
+
<Text style={[a.text_lg, a.font_bold]}>
56
61
<Trans>Allow messages from</Trans>
57
62
</Text>
58
-
<RadioGroup<AllowIncoming>
59
-
value={
63
+
<Toggle.Group
64
+
label={_(msg`Allow messages from`)}
65
+
type="radio"
66
+
values={[
60
67
(profile?.associated?.chat?.allowIncoming as AllowIncoming) ??
61
-
'following'
62
-
}
63
-
items={[
64
-
{label: _(msg`Everyone`), value: 'all'},
65
-
{label: _(msg`Users I follow`), value: 'following'},
66
-
{label: _(msg`No one`), value: 'none'},
68
+
'following',
67
69
]}
68
-
onSelect={onSelectItem}
69
-
/>
70
-
</View>
71
-
<View style={[a.px_md, a.py_lg, a.gap_md]}>
72
-
<Toggle.Item
73
-
name="a"
74
-
label="Click me"
75
-
value={preferences.playSoundChat}
76
-
onChange={() => {
77
-
setPref('playSoundChat', !preferences.playSoundChat)
78
-
}}>
79
-
<Toggle.Checkbox />
80
-
<Toggle.LabelText>Notification Sounds</Toggle.LabelText>
81
-
</Toggle.Item>
70
+
onChange={onSelectItem}>
71
+
<View>
72
+
<Toggle.Item
73
+
name="all"
74
+
label={_(msg`Everyone`)}
75
+
style={[a.justify_between, a.py_sm]}>
76
+
<Toggle.LabelText>
77
+
<Trans>Everyone</Trans>
78
+
</Toggle.LabelText>
79
+
<Toggle.Radio />
80
+
</Toggle.Item>
81
+
<Toggle.Item
82
+
name="following"
83
+
label={_(msg`Users I follow`)}
84
+
style={[a.justify_between, a.py_sm]}>
85
+
<Toggle.LabelText>
86
+
<Trans>Users I follow</Trans>
87
+
</Toggle.LabelText>
88
+
<Toggle.Radio />
89
+
</Toggle.Item>
90
+
<Toggle.Item
91
+
name="none"
92
+
label={_(msg`No one`)}
93
+
style={[a.justify_between, a.py_sm]}>
94
+
<Toggle.LabelText>
95
+
<Trans>No one</Trans>
96
+
</Toggle.LabelText>
97
+
<Toggle.Radio />
98
+
</Toggle.Item>
99
+
</View>
100
+
</Toggle.Group>
101
+
{isNative && (
102
+
<>
103
+
<Divider style={[a.my_lg]} />
104
+
<Toggle.Item
105
+
name="playSoundChat"
106
+
label={_(msg`Play notification sounds`)}
107
+
value={preferences.playSoundChat}
108
+
onChange={() => {
109
+
setPref('playSoundChat', !preferences.playSoundChat)
110
+
}}>
111
+
<Toggle.Checkbox />
112
+
<Toggle.LabelText>
113
+
<Trans>Play notification sounds</Trans>
114
+
</Toggle.LabelText>
115
+
</Toggle.Item>
116
+
</>
117
+
)}
82
118
</View>
83
119
</CenteredView>
84
120
)