- Switched to react-navigation's HeaderBackButton
- RoomView header layout
This commit is contained in:
Diego Mello
parent
fa45d9076f
commit
f592fe0b73
|
|
@ -1,85 +1,28 @@
|
|||
import React from 'react';
|
||||
import { Text, View, Platform, TouchableOpacity, TextInput } from 'react-native';
|
||||
import { Text, View, Platform, TouchableOpacity } 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 { HeaderBackButton } from 'react-navigation';
|
||||
|
||||
import Avatar from '../../../containers/Avatar';
|
||||
import RocketChat from '../../../lib/rocketchat';
|
||||
import { STATUS_COLORS } from '../../../constants/colors';
|
||||
import { setSearch } from '../../../actions/rooms';
|
||||
import styles from './styles';
|
||||
|
||||
@connect(state => ({
|
||||
user: state.login.user,
|
||||
baseUrl: state.settings.Site_Url
|
||||
}), dispatch => ({
|
||||
setSearch: searchText => dispatch(setSearch(searchText))
|
||||
}))
|
||||
export default class extends React.Component {
|
||||
static propTypes = {
|
||||
navigation: PropTypes.object.isRequired,
|
||||
user: PropTypes.object.isRequired,
|
||||
baseUrl: PropTypes.string,
|
||||
setSearch: PropTypes.func
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isModalVisible: false,
|
||||
searching: false
|
||||
};
|
||||
}
|
||||
|
||||
onPressModalButton(status) {
|
||||
RocketChat.setUserPresenceDefaultStatus(status);
|
||||
this.hideModal();
|
||||
}
|
||||
|
||||
onSearchChangeText(text) {
|
||||
this.props.setSearch(text.trim());
|
||||
}
|
||||
|
||||
onPressCancelSearchButton() {
|
||||
this.setState({ searching: false });
|
||||
this.props.setSearch('');
|
||||
}
|
||||
|
||||
onPressSearchButton() {
|
||||
this.setState({ searching: true });
|
||||
requestAnimationFrame(() => {
|
||||
this.inputSearch.focus();
|
||||
});
|
||||
}
|
||||
|
||||
showModal() {
|
||||
this.setState({ isModalVisible: true });
|
||||
}
|
||||
|
||||
hideModal() {
|
||||
this.setState({ isModalVisible: false });
|
||||
}
|
||||
|
||||
createChannel() {
|
||||
this.props.navigation.navigate('SelectUsers');
|
||||
baseUrl: PropTypes.string
|
||||
}
|
||||
|
||||
renderLeft() {
|
||||
return (
|
||||
<View style={styles.left}>
|
||||
<TouchableOpacity
|
||||
style={styles.headerButton}
|
||||
onPress={() => this.props.navigation.navigate('DrawerOpen')}
|
||||
>
|
||||
<CachedImage
|
||||
style={styles.serverImage}
|
||||
source={{ uri: encodeURI(`${ this.props.baseUrl }/assets/favicon_32.png`) }}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<HeaderBackButton onPress={() => this.props.navigation.goBack(null)} tintColor='#292E35' />
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -96,62 +39,31 @@ export default class extends React.Component {
|
|||
style={{ marginRight: 5 }}
|
||||
baseUrl={this.props.baseUrl}
|
||||
/>
|
||||
<Text style={styles.title}>{this.props.user.username}</Text>
|
||||
<View style={{ flexDirection: 'column' }}>
|
||||
<Text style={styles.title}>{this.props.user.username}</Text>
|
||||
<Text style={{ fontSize: 10, color: '#888' }}>Online</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
renderRight() {
|
||||
return (
|
||||
<View style={styles.right}>
|
||||
{Platform.OS === 'android' ?
|
||||
<TouchableOpacity
|
||||
style={styles.headerButton}
|
||||
onPress={() => this.onPressSearchButton()}
|
||||
>
|
||||
<Icon
|
||||
name='md-search'
|
||||
color='#292E35'
|
||||
size={24}
|
||||
backgroundColor='transparent'
|
||||
/>
|
||||
</TouchableOpacity> : null}
|
||||
{Platform.OS === 'ios' ?
|
||||
<TouchableOpacity
|
||||
style={styles.headerButton}
|
||||
onPress={() => this.createChannel()}
|
||||
>
|
||||
<Icon
|
||||
name='ios-add'
|
||||
color='#292E35'
|
||||
size={24}
|
||||
backgroundColor='transparent'
|
||||
/>
|
||||
</TouchableOpacity> : null}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
renderModalButton = (status, text) => {
|
||||
const statusStyle = [styles.status, { backgroundColor: STATUS_COLORS[status] }];
|
||||
const textStyle = { flex: 1, fontWeight: this.props.user.status === status ? 'bold' : 'normal' };
|
||||
return (
|
||||
renderRight = () => (
|
||||
<View style={styles.right}>
|
||||
<TouchableOpacity
|
||||
style={styles.modalButton}
|
||||
onPress={() => this.onPressModalButton(status)}
|
||||
style={styles.headerButton}
|
||||
onPress={() => {}}
|
||||
>
|
||||
<View style={statusStyle} />
|
||||
<Text style={textStyle}>
|
||||
{text || status.charAt(0).toUpperCase() + status.slice(1)}
|
||||
</Text>
|
||||
<Icon
|
||||
name={Platform.OS === 'ios' ? 'ios-more' : 'md-more'}
|
||||
color='#292E35'
|
||||
size={24}
|
||||
backgroundColor='transparent'
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
</View>
|
||||
);
|
||||
|
||||
renderHeader() {
|
||||
if (this.state.searching) {
|
||||
return null;
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.header}>
|
||||
{this.renderLeft()}
|
||||
|
|
@ -160,60 +72,4 @@ export default class extends React.Component {
|
|||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
renderSearch() {
|
||||
if (!this.state.searching) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<View style={styles.header}>
|
||||
<View style={styles.left}>
|
||||
<TouchableOpacity
|
||||
style={styles.headerButton}
|
||||
onPress={() => this.onPressCancelSearchButton()}
|
||||
>
|
||||
<Icon
|
||||
name='md-arrow-back'
|
||||
color='#292E35'
|
||||
size={24}
|
||||
backgroundColor='transparent'
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<TextInput
|
||||
ref={inputSearch => this.inputSearch = inputSearch}
|
||||
underlineColorAndroid='transparent'
|
||||
style={styles.inputSearch}
|
||||
onChangeText={text => this.onSearchChangeText(text)}
|
||||
returnKeyType='search'
|
||||
placeholder='Search'
|
||||
clearButtonMode='while-editing'
|
||||
blurOnSubmit
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.header}>
|
||||
{this.renderHeader()}
|
||||
{this.renderSearch()}
|
||||
<Modal
|
||||
isVisible={this.state.isModalVisible}
|
||||
supportedOrientations={['portrait', 'landscape']}
|
||||
style={{ alignItems: 'center' }}
|
||||
onModalHide={() => this.hideModal()}
|
||||
onBackdropPress={() => this.hideModal()}
|
||||
>
|
||||
<View style={styles.modal}>
|
||||
{this.renderModalButton('online')}
|
||||
{this.renderModalButton('busy')}
|
||||
{this.renderModalButton('away')}
|
||||
{this.renderModalButton('offline', 'Invisible')}
|
||||
</View>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
|
|||
import { connect } from 'react-redux';
|
||||
import Modal from 'react-native-modal';
|
||||
import { CachedImage } from 'react-native-img-cache';
|
||||
import { HeaderBackButton } from 'react-navigation';
|
||||
|
||||
import Avatar from '../../../containers/Avatar';
|
||||
import RocketChat from '../../../lib/rocketchat';
|
||||
|
|
@ -168,17 +169,7 @@ export default class extends React.Component {
|
|||
return (
|
||||
<View style={styles.header}>
|
||||
<View style={styles.left}>
|
||||
<TouchableOpacity
|
||||
style={styles.headerButton}
|
||||
onPress={() => this.onPressCancelSearchButton()}
|
||||
>
|
||||
<Icon
|
||||
name='md-arrow-back'
|
||||
color='#292E35'
|
||||
size={24}
|
||||
backgroundColor='transparent'
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
<HeaderBackButton onPress={() => this.onPressCancelSearchButton()} />
|
||||
</View>
|
||||
<TextInput
|
||||
ref={inputSearch => this.inputSearch = inputSearch}
|
||||
|
|
|
|||
Loading…
Reference in New Issue