diff --git a/app/components/sidebars/main/channels_list/list/index.js b/app/components/sidebars/main/channels_list/list/index.js
index d907cb118..82f450b12 100644
--- a/app/components/sidebars/main/channels_list/list/index.js
+++ b/app/components/sidebars/main/channels_list/list/index.js
@@ -62,18 +62,13 @@ function mapStateToProps(state) {
permission: Permissions.JOIN_PUBLIC_CHANNELS,
});
}
+ const canCreatePublicChannels = showCreateOption(state, config, license, currentTeamId, General.OPEN_CHANNEL, isAdmin, isSystemAdmin);
+ const canCreatePrivateChannels = showCreateOption(state, config, license, currentTeamId, General.PRIVATE_CHANNEL, isAdmin, isSystemAdmin);
return {
canJoinPublicChannels,
- canCreatePrivateChannels: showCreateOption(
- state,
- config,
- license,
- currentTeamId,
- General.PRIVATE_CHANNEL,
- isAdmin,
- isSystemAdmin
- ),
+ canCreatePrivateChannels,
+ canCreatePublicChannels,
favoriteChannelIds,
theme: getTheme(state),
unreadChannelIds,
diff --git a/app/components/sidebars/main/channels_list/list/list.js b/app/components/sidebars/main/channels_list/list/list.js
index 11587f56c..5e35c0c4f 100644
--- a/app/components/sidebars/main/channels_list/list/list.js
+++ b/app/components/sidebars/main/channels_list/list/list.js
@@ -5,6 +5,7 @@ import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {
Dimensions,
+ findNodeHandle,
InteractionManager,
Keyboard,
Platform,
@@ -23,6 +24,7 @@ import ChannelItem from 'app/components/sidebars/main/channels_list/channel_item
import {DeviceTypes, ListTypes, ViewTypes} from 'app/constants';
import {SidebarSectionTypes} from 'app/constants/view';
+import BottomSheet from 'app/utils/bottom_sheet';
import {t} from 'app/utils/i18n';
import {preventDoubleTap} from 'app/utils/tap';
import {changeOpacity} from 'app/utils/theme';
@@ -40,6 +42,7 @@ export default class List extends PureComponent {
static propTypes = {
canJoinPublicChannels: PropTypes.bool.isRequired,
canCreatePrivateChannels: PropTypes.bool.isRequired,
+ canCreatePublicChannels: PropTypes.bool.isRequired,
favoriteChannelIds: PropTypes.array.isRequired,
onSelectChannel: PropTypes.func.isRequired,
unreadChannelIds: PropTypes.array.isRequired,
@@ -60,6 +63,8 @@ export default class List extends PureComponent {
constructor(props) {
super(props);
+ this.combinedActionsRef = React.createRef();
+
this.state = {
sections: this.buildSections(props),
showIndicator: false,
@@ -168,72 +173,51 @@ export default class List extends PureComponent {
};
showCreateChannelOptions = () => {
+ const {formatMessage} = this.context.intl;
const {
+ canJoinPublicChannels,
canCreatePrivateChannels,
- actions,
+ canCreatePublicChannels,
} = this.props;
- const items = [];
- const moreChannels = {
- action: this.goToMoreChannels,
- text: {
- id: 'more_channels.title',
- defaultMessage: 'More Channels',
- },
- };
- const createPublicChannel = {
- action: this.goToCreatePublicChannel,
- text: {
- id: 'mobile.create_channel.public',
- defaultMessage: 'New Public Channel',
- },
- };
- const createPrivateChannel = {
- action: this.goToCreatePrivateChannel,
- text: {
- id: 'mobile.create_channel.private',
- defaultMessage: 'New Private Channel',
- },
- };
- const newConversation = {
- action: this.goToDirectMessages,
- text: {
- id: 'mobile.more_dms.title',
- defaultMessage: 'New Conversation',
- },
- };
+ const moreChannelsText = formatMessage({id: 'more_channels.title', defaultMessage: 'More Channels'});
+ const newPublicChannelText = formatMessage({id: 'mobile.create_channel.public', defaultMessage: 'New Public Channel'});
+ const newPrivateChannelText = formatMessage({id: 'mobile.create_channel.private', defaultMessage: 'New Private Channel'});
+ const newDirectChannelText = formatMessage({id: 'mobile.more_dms.title', defaultMessage: 'New Conversation'});
+ const cancelText = formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'});
+ const options = [];
+ const actions = [];
- items.push(moreChannels, createPublicChannel);
- if (canCreatePrivateChannels) {
- items.push(createPrivateChannel);
+ if (canJoinPublicChannels) {
+ actions.push(this.goToMoreChannels);
+ options.push(moreChannelsText);
}
- items.push(newConversation);
- const screen = 'OptionsModal';
- const title = '';
- const passProps = {
- items,
- };
- const options = {
- modalPresentationStyle: 'overCurrentContext',
- layout: {
- backgroundColor: 'transparent',
- },
- topBar: {
- visible: false,
- height: 0,
- },
- animations: {
- showModal: {
- enable: false,
- },
- dismissModal: {
- enable: false,
- },
- },
- };
+ if (canCreatePublicChannels) {
+ actions.push(this.goToCreatePublicChannel);
+ options.push(newPublicChannelText);
+ }
- actions.showModal(screen, title, passProps, options);
+ if (canCreatePrivateChannels) {
+ actions.push(this.goToCreatePrivateChannel);
+ options.push(newPrivateChannelText);
+ }
+
+ actions.push(this.goToDirectMessages);
+ options.push(newDirectChannelText);
+ options.push(cancelText);
+
+ const cancelButtonIndex = options.length - 1;
+
+ BottomSheet.showBottomSheetWithOptions({
+ anchor: this.combinedActionsRef?.current ? findNodeHandle(this.combinedActionsRef.current) : null,
+ options,
+ cancelButtonIndex,
+ }, (value) => {
+ if (value !== cancelButtonIndex) {
+ actions[value]();
+ }
+ });
};
goToCreatePublicChannel = preventDoubleTap(() => {
@@ -307,7 +291,7 @@ export default class List extends PureComponent {
this.setState({width: width - 40});
};
- renderSectionAction = (styles, action) => {
+ renderSectionAction = (styles, action, anchor) => {
const {theme} = this.props;
return (
@@ -355,6 +340,8 @@ export default class List extends PureComponent {
topSeparator,
} = section;
+ const anchor = (id === 'sidebar.types.recent' || id === 'mobile.channel_list.channels');
+
return (
{topSeparator && this.renderSectionSeparator()}
@@ -362,7 +349,7 @@ export default class List extends PureComponent {
{intl.formatMessage({id, defaultMessage}).toUpperCase()}
- {action && this.renderSectionAction(styles, action)}
+ {action && this.renderSectionAction(styles, action, anchor)}
{bottomSeparator && this.renderSectionSeparator()}
diff --git a/app/screens/options_modal/options_modal_list.android.js b/app/screens/options_modal/options_modal_list.android.js
index f41de39a1..2f9edefa3 100644
--- a/app/screens/options_modal/options_modal_list.android.js
+++ b/app/screens/options_modal/options_modal_list.android.js
@@ -37,7 +37,7 @@ export default class OptionsModalList extends PureComponent {
if (typeof action === 'function') {
action();
}
- }, 100);
+ }, 250);
});
renderOptions = () => {