Add a context menu for posts

Curiously, the context menu doesn't seem to open when tested in FireFox while live reloading is active; it only works when the page loading has been interrupted. Presumably this won't be an issue when run on a device but something to look into nonetheless as it does kind of throw off debugging
2021-03-01 10:24:20 -04:00 · 2021-03-01 10:24:20 -04:00 · 37a6f1f84b
parent 0dd2094cbe
commit 37a6f1f84b
4 changed files with 126 additions and 37 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -6129,6 +6129,11 @@
      "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz",
      "integrity": "sha512-/VbpIEp8tSNNHIvstuA3Swx610whci1Zpc9mqNkqn14DkMbw+ORviln2u0XyHG1kPvvwTNGZY6QpeFwxYaSdbQ=="
    },
+    "react-native-popup-menu": {
+      "version": "0.15.10",
+      "resolved": "https://registry.npmjs.org/react-native-popup-menu/-/react-native-popup-menu-0.15.10.tgz",
+      "integrity": "sha512-w7MaicsfpclK7g/omjMchNaXwhMi0apt/DC734AbHuJTWCfv5mF3JgL1UzRW19ncFMBRfQeYapPy/zUyJCGgEQ=="
+    },
    "react-native-reanimated": {
      "version": "1.9.0",
      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.9.0.tgz",
--- a/package.json
+++ b/package.json
@ -9,21 +9,22 @@
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.10",
+    "@react-navigation/core": "5.2.3",
    "@react-navigation/native": "5.1.1",
+    "@react-navigation/stack": "5.2.3",
    "expo": "^38.0.9",
    "expo-status-bar": "^1.0.2",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
    "react-native-gesture-handler": "~1.6.0",
+    "react-native-popup-menu": "^0.15.10",
    "react-native-reanimated": "~1.9.0",
    "react-native-safe-area-context": "~3.0.7",
    "react-native-screens": "~2.9.0",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.4.0",
-    "react-navigation-stack": "^2.8.2",
-    "@react-navigation/stack": "5.2.3",
-    "@react-navigation/core": "5.2.3"
+    "react-navigation-stack": "^2.8.2"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
--- a/src/components/navigation/navigators.js
+++ b/src/components/navigation/navigators.js
@ -1,43 +1,69 @@
 import React from "react";
 import { View } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
+
+import { MenuProvider } from "react-native-popup-menu";
+
 import BackBarJsx from "./back-bar";
 import TrayJsx from "src/components/navigation/tray";

+// Provider for context menus
+// Allows for establishing global styling of context menus
+const ContextJsx = (props) => {
+    return (
+        <MenuProvider customStyles = { providerStyles }>
+            { props.children }
+        </MenuProvider>
+    );
+};
+
 export const ScreenWithTrayJsx = (props) => {
    return (
-        <View style = { { flex: 1 } }>
-            <ScrollView>
-                { props.children }
+        <ContextJsx>
+            <View style = { { flex: 1 } }>
+                <ScrollView>
+                    { props.children }
            </ScrollView>
            <TrayJsx
-                active = { props.active }
-                navigation = { props.navigation } />
-        </View>
-    )
+                    active = { props.active }
+                    navigation = { props.navigation } />
+            </View>
+        </ContextJsx>
+    );
 };

 export const ScreenWithBackBarJsx = (props) => {
    return (
-        <View style = { { flex: 1 } }>
-            <BackBarJsx navigation = { props.navigation } />
-            <ScrollView>
-                { props.children }
-            </ScrollView>
-        </View>
+        <ContextJsx>
+            <View style = { { flex: 1 } }>
+                <BackBarJsx navigation = { props.navigation } />
+                <ScrollView>
+                    { props.children }
+                </ScrollView>
+            </View>
+        </ContextJsx>
    );
 };

 export const ScreenWithFullNavigationJsx = (props) => {
    return (
-        <View style = { { flex: 1 } }>
-            <BackBarJsx navigation = { props.navigation } />
-            <ScrollView>
-                { props.children }
-            </ScrollView>
-            <TrayJsx
-                active = { props.active }
-                navigation = { props.navigation } />
-        </View>
+        <ContextJsx>
+            <View style = { { flex: 1 } }>
+                <BackBarJsx navigation = { props.navigation } />
+                <ScrollView>
+                    { props.children }
+                </ScrollView>
+                <TrayJsx
+                    active = { props.active }
+                    navigation = { props.navigation } />
+            </View>
+        </ContextJsx>
    );
-}
+};
+
+const providerStyles = {
+    backdrop: {
+        backgroundColor: "black",
+        opacity: 0.5
+    }
+}
--- a/src/components/posts/post.js
+++ b/src/components/posts/post.js
@ -1,11 +1,23 @@
 import React, { useEffect, useState } from "react";
-import { Image, View, Text, Dimensions } from "react-native";
+import { Image, View, Text, Dimensions, TouchableWithoutFeedback } from "react-native";
+
+import {
+    Menu,
+    MenuOptions,
+    MenuOption,
+    MenuTrigger,
+    renderers
+} from "react-native-popup-menu";

 import PostActionBarJsx from "src/components/posts/post-action-bar";

 const SCREEN_WIDTH = Dimensions.get("window").width;
 const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";

+// Extract the SlideInMenu function from `renderers`
+// This will be used in RawPostJsx
+const { SlideInMenu } = renderers;
+
 function getAutoHeight(w1, h1, w2) {
    /*
    Given the original dimensions and the new width, calculate what would
@ -60,21 +72,35 @@ export const RawPostJsx = (props) => {
    return (
        <View>
            <View style = { styles.postHeader }>
-                <Image 
+                <Image
                    style = { styles.pfp }
                    source = { { uri: props.data.avatar } } />
-                <Text 
+                <Text
                    style = { styles.postHeaderName }>{ props.data.username }</Text>
+                <View style = { styles.menu }>
+                    <Menu renderer = { SlideInMenu }>
+                        <MenuTrigger>
+                            <Image
+                                source = { require("assets/eva-icons/ellipsis.png") }
+                                style = { styles.ellipsis }/>
+                        </MenuTrigger>
+                        <MenuOptions customStyles = { optionsStyles }>
+                            <MenuOption text="Hide" />
+                            <MenuOption text="Unfollow" />
+                            <MenuOption text="Block" />
+                        </MenuOptions>
+                    </Menu>
+                </View>
            </View>
            { /* TODO: support for more than one image per post */ }
            <Image
-                source = { { uri: TEST_IMAGE/* props.data.media_attachments[0] */ } } 
+                source = { { uri: TEST_IMAGE/* props.data.media_attachments[0] */ } }
                style = { {
                    flex: 1,
                    width: SCREEN_WIDTH,
                    height: getAutoHeight(props.width, props.height, SCREEN_WIDTH)
                } } />
-            <PostActionBarJsx 
+            <PostActionBarJsx
                favourited = { props.data.favourited }
                reblogged = {props.data.reblogged } />
            <View style = { styles.caption }>
@ -108,7 +134,7 @@ export const PostByDataJsx = (props) => {
            setState({
                width: SCREEN_WIDTH,
                height: newHeight,
-                loaded: true 
+                loaded: true
            });
        });
    });
@ -145,7 +171,7 @@ export const PostByIdJsx = (props) => {
        ((/* This would be the data retrieved */) => {
            Image.getSize(TEST_IMAGE, (width, height) => {
                const newHeight = getAutoHeight(width, height, SCREEN_WIDTH)
-    
+
                setState({
                    avatar: TEST_IMAGE,
                    username: "njms",
@ -156,7 +182,7 @@ export const PostByIdJsx = (props) => {
                    timestamp: 1596745156000,
                    width: SCREEN_WIDTH,
                    height: newHeight,
-                    loaded: true 
+                    loaded: true
                });
            });
        })();
@ -164,8 +190,8 @@ export const PostByIdJsx = (props) => {

    return (
        <View>
-            { state.loaded ? 
-                <RawPostJsx 
+            { state.loaded ?
+                <RawPostJsx
                    data = { state }
                    width = { state.width }
                    height = { state.height } />
@ -190,12 +216,20 @@ const styles = {
        fontWeight: "bold",
        marginTop: -2
    },
+    menu: {
+        marginLeft: "auto",
+        marginRight: SCREEN_WIDTH / 30
+    },
    pfp: {
        width: SCREEN_WIDTH / 10,
        height: SCREEN_WIDTH / 10,
        marginRight: SCREEN_WIDTH / 28,
        borderRadius: "100%"
    },
+    ellipsis: {
+        width: SCREEN_WIDTH / 15,
+        height: SCREEN_WIDTH / 15
+    },
    photo: {
        flex: 1,
    },
@ -208,4 +242,27 @@ const styles = {
        color: "#666",
        paddingTop: 10
    }
-};
+};
+
+// customStyles for react-native-popup-menu should be defined in particular
+// objects to be interpreted correctly.
+
+//const menuStyles = {
+//    menuProviderWrapper
+//}
+
+const optionsStyles = {
+    optionWrapper: { // The wrapper around a single option
+        paddingLeft: SCREEN_WIDTH / 15,
+        paddingTop: SCREEN_WIDTH / 30,
+        paddingBottom: SCREEN_WIDTH / 30
+    },
+    optionsWrapper: { // The wrapper around all options
+        marginTop: SCREEN_WIDTH / 20,
+        marginBottom: SCREEN_WIDTH / 20,
+    },
+    optionsContainer: { // The Animated.View
+        borderTopLeftRadius: 10,
+        borderTopRightRadius: 10
+    }
+}