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 _handleRightButtonPress = () => {
+    if(onPressRightText){
       const _data = {};
       _data.following = username;
   
       onPressRightText(_data, isFollowing);
+    }
+
   };
 
   return (
@@ -81,6 +86,8 @@ const UserListItem = ({
             </Text>
           </View>
         )}
+
+
         {isHasRightItem &&
           isLoggedIn &&
           (isLoadingRightAction ? (
@@ -88,7 +95,26 @@ const UserListItem = ({
               <ActivityIndicator style={{ width: 30 }} />
             </View>
           ) : (
-            <TouchableOpacity style={styles.rightWrapper} onPress={_handleSubscribeButtonPress}>
+
+            <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 />
                     ) : (
@@ -102,6 +128,22 @@ const UserListItem = ({
                     </>
                   )}
                   </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!"