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
This commit is contained in:
parent
0dd2094cbe
commit
37a6f1f84b
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
@ -65,6 +77,20 @@ export const RawPostJsx = (props) => {
|
|||
source = { { uri: props.data.avatar } } />
|
||||
<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
|
||||
|
|
@ -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,
|
||||
},
|
||||
|
|
@ -209,3 +243,26 @@ const styles = {
|
|||
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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue