zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

put dropdown in fullscreenoverlay on iOS (#4284)

Browse source
This commit is contained in:
Samuel Newman 2024-05-30 16:06:59 +03:00 • committed by GitHub
parent 16925baf8d
commit 8feb2ab449
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 38 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/view/com/composer/select-language/SelectLangBtn.tsx
View file

@ -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')

30
src/view/com/util/forms/DropdownButton.tsx
View file

@ -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 (
<>
<Wrapper>
{/* This TouchableWithoutFeedback renders the background so if the user clicks outside, the dropdown closes */}
<TouchableWithoutFeedback
onPress={onOuterPress}
@ -304,10 +307,17 @@ const DropdownItems = ({
return null
})}
</View>
</>
</Wrapper>
)
}
// 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
}