diff --git a/src/view/com/composer/select-language/SelectLangBtn.tsx b/src/view/com/composer/select-language/SelectLangBtn.tsx index 78562222..7a086789 100644 --- a/src/view/com/composer/select-language/SelectLangBtn.tsx +++ b/src/view/com/composer/select-language/SelectLangBtn.tsx @@ -1,27 +1,28 @@ import React, {useCallback, useMemo} from 'react' -import {StyleSheet, Keyboard} from 'react-native' +import {Keyboard, StyleSheet} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {Text} from 'view/com/util/text/Text' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {useModalControls} from '#/state/modals' +import { + hasPostLanguage, + toPostLanguages, + useLanguagePrefs, + useLanguagePrefsApi, +} from '#/state/preferences/languages' +import {usePalette} from 'lib/hooks/usePalette' +import {isNative} from 'platform/detection' import { DropdownButton, DropdownItem, DropdownItemButton, } from 'view/com/util/forms/DropdownButton' -import {usePalette} from 'lib/hooks/usePalette' -import {isNative} from 'platform/detection' +import {Text} from 'view/com/util/text/Text' import {codeToLanguageName} from '../../../../locale/helpers' -import {useModalControls} from '#/state/modals' -import { - useLanguagePrefs, - useLanguagePrefsApi, - toPostLanguages, - hasPostLanguage, -} from '#/state/preferences/languages' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' export function SelectLangBtn() { const pal = usePalette('default') diff --git a/src/view/com/util/forms/DropdownButton.tsx b/src/view/com/util/forms/DropdownButton.tsx index 2285b061..14b97161 100644 --- a/src/view/com/util/forms/DropdownButton.tsx +++ b/src/view/com/util/forms/DropdownButton.tsx @@ -2,6 +2,7 @@ import React, {PropsWithChildren, useMemo, useRef} from 'react' import { Dimensions, GestureResponderEvent, + Platform, StyleProp, StyleSheet, TouchableOpacity, @@ -10,18 +11,20 @@ import { View, ViewStyle, } from 'react-native' -import {IconProp} from '@fortawesome/fontawesome-svg-core' import RootSiblings from 'react-native-root-siblings' +import {FullWindowOverlay} from 'react-native-screens' +import {IconProp} from '@fortawesome/fontawesome-svg-core' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {HITSLOP_10} from 'lib/constants' +import {usePalette} from 'lib/hooks/usePalette' +import {colors} from 'lib/styles' +import {useTheme} from 'lib/ThemeContext' +import {isWeb} from 'platform/detection' import {Text} from '../text/Text' import {Button, ButtonType} from './Button' -import {colors} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {useTheme} from 'lib/ThemeContext' -import {HITSLOP_10} from 'lib/constants' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' -import {isWeb} from 'platform/detection' const ESTIMATED_BTN_HEIGHT = 50 const ESTIMATED_SEP_HEIGHT = 16 @@ -239,7 +242,7 @@ const DropdownItems = ({ // - (On mobile) be buttons by default, accept `label` and `nativeID` // props, and always have an explicit label return ( - <> + {/* This TouchableWithoutFeedback renders the background so if the user clicks outside, the dropdown closes */} - + ) } +// on iOS, due to formSheet presentation style, we need to render the overlay +// as a full screen overlay +const Wrapper = Platform.select({ + ios: FullWindowOverlay, + default: ({children}) => <>{children}, +}) + function isSep(item: DropdownItem): item is DropdownItemSeparator { return 'sep' in item && item.sep } diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx index 00233f66..c9c604f1 100644 --- a/src/view/shell/Composer.web.tsx +++ b/src/view/shell/Composer.web.tsx @@ -1,15 +1,16 @@ import React from 'react' import {StyleSheet, View} from 'react-native' import Animated, {FadeIn, FadeInDown, FadeOut} from 'react-native-reanimated' -import {ComposePost} from '../com/composer/Composer' -import {useComposerState} from 'state/shell/composer' + +import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' +import {useComposerState} from 'state/shell/composer' import { EmojiPicker, EmojiPickerState, } from 'view/com/composer/text-input/web/EmojiPicker.web' +import {ComposePost} from '../com/composer/Composer' const BOTTOM_BAR_HEIGHT = 61