|
|
'use strict'
|
|
|
|
|
|
import React, {Component} from 'react';
|
|
|
|
|
|
import {
|
|
|
View,
|
|
|
Text,
|
|
|
TouchableWithoutFeedback,
|
|
|
StyleSheet,
|
|
|
} from 'react-native';
|
|
|
|
|
|
export default class Button extends Component {
|
|
|
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
|
|
|
this.state = {
|
|
|
helighted: false,
|
|
|
}
|
|
|
|
|
|
this._onPress = this._onPress.bind(this);
|
|
|
this._onPressIn = this._onPressIn.bind(this);
|
|
|
this._onPressOut = this._onPressOut.bind(this);
|
|
|
this._helightedTextStyle = this._helightedTextStyle.bind(this);
|
|
|
this._selectedTextStyle = this._selectedTextStyle.bind(this);
|
|
|
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
|
|
|
return (
|
|
|
<TouchableWithoutFeedback
|
|
|
onPress={()=>{this._onPress()}}
|
|
|
onPressIn={()=>{this._onPressIn()}}
|
|
|
onPressOut={()=>{this._onPressOut()}} >
|
|
|
<View style={this.props.containerStyle || styles.container} >
|
|
|
<Text style={[this._selectedTextStyle(), this._helightedTextStyle()]} >
|
|
|
{this.props.title}
|
|
|
</Text>
|
|
|
</View>
|
|
|
</TouchableWithoutFeedback>
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
_helightedTextStyle() {
|
|
|
if(this.state.helighted) {
|
|
|
if(this.props.helightedTitleStyle) {
|
|
|
return this.props.helightedTitleStyle;
|
|
|
}
|
|
|
|
|
|
if(this.props.selected) {
|
|
|
return this.props.normalTitleStyle || styles.titleNormal;
|
|
|
} else {
|
|
|
return this.props.selectedTitleStyle || styles.titleSelected;
|
|
|
}
|
|
|
} else {
|
|
|
return this._selectedTextStyle();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
_selectedTextStyle() {
|
|
|
if(this.props.selected) {
|
|
|
return this.props.selectedTitleStyle || styles.titleSelected;
|
|
|
} else {
|
|
|
return this.props.normalTitleStyle || styles.titleNormal;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
_onPressIn() {
|
|
|
this.setState({
|
|
|
helighted: !this.state.helighted,
|
|
|
});
|
|
|
}
|
|
|
|
|
|
_onPressOut() {
|
|
|
this.setState({
|
|
|
helighted: !this.state.helighted,
|
|
|
});
|
|
|
}
|
|
|
|
|
|
_onPress() {
|
|
|
|
|
|
if(!this.props.onPress) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
this.props.onPress();
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
Button.propTypes = {
|
|
|
title: React.PropTypes.string,
|
|
|
selected: React.PropTypes.bool,
|
|
|
onPress: React.PropTypes.func,
|
|
|
selectedTitleStyle: React.PropTypes.any,
|
|
|
normalTitleStyle: React.PropTypes.any,
|
|
|
helightedTitleStyle: React.PropTypes.any,
|
|
|
containerStyle: React.PropTypes.any,
|
|
|
};
|
|
|
|
|
|
let styles = StyleSheet.create({
|
|
|
container: {
|
|
|
width: 44,
|
|
|
flex: 1,
|
|
|
justifyContent: 'center',
|
|
|
alignItems: 'center',
|
|
|
},
|
|
|
titleHelighted: {
|
|
|
color: 'black',
|
|
|
fontSize: 15,
|
|
|
},
|
|
|
titleNormal: {
|
|
|
color: '#b0b0b0',
|
|
|
fontSize: 15,
|
|
|
},
|
|
|
titleSelected: {
|
|
|
color: 'black',
|
|
|
fontSize: 15,
|
|
|
},
|
|
|
}); |
...
|
...
|
|