347 lines
11 KiB
JavaScript
347 lines
11 KiB
JavaScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
|
|
import React, {PureComponent} from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import {
|
|
ActivityIndicator,
|
|
Text,
|
|
View,
|
|
} from 'react-native';
|
|
import DeviceInfo from 'react-native-device-info';
|
|
import {intlShape} from 'react-intl';
|
|
import TableView from 'react-native-tableview';
|
|
import Icon from 'react-native-vector-icons/FontAwesome';
|
|
|
|
import {General} from 'mattermost-redux/constants';
|
|
|
|
import SearchBar from 'app/components/search_bar';
|
|
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
|
|
|
|
import {
|
|
getExtensionSortedDirectChannels,
|
|
getExtensionSortedPrivateChannels,
|
|
getExtensionSortedPublicChannels,
|
|
} from 'share_extension/common/selectors';
|
|
|
|
import ExtensionNavBar from './extension_nav_bar';
|
|
|
|
export default class ExtensionChannels extends PureComponent {
|
|
static propTypes = {
|
|
entities: PropTypes.object,
|
|
currentChannelId: PropTypes.string.isRequired,
|
|
navigator: PropTypes.object.isRequired,
|
|
onSelectChannel: PropTypes.func.isRequired,
|
|
teamId: PropTypes.string.isRequired,
|
|
theme: PropTypes.object.isRequired,
|
|
title: PropTypes.string.isRequired,
|
|
};
|
|
|
|
static contextTypes = {
|
|
intl: intlShape,
|
|
};
|
|
|
|
state = {
|
|
sections: null,
|
|
};
|
|
|
|
componentWillMount() {
|
|
this.loadChannels();
|
|
}
|
|
|
|
buildSections = (term = '') => {
|
|
const {publicChannels: pub, privateChannels: priv, directChannels: dms} = this.state;
|
|
const sections = [];
|
|
const publicChannels = this.filterChannels(pub, term);
|
|
const privateChannels = this.filterChannels(priv, term);
|
|
const directChannels = this.filterChannels(dms, term);
|
|
|
|
if (publicChannels.length) {
|
|
sections.push({
|
|
id: 'sidebar.channels',
|
|
defaultMessage: 'PUBLIC CHANNELS',
|
|
data: publicChannels.sort(this.sortDisplayName),
|
|
});
|
|
}
|
|
|
|
if (privateChannels.length) {
|
|
sections.push({
|
|
id: 'sidebar.pg',
|
|
defaultMessage: 'PRIVATE CHANNELS',
|
|
data: privateChannels.sort(this.sortDisplayName),
|
|
});
|
|
}
|
|
|
|
if (directChannels.length) {
|
|
sections.push({
|
|
id: 'sidebar.direct',
|
|
defaultMessage: 'DIRECT MESSAGES',
|
|
data: directChannels.sort(this.sortDisplayName),
|
|
});
|
|
}
|
|
|
|
this.setState({sections});
|
|
};
|
|
|
|
cancelSearch = () => {
|
|
this.setState({term: ''});
|
|
this.buildSections();
|
|
};
|
|
|
|
filterChannels = (channels, term) => {
|
|
return channels.filter((c) => c.display_name.toLowerCase().includes(term.toLocaleLowerCase()) && c.delete_at === 0);
|
|
};
|
|
|
|
goBack = () => {
|
|
this.props.navigator.pop();
|
|
};
|
|
|
|
loadChannels = async () => {
|
|
try {
|
|
const {entities, teamId} = this.props;
|
|
const views = {
|
|
extension: {
|
|
selectedTeamId: teamId,
|
|
},
|
|
};
|
|
const state = {entities, views};
|
|
const publicChannels = getExtensionSortedPublicChannels(state);
|
|
const privateChannels = getExtensionSortedPrivateChannels(state);
|
|
const directChannels = getExtensionSortedDirectChannels(state);
|
|
|
|
const icons = await Promise.all([
|
|
Icon.getImageSource('globe', 16, this.props.theme.centerChannelColor),
|
|
Icon.getImageSource('lock', 16, this.props.theme.centerChannelColor),
|
|
Icon.getImageSource('user', 16, this.props.theme.centerChannelColor),
|
|
Icon.getImageSource('users', 16, this.props.theme.centerChannelColor),
|
|
]);
|
|
|
|
this.publicChannelIcon = icons[0];
|
|
this.privateChannelIcon = icons[1];
|
|
this.dmChannelIcon = icons[2];
|
|
this.gmChannelIcon = icons[3];
|
|
|
|
this.setState({
|
|
publicChannels,
|
|
privateChannels,
|
|
directChannels,
|
|
}, () => {
|
|
this.buildSections();
|
|
});
|
|
} catch (error) {
|
|
this.setState({error});
|
|
}
|
|
};
|
|
|
|
handleSearch = (term) => {
|
|
this.setState({term}, () => {
|
|
if (this.throttleTimeout) {
|
|
clearTimeout(this.throttleTimeout);
|
|
}
|
|
|
|
this.throttleTimeout = setTimeout(() => {
|
|
this.buildSections(term);
|
|
}, 300);
|
|
});
|
|
};
|
|
|
|
handleSelectChannel = (selected) => {
|
|
const {sections} = this.state;
|
|
const section = sections.find((s) => s.id === selected.detail);
|
|
if (section) {
|
|
const channel = section.data.find((c) => c.id === selected.value);
|
|
if (channel) {
|
|
this.props.onSelectChannel(channel);
|
|
this.goBack();
|
|
}
|
|
}
|
|
};
|
|
|
|
renderBody = (styles) => {
|
|
const {theme} = this.props;
|
|
const {error, sections} = this.state;
|
|
|
|
if (error) {
|
|
return (
|
|
<View style={styles.errorContainer}>
|
|
<Text style={styles.error}>
|
|
{error.message}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
if (!sections) {
|
|
return (
|
|
<View style={styles.loadingContainer}>
|
|
<ActivityIndicator/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<TableView
|
|
tableViewStyle={TableView.Consts.Style.Plain}
|
|
tableViewCellStyle={TableView.Consts.CellStyle.Default}
|
|
separatorColor={changeOpacity(theme.centerChannelColor, 0.5)}
|
|
tintColor={theme.linkColor}
|
|
detailFontSize={16}
|
|
detailTextColor={theme.centerChannelColor}
|
|
headerFontSize={15}
|
|
headerTextColor={changeOpacity(theme.centerChannelColor, 0.6)}
|
|
style={styles.flex}
|
|
>
|
|
<TableView.Header>
|
|
<TableView.Cell>{this.renderSearchBar(styles)}</TableView.Cell>
|
|
</TableView.Header>
|
|
{this.renderSections()}
|
|
</TableView>
|
|
);
|
|
};
|
|
|
|
renderSearchBar = (styles) => {
|
|
const {formatMessage} = this.context.intl;
|
|
const {theme} = this.props;
|
|
|
|
return (
|
|
<View style={styles.searchContainer}>
|
|
<SearchBar
|
|
ref='search_bar'
|
|
placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
|
|
cancelTitle={formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
|
|
backgroundColor='transparent'
|
|
inputHeight={33}
|
|
inputStyle={styles.searchBarInput}
|
|
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
|
|
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)}
|
|
tintColorDelete={changeOpacity(theme.centerChannelColor, 0.3)}
|
|
titleCancelColor={theme.linkColor}
|
|
onChangeText={this.handleSearch}
|
|
onCancelButtonPress={this.cancelSearch}
|
|
autoCapitalize='none'
|
|
value={this.state.term}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
renderSections = () => {
|
|
const {formatMessage} = this.context.intl;
|
|
const {currentChannelId} = this.props;
|
|
const {sections} = this.state;
|
|
|
|
return sections.map((s) => {
|
|
const items = s.data.map((c) => {
|
|
let icon;
|
|
switch (c.type) {
|
|
case General.OPEN_CHANNEL:
|
|
icon = this.publicChannelIcon.uri;
|
|
break;
|
|
case General.PRIVATE_CHANNEL:
|
|
icon = this.privateChannelIcon.uri;
|
|
break;
|
|
case General.DM_CHANNEL:
|
|
icon = this.dmChannelIcon.uri;
|
|
break;
|
|
case General.GM_CHANNEL:
|
|
icon = this.gmChannelIcon.uri;
|
|
break;
|
|
}
|
|
|
|
return (
|
|
<TableView.Item
|
|
key={c.id}
|
|
value={c.id}
|
|
detail={s.id}
|
|
selected={c.id === currentChannelId}
|
|
onPress={this.handleSelectChannel}
|
|
image={icon}
|
|
>
|
|
{c.display_name}
|
|
</TableView.Item>
|
|
);
|
|
});
|
|
|
|
return (
|
|
<TableView.Section
|
|
key={s.id}
|
|
label={formatMessage({id: s.id, defaultMessage: s.defaultMessage})}
|
|
headerHeight={30}
|
|
>
|
|
{items}
|
|
</TableView.Section>
|
|
);
|
|
});
|
|
};
|
|
|
|
sortDisplayName = (a, b) => {
|
|
const locale = DeviceInfo.getDeviceLocale().split('-')[0];
|
|
return a.display_name.localeCompare(b.display_name, locale, {numeric: true});
|
|
};
|
|
|
|
render() {
|
|
const {theme, title} = this.props;
|
|
const styles = getStyleSheet(theme);
|
|
|
|
return (
|
|
<View style={styles.flex}>
|
|
<ExtensionNavBar
|
|
backButton={true}
|
|
onLeftButtonPress={this.goBack}
|
|
title={title}
|
|
theme={theme}
|
|
/>
|
|
{this.renderBody(styles)}
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
|
|
return {
|
|
flex: {
|
|
flex: 1,
|
|
},
|
|
separatorContainer: {
|
|
paddingLeft: 35,
|
|
},
|
|
separator: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
|
|
height: 1,
|
|
},
|
|
loadingContainer: {
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
},
|
|
searchContainer: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
|
|
paddingBottom: 2,
|
|
paddingHorizontal: 5,
|
|
},
|
|
searchBarInput: {
|
|
backgroundColor: '#fff',
|
|
color: theme.centerChannelColor,
|
|
fontSize: 15,
|
|
},
|
|
titleContainer: {
|
|
height: 30,
|
|
},
|
|
title: {
|
|
color: changeOpacity(theme.centerChannelColor, 0.6),
|
|
fontSize: 15,
|
|
lineHeight: 30,
|
|
paddingHorizontal: 15,
|
|
},
|
|
errorContainer: {
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
paddingHorizontal: 15,
|
|
},
|
|
error: {
|
|
color: theme.errorTextColor,
|
|
fontSize: 14,
|
|
},
|
|
};
|
|
});
|