Merge pull request #2706 from parasharrajat/parasharrajat/ux

Allow menus to be dynamically positioned.
Expensify · May 10, 2021 · e5b508f · e5b508f
2 parents 569a2ef + 5fd502d
commit e5b508f
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 15 deletions.
diff --git a/src/components/VideoChatButtonAndMenu.js b/src/components/VideoChatButtonAndMenu.js
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {View, Pressable} from 'react-native';
+import {View, Pressable, Dimensions} from 'react-native';
 import Icon from './Icon';
 import {Phone} from './Icon/Expensicons';
 import Popover from './Popover';
@@ -14,6 +14,11 @@ import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimen
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import compose from '../libs/compose';
 
+const propTypes = {
+    ...withLocalizePropTypes,
+    ...windowDimensionsPropTypes,
+};
+
 class VideoChatButtonAndMenu extends Component {
     constructor(props) {
         super(props);
@@ -46,6 +51,14 @@ class VideoChatButtonAndMenu extends Component {
         };
     }
 
+    componentDidMount() {
+        Dimensions.addEventListener('change', this.measureVideoChatIconPosition);
+    }
+
+    componentWillUnmount() {
+        Dimensions.removeEventListener('change', this.measureVideoChatIconPosition);
+    }
+
     /**
      * Toggles the state variable isVideoChatMenuActive
      */
@@ -112,13 +125,7 @@ class VideoChatButtonAndMenu extends Component {
     }
 }
 
-const propTypes = {
-    ...withLocalizePropTypes,
-    ...windowDimensionsPropTypes,
-};
-
 VideoChatButtonAndMenu.propTypes = propTypes;
-
 VideoChatButtonAndMenu.displayName = 'VideoChatButtonAndMenu';
 export default compose(
     withWindowDimensions,

diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
@@ -6,6 +6,7 @@ import {
     Pressable,
     InteractionManager,
     Text,
+    Dimensions,
 } from 'react-native';
 import {withNavigationFocus} from '@react-navigation/compat';
 import _ from 'underscore';
@@ -33,7 +34,7 @@ import compose from '../../../libs/compose';
 import CreateMenu from '../../../components/CreateMenu';
 import Popover from '../../../components/Popover';
 import EmojiPickerMenu from './EmojiPickerMenu';
-import withWindowDimensions from '../../../components/withWindowDimensions';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import withDrawerState from '../../../components/withDrawerState';
 import getButtonState from '../../../libs/getButtonState';
 import CONST from '../../../CONST';
@@ -82,6 +83,7 @@ const propTypes = {
         isOffline: PropTypes.bool,
     }),
 
+    ...windowDimensionsPropTypes,
     ...withLocalizePropTypes,
 };
 
@@ -110,7 +112,8 @@ class ReportActionCompose extends React.Component {
         this.comment = props.comment;
         this.shouldFocusInputOnScreenFocus = canFocusInputOnScreenFocus();
         this.focusEmojiSearchInput = this.focusEmojiSearchInput.bind(this);
-
+        this.measureEmojiPopoverAnchorPosition = this.measureEmojiPopoverAnchorPosition.bind(this);
+        this.emojiPopoverAnchor = null;
         this.emojiSearchInput = null;
 
         this.state = {
@@ -128,6 +131,10 @@ class ReportActionCompose extends React.Component {
         };
     }
 
+    componentDidMount() {
+        Dimensions.addEventListener('change', this.measureEmojiPopoverAnchorPosition);
+    }
+
     componentDidUpdate(prevProps) {
         // We want to focus or refocus the input when a modal has been closed and the underlying screen is focused.
         // We avoid doing this on native platforms since the software keyboard popping
@@ -139,6 +146,10 @@ class ReportActionCompose extends React.Component {
         }
     }
 
+    componentWillUnmount() {
+        Dimensions.removeEventListener('change', this.measureEmojiPopoverAnchorPosition);
+    }
+
     /**
      * Updates the Highlight state of the composer
      *
@@ -227,17 +238,24 @@ class ReportActionCompose extends React.Component {
     /**
      * Show the ReportActionContextMenu modal popover.
      *
-     * @param {Object} [event] - A press event.
      */
-    showEmojiPicker(event) {
+    showEmojiPicker() {
         this.textInput.blur();
-        this.state.emojiPopoverAnchorPosition = {
-            horizontal: event.nativeEvent.pageX,
-            vertical: event.nativeEvent.pageY,
-        };
         this.setState({isEmojiPickerVisible: true});
     }
 
+    /**
+     * This gets called onLayout to find the cooridnates of the Anchor for the Emoji Picker.
+     */
+    measureEmojiPopoverAnchorPosition() {
+        if (this.emojiPopoverAnchor) {
+            this.emojiPopoverAnchor.measureInWindow((x, y) => this.setState({
+                emojiPopoverAnchorPosition: {horizontal: x, vertical: y},
+            }));
+        }
+    }
+
+
     /**
      * Hide the ReportActionContextMenu modal popover.
      */
@@ -435,6 +453,8 @@ class ReportActionCompose extends React.Component {
                             styles.chatItemEmojiButton,
                             getButtonBackgroundColorStyle(getButtonState(hovered, pressed)),
                         ])}
+                        ref={el => this.emojiPopoverAnchor = el}
+                        onLayout={this.measureEmojiPopoverAnchorPosition}
                         onPress={this.showEmojiPicker}
                     >
                         {({hovered, pressed}) => (