toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Instantly show autocomplete channels (#2188)

Browse source 
* Instantly show autocomplete channels

* Don't show loading indicator for my channels

* Remove loaders from search
This commit is contained in:
Chris Duarte 2018-11-19 09:55:43 -08:00 committed by Elias Nahum
parent 883de604d8
commit b4d7a23e54
2 changed files with 18 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/components/autocomplete/autocomplete_section_header.js
View file

@ -3,7 +3,7 @@
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {View} from 'react-native';
import {ActivityIndicator, View} from 'react-native';
import FormattedText from 'app/components/formatted_text';
import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
@ -12,11 +12,12 @@ export default class AutocompleteSectionHeader extends PureComponent {
static propTypes = {
defaultMessage: PropTypes.string.isRequired,
id: PropTypes.string.isRequired,
loading: PropTypes.bool,
theme: PropTypes.object.isRequired,
};
render() {
const {defaultMessage, id, theme} = this.props;
const {defaultMessage, id, loading, theme} = this.props;
const style = getStyleFromTheme(theme);
return (
@ -27,6 +28,7 @@ export default class AutocompleteSectionHeader extends PureComponent {
defaultMessage={defaultMessage}
style={style.sectionText}
/>
{loading && <ActivityIndicator size='small'/>}
</View>
</View>
);
@ -37,13 +39,17 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
return {
section: {
justifyContent: 'center',
paddingLeft: 8,
paddingHorizontal: 8,
backgroundColor: changeOpacity(theme.centerChannelColor, 0.1),
borderTopWidth: 1,
borderTopColor: changeOpacity(theme.centerChannelColor, 0.2),
flexDirection: 'row',
},
sectionText: {
fontSize: 12,
color: changeOpacity(theme.centerChannelColor, 0.7),
paddingVertical: 7,
flex: 1,
},
sectionWrapper: {
backgroundColor: theme.centerChannelBg,

19
app/components/autocomplete/channel_mention/channel_mention.js
View file

@ -82,18 +82,14 @@ export default class ChannelMention extends PureComponent {
}
if (matchTerm !== this.props.matchTerm) {
// if the term changed and we haven't made the request do that first
const {currentTeamId} = this.props;
this.runSearch(currentTeamId, matchTerm);
return;
}
if (requestStatus !== RequestStatus.STARTED &&
(myChannels !== this.props.myChannels || otherChannels !== this.props.otherChannels ||
privateChannels !== this.props.privateChannels || publicChannels !== this.props.publicChannels ||
directAndGroupMessages !== this.props.directAndGroupMessages ||
myMembers !== this.props.myMembers || deletedPublicChannels !== this.props.deletedPublicChannels)) {
// if the request is complete and the term is not null we show the autocomplete
if (matchTerm === '' || (myChannels !== this.props.myChannels || otherChannels !== this.props.otherChannels ||
privateChannels !== this.props.privateChannels || publicChannels !== this.props.publicChannels ||
directAndGroupMessages !== this.props.directAndGroupMessages ||
myMembers !== this.props.myMembers || deletedPublicChannels !== this.props.deletedPublicChannels)) {
const sections = [];
if (isSearch) {
if (publicChannels.length) {
@ -102,6 +98,7 @@ export default class ChannelMention extends PureComponent {
defaultMessage: 'Public Channels',
data: publicChannels.filter((cId) => myMembers[cId]),
key: 'publicChannels',
hideLoadingIndicator: true,
});
}
@ -111,6 +108,7 @@ export default class ChannelMention extends PureComponent {
defaultMessage: 'Private Channels',
data: privateChannels,
key: 'privateChannels',
hideLoadingIndicator: true,
});
}
@ -129,10 +127,11 @@ export default class ChannelMention extends PureComponent {
defaultMessage: 'My Channels',
data: myChannels,
key: 'myChannels',
hideLoadingIndicator: true,
});
}
if (otherChannels.length) {
if (otherChannels.length || requestStatus === RequestStatus.STARTED) {
sections.push({
id: t('suggestion.mention.morechannels'),
defaultMessage: 'Other Channels',
@ -145,7 +144,6 @@ export default class ChannelMention extends PureComponent {
this.setState({
sections,
});
this.props.onResultCountChange(sections.reduce((total, section) => total + section.data.length, 0));
}
}
@ -191,6 +189,7 @@ export default class ChannelMention extends PureComponent {
<AutocompleteSectionHeader
id={section.id}
defaultMessage={section.defaultMessage}
loading={!section.hideLoadingIndicator && this.props.requestStatus === RequestStatus.STARTED}
theme={this.props.theme}
/>
);