From 39d460db510d6545794f6acba8226fb52b506b40 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 27 Aug 2025 19:00:36 +0300 Subject: Language select final tweaks (#8914) * [APP-1303] Redesign/refactor post language select (#8884) * Nightly source-language update * Nightly source-language update * [APP-1303] Redesign/refactor post language select * update: stylesheets.create to use the latest structure * update styles to modern structure * update: dialog breakpoints on web and delete depricated language modals * remove unused post languages settings dialog * restructure Post languages dialog * place the Dialog.Close inside the Dialog.ScrollableInner * add: language search * update search and language variables for clarity * fix: memoize language state lists * chore: add comments * update proper colors to the background * add back older error boundary * add: tweaks to the mobile and web responsiveness * add tweaks to center the container * update labels * update button and border * added translation updates * Update: text input to reuse search input * remove unused file * update: web breakpoints * run eslint and prettier --------- Co-authored-by: Elijah Seed-Arita Co-authored-by: Anastasiya Uraleva Co-authored-by: Anastasiya Uraleva * rm old file * sort out styles, add FlatListFooter component * rm cancel button in favor of search input X * get dialog height working on iOS * delete `DropdownButton` * hide scroll indicators on android * ios scroll indicator insets * get footer sorta working on android * change button color on press * rm empty file --------- Co-authored-by: Anastasiya Uraleva Co-authored-by: Elijah Seed-Arita Co-authored-by: Anastasiya Uraleva Co-authored-by: Anastasiya Uraleva --- .../com/composer/select-language/SelectLangBtn.tsx | 133 --------------------- 1 file changed, 133 deletions(-) delete mode 100644 src/view/com/composer/select-language/SelectLangBtn.tsx (limited to 'src/view/com/composer/select-language/SelectLangBtn.tsx') diff --git a/src/view/com/composer/select-language/SelectLangBtn.tsx b/src/view/com/composer/select-language/SelectLangBtn.tsx deleted file mode 100644 index f487b1244..000000000 --- a/src/view/com/composer/select-language/SelectLangBtn.tsx +++ /dev/null @@ -1,133 +0,0 @@ -import {useCallback, useMemo} from 'react' -import {Keyboard, StyleSheet} from 'react-native' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' - -import {LANG_DROPDOWN_HITSLOP} from '#/lib/constants' -import {usePalette} from '#/lib/hooks/usePalette' -import {isNative} from '#/platform/detection' -import {useModalControls} from '#/state/modals' -import { - hasPostLanguage, - toPostLanguages, - useLanguagePrefs, - useLanguagePrefsApi, -} from '#/state/preferences/languages' -import { - DropdownButton, - DropdownItem, - DropdownItemButton, -} from '#/view/com/util/forms/DropdownButton' -import {Text} from '#/view/com/util/text/Text' -import {codeToLanguageName} from '../../../../locale/helpers' - -export function SelectLangBtn() { - const pal = usePalette('default') - const {_} = useLingui() - const {openModal} = useModalControls() - const langPrefs = useLanguagePrefs() - const setLangPrefs = useLanguagePrefsApi() - - const onPressMore = useCallback(async () => { - if (isNative) { - if (Keyboard.isVisible()) { - Keyboard.dismiss() - } - } - openModal({name: 'post-languages-settings'}) - }, [openModal]) - - const postLanguagesPref = toPostLanguages(langPrefs.postLanguage) - const items: DropdownItem[] = useMemo(() => { - let arr: DropdownItemButton[] = [] - - function add(commaSeparatedLangCodes: string) { - const langCodes = commaSeparatedLangCodes.split(',') - const langName = langCodes - .map(code => codeToLanguageName(code, langPrefs.appLanguage)) - .join(' + ') - - /* - * Filter out any duplicates - */ - if (arr.find((item: DropdownItemButton) => item.label === langName)) { - return - } - - arr.push({ - icon: - langCodes.every(code => - hasPostLanguage(langPrefs.postLanguage, code), - ) && langCodes.length === postLanguagesPref.length - ? ['fas', 'circle-dot'] - : ['far', 'circle'], - label: langName, - onPress() { - setLangPrefs.setPostLanguage(commaSeparatedLangCodes) - }, - }) - } - - if (postLanguagesPref.length) { - /* - * Re-join here after sanitization bc postLanguageHistory is an array of - * comma-separated strings too - */ - add(langPrefs.postLanguage) - } - - // comma-separted strings of lang codes that have been used in the past - for (const lang of langPrefs.postLanguageHistory) { - add(lang) - } - - return [ - {heading: true, label: _(msg`Post language`)}, - ...arr.slice(0, 6), - {sep: true}, - { - label: _(msg`Other...`), - onPress: onPressMore, - }, - ] - }, [onPressMore, langPrefs, setLangPrefs, postLanguagesPref, _]) - - return ( - - {postLanguagesPref.length > 0 ? ( - - {postLanguagesPref - .map(lang => codeToLanguageName(lang, langPrefs.appLanguage)) - .join(', ')} - - ) : ( - - )} - - ) -} - -const styles = StyleSheet.create({ - button: { - marginHorizontal: 15, - }, - label: { - maxWidth: 100, - }, -}) -- cgit 1.4.1