acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Fix emoji picker position (#7146)

Browse Source
This commit is contained in:
Eric Bailey
2024-12-17 21:12:53 -06:00
committed by GitHub
parent 65d4416f9e
commit a07949ec8e
1 changed files with 37 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/composer/text-input/web/EmojiPicker.web.tsx
+37 -34
View File
@@ -10,6 +10,7 @@ import {DismissableLayer} from '@radix-ui/react-dismissable-layer'
import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter' import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter'
import {atoms as a} from '#/alf' import {atoms as a} from '#/alf'
import {Portal} from '#/components/Portal'
const HEIGHT_OFFSET = 40 const HEIGHT_OFFSET = 40
const WIDTH_OFFSET = 100 const WIDTH_OFFSET = 100
@@ -125,39 +126,41 @@ export function EmojiPicker({state, close, pinToTop}: IProps) {
} }
return ( return (
<TouchableWithoutFeedback <Portal>
accessibilityRole="button" <TouchableWithoutFeedback
onPress={onPressBackdrop} accessibilityRole="button"
accessibilityViewIsModal> onPress={onPressBackdrop}
<View accessibilityViewIsModal>
style={[ <View
a.fixed, style={[
a.w_full, a.fixed,
a.h_full, a.w_full,
a.align_center, a.h_full,
{ a.align_center,
top: 0, {
left: 0, top: 0,
right: 0, left: 0,
}, right: 0,
]}> },
{/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */} ]}>
<TouchableWithoutFeedback onPress={e => e.stopPropagation()}> {/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors */}
<View style={[{position: 'absolute'}, position]}> <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
<DismissableLayer <View style={[{position: 'absolute'}, position]}>
onFocusOutside={evt => evt.preventDefault()} <DismissableLayer
onDismiss={close}> onFocusOutside={evt => evt.preventDefault()}
<Picker onDismiss={close}>
data={async () => { <Picker
return (await import('./EmojiPickerData.json')).default data={async () => {
}} return (await import('./EmojiPickerData.json')).default
onEmojiSelect={onInsert} }}
autoFocus={true} onEmojiSelect={onInsert}
/> autoFocus={true}
</DismissableLayer> />
</View> </DismissableLayer>
</TouchableWithoutFeedback> </View>
</View> </TouchableWithoutFeedback>
</TouchableWithoutFeedback> </View>
</TouchableWithoutFeedback>
</Portal>
) )
} }