Merge pull request Expensify#12168 from Expensify/Rory-NoTooltipWitho…

…utMouse

Merging because everyone had previously approved and all I did was resolve conflicts

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js

@@ -8,7 +8,7 @@ import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteract
 import * as ReportActionContextMenu from '../../pages/home/report/ContextMenu/ReportActionContextMenu';
 import * as ContextMenuActions from '../../pages/home/report/ContextMenu/ContextMenuActions';
 import Tooltip from '../Tooltip';
-import canUseTouchScreen from '../../libs/canUseTouchscreen';
+import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import styles from '../../styles/styles';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import {propTypes as anchorForCommentsOnlyPropTypes, defaultProps} from './anchorForCommentsOnlyPropTypes';
@@ -30,7 +30,7 @@ const BaseAnchorForCommentsOnly = (props) => {
     } else {
         linkProps.href = props.href;
     }
-    const defaultTextStyle = canUseTouchScreen() || props.isSmallScreenWidth ? {} : styles.userSelectText;
+    const defaultTextStyle = DeviceCapabilities.canUseTouchScreen() || props.isSmallScreenWidth ? {} : styles.userSelectText;
 
     return (
         <PressableWithSecondaryInteraction

src/components/HTMLEngineProvider/index.js

@@ -2,12 +2,12 @@ import React from 'react';
 import BaseHTMLEngineProvider from './BaseHTMLEngineProvider';
 import {defaultProps, propTypes} from './htmlEnginePropTypes';
 import withWindowDimensions from '../withWindowDimensions';
-import canUseTouchScreen from '../../libs/canUseTouchscreen';
+import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 
 const HTMLEngineProvider = props => (
     <BaseHTMLEngineProvider
         debug={props.debug}
-        textSelectable={!canUseTouchScreen() || !props.isSmallScreenWidth}
+        textSelectable={!DeviceCapabilities.canUseTouchScreen() || !props.isSmallScreenWidth}
     >
         {props.children}
     </BaseHTMLEngineProvider>

src/components/ImageView/index.js

@@ -5,7 +5,7 @@ import {
 } from 'react-native';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
-import canUseTouchScreen from '../../libs/canUseTouchscreen';
+import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import FullscreenLoadingIndicator from '../FullscreenLoadingIndicator';
 
@@ -19,7 +19,7 @@ class ImageView extends PureComponent {
     constructor(props) {
         super(props);
         this.scrollableRef = null;
-        this.canUseTouchScreen = canUseTouchScreen();
+        this.canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
         this.onContainerLayoutChanged = this.onContainerLayoutChanged.bind(this);
         this.onContainerPressIn = this.onContainerPressIn.bind(this);
         this.onContainerPress = this.onContainerPress.bind(this);

src/components/OptionsList/index.js

@@ -3,8 +3,8 @@ import {Keyboard} from 'react-native';
 import _ from 'underscore';
 import BaseOptionsList from './BaseOptionsList';
 import withWindowDimensions from '../withWindowDimensions';
-import canUseTouchscreen from '../../libs/canUseTouchscreen';
 import {propTypes, defaultProps} from './optionsListPropTypes';
+import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 
 class OptionsList extends Component {
     constructor(props) {
@@ -15,7 +15,7 @@ class OptionsList extends Component {
     }
 
     componentDidMount() {
-        if (!canUseTouchscreen()) {
+        if (!DeviceCapabilities.canUseTouchScreen()) {
             return;
         }
 
@@ -26,7 +26,7 @@ class OptionsList extends Component {
     }
 
     componentWillUnmount() {
-        if (!canUseTouchscreen()) {
+        if (!DeviceCapabilities.canUseTouchScreen()) {
             return;
         }
 

src/components/PressableWithSecondaryInteraction/index.js

@@ -4,7 +4,7 @@ import {Pressable} from 'react-native';
 import {LongPressGestureHandler, State} from 'react-native-gesture-handler';
 import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
 import styles from '../../styles/styles';
-import hasHoverSupport from '../../libs/hasHoverSupport';
+import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 
 /**
  * This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked.
@@ -31,7 +31,7 @@ class PressableWithSecondaryInteraction extends Component {
      * @param {Object} e
      */
     callSecondaryInteractionWithMappedEvent(e) {
-        if ((e.nativeEvent.state !== State.ACTIVE) || hasHoverSupport()) {
+        if ((e.nativeEvent.state !== State.ACTIVE) || DeviceCapabilities.hasHoverSupport()) {
             return;
         }
 

src/components/Tooltip/TooltipRenderedOnPageBody.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Animated, View} from 'react-native';
-import ReactDOM from 'react-dom';
+import {Portal} from '@gorhom/portal';
 import getTooltipStyles from '../../styles/getTooltipStyles';
 import Text from '../Text';
 
@@ -69,10 +69,6 @@ class TooltipRenderedOnPageBody extends React.PureComponent {
         this.updateTooltipTextWidth = this.updateTooltipTextWidth.bind(this);
     }
 
-    componentDidMount() {
-        this.updateTooltipTextWidth();
-    }
-
     componentDidUpdate(prevProps) {
         if (prevProps.text === this.props.text) {
             return;
@@ -122,19 +118,34 @@ class TooltipRenderedOnPageBody extends React.PureComponent {
             this.props.shiftHorizontal,
             this.props.shiftVertical,
         );
-        return ReactDOM.createPortal(
-            <Animated.View
-                onLayout={this.measureTooltip}
-                style={[tooltipWrapperStyle, animationStyle]}
-            >
-                <Text numberOfLines={this.props.numberOfLines} style={tooltipTextStyle}>
-                    <Text style={tooltipTextStyle} ref={ref => this.textRef = ref}>{this.props.text}</Text>
-                </Text>
-                <View style={pointerWrapperStyle}>
-                    <View style={pointerStyle} />
-                </View>
-            </Animated.View>,
-            document.querySelector('body'),
+        return (
+            <Portal>
+                <Animated.View
+                    onLayout={this.measureTooltip}
+                    style={[tooltipWrapperStyle, animationStyle]}
+                >
+                    <Text numberOfLines={this.props.numberOfLines} style={tooltipTextStyle}>
+                        <Text
+                            style={tooltipTextStyle}
+                            ref={(ref) => {
+                                // Once the text for the tooltip first renders, update the width of the tooltip dynamically to fit the width of the text.
+                                // Note that we can't have this code in componentDidMount because the ref for the text won't be set until after the first render
+                                if (this.textRef) {
+                                    return;
+                                }
+
+                                this.textRef = ref;
+                                this.updateTooltipTextWidth();
+                            }}
+                        >
+                            {this.props.text}
+                        </Text>
+                    </Text>
+                    <View style={pointerWrapperStyle}>
+                        <View style={pointerStyle} />
+                    </View>
+                </Animated.View>
+            </Portal>
         );
     }
 }

src/components/Tooltip/index.js

@@ -7,7 +7,7 @@ import withWindowDimensions from '../withWindowDimensions';
 import {propTypes, defaultProps} from './tooltipPropTypes';
 import TooltipSense from './TooltipSense';
 import makeCancellablePromise from '../../libs/MakeCancellablePromise';
-import * as Browser from '../../libs/Browser';
+import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 
 class Tooltip extends PureComponent {
     constructor(props) {
@@ -32,6 +32,7 @@ class Tooltip extends PureComponent {
         this.isTooltipSenseInitiator = false;
         this.shouldStartShowAnimation = false;
         this.animation = new Animated.Value(0);
+        this.hasHoverSupport = DeviceCapabilities.hasHoverSupport();
 
         this.getWrapperPosition = this.getWrapperPosition.bind(this);
         this.showTooltip = this.showTooltip.bind(this);
@@ -80,12 +81,6 @@ class Tooltip extends PureComponent {
      * Display the tooltip in an animation.
      */
     showTooltip() {
-        // On mWeb we do not show Tooltips as there are no way to hide them besides blurring.
-        // That's due to that fact that on mWeb there is no MouseLeave events.
-        if (Browser.isMobile()) {
-            return;
-        }
-
         if (!this.state.isRendered) {
             this.setState({isRendered: true});
         }
@@ -147,8 +142,8 @@ class Tooltip extends PureComponent {
     }
 
     render() {
-        // Skip the tooltip and return the children, if the text is empty.
-        if (_.isEmpty(this.props.text)) {
+        // Skip the tooltip and return the children if the text is empty or the device does not support hovering
+        if (_.isEmpty(this.props.text) || !this.hasHoverSupport) {
             return this.props.children;
         }
         let child = (

src/libs/hasHoverSupport/index.js → src/libs/DeviceCapabilities/hasHoverSupport/index.js

@@ -3,10 +3,8 @@
  *
  * @returns {Boolean}
  */
-
-import * as Browser from '../Browser';
-
-const hasHoverSupport = () => !Browser.isMobile();
+function hasHoverSupport() {
+    return !window.matchMedia('(hover: none)').matches;
+}
 
 export default hasHoverSupport;
-

src/libs/DeviceCapabilities/index.js

@@ -0,0 +1,7 @@
+import canUseTouchScreen from './canUseTouchScreen';
+import hasHoverSupport from './hasHoverSupport';
+
+export {
+    canUseTouchScreen,
+    hasHoverSupport,
+};

src/libs/canFocusInputOnScreenFocus/index.js

@@ -1,3 +1,3 @@
-import canUseTouchScreen from '../canUseTouchscreen';
+import * as DeviceCapabilities from '../DeviceCapabilities';
 
-export default () => !canUseTouchScreen();
+export default () => !DeviceCapabilities.canUseTouchScreen();

src/pages/home/HeaderView.js

@@ -78,15 +78,15 @@ const HeaderView = (props) => {
         <View style={[styles.appContentHeader]} nativeID="drag-area">
             <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
                 {props.isSmallScreenWidth && (
-                    <Tooltip text={props.translate('common.back')}>
-                        <Pressable
-                            onPress={props.onNavigationMenuButtonClicked}
-                            style={[styles.LHNToggle]}
-                            accessibilityHint="Navigate back to chats list"
-                        >
+                    <Pressable
+                        onPress={props.onNavigationMenuButtonClicked}
+                        style={[styles.LHNToggle]}
+                        accessibilityHint="Navigate back to chats list"
+                    >
+                        <Tooltip text={props.translate('common.back')} shiftVertical={4}>
                             <Icon src={Expensicons.BackArrow} />
-                        </Pressable>
-                    </Tooltip>
+                        </Tooltip>
+                    </Pressable>
                 )}
                 {Boolean(props.report && title) && (
                     <View

src/pages/home/report/ReportActionCompose.js

@@ -36,7 +36,7 @@ import {withNetwork, withPersonalDetails} from '../../../components/OnyxProvider
 import * as User from '../../../libs/actions/User';
 import Tooltip from '../../../components/Tooltip';
 import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton';
-import canUseTouchScreen from '../../../libs/canUseTouchscreen';
+import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
 import toggleReportActionComposeView from '../../../libs/toggleReportActionComposeView';
 import OfflineIndicator from '../../../components/OfflineIndicator';
 import ExceededCommentLength from '../../../components/ExceededCommentLength';
@@ -687,7 +687,7 @@ class ReportActionCompose extends React.Component {
                             </>
                         )}
                     </AttachmentModal>
-                    {canUseTouchScreen() && this.props.isMediumScreenWidth ? null : (
+                    {DeviceCapabilities.canUseTouchScreen() && this.props.isMediumScreenWidth ? null : (
                         <EmojiPickerButton
                             isDisabled={isBlockedFromConcierge || this.props.disabled}
                             onModalHide={() => this.focus(true)}

src/pages/home/report/ReportActionItem.js

@@ -19,7 +19,7 @@ import ReportActionItemCreated from './ReportActionItemCreated';
 import compose from '../../../libs/compose';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import ControlSelection from '../../../libs/ControlSelection';
-import canUseTouchScreen from '../../../libs/canUseTouchscreen';
+import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
 import MiniReportActionContextMenu from './ContextMenu/MiniReportActionContextMenu';
 import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu';
 import * as ContextMenuActions from './ContextMenu/ContextMenuActions';
@@ -180,7 +180,7 @@ class ReportActionItem extends Component {
         return (
             <PressableWithSecondaryInteraction
                 ref={el => this.popoverAnchor = el}
-                onPressIn={() => this.props.isSmallScreenWidth && canUseTouchScreen() && ControlSelection.block()}
+                onPressIn={() => this.props.isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                 onPressOut={() => ControlSelection.unblock()}
                 onSecondaryInteraction={this.showPopover}
                 preventDefaultContentMenu={!this.props.draftMessage}

src/pages/home/report/ReportActionItemFragment.js

@@ -12,7 +12,7 @@ import Tooltip from '../../../components/Tooltip';
 import * as EmojiUtils from '../../../libs/EmojiUtils';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import canUseTouchScreen from '../../../libs/canUseTouchscreen';
+import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
 import compose from '../../../libs/compose';
 import * as StyleUtils from '../../../styles/StyleUtils';
 
@@ -120,7 +120,7 @@ const ReportActionItemFragment = (props) => {
             return (
                 <Text
                     family="EMOJI_TEXT_FONT"
-                    selectable={!canUseTouchScreen() || !props.isSmallScreenWidth}
+                    selectable={!DeviceCapabilities.canUseTouchScreen() || !props.isSmallScreenWidth}
                     style={[EmojiUtils.containsOnlyEmojis(text) ? styles.onlyEmojisText : undefined, styles.ltr, ...props.style]}
                 >
                     {StyleUtils.convertToLTR(Str.htmlDecode(text))}

src/pages/iou/steps/IOUAmountPage.js

@@ -16,7 +16,7 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal
 import compose from '../../../libs/compose';
 import Button from '../../../components/Button';
 import CONST from '../../../CONST';
-import canUseTouchScreen from '../../../libs/canUseTouchscreen';
+import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
 import TextInputWithCurrencySymbol from '../../../components/TextInputWithCurrencySymbol';
 
 const propTypes = {
@@ -271,7 +271,7 @@ class IOUAmountPage extends React.Component {
                     />
                 </View>
                 <View style={[styles.w100, styles.justifyContentEnd, styles.pageWrapper]}>
-                    {canUseTouchScreen()
+                    {DeviceCapabilities.canUseTouchScreen()
                         ? (
                             <BigNumberPad
                                 numberPressed={this.updateAmountNumberPad}

src/pages/settings/AppDownloadLinks.js

@@ -14,7 +14,7 @@ import * as Link from '../../libs/actions/Link';
 import PressableWithSecondaryInteraction from '../../components/PressableWithSecondaryInteraction';
 import ControlSelection from '../../libs/ControlSelection';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
-import canUseTouchScreen from '../../libs/canUseTouchscreen';
+import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import * as ReportActionContextMenu from '../home/report/ContextMenu/ReportActionContextMenu';
 import * as ContextMenuActions from '../home/report/ContextMenu/ContextMenuActions';
 import PopoverReportActionContextMenu from '../home/report/ContextMenu/PopoverReportActionContextMenu';
@@ -87,7 +87,7 @@ const AppDownloadLinksPage = (props) => {
                 {_.map(menuItems, item => (
                     <PressableWithSecondaryInteraction
                         key={item.translationKey}
-                        onPressIn={() => props.isSmallScreenWidth && canUseTouchScreen() && ControlSelection.block()}
+                        onPressIn={() => props.isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                         onPressOut={() => ControlSelection.unblock()}
                         onSecondaryInteraction={e => showPopover(e, item.link)}
                         ref={el => popoverAnchor = el}