Merge pull request #2516 from Expensify/Rory-FixCreateMenu

Fix CreateMenu and mobile safari attachment picker

src/components/CreateMenu/BaseCreateMenu.js

@@ -5,7 +5,10 @@ import Popover from '../Popover';
 import styles from '../../styles/styles';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import MenuItem from '../MenuItem';
-import createMenuPropTypes from './CreateMenuPropTypes';
+import {
+    propTypes as createMenuPropTypes,
+    defaultProps as defaultCreateMenuPropTypes,
+} from './CreateMenuPropTypes';
 
 const propTypes = {
     // Callback fired when the menu is completely closed
@@ -16,17 +19,20 @@ const propTypes = {
 };
 
 const defaultProps = {
+    ...defaultCreateMenuPropTypes,
     onMenuHide: () => {},
 };
 
 class BaseCreateMenu extends PureComponent {
     render() {
         return (
             <Popover
+                anchorPosition={this.props.anchorPosition}
                 onClose={this.props.onClose}
                 isVisible={this.props.isVisible}
                 onModalHide={this.props.onMenuHide}
-                anchorPosition={styles.createMenuPosition}
+                animationIn={this.props.animationIn}
+                animationOut={this.props.animationOut}
             >
                 <View style={this.props.isSmallScreenWidth ? {} : styles.createMenuContainer}>
                     {this.props.menuItems.map(item => (

src/components/CreateMenu/CreateMenuPropTypes.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-const createMenuPropTypes = {
+const propTypes = {
     // Callback method fired when the user requests to close the modal
     onClose: PropTypes.func.isRequired,
 
@@ -23,6 +23,31 @@ const createMenuPropTypes = {
             onSelected: PropTypes.func.isRequired,
         }),
     ).isRequired,
+
+    // The anchor position of the CreateMenu popover
+    anchorPosition: PropTypes.shape({
+        top: PropTypes.number,
+        right: PropTypes.number,
+        bottom: PropTypes.number,
+        left: PropTypes.number,
+    }).isRequired,
+
+    // A react-native-animatable animation definition for the modal display animation.
+    animationIn: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object,
+    ]),
+
+    // A react-native-animatable animation definition for the modal hide animation.
+    animationOut: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object,
+    ]),
+};
+
+const defaultProps = {
+    animationIn: 'fadeIn',
+    animationOut: 'fadeOut',
 };
 
-export default createMenuPropTypes;
+export {propTypes, defaultProps};

src/components/CreateMenu/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import BaseCreateMenu from './BaseCreateMenu';
-import createMenuPropTypes from './CreateMenuPropTypes';
+import {propTypes, defaultProps} from './CreateMenuPropTypes';
 
 /**
  * The web implementation of the menu needs to trigger actions before the popup closes
@@ -23,6 +23,8 @@ const CreateMenu = (props) => {
     return <BaseCreateMenu {...props} onItemSelected={selectItem} />;
 };
 
-CreateMenu.propTypes = createMenuPropTypes;
+CreateMenu.propTypes = propTypes;
+CreateMenu.defaultProps = defaultProps;
+CreateMenu.displayName = 'CreateMenu';
 
 export default CreateMenu;

src/components/CreateMenu/index.native.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import BaseCreateMenu from './BaseCreateMenu';
-import createMenuPropTypes from './CreateMenuPropTypes';
+import {propTypes, defaultProps} from './CreateMenuPropTypes';
 
 /**
  * The mobile native implementation of the CreateMenu needs to trigger actions after the popup closes
@@ -35,6 +35,7 @@ class CreateMenu extends Component {
     }
 }
 
-CreateMenu.propTypes = createMenuPropTypes;
+CreateMenu.propTypes = propTypes;
+CreateMenu.defaultProps = defaultProps;
 
 export default CreateMenu;