ALF content language dialog (#9471)
Co-authored-by: Eric Bailey <git@esb.lol>
This commit is contained in:
Samuel Newman
@@ -16,8 +16,10 @@ import {
|
||||
type BottomSheetState,
|
||||
type BottomSheetViewProps,
|
||||
} from './BottomSheet.types'
|
||||
import {BottomSheetPortalProvider} from './BottomSheetPortal'
|
||||
import {Context as PortalContext} from './BottomSheetPortal'
|
||||
import {
|
||||
BottomSheetPortalProvider,
|
||||
Context as PortalContext,
|
||||
} from './BottomSheetPortal'
|
||||
|
||||
const screenHeight = Dimensions.get('screen').height
|
||||
|
||||
|
||||
@@ -103,9 +103,9 @@ export function Trigger({children, label}: TriggerProps) {
|
||||
<Button
|
||||
label={label}
|
||||
onPress={control.open}
|
||||
style={[a.flex_1, a.justify_between]}
|
||||
style={[a.flex_1, a.justify_between, a.pl_lg, a.pr_md]}
|
||||
color="secondary"
|
||||
size="small"
|
||||
size="large"
|
||||
shape="rectangular">
|
||||
<>{children}</>
|
||||
</Button>
|
||||
|
||||
+41
-34
@@ -6,11 +6,7 @@ import {useLingui} from '@lingui/react'
|
||||
|
||||
import {languageName} from '#/locale/helpers'
|
||||
import {type Language, LANGUAGES, LANGUAGES_MAP_CODE2} from '#/locale/languages'
|
||||
import {
|
||||
toPostLanguages,
|
||||
useLanguagePrefs,
|
||||
useLanguagePrefsApi,
|
||||
} from '#/state/preferences/languages'
|
||||
import {useLanguagePrefs} from '#/state/preferences/languages'
|
||||
import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
|
||||
import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
|
||||
import {atoms as a, useTheme, web} from '#/alf'
|
||||
@@ -22,18 +18,27 @@ import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Ti
|
||||
import {Text} from '#/components/Typography'
|
||||
import {IS_NATIVE, IS_WEB} from '#/env'
|
||||
|
||||
export function PostLanguageSelectDialog({
|
||||
export function LanguageSelectDialog({
|
||||
titleText,
|
||||
subtitleText,
|
||||
control,
|
||||
/**
|
||||
* Optionally can be passed to show different values than what is saved in
|
||||
* langPrefs.
|
||||
*/
|
||||
currentLanguages,
|
||||
onSelectLanguage,
|
||||
onSelectLanguages,
|
||||
maxLanguages,
|
||||
}: {
|
||||
control: Dialog.DialogControlProps
|
||||
titleText?: React.ReactNode
|
||||
subtitleText?: React.ReactNode
|
||||
/**
|
||||
* Defaults to the primary language
|
||||
*/
|
||||
currentLanguages?: string[]
|
||||
onSelectLanguage?: (language: string) => void
|
||||
onSelectLanguages: (languages: string[]) => void
|
||||
maxLanguages?: number
|
||||
}) {
|
||||
const {height} = useWindowDimensions()
|
||||
const insets = useSafeAreaInsets()
|
||||
@@ -50,8 +55,11 @@ export function PostLanguageSelectDialog({
|
||||
<Dialog.Handle />
|
||||
<ErrorBoundary renderError={renderErrorBoundary}>
|
||||
<DialogInner
|
||||
titleText={titleText}
|
||||
subtitleText={subtitleText}
|
||||
currentLanguages={currentLanguages}
|
||||
onSelectLanguage={onSelectLanguage}
|
||||
onSelectLanguages={onSelectLanguages}
|
||||
maxLanguages={maxLanguages}
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
</Dialog.Outer>
|
||||
@@ -59,11 +67,17 @@ export function PostLanguageSelectDialog({
|
||||
}
|
||||
|
||||
export function DialogInner({
|
||||
titleText,
|
||||
subtitleText,
|
||||
currentLanguages,
|
||||
onSelectLanguage,
|
||||
onSelectLanguages,
|
||||
maxLanguages,
|
||||
}: {
|
||||
titleText?: React.ReactNode
|
||||
subtitleText?: React.ReactNode
|
||||
currentLanguages?: string[]
|
||||
onSelectLanguage?: (language: string) => void
|
||||
onSelectLanguages?: (languages: string[]) => void
|
||||
maxLanguages?: number
|
||||
}) {
|
||||
const control = Dialog.useDialogContext()
|
||||
const [headerHeight, setHeaderHeight] = useState(0)
|
||||
@@ -81,26 +95,17 @@ export function DialogInner({
|
||||
}, [])
|
||||
|
||||
const langPrefs = useLanguagePrefs()
|
||||
const postLanguagesPref =
|
||||
currentLanguages ?? toPostLanguages(langPrefs.postLanguage)
|
||||
|
||||
const [checkedLanguagesCode2, setCheckedLanguagesCode2] = useState<string[]>(
|
||||
postLanguagesPref || [langPrefs.primaryLanguage],
|
||||
currentLanguages || [langPrefs.primaryLanguage],
|
||||
)
|
||||
const [search, setSearch] = useState('')
|
||||
|
||||
const setLangPrefs = useLanguagePrefsApi()
|
||||
const t = useTheme()
|
||||
const {_} = useLingui()
|
||||
|
||||
const handleClose = () => {
|
||||
control.close(() => {
|
||||
let langsString = checkedLanguagesCode2.join(',')
|
||||
if (!langsString) {
|
||||
langsString = langPrefs.primaryLanguage
|
||||
}
|
||||
setLangPrefs.setPostLanguage(langsString)
|
||||
onSelectLanguage?.(langsString)
|
||||
onSelectLanguages?.(checkedLanguagesCode2)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -181,18 +186,20 @@ export function DialogInner({
|
||||
a.text_xl,
|
||||
a.mb_sm,
|
||||
]}>
|
||||
<Trans>Choose Post Languages</Trans>
|
||||
</Text>
|
||||
<Text
|
||||
nativeID="dialog-description"
|
||||
style={[
|
||||
t.atoms.text_contrast_medium,
|
||||
a.text_left,
|
||||
a.text_md,
|
||||
a.mb_lg,
|
||||
]}>
|
||||
<Trans>Select up to 3 languages used in this post</Trans>
|
||||
{titleText ?? <Trans>Choose languages</Trans>}
|
||||
</Text>
|
||||
{subtitleText && (
|
||||
<Text
|
||||
nativeID="dialog-description"
|
||||
style={[
|
||||
t.atoms.text_contrast_medium,
|
||||
a.text_left,
|
||||
a.text_md,
|
||||
a.mb_lg,
|
||||
]}>
|
||||
{subtitleText}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{IS_WEB && (
|
||||
@@ -244,7 +251,7 @@ export function DialogInner({
|
||||
values={checkedLanguagesCode2}
|
||||
onChange={setCheckedLanguagesCode2}
|
||||
type="checkbox"
|
||||
maxSelections={3}
|
||||
maxSelections={maxLanguages}
|
||||
label={_(msg`Select languages`)}
|
||||
style={web([a.contents])}>
|
||||
<Dialog.InnerFlatList
|
||||
@@ -1,19 +1,21 @@
|
||||
import {useCallback, useMemo} from 'react'
|
||||
import {useCallback, useMemo, useState} from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {APP_LANGUAGES, LANGUAGES} from '#/lib/../locale/languages'
|
||||
import {
|
||||
type CommonNavigatorParams,
|
||||
type NativeStackScreenProps,
|
||||
} from '#/lib/routes/types'
|
||||
import {languageName, sanitizeAppLanguageSetting} from '#/locale/helpers'
|
||||
import {useModalControls} from '#/state/modals'
|
||||
import {APP_LANGUAGES, LANGUAGES} from '#/locale/languages'
|
||||
import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
|
||||
import {atoms as a, useTheme, web} from '#/alf'
|
||||
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
||||
import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
|
||||
import {atoms as a, web} from '#/alf'
|
||||
import {Admonition} from '#/components/Admonition'
|
||||
import {Button} from '#/components/Button'
|
||||
import {useDialogControl} from '#/components/Dialog'
|
||||
import {LanguageSelectDialog} from '#/components/dialogs/LanguageSelectDialog'
|
||||
import * as Toggle from '#/components/forms/Toggle'
|
||||
import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus'
|
||||
import * as Layout from '#/components/Layout'
|
||||
import * as Select from '#/components/Select'
|
||||
@@ -30,13 +32,8 @@ export function LanguageSettingsScreen({}: Props) {
|
||||
const {_} = useLingui()
|
||||
const langPrefs = useLanguagePrefs()
|
||||
const setLangPrefs = useLanguagePrefsApi()
|
||||
const t = useTheme()
|
||||
|
||||
const {openModal} = useModalControls()
|
||||
|
||||
const onPressContentLanguages = useCallback(() => {
|
||||
openModal({name: 'content-languages-settings'})
|
||||
}, [openModal])
|
||||
const contentLanguagePrefsControl = useDialogControl()
|
||||
|
||||
const onChangePrimaryLanguage = useCallback(
|
||||
(value: string) => {
|
||||
@@ -58,16 +55,21 @@ export function LanguageSettingsScreen({}: Props) {
|
||||
[langPrefs, setLangPrefs],
|
||||
)
|
||||
|
||||
const myLanguages = useMemo(() => {
|
||||
return (
|
||||
langPrefs.contentLanguages
|
||||
.map(lang => LANGUAGES.find(l => l.code2 === lang))
|
||||
.filter(Boolean)
|
||||
// @ts-ignore
|
||||
.map(l => languageName(l, langPrefs.appLanguage))
|
||||
.join(', ')
|
||||
)
|
||||
}, [langPrefs.appLanguage, langPrefs.contentLanguages])
|
||||
const [recentLanguages, setRecentLanguages] = useState<string[]>(
|
||||
langPrefs.contentLanguages,
|
||||
)
|
||||
|
||||
const possibleLanguages = useMemo(() => {
|
||||
return [
|
||||
...new Set([
|
||||
...recentLanguages,
|
||||
...langPrefs.contentLanguages,
|
||||
...langPrefs.primaryLanguage,
|
||||
]),
|
||||
]
|
||||
.map(lang => LANGUAGES.find(l => l.code2 === lang))
|
||||
.filter(x => !!x)
|
||||
}, [recentLanguages, langPrefs.contentLanguages, langPrefs.primaryLanguage])
|
||||
|
||||
return (
|
||||
<Layout.Screen testID="PreferencesLanguagesScreen">
|
||||
@@ -84,7 +86,7 @@ export function LanguageSettingsScreen({}: Props) {
|
||||
<SettingsList.Container>
|
||||
<SettingsList.Group iconInset={false}>
|
||||
<SettingsList.ItemText>
|
||||
<Trans>App Language</Trans>
|
||||
<Trans>App language</Trans>
|
||||
</SettingsList.ItemText>
|
||||
<View style={[a.gap_md, a.w_full]}>
|
||||
<Text style={[a.leading_snug]}>
|
||||
@@ -118,7 +120,7 @@ export function LanguageSettingsScreen({}: Props) {
|
||||
<SettingsList.Divider />
|
||||
<SettingsList.Group iconInset={false}>
|
||||
<SettingsList.ItemText>
|
||||
<Trans>Primary Language</Trans>
|
||||
<Trans>Primary language</Trans>
|
||||
</SettingsList.ItemText>
|
||||
<View style={[a.gap_md, a.w_full]}>
|
||||
<Text style={[a.leading_snug]}>
|
||||
@@ -152,7 +154,7 @@ export function LanguageSettingsScreen({}: Props) {
|
||||
<SettingsList.Divider />
|
||||
<SettingsList.Group iconInset={false}>
|
||||
<SettingsList.ItemText>
|
||||
<Trans>Content Languages</Trans>
|
||||
<Trans>Content languages</Trans>
|
||||
</SettingsList.ItemText>
|
||||
<View style={[a.gap_md]}>
|
||||
<Text style={[a.leading_snug]}>
|
||||
@@ -162,24 +164,67 @@ export function LanguageSettingsScreen({}: Props) {
|
||||
</Trans>
|
||||
</Text>
|
||||
|
||||
<Button
|
||||
label={_(msg`Select content languages`)}
|
||||
size="small"
|
||||
color="secondary"
|
||||
shape="rectangular"
|
||||
onPress={onPressContentLanguages}
|
||||
style={[a.justify_start, web({maxWidth: 400})]}>
|
||||
<ButtonIcon
|
||||
icon={myLanguages.length > 0 ? CheckIcon : PlusIcon}
|
||||
/>
|
||||
<ButtonText
|
||||
style={[t.atoms.text, a.text_md, a.flex_1, a.text_left]}
|
||||
numberOfLines={1}>
|
||||
{myLanguages.length > 0
|
||||
? myLanguages
|
||||
: _(msg`Select languages`)}
|
||||
</ButtonText>
|
||||
</Button>
|
||||
{langPrefs.contentLanguages.length === 0 && (
|
||||
<Admonition type="info">
|
||||
<Trans>All languages will be shown in your feeds.</Trans>
|
||||
</Admonition>
|
||||
)}
|
||||
|
||||
<View style={[a.w_full, web({maxWidth: 400})]}>
|
||||
<Toggle.Group
|
||||
label={_(msg`Select content languages`)}
|
||||
values={langPrefs.contentLanguages}
|
||||
onChange={setLangPrefs.setContentLanguages}>
|
||||
<Toggle.PanelGroup>
|
||||
{possibleLanguages.map((language, index) => {
|
||||
const name = languageName(language, langPrefs.appLanguage)
|
||||
return (
|
||||
<Toggle.Item
|
||||
key={language.code2}
|
||||
name={language.code2}
|
||||
label={name}>
|
||||
{({selected}) => (
|
||||
<Toggle.Panel
|
||||
active={selected}
|
||||
adjacent={index === 0 ? 'trailing' : 'both'}>
|
||||
<Toggle.Checkbox />
|
||||
<Toggle.PanelText>{name}</Toggle.PanelText>
|
||||
</Toggle.Panel>
|
||||
)}
|
||||
</Toggle.Item>
|
||||
)
|
||||
})}
|
||||
<Button
|
||||
label={_(msg`Add more languages...`)}
|
||||
onPress={contentLanguagePrefsControl.open}>
|
||||
<Toggle.Panel adjacent="leading">
|
||||
<Toggle.PanelIcon icon={PlusIcon} />
|
||||
<Toggle.PanelText>
|
||||
Add more languages...
|
||||
</Toggle.PanelText>
|
||||
</Toggle.Panel>
|
||||
</Button>
|
||||
</Toggle.PanelGroup>
|
||||
</Toggle.Group>
|
||||
</View>
|
||||
|
||||
<LanguageSelectDialog
|
||||
control={contentLanguagePrefsControl}
|
||||
titleText={<Trans>Select content languages</Trans>}
|
||||
subtitleText={
|
||||
<Trans>
|
||||
If none are selected, all languages will be shown in your
|
||||
feeds.
|
||||
</Trans>
|
||||
}
|
||||
currentLanguages={langPrefs.contentLanguages}
|
||||
onSelectLanguages={languages => {
|
||||
setLangPrefs.setContentLanguages(languages)
|
||||
setRecentLanguages(recent => [
|
||||
...new Set([...recent, ...languages]),
|
||||
])
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</SettingsList.Group>
|
||||
</SettingsList.Container>
|
||||
|
||||
@@ -11,9 +11,7 @@ type StateContext = persisted.Schema['languagePrefs']
|
||||
type ApiContext = {
|
||||
setPrimaryLanguage: (code2: string) => void
|
||||
setPostLanguage: (commaSeparatedLangCodes: string) => void
|
||||
setContentLanguage: (code2: string) => void
|
||||
toggleContentLanguage: (code2: string) => void
|
||||
togglePostLanguage: (code2: string) => void
|
||||
setContentLanguages: (code2s: string[]) => void
|
||||
savePostLanguageToHistory: () => void
|
||||
setAppLanguage: (code2: AppLanguage) => void
|
||||
}
|
||||
@@ -25,16 +23,14 @@ stateContext.displayName = 'LanguagePrefsStateContext'
|
||||
const apiContext = React.createContext<ApiContext>({
|
||||
setPrimaryLanguage: (_: string) => {},
|
||||
setPostLanguage: (_: string) => {},
|
||||
setContentLanguage: (_: string) => {},
|
||||
toggleContentLanguage: (_: string) => {},
|
||||
togglePostLanguage: (_: string) => {},
|
||||
setContentLanguages: (_: string[]) => {},
|
||||
savePostLanguageToHistory: () => {},
|
||||
setAppLanguage: (_: AppLanguage) => {},
|
||||
})
|
||||
apiContext.displayName = 'LanguagePrefsApiContext'
|
||||
|
||||
export function Provider({children}: React.PropsWithChildren<{}>) {
|
||||
const [state, setState] = React.useState(persisted.get('languagePrefs'))
|
||||
const [state, setState] = React.useState(() => persisted.get('languagePrefs'))
|
||||
|
||||
const setStateWrapped = React.useCallback(
|
||||
(fn: SetStateCb) => {
|
||||
@@ -59,43 +55,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
|
||||
setPostLanguage(commaSeparatedLangCodes: string) {
|
||||
setStateWrapped(s => ({...s, postLanguage: commaSeparatedLangCodes}))
|
||||
},
|
||||
setContentLanguage(code2: string) {
|
||||
setStateWrapped(s => ({...s, contentLanguages: [code2]}))
|
||||
},
|
||||
toggleContentLanguage(code2: string) {
|
||||
setStateWrapped(s => {
|
||||
const exists = s.contentLanguages.includes(code2)
|
||||
const next = exists
|
||||
? s.contentLanguages.filter(lang => lang !== code2)
|
||||
: s.contentLanguages.concat(code2)
|
||||
return {
|
||||
...s,
|
||||
contentLanguages: next,
|
||||
}
|
||||
})
|
||||
},
|
||||
togglePostLanguage(code2: string) {
|
||||
setStateWrapped(s => {
|
||||
const exists = hasPostLanguage(state.postLanguage, code2)
|
||||
let next = s.postLanguage
|
||||
|
||||
if (exists) {
|
||||
next = toPostLanguages(s.postLanguage)
|
||||
.filter(lang => lang !== code2)
|
||||
.join(',')
|
||||
} else {
|
||||
// sort alphabetically for deterministic comparison in context menu
|
||||
next = toPostLanguages(s.postLanguage)
|
||||
.concat([code2])
|
||||
.sort((a, b) => a.localeCompare(b))
|
||||
.join(',')
|
||||
}
|
||||
|
||||
return {
|
||||
...s,
|
||||
postLanguage: next,
|
||||
}
|
||||
})
|
||||
setContentLanguages(code2s: string[]) {
|
||||
setStateWrapped(s => ({...s, contentLanguages: code2s}))
|
||||
},
|
||||
/**
|
||||
* Saves whatever language codes are currently selected into a history array,
|
||||
@@ -120,7 +81,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
|
||||
setStateWrapped(s => ({...s, appLanguage: code2}))
|
||||
},
|
||||
}),
|
||||
[state, setStateWrapped],
|
||||
[setStateWrapped],
|
||||
)
|
||||
|
||||
return (
|
||||
|
||||
@@ -20,8 +20,12 @@ const setContext = React.createContext<SetContext>({} as SetContext)
|
||||
setContext.displayName = 'ColorModeSetContext'
|
||||
|
||||
export function Provider({children}: React.PropsWithChildren<{}>) {
|
||||
const [colorMode, setColorMode] = React.useState(persisted.get('colorMode'))
|
||||
const [darkTheme, setDarkTheme] = React.useState(persisted.get('darkTheme'))
|
||||
const [colorMode, setColorMode] = React.useState(() =>
|
||||
persisted.get('colorMode'),
|
||||
)
|
||||
const [darkTheme, setDarkTheme] = React.useState(() =>
|
||||
persisted.get('darkTheme'),
|
||||
)
|
||||
|
||||
const stateContextValue = React.useMemo(
|
||||
() => ({
|
||||
|
||||
@@ -11,11 +11,11 @@ import {
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import {Button, type ButtonProps} from '#/components/Button'
|
||||
import * as Dialog from '#/components/Dialog'
|
||||
import {LanguageSelectDialog} from '#/components/dialogs/LanguageSelectDialog'
|
||||
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRightIcon} from '#/components/icons/Chevron'
|
||||
import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe'
|
||||
import * as Menu from '#/components/Menu'
|
||||
import {Text} from '#/components/Typography'
|
||||
import {PostLanguageSelectDialog} from './PostLanguageSelectDialog'
|
||||
|
||||
export function PostLanguageSelect({
|
||||
currentLanguages: currentLanguagesProp,
|
||||
@@ -36,6 +36,15 @@ export function PostLanguageSelect({
|
||||
const currentLanguages =
|
||||
currentLanguagesProp ?? toPostLanguages(langPrefs.postLanguage)
|
||||
|
||||
const onSelectLanguages = (languages: string[]) => {
|
||||
let langsString = languages.join(',')
|
||||
if (!langsString) {
|
||||
langsString = langPrefs.primaryLanguage
|
||||
}
|
||||
setLangPrefs.setPostLanguage(langsString)
|
||||
onSelectLanguage?.(langsString)
|
||||
}
|
||||
|
||||
if (
|
||||
dedupedHistory.length === 1 &&
|
||||
dedupedHistory[0] === langPrefs.postLanguage
|
||||
@@ -43,9 +52,15 @@ export function PostLanguageSelect({
|
||||
return (
|
||||
<>
|
||||
<LanguageBtn onPress={languageDialogControl.open} />
|
||||
<PostLanguageSelectDialog
|
||||
<LanguageSelectDialog
|
||||
titleText={<Trans>Choose post languages</Trans>}
|
||||
subtitleText={
|
||||
<Trans>Select up to 3 languages used in this post</Trans>
|
||||
}
|
||||
control={languageDialogControl}
|
||||
currentLanguages={currentLanguages}
|
||||
onSelectLanguages={onSelectLanguages}
|
||||
maxLanguages={3}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
@@ -94,10 +109,13 @@ export function PostLanguageSelect({
|
||||
</Menu.Outer>
|
||||
</Menu.Root>
|
||||
|
||||
<PostLanguageSelectDialog
|
||||
<LanguageSelectDialog
|
||||
titleText={<Trans>Choose post languages</Trans>}
|
||||
subtitleText={<Trans>Select up to 3 languages used in this post</Trans>}
|
||||
control={languageDialogControl}
|
||||
currentLanguages={currentLanguages}
|
||||
onSelectLanguage={onSelectLanguage}
|
||||
onSelectLanguages={onSelectLanguages}
|
||||
maxLanguages={3}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -7,7 +7,6 @@ import {usePalette} from '#/lib/hooks/usePalette'
|
||||
import {useModalControls, useModals} from '#/state/modals'
|
||||
import {FullWindowOverlay} from '#/components/FullWindowOverlay'
|
||||
import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
|
||||
import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
|
||||
import * as UserAddRemoveListsModal from './UserAddRemoveLists'
|
||||
|
||||
const DEFAULT_SNAPPOINTS = ['90%']
|
||||
@@ -44,9 +43,6 @@ export function ModalsContainer() {
|
||||
if (activeModal?.name === 'user-add-remove-lists') {
|
||||
snapPoints = UserAddRemoveListsModal.snapPoints
|
||||
element = <UserAddRemoveListsModal.Component {...activeModal} />
|
||||
} else if (activeModal?.name === 'content-languages-settings') {
|
||||
snapPoints = ContentLanguagesSettingsModal.snapPoints
|
||||
element = <ContentLanguagesSettingsModal.Component />
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
|
||||
@@ -6,7 +6,6 @@ import {usePalette} from '#/lib/hooks/usePalette'
|
||||
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
|
||||
import {type Modal as ModalIface} from '#/state/modals'
|
||||
import {useModalControls, useModals} from '#/state/modals'
|
||||
import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
|
||||
import * as UserAddRemoveLists from './UserAddRemoveLists'
|
||||
|
||||
export function ModalsContainer() {
|
||||
@@ -47,8 +46,6 @@ function Modal({modal}: {modal: ModalIface}) {
|
||||
let element
|
||||
if (modal.name === 'user-add-remove-lists') {
|
||||
element = <UserAddRemoveLists.Component {...modal} />
|
||||
} else if (modal.name === 'content-languages-settings') {
|
||||
element = <ContentLanguagesSettingsModal.Component />
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
import {Pressable, StyleSheet, Text, View} from 'react-native'
|
||||
import {LinearGradient} from 'expo-linear-gradient'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {usePalette} from '#/lib/hooks/usePalette'
|
||||
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
|
||||
import {colors, gradients, s} from '#/lib/styles'
|
||||
|
||||
export const ConfirmLanguagesButton = ({
|
||||
onPress,
|
||||
extraText,
|
||||
}: {
|
||||
onPress: () => void
|
||||
extraText?: string
|
||||
}) => {
|
||||
const pal = usePalette('default')
|
||||
const {_} = useLingui()
|
||||
const {isMobile} = useWebMediaQueries()
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
styles.btnContainer,
|
||||
pal.borderDark,
|
||||
isMobile && {
|
||||
paddingBottom: 40,
|
||||
borderTopWidth: 1,
|
||||
},
|
||||
]}>
|
||||
<Pressable
|
||||
testID="confirmContentLanguagesBtn"
|
||||
onPress={onPress}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={_(msg`Confirm content language settings`)}
|
||||
accessibilityHint="">
|
||||
<LinearGradient
|
||||
colors={[gradients.blueLight.start, gradients.blueLight.end]}
|
||||
start={{x: 0, y: 0}}
|
||||
end={{x: 1, y: 1}}
|
||||
style={[styles.btn]}>
|
||||
<Text style={[s.white, s.bold, s.f18]}>
|
||||
<Trans>Done{extraText}</Trans>
|
||||
</Text>
|
||||
</LinearGradient>
|
||||
</Pressable>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
btnContainer: {
|
||||
paddingTop: 10,
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
btn: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
borderRadius: 32,
|
||||
padding: 14,
|
||||
backgroundColor: colors.gray1,
|
||||
},
|
||||
})
|
||||
@@ -1,128 +0,0 @@
|
||||
import React from 'react'
|
||||
import {StyleSheet, View} from 'react-native'
|
||||
import {Trans} from '@lingui/macro'
|
||||
|
||||
import {usePalette} from '#/lib/hooks/usePalette'
|
||||
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
|
||||
import {deviceLanguageCodes} from '#/locale/deviceLocales'
|
||||
import {languageName} from '#/locale/helpers'
|
||||
import {useModalControls} from '#/state/modals'
|
||||
import {
|
||||
useLanguagePrefs,
|
||||
useLanguagePrefsApi,
|
||||
} from '#/state/preferences/languages'
|
||||
import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages'
|
||||
import {Text} from '../../util/text/Text'
|
||||
import {ScrollView} from '../util'
|
||||
import {ConfirmLanguagesButton} from './ConfirmLanguagesButton'
|
||||
import {LanguageToggle} from './LanguageToggle'
|
||||
|
||||
export const snapPoints = ['100%']
|
||||
|
||||
export function Component({}: {}) {
|
||||
const {closeModal} = useModalControls()
|
||||
const langPrefs = useLanguagePrefs()
|
||||
const setLangPrefs = useLanguagePrefsApi()
|
||||
const pal = usePalette('default')
|
||||
const {isMobile} = useWebMediaQueries()
|
||||
const onPressDone = React.useCallback(() => {
|
||||
closeModal()
|
||||
}, [closeModal])
|
||||
|
||||
const languages = React.useMemo(() => {
|
||||
const langs = LANGUAGES.filter(
|
||||
lang =>
|
||||
!!lang.code2.trim() &&
|
||||
LANGUAGES_MAP_CODE2[lang.code2].code3 === lang.code3,
|
||||
)
|
||||
// sort so that device & selected languages are on top, then alphabetically
|
||||
langs.sort((a, b) => {
|
||||
const hasA =
|
||||
langPrefs.contentLanguages.includes(a.code2) ||
|
||||
deviceLanguageCodes.includes(a.code2)
|
||||
const hasB =
|
||||
langPrefs.contentLanguages.includes(b.code2) ||
|
||||
deviceLanguageCodes.includes(b.code2)
|
||||
if (hasA === hasB) return a.name.localeCompare(b.name)
|
||||
if (hasA) return -1
|
||||
return 1
|
||||
})
|
||||
return langs
|
||||
}, [langPrefs])
|
||||
|
||||
const onPress = React.useCallback(
|
||||
(code2: string) => {
|
||||
setLangPrefs.toggleContentLanguage(code2)
|
||||
},
|
||||
[setLangPrefs],
|
||||
)
|
||||
|
||||
return (
|
||||
<View
|
||||
testID="contentLanguagesModal"
|
||||
style={[
|
||||
pal.view,
|
||||
styles.container,
|
||||
// @ts-ignore vh is web only
|
||||
isMobile
|
||||
? {
|
||||
paddingTop: 20,
|
||||
}
|
||||
: {
|
||||
maxHeight: '90vh',
|
||||
},
|
||||
]}>
|
||||
<Text style={[pal.text, styles.title]}>
|
||||
<Trans>Content Languages</Trans>
|
||||
</Text>
|
||||
<Text style={[pal.text, styles.description]}>
|
||||
<Trans>
|
||||
Which languages would you like to see in your algorithmic feeds?
|
||||
</Trans>
|
||||
</Text>
|
||||
<Text style={[pal.textLight, styles.description]}>
|
||||
<Trans>Leave them all unselected to see any language.</Trans>
|
||||
</Text>
|
||||
<ScrollView style={styles.scrollContainer}>
|
||||
{languages.map(lang => (
|
||||
<LanguageToggle
|
||||
key={lang.code2}
|
||||
code2={lang.code2}
|
||||
langType="contentLanguages"
|
||||
name={languageName(lang, langPrefs.appLanguage)}
|
||||
onPress={() => {
|
||||
onPress(lang.code2)
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<View
|
||||
style={{
|
||||
height: isMobile ? 60 : 0,
|
||||
}}
|
||||
/>
|
||||
</ScrollView>
|
||||
<ConfirmLanguagesButton onPress={onPressDone} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
title: {
|
||||
textAlign: 'center',
|
||||
fontWeight: '600',
|
||||
fontSize: 24,
|
||||
marginBottom: 12,
|
||||
},
|
||||
description: {
|
||||
textAlign: 'center',
|
||||
paddingHorizontal: 16,
|
||||
marginBottom: 10,
|
||||
},
|
||||
scrollContainer: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
})
|
||||
@@ -1,53 +0,0 @@
|
||||
import {StyleSheet} from 'react-native'
|
||||
|
||||
import {usePalette} from '#/lib/hooks/usePalette'
|
||||
import {toPostLanguages, useLanguagePrefs} from '#/state/preferences/languages'
|
||||
import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
|
||||
|
||||
export function LanguageToggle({
|
||||
code2,
|
||||
name,
|
||||
onPress,
|
||||
langType,
|
||||
}: {
|
||||
code2: string
|
||||
name: string
|
||||
onPress: () => void
|
||||
langType: 'contentLanguages' | 'postLanguages'
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
const langPrefs = useLanguagePrefs()
|
||||
|
||||
const values =
|
||||
langType === 'contentLanguages'
|
||||
? langPrefs.contentLanguages
|
||||
: toPostLanguages(langPrefs.postLanguage)
|
||||
const isSelected = values.includes(code2)
|
||||
|
||||
// enforce a max of 3 selections for post languages
|
||||
let isDisabled = false
|
||||
if (langType === 'postLanguages' && values.length >= 3 && !isSelected) {
|
||||
isDisabled = true
|
||||
}
|
||||
|
||||
return (
|
||||
<ToggleButton
|
||||
label={name}
|
||||
isSelected={isSelected}
|
||||
onPress={isDisabled ? undefined : onPress}
|
||||
style={[pal.border, styles.languageToggle, isDisabled && styles.dimmed]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
languageToggle: {
|
||||
borderTopWidth: 1,
|
||||
borderRadius: 0,
|
||||
paddingHorizontal: 6,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
dimmed: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
})
|
||||
@@ -1,193 +0,0 @@
|
||||
import {
|
||||
type StyleProp,
|
||||
StyleSheet,
|
||||
type TextStyle,
|
||||
View,
|
||||
type ViewStyle,
|
||||
} from 'react-native'
|
||||
|
||||
import {choose} from '#/lib/functions'
|
||||
import {colors} from '#/lib/styles'
|
||||
import {useTheme} from '#/lib/ThemeContext'
|
||||
import {type TypographyVariant} from '#/lib/ThemeContext'
|
||||
import {Text} from '../text/Text'
|
||||
import {Button, type ButtonType} from './Button'
|
||||
|
||||
/**
|
||||
* @deprecated use Toggle from `#/components/form/Toggle.tsx` instead
|
||||
*/
|
||||
export function ToggleButton({
|
||||
testID,
|
||||
type = 'default-light',
|
||||
label,
|
||||
isSelected,
|
||||
style,
|
||||
labelType,
|
||||
onPress,
|
||||
}: {
|
||||
testID?: string
|
||||
type?: ButtonType
|
||||
label: string
|
||||
isSelected: boolean
|
||||
style?: StyleProp<ViewStyle>
|
||||
labelType?: TypographyVariant
|
||||
onPress?: () => void
|
||||
}) {
|
||||
const theme = useTheme()
|
||||
const circleStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, {
|
||||
primary: {
|
||||
borderColor: theme.palette.primary.text,
|
||||
},
|
||||
secondary: {
|
||||
borderColor: theme.palette.secondary.text,
|
||||
},
|
||||
inverted: {
|
||||
borderColor: theme.palette.inverted.text,
|
||||
},
|
||||
'primary-outline': {
|
||||
borderColor: theme.palette.primary.border,
|
||||
},
|
||||
'secondary-outline': {
|
||||
borderColor: theme.palette.secondary.border,
|
||||
},
|
||||
'primary-light': {
|
||||
borderColor: theme.palette.primary.border,
|
||||
},
|
||||
'secondary-light': {
|
||||
borderColor: theme.palette.secondary.border,
|
||||
},
|
||||
default: {
|
||||
borderColor: theme.palette.default.border,
|
||||
},
|
||||
'default-light': {
|
||||
borderColor: theme.palette.default.border,
|
||||
},
|
||||
})
|
||||
const circleFillStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(
|
||||
type,
|
||||
{
|
||||
primary: {
|
||||
backgroundColor: theme.palette.primary.text,
|
||||
opacity: isSelected ? 1 : 0.33,
|
||||
},
|
||||
secondary: {
|
||||
backgroundColor: theme.palette.secondary.text,
|
||||
opacity: isSelected ? 1 : 0.33,
|
||||
},
|
||||
inverted: {
|
||||
backgroundColor: theme.palette.inverted.text,
|
||||
opacity: isSelected ? 1 : 0.33,
|
||||
},
|
||||
'primary-outline': {
|
||||
backgroundColor: theme.palette.primary.background,
|
||||
opacity: isSelected ? 1 : 0.5,
|
||||
},
|
||||
'secondary-outline': {
|
||||
backgroundColor: theme.palette.secondary.background,
|
||||
opacity: isSelected ? 1 : 0.5,
|
||||
},
|
||||
'primary-light': {
|
||||
backgroundColor: theme.palette.primary.background,
|
||||
opacity: isSelected ? 1 : 0.5,
|
||||
},
|
||||
'secondary-light': {
|
||||
backgroundColor: theme.palette.secondary.background,
|
||||
opacity: isSelected ? 1 : 0.5,
|
||||
},
|
||||
default: {
|
||||
backgroundColor: isSelected
|
||||
? theme.palette.primary.background
|
||||
: colors.gray3,
|
||||
},
|
||||
'default-light': {
|
||||
backgroundColor: isSelected
|
||||
? theme.palette.primary.background
|
||||
: colors.gray3,
|
||||
},
|
||||
},
|
||||
)
|
||||
const labelStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, {
|
||||
primary: {
|
||||
color: theme.palette.primary.text,
|
||||
fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
|
||||
},
|
||||
secondary: {
|
||||
color: theme.palette.secondary.text,
|
||||
fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
|
||||
},
|
||||
inverted: {
|
||||
color: theme.palette.inverted.text,
|
||||
fontWeight: theme.palette.inverted.isLowContrast ? '600' : undefined,
|
||||
},
|
||||
'primary-outline': {
|
||||
color: theme.palette.primary.textInverted,
|
||||
fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
|
||||
},
|
||||
'secondary-outline': {
|
||||
color: theme.palette.secondary.textInverted,
|
||||
fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
|
||||
},
|
||||
'primary-light': {
|
||||
color: theme.palette.primary.textInverted,
|
||||
fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
|
||||
},
|
||||
'secondary-light': {
|
||||
color: theme.palette.secondary.textInverted,
|
||||
fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
|
||||
},
|
||||
default: {
|
||||
color: theme.palette.default.text,
|
||||
fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
|
||||
},
|
||||
'default-light': {
|
||||
color: theme.palette.default.text,
|
||||
fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
|
||||
},
|
||||
})
|
||||
return (
|
||||
<Button testID={testID} type={type} onPress={onPress} style={style}>
|
||||
<View style={styles.outer}>
|
||||
<View style={[circleStyle, styles.circle]}>
|
||||
<View
|
||||
style={[
|
||||
circleFillStyle,
|
||||
styles.circleFill,
|
||||
isSelected ? styles.circleFillSelected : undefined,
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
{label === '' ? null : (
|
||||
<Text type={labelType || 'button'} style={[labelStyle, styles.label]}>
|
||||
{label}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
outer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
},
|
||||
circle: {
|
||||
width: 42,
|
||||
height: 26,
|
||||
borderRadius: 15,
|
||||
padding: 3,
|
||||
borderWidth: 2,
|
||||
},
|
||||
circleFill: {
|
||||
width: 16,
|
||||
height: 16,
|
||||
borderRadius: 10,
|
||||
},
|
||||
circleFillSelected: {
|
||||
marginLeft: 16,
|
||||
},
|
||||
label: {
|
||||
flex: 1,
|
||||
},
|
||||
})
|
||||
@@ -14,7 +14,6 @@ import {EmptyState} from '#/view/com/util/EmptyState'
|
||||
import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
|
||||
import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
|
||||
import {Button} from '#/view/com/util/forms/Button'
|
||||
import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
|
||||
import * as LoadingPlaceholder from '#/view/com/util/LoadingPlaceholder'
|
||||
import {Text} from '#/view/com/util/text/Text'
|
||||
import * as Toast from '#/view/com/util/Toast'
|
||||
@@ -47,10 +46,7 @@ export const DebugScreen = ({}: NativeStackScreenProps<
|
||||
)
|
||||
}
|
||||
|
||||
function DebugInner({
|
||||
colorScheme,
|
||||
onToggleColorScheme,
|
||||
}: {
|
||||
function DebugInner({}: {
|
||||
colorScheme: 'light' | 'dark'
|
||||
onToggleColorScheme: () => void
|
||||
}) {
|
||||
@@ -61,14 +57,6 @@ function DebugInner({
|
||||
const renderItem = (item: any) => {
|
||||
return (
|
||||
<View key={`view-${item.currentView}`}>
|
||||
<View style={[s.pt10, s.pl10, s.pr10]}>
|
||||
<ToggleButton
|
||||
type="default-light"
|
||||
onPress={onToggleColorScheme}
|
||||
isSelected={colorScheme === 'dark'}
|
||||
label={_(msg`Dark mode`)}
|
||||
/>
|
||||
</View>
|
||||
{item.currentView === 3 ? (
|
||||
<NotifsView />
|
||||
) : item.currentView === 2 ? (
|
||||
@@ -134,8 +122,6 @@ function ControlsView() {
|
||||
<ScrollView style={[s.pl10, s.pr10]}>
|
||||
<Heading label="Buttons" />
|
||||
<ButtonsView />
|
||||
<Heading label="Toggle Buttons" />
|
||||
<ToggleButtonsView />
|
||||
<View style={s.footerSpacer} />
|
||||
</ScrollView>
|
||||
)
|
||||
@@ -401,70 +387,3 @@ function ButtonsView() {
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
function ToggleButtonsView() {
|
||||
const defaultPal = usePalette('default')
|
||||
const buttonStyles = s.mb5
|
||||
const [isSelected, setIsSelected] = React.useState(false)
|
||||
const onToggle = () => setIsSelected(!isSelected)
|
||||
return (
|
||||
<View style={[defaultPal.view]}>
|
||||
<ToggleButton
|
||||
type="primary"
|
||||
label="Primary solid"
|
||||
style={buttonStyles}
|
||||
isSelected={isSelected}
|
||||
onPress={onToggle}
|
||||
/>
|
||||
<ToggleButton
|
||||
type="secondary"
|
||||
label="Secondary solid"
|
||||
style={buttonStyles}
|
||||
isSelected={isSelected}
|
||||
onPress={onToggle}
|
||||
/>
|
||||
<ToggleButton
|
||||
type="inverted"
|
||||
label="Inverted solid"
|
||||
style={buttonStyles}
|
||||
isSelected={isSelected}
|
||||
onPress={onToggle}
|
||||
/>
|
||||
<ToggleButton
|
||||
type="primary-outline"
|
||||
label="Primary outline"
|
||||
style={buttonStyles}
|
||||
isSelected={isSelected}
|
||||
onPress={onToggle}
|
||||
/>
|
||||
<ToggleButton
|
||||
type="secondary-outline"
|
||||
label="Secondary outline"
|
||||
style={buttonStyles}
|
||||
isSelected={isSelected}
|
||||
onPress={onToggle}
|
||||
/>
|
||||
<ToggleButton
|
||||
type="primary-light"
|
||||
label="Primary light"
|
||||
style={buttonStyles}
|
||||
isSelected={isSelected}
|
||||
onPress={onToggle}
|
||||
/>
|
||||
<ToggleButton
|
||||
type="secondary-light"
|
||||
label="Secondary light"
|
||||
style={buttonStyles}
|
||||
isSelected={isSelected}
|
||||
onPress={onToggle}
|
||||
/>
|
||||
<ToggleButton
|
||||
type="default-light"
|
||||
label="Default light"
|
||||
style={buttonStyles}
|
||||
isSelected={isSelected}
|
||||
onPress={onToggle}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user