Merge pull request #6278 from AlfredoAlc/alfredo-fab-options-large-sc…

…reens Supports big screens mobile devices for popover menu
Expensify · Nov 24, 2021 · 5e781be · 5e781be
2 parents de9ab52 + 0bb3f00
commit 5e781be
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 14 deletions.
diff --git a/src/components/Popover/index.native.js b/src/components/Popover/index.native.js
@@ -13,20 +13,17 @@ const propTypes = {
  * This is a convenience wrapper around the Modal component for a responsive Popover.
  * On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
  */
-const Popover = (props) => {
-    const propsWithoutAnimation = _.omit(props, ['animationIn', 'animationOut', 'popoverAnchorPosition', 'disableAnimation']);
-    return (
-        <Modal
-            type={CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...propsWithoutAnimation}
-
-            // Mobile will always has fullscreen menu
-            // eslint-disable-next-line react/jsx-props-no-multi-spaces
-            fullscreen
-        />
-    );
-};
+const Popover = props => (
+    <Modal
+        type={props.isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.POPOVER}
+        popoverAnchorPosition={props.isSmallScreenWidth ? undefined : props.anchorPosition}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        fullscreen={props.isSmallScreenWidth ? true : props.fullscreen}
+        animationIn={props.isSmallScreenWidth ? undefined : props.animationIn}
+        animationOut={props.isSmallScreenWidth ? undefined : props.animationOut}
+    />
+);
 
 Popover.propTypes = propTypes;
 Popover.defaultProps = defaultProps;

diff --git a/src/components/PopoverMenu/BasePopoverMenu.js b/src/components/PopoverMenu/BasePopoverMenu.js
@@ -35,6 +35,7 @@ class BasePopoverMenu extends PureComponent {
                 onModalHide={this.props.onMenuHide}
                 animationIn={this.props.animationIn}
                 animationOut={this.props.animationOut}
+                isSmallScreenWidth={this.props.isSmallScreenWidth}
                 disableAnimation={this.props.disableAnimation}
             >
                 <View style={this.props.isSmallScreenWidth ? {} : styles.createMenuContainer}>

diff --git a/src/pages/home/sidebar/SidebarScreen.js b/src/pages/home/sidebar/SidebarScreen.js
@@ -155,6 +155,7 @@ class SidebarScreen extends Component {
                             isVisible={this.state.isCreateMenuActive}
                             anchorPosition={styles.createMenuPositionSidebar}
                             onItemSelected={this.onCreateMenuItemSelected}
+                            isSmallScreenWidth={this.props.isSmallScreenWidth}
                             menuItems={[
                                 {
                                     icon: ChatBubble,