YH_ToolTips.js
2.57 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
'use strict';
import React, { Component } from 'react';
import {
View,
Text,
Dimensions,
StyleSheet,
} from 'react-native';
export default class YH_ToolTips extends Component {
constructor(props) {
super(props);
}
render (){
if (this.props.isShow) {
return (
<View style={[styles.container,this.props.style]}>
<View style={styles.content}>
{
this.props.actions.map((item,index)=>{
return (
<View
style={index==this.props.actions.length-1 ? styles.textContainer : [styles.textContainer, styles.midLine]}
key={`toolTip${index}`}
>
<Text
style={styles.textStyle}
key={`toolTip${index}`}
onPress={item.onPress}
>
{item.text}
</Text>
</View>
);
})
}
</View>
<View style={styles.arrow}>
</View>
</View>
);
}else {
return <View />;
}
}
}
let {width, height}=Dimensions.get('window');
let styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
width,
height: 54,
flexDirection: 'column',
},
content: {
height: 34,
backgroundColor: "#2a2a2a",
borderRadius: 5,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
},
textContainer: {
height: 20,
justifyContent: 'center',
alignItems: 'center'
},
textStyle: {
paddingLeft: 10,
paddingRight: 10,
color: 'white',
textAlign: 'center',
fontSize: 12,
backgroundColor: 'transparent'
},
midLine: {
borderRightWidth: StyleSheet.hairlineWidth,
borderRightColor: 'white',
},
arrow:{
borderWidth: 9,
borderColor: 'transparent',
width: 0,
height: 0,
borderTopColor: '#2a2a2a',
},
})