Merge pull request #7390 from parasharrajat/composerHide

Hide the composer when message is edited

src/libs/VirtualKeyboard/index.js

@@ -0,0 +1,31 @@
+import _ from 'underscore';
+import canUseTouchScreen from '../canUseTouchscreen';
+
+/**
+ * Is the virtual keyboard open?
+ *
+ * @returns {Boolean|null} – null if the VirtualKeyboard API is unavailable
+ */
+function isOpen() {
+    if (!_.has(navigator, 'virtualKeyboard')) {
+        return null;
+    }
+    return navigator.virtualKeyboard.boundingRect.y > 0;
+}
+
+/**
+ * As of January 2022, the VirtualKeyboard web API is not available in all browsers yet
+ * If it is unavailable, we default to assuming that the virtual keyboard is open on touch-enabled devices.
+ * See https://github.com/Expensify/App/issues/6767 for additional context.
+ *
+ * @returns {Boolean}
+ */
+function shouldAssumeIsOpen() {
+    const isOpened = isOpen();
+    return _.isNull(isOpened) ? canUseTouchScreen() : isOpened;
+}
+
+export default {
+    isOpen,
+    shouldAssumeIsOpen,
+};

src/libs/virtualKeyboard/index.native.js → src/libs/VirtualKeyboard/index.native.js

@@ -27,7 +27,7 @@ function isOpen() {
     return isVirtualKeyboardOpen;
 }
 
-export {
-    // eslint-disable-next-line import/prefer-default-export
+export default {
     isOpen,
+    shouldAssumeIsOpen: isOpen,
 };

src/libs/toggleReportActionComposeView.js → src/libs/toggleReportActionComposeView/index.js

@@ -1,4 +1,4 @@
-import * as Session from './actions/Session';
+import * as Session from '../actions/Session';
 
 export default (shouldShowComposeInput, isSmallScreenWidth) => {
     if (!isSmallScreenWidth) {

src/libs/toggleReportActionComposeView/index.native.js

@@ -0,0 +1,3 @@
+import * as Session from '../actions/Session';
+
+export default shouldShowComposeInput => Session.setShouldShowComposeInput(shouldShowComposeInput);

src/pages/home/report/ReportActionCompose.js

@@ -49,8 +49,7 @@ import {withNetwork, withPersonalDetails} from '../../../components/OnyxProvider
 import DateUtils from '../../../libs/DateUtils';
 import Tooltip from '../../../components/Tooltip';
 import * as EmojiUtils from '../../../libs/EmojiUtils';
-import canUseTouchScreen from '../../../libs/canUseTouchscreen';
-import * as VirtualKeyboard from '../../../libs/virtualKeyboard';
+import VirtualKeyboard from '../../../libs/VirtualKeyboard';
 
 const propTypes = {
     /** Beta features list */
@@ -357,25 +356,13 @@ class ReportActionCompose extends React.Component {
         this.textInput.scrollTop = this.textInput.scrollHeight;
     }
 
-    /**
-     * As of January 2022, the VirtualKeyboard web API is not available in all browsers yet
-     * If it is unavailable, we default to assuming that the virtual keyboard is open on touch-enabled devices.
-     * See https://github.com/Expensify/App/issues/6767 for additional context.
-     *
-     * @returns {Boolean}
-     */
-    shouldAssumeVirtualKeyboardIsOpen() {
-        const isOpen = VirtualKeyboard.isOpen();
-        return _.isNull(isOpen) ? canUseTouchScreen() : isOpen;
-    }
-
     /**
      * Listens for keyboard shortcuts and applies the action
      *
      * @param {Object} e
      */
     triggerHotkeyActions(e) {
-        if (!e || this.shouldAssumeVirtualKeyboardIsOpen()) {
+        if (!e || VirtualKeyboard.shouldAssumeIsOpen()) {
             return;
         }
 

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -14,6 +14,7 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal
 import Button from '../../../components/Button';
 import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
 import compose from '../../../libs/compose';
+import VirtualKeyboard from '../../../libs/VirtualKeyboard';
 
 const propTypes = {
     /** All the data of the action */
@@ -157,7 +158,7 @@ class ReportActionItemMessageEdit extends React.Component {
                         style={[styles.textInputCompose, styles.flex4]}
                         onFocus={() => {
                             ReportScrollManager.scrollToIndex({animated: true, index: this.props.index}, true);
-                            toggleReportActionComposeView(false);
+                            toggleReportActionComposeView(false, VirtualKeyboard.shouldAssumeIsOpen());
                         }}
                         selection={this.state.selection}
                         onSelectionChange={this.onSelectionChange}