RN-148 Tapping to dismiss post tooltip and prevent openining thread view (#607)

NOTICE.txt

@@ -41,6 +41,39 @@ SOFTWARE.
 
 ---
 
+## react-native-tooltip
+
+This product contains a modified portion of 'react-native-tooltip', A react-native component from displaying tooltip. Uses UIMenuController.
+
+* HOMEPAGE:
+  * https://github.com/chirag04/react-native-tooltip
+
+* LICENSE:
+
+The MIT License (MIT)
+
+Copyright (c) 2015-2016 Chirag Jain
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+---
+
 ## react-native-search-bar
 
 This product contains a modified portion of 'react-native-search-bar', a high-quality iOS native search bar for react native by Zhao Han.

app/actions/views/channel.js

@@ -338,3 +338,10 @@ export function setChannelRefreshing(refreshing = true) {
         refreshing
     };
 }
+
+export function setPostTooltipVisible(visible = true) {
+    return {
+        type: ViewTypes.POST_TOOLTIP_VISIBLE,
+        visible
+    };
+}

app/components/options_context/options_context.ios.js

@@ -32,10 +32,10 @@ export default class OptionsContext extends PureComponent {
                 actions={this.props.actions}
                 arrowDirection='down'
                 longPress={true}
-                onHideUnderlay={() => this.props.toggleSelected(false)}
                 onPress={this.props.onPress}
-                onShowUnderlay={() => this.props.toggleSelected(true)}
                 underlayColor='transparent'
+                onShow={() => this.props.toggleSelected(true)}
+                onHide={() => this.props.toggleSelected(false)}
             >
                 {this.props.children}
             </ToolTip>

app/components/post/index.js

@@ -3,6 +3,7 @@
 
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
+
 import {createPost, deletePost, flagPost, removePost, unflagPost} from 'mattermost-redux/actions/posts';
 import {getMyPreferences} from 'mattermost-redux/selectors/entities/preferences';
 import {makeGetCommentCountForPost} from 'mattermost-redux/selectors/entities/posts';
@@ -10,6 +11,7 @@ import {getCurrentUserId, getCurrentUserRoles, getUser} from 'mattermost-redux/s
 import {isPostFlagged} from 'mattermost-redux/utils/post_utils';
 import {displayUsername} from 'mattermost-redux/utils/user_utils';
 
+import {setPostTooltipVisible} from 'app/actions/views/channel';
 import {getTheme} from 'app/selectors/preferences';
 
 import Post from './post';
@@ -22,6 +24,7 @@ function makeMapStateToProps() {
         const myPreferences = getMyPreferences(state);
         const {config, license} = state.entities.general;
         const roles = getCurrentUserId(state) ? getCurrentUserRoles(state) : '';
+        const {tooltipVisible} = state.views.channel;
 
         return {
             ...ownProps,
@@ -34,6 +37,7 @@ function makeMapStateToProps() {
             license,
             roles,
             theme: getTheme(state),
+            tooltipVisible,
             user
         };
     };
@@ -46,6 +50,7 @@ function mapDispatchToProps(dispatch) {
             deletePost,
             flagPost,
             removePost,
+            setPostTooltipVisible,
             unflagPost
         }, dispatch)
     };

app/components/post/post.js

@@ -61,6 +61,7 @@ class Post extends PureComponent {
         license: PropTypes.object.isRequired,
         navigator: PropTypes.object,
         roles: PropTypes.string,
+        tooltipVisible: PropTypes.bool,
         theme: PropTypes.object.isRequired,
         onPress: PropTypes.func,
         actions: PropTypes.shape({
@@ -68,6 +69,7 @@ class Post extends PureComponent {
             deletePost: PropTypes.func.isRequired,
             flagPost: PropTypes.func.isRequired,
             removePost: PropTypes.func.isRequired,
+            setPostTooltipVisible: PropTypes.func.isRequired,
             unflagPost: PropTypes.func.isRequired
         }).isRequired
     };
@@ -212,11 +214,13 @@ class Post extends PureComponent {
     };
 
     handlePress = () => {
-        const {post, onPress} = this.props;
-        if (onPress && post.state !== Posts.POST_DELETED && !isSystemMessage(post) && !post.failed) {
-            preventDoubleTap(onPress, null, post);
-        } else if (isPostEphemeral(post)) {
-            preventDoubleTap(this.onRemovePost, this, post);
+        const {post, onPress, tooltipVisible} = this.props;
+        if (!tooltipVisible) {
+            if (onPress && post.state !== Posts.POST_DELETED && !isSystemMessage(post) && !post.failed) {
+                preventDoubleTap(onPress, null, post);
+            } else if (isPostEphemeral(post)) {
+                preventDoubleTap(this.onRemovePost, this, post);
+            }
         }
     };
 
@@ -473,6 +477,7 @@ class Post extends PureComponent {
     };
 
     toggleSelected = (selected) => {
+        this.props.actions.setPostTooltipVisible(selected);
         this.setState({selected});
     };
 
@@ -584,6 +589,7 @@ class Post extends PureComponent {
         const textStyles = getMarkdownTextStyles(theme);
 
         const selected = this.state && this.state.selected ? style.selected : null;
+
         let contents;
         if (this.props.commentedOnPost) {
             contents = (

app/constants/view.js

@@ -36,6 +36,8 @@ const ViewTypes = keyMirror({
     SET_CHANNEL_LOADER: null,
     SET_CHANNEL_REFRESHING: null,
 
+    POST_TOOLTIP_VISIBLE: null,
+
     SET_LAST_CHANNEL_FOR_TEAM: null,
 
     GITLAB: null,

app/initial_state.js

@@ -254,7 +254,9 @@ const state = {
     views: {
         channel: {
             drafts: {},
-            loading: false
+            loading: false,
+            refreshing: false,
+            tooltipVisible: false
         },
         connection: true,
         fetchCache: {},

app/reducers/views/channel.js

@@ -181,8 +181,18 @@ function refreshing(state = false, action) {
     }
 }
 
+function tooltipVisible(state = false, action) {
+    switch (action.type) {
+    case ViewTypes.POST_TOOLTIP_VISIBLE:
+        return action.visible;
+    default:
+        return state;
+    }
+}
+
 export default combineReducers({
     drafts,
     loading,
-    refreshing
+    refreshing,
+    tooltipVisible
 });

package.json

@@ -32,7 +32,7 @@
     "react-native-search-bar": "enahum/react-native-search-bar.git",
     "react-native-svg": "5.1.8",
     "react-native-swiper": "1.5.4",
-    "react-native-tooltip": "5.0.0",
+    "react-native-tooltip": "enahum/react-native-tooltip",
     "react-native-vector-icons": "4.1.1",
     "react-redux": "5.0.4",
     "redux": "3.6.0",

yarn.lock

@@ -4571,9 +4571,13 @@ react-native-swiper@1.5.4:
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/react-native-swiper/-/react-native-swiper-1.5.4.tgz#a85535b5374ef8d605a7a720e447ac46816ac448"
 
-react-native-tooltip@5.0.0:
+react-native-tooltip@enahum/react-native-tooltip:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/react-native-tooltip/-/react-native-tooltip-5.0.0.tgz#90477f257081ce168d2a27d2ac29e74759b7a7d6"
+  resolved "https://codeload.github.com/enahum/react-native-tooltip/tar.gz/97d58d19636df8d8df66d6b5737154c9fab727c8"
+
+react-native-tooltip@enahum/react-native-tooltip.git:
+  version "5.0.0"
+  resolved "https://codeload.github.com/enahum/react-native-tooltip/tar.gz/d4b491c7ef1f93cc6c62e5012e36be1087b45b34"
 
 react-native-vector-icons@4.1.1:
   version "4.1.1"