mattermost-mobile/app/components/line_divider.js
enahum 81526fbb09 Channel drawer (#154)
* Channel list drawer
* Get channels by category
* Fix and connect websocket
* Fix Select first team using the team members

* create loadMe and fix login actions to loads the teams

* Add android back button handler for the channel drawer

* Channel drawer styling and functionality

* Mark channel as viewed and fixed reset unread counts

* Unread above/below indicators

* Improve performance replacing ScrollView with ListView

* Fix unread indicators

* Addressing review feedback
2017-01-03 19:49:28 -03:00

83 lines
2.3 KiB
JavaScript

// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React from 'react';
import {StyleSheet, View} from 'react-native';
import FormattedText from 'app/components/formatted_text';
const Styles = StyleSheet.create({
dividerLine: {
flex: 1,
height: 1,
backgroundColor: '#b3b3b3'
},
dividerContainer: {
height: 20,
marginLeft: 15,
marginRight: 15
},
dividerText: {
flex: 1,
textAlign: 'center'
}
});
export default class LineDivider extends React.Component {
static propTypes = {
color: React.PropTypes.string.isRequired,
translationId: React.PropTypes.string,
translationText: React.PropTypes.string,
side: React.PropTypes.oneOf(['left', 'right', 'center'])
};
static defaultProps = {
side: 'right'
};
renderLine() {
return (
<View style={[Styles.dividerLine, {backgroundColor: this.props.color}]}/>
);
}
render() {
let renderText;
if (this.props.translationId && this.props.translationText) {
renderText = (
<View style={Styles.dividerContainer}>
<FormattedText
style={[Styles.dividerText, {color: this.props.color}]}
id={this.props.translationId}
defaultMessage={this.props.translationText}
/>
</View>
);
}
let content = (
<View style={{flexDirection: 'row', alignItems: 'center'}}>
{this.renderLine()}
{renderText}
</View>
);
if (this.props.side === 'left') {
content = (
<View style={{flexDirection: 'row', alignItems: 'center'}}>
{renderText}
{this.renderLine()}
</View>
);
} else if (this.props.side === 'center') {
content = (
<View style={{flexDirection: 'row', alignItems: 'center'}}>
{this.renderLine()}
{renderText}
{this.renderLine()}
</View>
);
}
return content;
}
}