68 lines
1.8 KiB
JavaScript
68 lines
1.8 KiB
JavaScript
// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
|
|
// See License.txt for license information.
|
|
|
|
import React, {PropTypes, PureComponent} from 'react';
|
|
import {View, Text, TouchableWithoutFeedback, StyleSheet} from 'react-native';
|
|
|
|
export default class Badge extends PureComponent {
|
|
static defaultProps = {
|
|
extraPaddingHorizontal: 10,
|
|
minHeight: 0,
|
|
minWidth: 0,
|
|
onPress: () => true
|
|
};
|
|
|
|
static propTypes = {
|
|
count: PropTypes.number.isRequired,
|
|
extraPaddingHorizontal: PropTypes.number,
|
|
style: View.propTypes.style,
|
|
countStyle: Text.propTypes.style,
|
|
minHeight: PropTypes.number,
|
|
minWidth: PropTypes.number,
|
|
onPress: PropTypes.func
|
|
};
|
|
|
|
renderText = () => {
|
|
const {count} = this.props;
|
|
let text = count.toString();
|
|
if (count < 0) {
|
|
text = '•';
|
|
}
|
|
return (
|
|
<Text
|
|
style={[styles.text, this.props.countStyle]}
|
|
>
|
|
{text}
|
|
</Text>
|
|
);
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<View style={[styles.badge, this.props.style]}>
|
|
<TouchableWithoutFeedback onPress={this.props.onPress}>
|
|
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
|
|
{this.renderText()}
|
|
</View>
|
|
</TouchableWithoutFeedback>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
badge: {
|
|
top: 2,
|
|
padding: 12,
|
|
paddingTop: 3,
|
|
paddingBottom: 3,
|
|
backgroundColor: '#444',
|
|
borderRadius: 20,
|
|
position: 'absolute',
|
|
right: 30
|
|
},
|
|
text: {
|
|
fontSize: 14,
|
|
color: 'white'
|
|
}
|
|
});
|