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
|
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import DeviceInfo from 'react-native-device-info'
import Touchable from './touchable'
import { isMobile } from './browser'
export default class Button extends Component {
render() {
let { buttonStyle, textStyle, ...others } = this.props
let activeOpacity = 0.5
let viewElementStyle = [ styles.button, buttonStyle ]
let textElementStyle = [ styles.text, textStyle ]
if (this.props.disabled) {
viewElementStyle.push( styles.disabledButton )
textElementStyle.push( styles.disabledText )
activeOpacity = 1.0
}
return (
<Touchable {...others} onPress={() => { if (! this.props.disabled) { this.props.onPress() }}}>
<View style={viewElementStyle}>
<Text style={textElementStyle}>
{this.props.label}
</Text>
</View>
</Touchable>
)
}
}
const styles = StyleSheet.create({
text: {
color: '#000',
fontFamily: '"Futura-Medium", sans-serif',
textAlign: 'center',
padding: 0,
},
button: {
padding: isMobile ? 5 : 10,
margin: isMobile ? 5 : 10,
borderRadius: 3,
backgroundColor: '#fff',
borderBottomColor: '#bbb',
borderBottomWidth: 2,
},
disabledButton: {
backgroundColor: '#bbb',
borderBottomColor: '#888',
},
disabledText: {
color: '#333',
},
})
|
