RoomsListView header
This commit is contained in:
parent
a1c2875ff0
commit
1f6bb5da94
app/views/RoomsListView
|
@ -99,51 +99,6 @@ const getItemLayout = (data, index) => ({
|
||||||
const keyExtractor = item => item.rid;
|
const keyExtractor = item => item.rid;
|
||||||
|
|
||||||
class RoomsListView extends React.Component {
|
class RoomsListView extends React.Component {
|
||||||
static navigationOptions = ({ route, navigation }) => {
|
|
||||||
const searching = route.params?.searching;
|
|
||||||
const cancelSearch = route.params?.cancelSearch ?? (() => {});
|
|
||||||
const onPressItem = route.params?.onPressItem ?? (() => {});
|
|
||||||
const initSearching = route.params?.initSearching ?? (() => {});
|
|
||||||
|
|
||||||
return {
|
|
||||||
headerLeft: () => (searching && isAndroid ? (
|
|
||||||
<CustomHeaderButtons left>
|
|
||||||
<Item
|
|
||||||
title='cancel'
|
|
||||||
iconName='cross'
|
|
||||||
onPress={cancelSearch}
|
|
||||||
/>
|
|
||||||
</CustomHeaderButtons>
|
|
||||||
) : (
|
|
||||||
<DrawerButton
|
|
||||||
navigation={navigation}
|
|
||||||
testID='rooms-list-view-sidebar'
|
|
||||||
/>
|
|
||||||
)),
|
|
||||||
headerTitle: () => <RoomsListHeaderView />,
|
|
||||||
headerRight: () => (searching && isAndroid ? null : (
|
|
||||||
<CustomHeaderButtons>
|
|
||||||
{isAndroid ? (
|
|
||||||
<Item
|
|
||||||
title='search'
|
|
||||||
iconName='magnifier'
|
|
||||||
onPress={initSearching}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
<Item
|
|
||||||
title='new'
|
|
||||||
iconName='edit-rounded'
|
|
||||||
onPress={() => navigation.navigate('NewMessageStack', {
|
|
||||||
screen: 'NewMessageView',
|
|
||||||
params: { onPressItem }
|
|
||||||
})}
|
|
||||||
testID='rooms-list-view-create-channel'
|
|
||||||
/>
|
|
||||||
</CustomHeaderButtons>
|
|
||||||
))
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
navigation: PropTypes.object,
|
navigation: PropTypes.object,
|
||||||
user: PropTypes.shape({
|
user: PropTypes.shape({
|
||||||
|
@ -191,15 +146,12 @@ class RoomsListView extends React.Component {
|
||||||
chats: [],
|
chats: [],
|
||||||
width
|
width
|
||||||
};
|
};
|
||||||
|
this.setHeader();
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.getSubscriptions();
|
this.getSubscriptions();
|
||||||
const { navigation, closeServerDropdown } = this.props;
|
const { navigation, closeServerDropdown } = this.props;
|
||||||
navigation.setParams({
|
|
||||||
initSearching: this.initSearching,
|
|
||||||
cancelSearch: this.cancelSearch
|
|
||||||
});
|
|
||||||
if (isTablet) {
|
if (isTablet) {
|
||||||
EventEmitter.addEventListener(KEY_COMMAND, this.handleCommands);
|
EventEmitter.addEventListener(KEY_COMMAND, this.handleCommands);
|
||||||
}
|
}
|
||||||
|
@ -335,6 +287,46 @@ class RoomsListView extends React.Component {
|
||||||
console.countReset(`${ this.constructor.name }.render calls`);
|
console.countReset(`${ this.constructor.name }.render calls`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setHeader = () => {
|
||||||
|
const { searching } = this.state;
|
||||||
|
const { navigation } = this.props;
|
||||||
|
|
||||||
|
navigation.setOptions({
|
||||||
|
headerLeft: () => (searching && isAndroid ? (
|
||||||
|
<CustomHeaderButtons left>
|
||||||
|
<Item
|
||||||
|
title='cancel'
|
||||||
|
iconName='cross'
|
||||||
|
onPress={this.cancelSearch}
|
||||||
|
/>
|
||||||
|
</CustomHeaderButtons>
|
||||||
|
) : (
|
||||||
|
<DrawerButton
|
||||||
|
navigation={navigation}
|
||||||
|
testID='rooms-list-view-sidebar'
|
||||||
|
/>
|
||||||
|
)),
|
||||||
|
headerTitle: () => <RoomsListHeaderView />,
|
||||||
|
headerRight: () => (searching && isAndroid ? null : (
|
||||||
|
<CustomHeaderButtons>
|
||||||
|
{isAndroid ? (
|
||||||
|
<Item
|
||||||
|
title='search'
|
||||||
|
iconName='magnifier'
|
||||||
|
onPress={this.initSearching}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
<Item
|
||||||
|
title='new'
|
||||||
|
iconName='edit-rounded'
|
||||||
|
onPress={() => navigation.navigate('NewMessageStack')}
|
||||||
|
testID='rooms-list-view-create-channel'
|
||||||
|
/>
|
||||||
|
</CustomHeaderButtons>
|
||||||
|
))
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// eslint-disable-next-line react/sort-comp
|
// eslint-disable-next-line react/sort-comp
|
||||||
onDimensionsChange = ({ window: { width } }) => this.setState({ width });
|
onDimensionsChange = ({ window: { width } }) => this.setState({ width });
|
||||||
|
|
||||||
|
@ -450,17 +442,18 @@ class RoomsListView extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
initSearching = () => {
|
initSearching = () => {
|
||||||
const { openSearchHeader, navigation } = this.props;
|
const { openSearchHeader } = this.props;
|
||||||
this.internalSetState({ searching: true });
|
this.internalSetState({ searching: true }, () => {
|
||||||
if (isAndroid) {
|
if (isAndroid) {
|
||||||
navigation.setParams({ searching: true });
|
openSearchHeader();
|
||||||
openSearchHeader();
|
this.setHeader();
|
||||||
}
|
}
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
cancelSearch = () => {
|
cancelSearch = () => {
|
||||||
const { searching } = this.state;
|
const { searching } = this.state;
|
||||||
const { closeSearchHeader, navigation } = this.props;
|
const { closeSearchHeader } = this.props;
|
||||||
|
|
||||||
if (!searching) {
|
if (!searching) {
|
||||||
return;
|
return;
|
||||||
|
@ -470,13 +463,13 @@ class RoomsListView extends React.Component {
|
||||||
this.inputRef.blur();
|
this.inputRef.blur();
|
||||||
this.inputRef.clear();
|
this.inputRef.clear();
|
||||||
}
|
}
|
||||||
if (isAndroid) {
|
|
||||||
navigation.setParams({ searching: false });
|
|
||||||
closeSearchHeader();
|
|
||||||
}
|
|
||||||
Keyboard.dismiss();
|
|
||||||
|
|
||||||
this.setState({ searching: false, search: [] }, () => {
|
this.setState({ searching: false, search: [] }, () => {
|
||||||
|
if (isAndroid) {
|
||||||
|
this.setHeader();
|
||||||
|
closeSearchHeader();
|
||||||
|
}
|
||||||
|
Keyboard.dismiss();
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const offset = isAndroid ? 0 : SCROLL_OFFSET;
|
const offset = isAndroid ? 0 : SCROLL_OFFSET;
|
||||||
if (this.scroll.scrollTo) {
|
if (this.scroll.scrollTo) {
|
||||||
|
|
Loading…
Reference in New Issue