08804f265e
* add SelectLangBtn * memoized objects that are created to reduce re-creation on re-render * add langs when uploading post * only send the top 3 languages otherwise backend will throw error * mv ContentLanguagesSettings to folder * add post languages settings modal and state * fix typos * modify feed manip to also check langs label on post * Fix tests * Remove log * Update feed-manip.ts * Fix syntax errors * UI tuneups * Show the currently selected languages in the composer * fix linting * Use a bcp-47 matching function * Fix a duplicate language issue * Fix web * Dont include lang in prompt * Make select language btn an observer * Keep device languages on top of language selection UIs * Fix android build settings * Enforce a max of 3 languages in posts * Fix tests * Fix types --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com>
56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import React, {useCallback} from 'react'
|
|
import {TouchableOpacity, StyleSheet, Keyboard} from 'react-native'
|
|
import {observer} from 'mobx-react-lite'
|
|
import {
|
|
FontAwesomeIcon,
|
|
FontAwesomeIconStyle,
|
|
} from '@fortawesome/react-native-fontawesome'
|
|
import {Text} from 'view/com/util/text/Text'
|
|
import {usePalette} from 'lib/hooks/usePalette'
|
|
import {useStores} from 'state/index'
|
|
import {isNative} from 'platform/detection'
|
|
|
|
const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
|
|
|
|
export const SelectLangBtn = observer(function SelectLangBtn() {
|
|
const pal = usePalette('default')
|
|
const store = useStores()
|
|
|
|
const onPress = useCallback(async () => {
|
|
if (isNative) {
|
|
if (Keyboard.isVisible()) {
|
|
Keyboard.dismiss()
|
|
}
|
|
}
|
|
store.shell.openModal({name: 'post-languages-settings'})
|
|
}, [store])
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
testID="selectLangBtn"
|
|
onPress={onPress}
|
|
style={styles.button}
|
|
hitSlop={HITSLOP}
|
|
accessibilityRole="button"
|
|
accessibilityLabel="Language selection"
|
|
accessibilityHint="Opens screen or modal to select language of post">
|
|
{store.preferences.postLanguages.length > 0 ? (
|
|
<Text type="lg-bold" style={pal.link}>
|
|
{store.preferences.postLanguages.join(', ')}
|
|
</Text>
|
|
) : (
|
|
<FontAwesomeIcon
|
|
icon="language"
|
|
style={pal.link as FontAwesomeIconStyle}
|
|
size={26}
|
|
/>
|
|
)}
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
paddingHorizontal: 15,
|
|
},
|
|
})
|