diff --git a/app/containers/Header.js b/app/containers/Header.js index 4ffa7d9e9..b285d4121 100644 --- a/app/containers/Header.js +++ b/app/containers/Header.js @@ -1,18 +1,8 @@ import React from 'react'; -import { Text, View, StyleSheet, Platform, TouchableOpacity, Dimensions } from 'react-native'; -import Icon from 'react-native-vector-icons/Ionicons'; +import { View, StyleSheet, Platform } from 'react-native'; import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import Modal from 'react-native-modal'; import { SafeAreaView } from 'react-navigation'; -import DrawerMenuButton from '../presentation/DrawerMenuButton'; -import Avatar from './Avatar'; -import RocketChat from '../lib/rocketchat'; -import { STATUS_COLORS } from '../constants/colors'; - -const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56; - let platformContainerStyles; if (Platform.OS === 'ios') { platformContainerStyles = { @@ -32,7 +22,6 @@ if (Platform.OS === 'ios') { } const appBarHeight = Platform.OS === 'ios' ? 44 : 56; -const { width } = Dimensions.get('window'); const styles = StyleSheet.create({ container: { backgroundColor: Platform.OS === 'ios' ? '#F7F7F7' : '#FFF', @@ -41,171 +30,20 @@ const styles = StyleSheet.create({ }, appBar: { flex: 1 - }, - header: { - flexDirection: 'row', - alignItems: 'center', - flex: 1 - }, - titleContainer: { - left: TITLE_OFFSET, - right: TITLE_OFFSET, - position: 'absolute', - alignItems: 'center', - justifyContent: Platform.OS === 'ios' ? 'center' : 'flex-start', - flexDirection: 'row' - }, - status: { - borderRadius: 4, - width: 8, - height: 8, - marginRight: 10 - }, - avatar: { - marginRight: 10 - }, - title: { - fontWeight: 'bold' - }, - left: { - left: 0, - position: 'absolute' - }, - right: { - right: 0, - position: 'absolute' - }, - modal: { - width: width - 60, - height: width - 60, - backgroundColor: '#F7F7F7', - borderRadius: 4, - flexDirection: 'column' - }, - modalButton: { - flex: 1, - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - backgroundColor: 'transparent', - borderBottomWidth: StyleSheet.hairlineWidth, - borderBottomColor: 'rgba(0, 0, 0, .3)', - paddingHorizontal: 20 } }); -@connect(state => ({ - user: state.login.user, - Site_Url: state.settings.Site_Url -})) export default class extends React.PureComponent { static propTypes = { - navigation: PropTypes.object.isRequired, - user: PropTypes.object.isRequired, - Site_Url: PropTypes.string + subview: PropTypes.object.isRequired } - constructor(props) { - super(props); - this.state = { - isModalVisible: false - }; - } - - onPressModalButton(status) { - RocketChat.setUserPresenceDefaultStatus(status); - this.hideModal(); - } - - showModal() { - this.setState({ isModalVisible: true }); - } - - hideModal() { - this.setState({ isModalVisible: false }); - } - - createChannel() { - this.props.navigation.navigate('SelectUsers'); - } - - renderTitle() { - if (!this.props.user.username) { - return null; - } - return ( - this.showModal()}> - - - {this.props.user.username} - - ); - } - - renderRight() { - if (Platform.OS !== 'ios') { - return; - } - return ( - - this.createChannel()} - /> - - ); - } - - renderModalButton = (status, text) => { - const statusStyle = [styles.status, { backgroundColor: STATUS_COLORS[status] }]; - const textStyle = { flex: 1, fontWeight: this.props.user.status === status ? 'bold' : 'normal' }; - return ( - this.onPressModalButton(status)} - > - - - {text || status.charAt(0).toUpperCase() + status.slice(1)} - - - ); - }; - render() { return ( - - - - - {this.renderTitle()} - {this.renderRight()} - + {this.props.subview} - this.hideModal()} - onBackdropPress={() => this.hideModal()} - > - - {this.renderModalButton('online')} - {this.renderModalButton('busy')} - {this.renderModalButton('away')} - {this.renderModalButton('offline', 'Invisible')} - - ); } diff --git a/app/containers/routes/AuthRoutes.js b/app/containers/routes/AuthRoutes.js index 95cbd0a9d..c50ce6c6a 100644 --- a/app/containers/routes/AuthRoutes.js +++ b/app/containers/routes/AuthRoutes.js @@ -1,36 +1,22 @@ -import React from 'react'; import { Platform } from 'react-native'; import { StackNavigator, DrawerNavigator } from 'react-navigation'; import Sidebar from '../../containers/Sidebar'; -import DrawerMenuButton from '../../presentation/DrawerMenuButton'; -import Header from '../../containers/Header'; - import RoomsListView from '../../views/RoomsListView'; import RoomView from '../../views/RoomView'; import CreateChannelView from '../../views/CreateChannelView'; import SelectUsersView from '../../views/SelectUsersView'; -const drawerPosition = 'left'; -const drawerIconPosition = 'headerLeft'; - const AuthRoutes = StackNavigator( { RoomsList: { - screen: RoomsListView, - navigationOptions({ navigation }) { - return { - title: 'Rooms', - header:
- }; - } + screen: RoomsListView }, Room: { screen: RoomView, navigationOptions({ navigation }) { return { title: navigation.state.params.name || navigation.state.params.room.name || 'Room' - // [drawerIconPosition]: ()รท }; } }, @@ -53,18 +39,11 @@ const AuthRoutes = StackNavigator( const Routes = DrawerNavigator( { Home: { - screen: AuthRoutes, - navigationOptions({ navigation }) { - return { - title: 'Rooms', - [drawerIconPosition]: - }; - } + screen: AuthRoutes } }, { contentComponent: Sidebar, - drawerPosition, navigationOptions: { drawerLockMode: Platform.OS === 'ios' ? 'locked-closed' : 'unlocked' } diff --git a/app/presentation/DrawerMenuButton.js b/app/presentation/DrawerMenuButton.js deleted file mode 100644 index c1d743a75..000000000 --- a/app/presentation/DrawerMenuButton.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { TouchableOpacity } from 'react-native'; -import Icon from 'react-native-vector-icons/FontAwesome'; - -const DrawerMenuButton = ({ navigation }) => ( - navigation.navigate('DrawerOpen')} - > - - -); - -DrawerMenuButton.propTypes = { - navigation: PropTypes.object.isRequired -}; - -export default DrawerMenuButton; diff --git a/app/views/RoomsListView/Header.js b/app/views/RoomsListView/Header.js new file mode 100644 index 000000000..5128eae8a --- /dev/null +++ b/app/views/RoomsListView/Header.js @@ -0,0 +1,199 @@ +import React from 'react'; +import { Text, View, StyleSheet, Platform, TouchableOpacity, Dimensions } from 'react-native'; +import Icon from 'react-native-vector-icons/Ionicons'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import Modal from 'react-native-modal'; +import { CachedImage } from 'react-native-img-cache'; + +import Avatar from '../../containers/Avatar'; +import RocketChat from '../../lib/rocketchat'; +import { STATUS_COLORS } from '../../constants/colors'; + +const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56; + +const { width } = Dimensions.get('window'); +const styles = StyleSheet.create({ + header: { + flexDirection: 'row', + alignItems: 'center', + flex: 1 + }, + titleContainer: { + left: TITLE_OFFSET, + right: TITLE_OFFSET, + position: 'absolute', + alignItems: 'center', + justifyContent: Platform.OS === 'ios' ? 'center' : 'flex-start', + flexDirection: 'row' + }, + status: { + borderRadius: 4, + width: 8, + height: 8, + marginRight: 10 + }, + avatar: { + marginRight: 10 + }, + title: { + fontWeight: 'normal' + }, + left: { + left: 0, + position: 'absolute' + }, + right: { + right: 0, + position: 'absolute' + }, + modal: { + width: width - 60, + height: width - 60, + backgroundColor: '#F7F7F7', + borderRadius: 4, + flexDirection: 'column' + }, + modalButton: { + flex: 1, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + backgroundColor: 'transparent', + borderBottomWidth: StyleSheet.hairlineWidth, + borderBottomColor: 'rgba(0, 0, 0, .3)', + paddingHorizontal: 20 + }, + serverImage: { + width: 32, + height: 32, + padding: 10, + marginLeft: 10 + } +}); + +@connect(state => ({ + user: state.login.user, + baseUrl: state.settings.Site_Url +})) +export default class extends React.PureComponent { + static propTypes = { + navigation: PropTypes.object.isRequired, + user: PropTypes.object.isRequired, + baseUrl: PropTypes.string + } + + constructor(props) { + super(props); + this.state = { + isModalVisible: false + }; + } + + onPressModalButton(status) { + RocketChat.setUserPresenceDefaultStatus(status); + this.hideModal(); + } + + showModal() { + this.setState({ isModalVisible: true }); + } + + hideModal() { + this.setState({ isModalVisible: false }); + } + + createChannel() { + this.props.navigation.navigate('SelectUsers'); + } + + renderLeft() { + return ( + + this.props.navigation.navigate('DrawerOpen')} + > + + + + ); + } + + renderTitle() { + if (!this.props.user.username) { + return null; + } + return ( + this.showModal()}> + + + {this.props.user.username} + + ); + } + + renderRight() { + if (Platform.OS !== 'ios') { + return; + } + return ( + + this.createChannel()} + /> + + ); + } + + renderModalButton = (status, text) => { + const statusStyle = [styles.status, { backgroundColor: STATUS_COLORS[status] }]; + const textStyle = { flex: 1, fontWeight: this.props.user.status === status ? 'bold' : 'normal' }; + return ( + this.onPressModalButton(status)} + > + + + {text || status.charAt(0).toUpperCase() + status.slice(1)} + + + ); + }; + + render() { + return ( + + {this.renderLeft()} + {this.renderTitle()} + {this.renderRight()} + this.hideModal()} + onBackdropPress={() => this.hideModal()} + > + + {this.renderModalButton('online')} + {this.renderModalButton('busy')} + {this.renderModalButton('away')} + {this.renderModalButton('offline', 'Invisible')} + + + + ); + } +} diff --git a/app/views/RoomsListView/index.js b/app/views/RoomsListView/index.js index 266079359..c16b756c7 100644 --- a/app/views/RoomsListView/index.js +++ b/app/views/RoomsListView/index.js @@ -12,6 +12,8 @@ import RocketChat from '../../lib/rocketchat'; import RoomItem from '../../presentation/RoomItem'; import Banner from '../../containers/Banner'; import { goRoom } from '../../containers/routes/NavigationService'; +import Header from '../../containers/Header'; +import RoomsListHeader from './Header'; const styles = StyleSheet.create({ container: { @@ -79,6 +81,10 @@ export default class RoomsListView extends React.Component { server: PropTypes.string } + static navigationOptions = ({ navigation }) => ({ + header:
} /> + }); + constructor(props) { super(props);