From 454515c3d80107c012bf1ea0150b981a070f7ccd Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 21 Jan 2022 11:28:25 +0530 Subject: [PATCH 1/4] Fix the function to call to allow hiding the composer when message editing. --- src/pages/home/report/ReportActionItemMessageEdit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index eca9fb79892b..90a141ffacbb 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/src/pages/home/report/ReportActionItemMessageEdit.js @@ -157,7 +157,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, this.props.isSmallScreenWidth); }} selection={this.state.selection} onSelectionChange={this.onSelectionChange} From de72a251d4b30a321b2fdfd0375f909ca7a1c691 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 21 Jan 2022 11:28:39 +0530 Subject: [PATCH 2/4] Always hide the composer for Native devices --- .../index.js} | 2 +- src/libs/toggleReportActionComposeView/index.native.js | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) rename src/libs/{toggleReportActionComposeView.js => toggleReportActionComposeView/index.js} (79%) create mode 100644 src/libs/toggleReportActionComposeView/index.native.js diff --git a/src/libs/toggleReportActionComposeView.js b/src/libs/toggleReportActionComposeView/index.js similarity index 79% rename from src/libs/toggleReportActionComposeView.js rename to src/libs/toggleReportActionComposeView/index.js index db12abc9a041..3320b2620b64 100644 --- a/src/libs/toggleReportActionComposeView.js +++ b/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) { diff --git a/src/libs/toggleReportActionComposeView/index.native.js b/src/libs/toggleReportActionComposeView/index.native.js new file mode 100644 index 000000000000..ddf5fdd1ce2e --- /dev/null +++ b/src/libs/toggleReportActionComposeView/index.native.js @@ -0,0 +1,3 @@ +import * as Session from '../actions/Session'; + +export default shouldShowComposeInput => Session.setShouldShowComposeInput(shouldShowComposeInput); From 349ac65c8e349e1fdeae9bb24ecc6bee61dd9679 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 4 Feb 2022 20:44:29 +0530 Subject: [PATCH 3/4] refactor the VirtualKeyboard API --- src/libs/VirtualKeyboard/index.js | 31 +++++++++++++++++++ .../index.native.js | 4 +-- src/libs/virtualKeyboard/index.js | 18 ----------- src/pages/home/report/ReportActionCompose.js | 17 ++-------- 4 files changed, 35 insertions(+), 35 deletions(-) create mode 100644 src/libs/VirtualKeyboard/index.js rename src/libs/{virtualKeyboard => VirtualKeyboard}/index.native.js (87%) delete mode 100644 src/libs/virtualKeyboard/index.js diff --git a/src/libs/VirtualKeyboard/index.js b/src/libs/VirtualKeyboard/index.js new file mode 100644 index 000000000000..123b789f787e --- /dev/null +++ b/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, +}; diff --git a/src/libs/virtualKeyboard/index.native.js b/src/libs/VirtualKeyboard/index.native.js similarity index 87% rename from src/libs/virtualKeyboard/index.native.js rename to src/libs/VirtualKeyboard/index.native.js index 6c21a32ffcdf..dc3905f3d599 100644 --- a/src/libs/virtualKeyboard/index.native.js +++ b/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, }; diff --git a/src/libs/virtualKeyboard/index.js b/src/libs/virtualKeyboard/index.js deleted file mode 100644 index f28dc84c0bcf..000000000000 --- a/src/libs/virtualKeyboard/index.js +++ /dev/null @@ -1,18 +0,0 @@ -import _ from 'underscore'; - -/** - * 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; -} - -export { - // eslint-disable-next-line import/prefer-default-export - isOpen, -}; diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 60da6f825bf3..aabc286d5a07 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/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; } From 3899a9fb2c957cd08405b6c2b2b70196c416949d Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 4 Feb 2022 20:46:51 +0530 Subject: [PATCH 4/4] Adjust the composer hide account --- src/pages/home/report/ReportActionItemMessageEdit.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js index 90a141ffacbb..9c8bd53b7d8f 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.js +++ b/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, this.props.isSmallScreenWidth); + toggleReportActionComposeView(false, VirtualKeyboard.shouldAssumeIsOpen()); }} selection={this.state.selection} onSelectionChange={this.onSelectionChange}