Merge pull request #1971 from ecency/nt/leaderboard-tooltop

showing tooltip on leaderboard point press

src/components/basicUIElements/view/userListItem/userListItem.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
-import { ActivityIndicator, View, Text, TouchableOpacity } from 'react-native';
+import Popover, { PopoverController } from '@esteemapp/react-native-modal-popover';
+import React, { Fragment } from 'react';
+import { ActivityIndicator, View, Text, TouchableOpacity, Alert } from 'react-native';
 import Highlighter from 'react-native-highlight-words';
 
 import { UserAvatar } from '../../../userAvatar';
@@ -28,12 +29,16 @@ const UserListItem = ({
   isLoadingRightAction = false,
   isLoggedIn,
   searchValue,
+  rightTooltipText,
 }) => {
-  const _handleSubscribeButtonPress = () => {
-    const _data = {};
-    _data.following = username;
+  const _handleRightButtonPress = () => {
+    if(onPressRightText){
+      const _data = {};
+      _data.following = username;
+  
+      onPressRightText(_data, isFollowing);
+    }
 
-    onPressRightText(_data, isFollowing);
   };
 
   return (
@@ -81,6 +86,8 @@ const UserListItem = ({
             </Text>
           </View>
         )}
+
+
         {isHasRightItem &&
           isLoggedIn &&
           (isLoadingRightAction ? (
@@ -88,20 +95,55 @@ const UserListItem = ({
               <ActivityIndicator style={{ width: 30 }} />
             </View>
           ) : (
-            <TouchableOpacity style={styles.rightWrapper} onPress={_handleSubscribeButtonPress}>
-              {isFollowing ? (
-                <Tag value="Unfollow" label={rightText} isPostCardTag={false} disabled />
-              ) : (
-                <>
-                  <Text
-                    style={[styles.value, isBlackRightColor && styles.valueBlack, rightTextStyle]}
-                  >
-                    {rightText}
-                  </Text>
-                  {subRightText && <Text style={styles.text}>{subRightText}</Text>}
-                </>
-              )}
-            </TouchableOpacity>
+
+            <PopoverController>
+                {({
+                  openPopover,
+                  closePopover,
+                  popoverVisible,
+                  setPopoverAnchor,
+                  popoverAnchorRect,
+                }) => (
+                <Fragment>
+                  <TouchableOpacity 
+                    ref={setPopoverAnchor}
+                    style={styles.rightWrapper} 
+                    onPress={() => {
+                      if(rightTooltipText){
+                        openPopover();
+                      }
+                      _handleRightButtonPress()
+                      
+                      }}>
+                    {isFollowing ? (
+                      <Tag value="Unfollow" label={rightText} isPostCardTag={false} disabled />
+                    ) : (
+                    <>
+                      <Text
+                        style={[styles.value, isBlackRightColor && styles.valueBlack, rightTextStyle]}
+                      >
+                        {rightText}
+                      </Text>
+                      {subRightText && <Text style={styles.text}>{subRightText}</Text>}
+                    </>
+                  )}
+                  </TouchableOpacity>
+                  <Popover
+                    contentStyle={styles.popoverDetails}
+                    arrowStyle={styles.arrow}
+                    backgroundStyle={styles.overlay}
+                    visible={popoverVisible}
+                    onClose={closePopover}
+                    fromRect={popoverAnchorRect}
+                    
+                    supportedOrientations={['portrait', 'landscape']}>
+                    <Text>{rightTooltipText}</Text>
+                  </Popover>
+                </Fragment>
+                )}
+            </PopoverController>
+            
+
           ))}
       </View>
     </TouchableOpacity>

src/components/basicUIElements/view/userListItem/userListItemStyles.js

@@ -78,4 +78,22 @@ export default EStyleSheet.create({
   summary: {
     color: '$primaryDarkGray',
   },
+  popoverDetails: {
+    flexDirection: 'row',
+    height: 'auto',
+    borderRadius: 20,
+    paddingHorizontal: 26,
+    width: 200,
+    backgroundColor: '$primaryBackgroundColor',
+  },
+  arrow: {
+    borderTopColor: '$primaryBackgroundColor',
+    marginLeft: 0,
+  },
+  popoverWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
 });

src/components/leaderboard/view/leaderboardView.js

@@ -18,7 +18,7 @@ class LeaderboardView extends PureComponent {
 
   // Component Functions
   _renderItem = ({ item, index }) => {
-    const { handleOnUserPress } = this.props;
+    const { handleOnUserPress, intl } = this.props;
 
     return (
       <UserListItem
@@ -35,6 +35,7 @@ class LeaderboardView extends PureComponent {
         itemIndex={index + 1}
         handleOnPress={() => handleOnUserPress(get(item, '_id'))}
         rightTextStyle={styles.rewardText}
+        rightTooltipText={intl.formatMessage({ id: 'leaderboard.tooltip_earn' })}
       />
     );
   };

src/config/locales/en-US.json

@@ -142,7 +142,8 @@
   "leaderboard": {
     "daily": "DAILY",
     "weekly": "WEEKLY",
-    "monthly": "MONTHLY"
+    "monthly": "MONTHLY",
+    "tooltip_earn": "Earn points by actively participating in Ecency."
   },
   "messages": {
     "comingsoon": "Messages feature is coming soon!"