forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
put dropdown in fullscreenoverlay on iOS (#4284)
authored by
Samuel Newman
and committed by
GitHub
8feb2ab4
16925baf
+37
-25
+14
-13
src/view/com/composer/select-language/SelectLangBtn.tsx
+14
-13
src/view/com/composer/select-language/SelectLangBtn.tsx
···
1
1
import React, {useCallback, useMemo} from 'react'
2
-
import {StyleSheet, Keyboard} from 'react-native'
2
+
import {Keyboard, StyleSheet} from 'react-native'
3
3
import {
4
4
FontAwesomeIcon,
5
5
FontAwesomeIconStyle,
6
6
} from '@fortawesome/react-native-fontawesome'
7
-
import {Text} from 'view/com/util/text/Text'
7
+
import {msg} from '@lingui/macro'
8
+
import {useLingui} from '@lingui/react'
9
+
10
+
import {useModalControls} from '#/state/modals'
11
+
import {
12
+
hasPostLanguage,
13
+
toPostLanguages,
14
+
useLanguagePrefs,
15
+
useLanguagePrefsApi,
16
+
} from '#/state/preferences/languages'
17
+
import {usePalette} from 'lib/hooks/usePalette'
18
+
import {isNative} from 'platform/detection'
8
19
import {
9
20
DropdownButton,
10
21
DropdownItem,
11
22
DropdownItemButton,
12
23
} from 'view/com/util/forms/DropdownButton'
13
-
import {usePalette} from 'lib/hooks/usePalette'
14
-
import {isNative} from 'platform/detection'
24
+
import {Text} from 'view/com/util/text/Text'
15
25
import {codeToLanguageName} from '../../../../locale/helpers'
16
-
import {useModalControls} from '#/state/modals'
17
-
import {
18
-
useLanguagePrefs,
19
-
useLanguagePrefsApi,
20
-
toPostLanguages,
21
-
hasPostLanguage,
22
-
} from '#/state/preferences/languages'
23
-
import {msg} from '@lingui/macro'
24
-
import {useLingui} from '@lingui/react'
25
26
26
27
export function SelectLangBtn() {
27
28
const pal = usePalette('default')
+19
-9
src/view/com/util/forms/DropdownButton.tsx
+19
-9
src/view/com/util/forms/DropdownButton.tsx
···
2
2
import {
3
3
Dimensions,
4
4
GestureResponderEvent,
5
+
Platform,
5
6
StyleProp,
6
7
StyleSheet,
7
8
TouchableOpacity,
···
10
11
View,
11
12
ViewStyle,
12
13
} from 'react-native'
13
-
import {IconProp} from '@fortawesome/fontawesome-svg-core'
14
14
import RootSiblings from 'react-native-root-siblings'
15
+
import {FullWindowOverlay} from 'react-native-screens'
16
+
import {IconProp} from '@fortawesome/fontawesome-svg-core'
15
17
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
16
-
import {Text} from '../text/Text'
17
-
import {Button, ButtonType} from './Button'
18
+
import {msg} from '@lingui/macro'
19
+
import {useLingui} from '@lingui/react'
20
+
21
+
import {HITSLOP_10} from 'lib/constants'
22
+
import {usePalette} from 'lib/hooks/usePalette'
18
23
import {colors} from 'lib/styles'
19
-
import {usePalette} from 'lib/hooks/usePalette'
20
24
import {useTheme} from 'lib/ThemeContext'
21
-
import {HITSLOP_10} from 'lib/constants'
22
-
import {useLingui} from '@lingui/react'
23
-
import {msg} from '@lingui/macro'
24
25
import {isWeb} from 'platform/detection'
26
+
import {Text} from '../text/Text'
27
+
import {Button, ButtonType} from './Button'
25
28
26
29
const ESTIMATED_BTN_HEIGHT = 50
27
30
const ESTIMATED_SEP_HEIGHT = 16
···
239
242
// - (On mobile) be buttons by default, accept `label` and `nativeID`
240
243
// props, and always have an explicit label
241
244
return (
242
-
<>
245
+
<Wrapper>
243
246
{/* This TouchableWithoutFeedback renders the background so if the user clicks outside, the dropdown closes */}
244
247
<TouchableWithoutFeedback
245
248
onPress={onOuterPress}
···
304
307
return null
305
308
})}
306
309
</View>
307
-
</>
310
+
</Wrapper>
308
311
)
309
312
}
313
+
314
+
// on iOS, due to formSheet presentation style, we need to render the overlay
315
+
// as a full screen overlay
316
+
const Wrapper = Platform.select({
317
+
ios: FullWindowOverlay,
318
+
default: ({children}) => <>{children}</>,
319
+
})
310
320
311
321
function isSep(item: DropdownItem): item is DropdownItemSeparator {
312
322
return 'sep' in item && item.sep
+4
-3
src/view/shell/Composer.web.tsx
+4
-3
src/view/shell/Composer.web.tsx
···
1
1
import React from 'react'
2
2
import {StyleSheet, View} from 'react-native'
3
3
import Animated, {FadeIn, FadeInDown, FadeOut} from 'react-native-reanimated'
4
-
import {ComposePost} from '../com/composer/Composer'
5
-
import {useComposerState} from 'state/shell/composer'
4
+
5
+
import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
6
6
import {usePalette} from 'lib/hooks/usePalette'
7
7
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
8
-
import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
8
+
import {useComposerState} from 'state/shell/composer'
9
9
import {
10
10
EmojiPicker,
11
11
EmojiPickerState,
12
12
} from 'view/com/composer/text-input/web/EmojiPicker.web'
13
+
import {ComposePost} from '../com/composer/Composer'
13
14
14
15
const BOTTOM_BAR_HEIGHT = 61
15
16