[🐴] use Toggle component in settings screen (#4048)
* use Toggle component * nits + notifs sounds native onlyzio/stable
Samuel Newman
GitHub
parent
d639c40e17
commit
da2bdf5d6f
|
|
@ -1,76 +0,0 @@
|
|||
import React from 'react'
|
||||
import {View, ViewProps} from 'react-native'
|
||||
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import {Button} from './Button'
|
||||
import {Text} from './Typography'
|
||||
|
||||
export function RadioGroup<T extends string | number>({
|
||||
value,
|
||||
onSelect,
|
||||
items,
|
||||
...props
|
||||
}: ViewProps & {
|
||||
value: T
|
||||
onSelect: (value: T) => void
|
||||
items: Array<{label: string; value: T}>
|
||||
}) {
|
||||
return (
|
||||
<View {...props}>
|
||||
{items.map(item => (
|
||||
<Button
|
||||
label={item.label}
|
||||
key={item.value}
|
||||
variant="ghost"
|
||||
color="secondary"
|
||||
size="small"
|
||||
onPress={() => onSelect(item.value)}
|
||||
style={[a.justify_between, a.px_sm]}>
|
||||
<Text style={a.text_md}>{item.label}</Text>
|
||||
<RadioIcon selected={value === item.value} />
|
||||
</Button>
|
||||
))}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
function RadioIcon({selected}: {selected: boolean}) {
|
||||
const t = useTheme()
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderWidth: 2,
|
||||
borderColor: selected
|
||||
? t.palette.primary_500
|
||||
: t.palette.contrast_200,
|
||||
},
|
||||
selected
|
||||
? {
|
||||
backgroundColor:
|
||||
t.name === 'light'
|
||||
? t.palette.primary_100
|
||||
: t.palette.primary_900,
|
||||
}
|
||||
: t.atoms.bg,
|
||||
a.align_center,
|
||||
a.justify_center,
|
||||
a.rounded_full,
|
||||
]}>
|
||||
{selected && (
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
width: 18,
|
||||
height: 18,
|
||||
backgroundColor: t.palette.primary_500,
|
||||
},
|
||||
a.rounded_full,
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -8,6 +8,7 @@ import {UseQueryResult} from '@tanstack/react-query'
|
|||
|
||||
import {CommonNavigatorParams} from '#/lib/routes/types'
|
||||
import {useGate} from '#/lib/statsig/statsig'
|
||||
import {isNative} from '#/platform/detection'
|
||||
import {useUpdateActorDeclaration} from '#/state/queries/messages/actor-declaration'
|
||||
import {useProfileQuery} from '#/state/queries/profile'
|
||||
import {useSession} from '#/state/session'
|
||||
|
|
@ -15,8 +16,8 @@ import * as Toast from '#/view/com/util/Toast'
|
|||
import {ViewHeader} from '#/view/com/util/ViewHeader'
|
||||
import {CenteredView} from '#/view/com/util/Views'
|
||||
import {atoms as a} from '#/alf'
|
||||
import {Divider} from '#/components/Divider'
|
||||
import * as Toggle from '#/components/forms/Toggle'
|
||||
import {RadioGroup} from '#/components/RadioGroup'
|
||||
import {Text} from '#/components/Typography'
|
||||
import {useBackgroundNotificationPreferences} from '../../../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
|
||||
import {ClipClopGate} from './gate'
|
||||
|
|
@ -39,7 +40,9 @@ export function MessagesSettingsScreen({}: Props) {
|
|||
})
|
||||
|
||||
const onSelectItem = useCallback(
|
||||
(key: string) => {
|
||||
(keys: string[]) => {
|
||||
const key = keys[0]
|
||||
if (!key) return
|
||||
updateDeclaration(key as AllowIncoming)
|
||||
},
|
||||
[updateDeclaration],
|
||||
|
|
@ -48,37 +51,70 @@ export function MessagesSettingsScreen({}: Props) {
|
|||
const gate = useGate()
|
||||
if (!gate('dms')) return <ClipClopGate />
|
||||
|
||||
console.log(profile?.associated?.chat?.allowIncoming)
|
||||
|
||||
return (
|
||||
<CenteredView sideBorders style={a.h_full_vh}>
|
||||
<ViewHeader title={_(msg`Settings`)} showOnDesktop showBorder />
|
||||
<View style={[a.px_md, a.py_lg, a.gap_md]}>
|
||||
<Text style={[a.text_xl, a.font_bold, a.px_sm]}>
|
||||
<View style={[a.p_lg, a.gap_md]}>
|
||||
<Text style={[a.text_lg, a.font_bold]}>
|
||||
<Trans>Allow messages from</Trans>
|
||||
</Text>
|
||||
<RadioGroup<AllowIncoming>
|
||||
value={
|
||||
<Toggle.Group
|
||||
label={_(msg`Allow messages from`)}
|
||||
type="radio"
|
||||
values={[
|
||||
(profile?.associated?.chat?.allowIncoming as AllowIncoming) ??
|
||||
'following'
|
||||
}
|
||||
items={[
|
||||
{label: _(msg`Everyone`), value: 'all'},
|
||||
{label: _(msg`Users I follow`), value: 'following'},
|
||||
{label: _(msg`No one`), value: 'none'},
|
||||
'following',
|
||||
]}
|
||||
onSelect={onSelectItem}
|
||||
/>
|
||||
</View>
|
||||
<View style={[a.px_md, a.py_lg, a.gap_md]}>
|
||||
<Toggle.Item
|
||||
name="a"
|
||||
label="Click me"
|
||||
value={preferences.playSoundChat}
|
||||
onChange={() => {
|
||||
setPref('playSoundChat', !preferences.playSoundChat)
|
||||
}}>
|
||||
<Toggle.Checkbox />
|
||||
<Toggle.LabelText>Notification Sounds</Toggle.LabelText>
|
||||
</Toggle.Item>
|
||||
onChange={onSelectItem}>
|
||||
<View>
|
||||
<Toggle.Item
|
||||
name="all"
|
||||
label={_(msg`Everyone`)}
|
||||
style={[a.justify_between, a.py_sm]}>
|
||||
<Toggle.LabelText>
|
||||
<Trans>Everyone</Trans>
|
||||
</Toggle.LabelText>
|
||||
<Toggle.Radio />
|
||||
</Toggle.Item>
|
||||
<Toggle.Item
|
||||
name="following"
|
||||
label={_(msg`Users I follow`)}
|
||||
style={[a.justify_between, a.py_sm]}>
|
||||
<Toggle.LabelText>
|
||||
<Trans>Users I follow</Trans>
|
||||
</Toggle.LabelText>
|
||||
<Toggle.Radio />
|
||||
</Toggle.Item>
|
||||
<Toggle.Item
|
||||
name="none"
|
||||
label={_(msg`No one`)}
|
||||
style={[a.justify_between, a.py_sm]}>
|
||||
<Toggle.LabelText>
|
||||
<Trans>No one</Trans>
|
||||
</Toggle.LabelText>
|
||||
<Toggle.Radio />
|
||||
</Toggle.Item>
|
||||
</View>
|
||||
</Toggle.Group>
|
||||
{isNative && (
|
||||
<>
|
||||
<Divider style={[a.my_lg]} />
|
||||
<Toggle.Item
|
||||
name="playSoundChat"
|
||||
label={_(msg`Play notification sounds`)}
|
||||
value={preferences.playSoundChat}
|
||||
onChange={() => {
|
||||
setPref('playSoundChat', !preferences.playSoundChat)
|
||||
}}>
|
||||
<Toggle.Checkbox />
|
||||
<Toggle.LabelText>
|
||||
<Trans>Play notification sounds</Trans>
|
||||
</Toggle.LabelText>
|
||||
</Toggle.Item>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</CenteredView>
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue