fixed: Web - Desktop Attachments - Cannot attach a photo when the NEW ( green plus) button is pressed

src/pages/home/sidebar/SidebarScreen.js → src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js

@@ -2,44 +2,40 @@ import lodashGet from 'lodash/get';
 import _ from 'underscore';
 import React, {Component} from 'react';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
-import {withNavigation} from '@react-navigation/compat';
-import styles from '../../../styles/styles';
-import SidebarLinks from './SidebarLinks';
-import PopoverMenu from '../../../components/PopoverMenu';
-import FAB from '../../../components/FAB';
-import ScreenWrapper from '../../../components/ScreenWrapper';
-import Navigation from '../../../libs/Navigation/Navigation';
-import ROUTES from '../../../ROUTES';
-import Timing from '../../../libs/actions/Timing';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
-import CONST from '../../../CONST';
-import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import compose from '../../../libs/compose';
-import * as Expensicons from '../../../components/Icon/Expensicons';
-import Permissions from '../../../libs/Permissions';
-import ONYXKEYS from '../../../ONYXKEYS';
-import * as Policy from '../../../libs/actions/Policy';
-import Performance from '../../../libs/Performance';
-import * as Welcome from '../../../libs/actions/Welcome';
+import styles from '../../../../styles/styles';
+import SidebarLinks from '../SidebarLinks';
+import PopoverMenu from '../../../../components/PopoverMenu';
+import FAB from '../../../../components/FAB';
+import ScreenWrapper from '../../../../components/ScreenWrapper';
+import Navigation from '../../../../libs/Navigation/Navigation';
+import ROUTES from '../../../../ROUTES';
+import Timing from '../../../../libs/actions/Timing';
+import CONST from '../../../../CONST';
+import * as Expensicons from '../../../../components/Icon/Expensicons';
+import Permissions from '../../../../libs/Permissions';
+import * as Policy from '../../../../libs/actions/Policy';
+import Performance from '../../../../libs/Performance';
+import * as Welcome from '../../../../libs/actions/Welcome';
+import {sidebarPropTypes, sidebarDefaultProps} from './sidebarPropTypes';
 
 const propTypes = {
-    /* Beta features list */
-    betas: PropTypes.arrayOf(PropTypes.string).isRequired,
 
-    /* Is workspace is being created by the user? */
-    isCreatingWorkspace: PropTypes.bool,
+    /* Callback function when the menu is shown */
+    onShowCreateMenu: PropTypes.func,
 
-    ...windowDimensionsPropTypes,
+    /* Callback function before the menu is hidden */
+    onHideCreateMenu: PropTypes.func,
 
-    ...withLocalizePropTypes,
+    ...sidebarPropTypes,
 };
 const defaultProps = {
-    isCreatingWorkspace: false,
+    onHideCreateMenu: () => {},
+    onShowCreateMenu: () => {},
+    ...sidebarDefaultProps,
 };
 
-class SidebarScreen extends Component {
+class BaseSidebarScreen extends Component {
     constructor(props) {
         super(props);
 
@@ -68,6 +64,7 @@ class SidebarScreen extends Component {
         this.setState({
             isCreateMenuActive: true,
         });
+        this.props.onShowCreateMenu();
     }
 
     /**
@@ -83,6 +80,7 @@ class SidebarScreen extends Component {
      * Selecting an item on CreateMenu or closing it by clicking outside of the modal component
      */
     hideCreateMenu() {
+        this.props.onHideCreateMenu();
         this.setState({
             isCreateMenuActive: false,
         });
@@ -184,22 +182,7 @@ class SidebarScreen extends Component {
     }
 }
 
-SidebarScreen.propTypes = propTypes;
-SidebarScreen.defaultProps = defaultProps;
-
-export default compose(
-    withNavigation,
-    withLocalize,
-    withWindowDimensions,
-    withOnyx({
-        allPolicies: {
-            key: ONYXKEYS.COLLECTION.POLICY,
-        },
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
-        isCreatingWorkspace: {
-            key: ONYXKEYS.IS_CREATING_WORKSPACE,
-        },
-    }),
-)(SidebarScreen);
+BaseSidebarScreen.propTypes = propTypes;
+BaseSidebarScreen.defaultProps = defaultProps;
+
+export default BaseSidebarScreen;

src/pages/home/sidebar/SidebarScreen/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import {withNavigation} from '@react-navigation/compat';
+import {withOnyx} from 'react-native-onyx';
+import compose from '../../../../libs/compose';
+import withWindowDimensions from '../../../../components/withWindowDimensions';
+import withLocalize from '../../../../components/withLocalize';
+import ONYXKEYS from '../../../../ONYXKEYS';
+import {sidebarPropTypes, sidebarDefaultProps} from './sidebarPropTypes';
+import BaseSidebarScreen from './BaseSidebarScreen';
+
+const SidebarScreen = (props) => {
+    let baseSidebarScreen = null;
+
+    /**
+     * Method create event listener
+     */
+    const createDragoverListener = () => {
+        document.addEventListener('dragover', baseSidebarScreen.hideCreateMenu);
+    };
+
+    /**
+     * Method remove event listener.
+     */
+    const removeDragoverListener = () => {
+        document.removeEventListener('dragover', baseSidebarScreen.hideCreateMenu);
+    };
+    return (
+        <BaseSidebarScreen
+            ref={el => baseSidebarScreen = el}
+            onShowCreateMenu={createDragoverListener}
+            onHideCreateMenu={removeDragoverListener}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+        />
+    );
+};
+
+SidebarScreen.propTypes = sidebarPropTypes;
+SidebarScreen.defaultProps = sidebarDefaultProps;
+SidebarScreen.displayName = 'SidebarScreen';
+
+export default compose(
+    withNavigation,
+    withLocalize,
+    withWindowDimensions,
+    withOnyx({
+        allPolicies: {
+            key: ONYXKEYS.COLLECTION.POLICY,
+        },
+        betas: {
+            key: ONYXKEYS.BETAS,
+        },
+        isCreatingWorkspace: {
+            key: ONYXKEYS.IS_CREATING_WORKSPACE,
+        },
+    }),
+)(SidebarScreen);

src/pages/home/sidebar/SidebarScreen/index.native.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import {withNavigation} from '@react-navigation/compat';
+import {withOnyx} from 'react-native-onyx';
+import compose from '../../../../libs/compose';
+import withWindowDimensions from '../../../../components/withWindowDimensions';
+import withLocalize from '../../../../components/withLocalize';
+import ONYXKEYS from '../../../../ONYXKEYS';
+import {sidebarPropTypes, sidebarDefaultProps} from './sidebarPropTypes';
+import BaseSidebarScreen from './BaseSidebarScreen';
+
+// eslint-disable-next-line react/jsx-props-no-spreading
+const SidebarScreen = props => <BaseSidebarScreen {...props} />;
+
+SidebarScreen.propTypes = sidebarPropTypes;
+SidebarScreen.defaultProps = sidebarDefaultProps;
+SidebarScreen.displayName = 'SidebarScreen';
+
+export default compose(
+    withNavigation,
+    withLocalize,
+    withWindowDimensions,
+    withOnyx({
+        allPolicies: {
+            key: ONYXKEYS.COLLECTION.POLICY,
+        },
+        betas: {
+            key: ONYXKEYS.BETAS,
+        },
+        isCreatingWorkspace: {
+            key: ONYXKEYS.IS_CREATING_WORKSPACE,
+        },
+    }),
+)(SidebarScreen);

src/pages/home/sidebar/SidebarScreen/sidebarPropTypes.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+import {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions';
+import {withLocalizePropTypes} from '../../../../components/withLocalize';
+
+const sidebarPropTypes = {
+
+    /** The list of policies the user has access to. */
+    allPolicies: PropTypes.shape({
+        /** The policy name */
+        name: PropTypes.string,
+    }).isRequired,
+
+    /* Beta features list */
+    betas: PropTypes.arrayOf(PropTypes.string).isRequired,
+
+    /* Is workspace is being created by the user? */
+    isCreatingWorkspace: PropTypes.bool,
+
+    ...windowDimensionsPropTypes,
+
+    ...withLocalizePropTypes,
+};
+
+const sidebarDefaultProps = {
+    isCreatingWorkspace: false,
+};
+
+export {sidebarPropTypes, sidebarDefaultProps};