PopupWindow.js
2.51 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import React from 'react'
import Global from '../utils/Global';
import {xnToast} from "../../utils/utils";
import {Dimensions, Image, Modal, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
const {width, height} = Dimensions.get('window');
let mwidth = 180;
let mheight = 220;
const bgColor = Global.titleBackgroundColor;
const top = 50;
let dataArray;
export default class MenuModal extends React.Component {
constructor(props) {
super(props);
this.state = {
isVisible: this.props.show,
}
mwidth = this.props.width;
mheight = this.props.height;
dataArray = this.props.dataArray;
}
componentWillReceiveProps(nextProps) {
this.setState({isVisible: nextProps.show});
}
closeModal() {
this.setState({
isVisible: false
});
this.props.closeModal(false);
}
render() {
var menuItems = [];
var icons = this.props.menuIcons;
var texts = this.props.menuTexts;
for (var i = 0; i < icons.length; i++) {
menuItems.push(
<TouchableOpacity key={i} activeOpacity={0.3} onPress={this.handlePopMenuItemClick} style={styles.itemView}>
<Image style={styles.imgStyle} source={icons[i]}/>
<Text style={styles.textStyle}>{texts[i]}</Text>
</TouchableOpacity>
);
}
return (
<View style={styles.container}>
<Modal
transparent={true}
visible={this.state.isVisible}
animationType={'fade'}
onRequestClose={() => this.closeModal()}>
<TouchableOpacity style={styles.container} onPress={() => this.closeModal()}>
<View style={styles.modal}>
{menuItems}
</View>
</TouchableOpacity>
</Modal>
</View>
)
}
handlePopMenuItemClick = () => {
xnToast('Click menu item');
this.closeModal();
}
}
const styles = StyleSheet.create({
container: {
width: width,
height: height,
},
modal: {
backgroundColor: bgColor,
width: mwidth,
height: mheight,
position: 'absolute',
left: width - mwidth - 10,
top: top,
padding: 5,
justifyContent: 'center',
alignItems: 'center',
},
itemView: {
flexDirection: 'row',
alignItems: 'center',
flex: 1,
width: mwidth,
paddingLeft: 10,
paddingRight: 10,
paddingTop: 8,
paddingBottom: 8,
},
textStyle: {
color: '#fff',
fontSize: 16,
marginLeft: 5,
},
imgStyle: {
width: 32,
height: 32,
marginTop: 5,
marginBottom: 5,
marginLeft: 5,
marginRight: 5,
}
});