[MM-9626 & MM-9627] iOS share fixes (#1446)

* MM-9627 Fix keyboard dismissal when searching for channels

* MM-9626 Use TableView for team listing

share_extension/ios/extension_channels.js

@@ -95,12 +95,15 @@ export default class ExtensionChannels extends PureComponent {
         this.setState({sections});
     };
 
+    cancelSearch = () => {
+        this.setState({term: ''});
+        this.buildSections();
+    };
+
     goBack = () => {
         this.props.navigator.pop();
     };
 
-    keyExtractor = (item) => item.id;
-
     loadChannels = async () => {
         try {
             const {entities, teamId} = this.props;
@@ -191,9 +194,9 @@ export default class ExtensionChannels extends PureComponent {
                 headerTextColor={changeOpacity(theme.centerChannelColor, 0.6)}
                 style={styles.flex}
             >
-                <TableView.Section>
+                <TableView.Header>
                     <TableView.Cell>{this.renderSearchBar(styles)}</TableView.Cell>
-                </TableView.Section>
+                </TableView.Header>
                 {this.renderSections()}
             </TableView>
         );
@@ -217,6 +220,7 @@ export default class ExtensionChannels extends PureComponent {
                     tintColorDelete={changeOpacity(theme.centerChannelColor, 0.3)}
                     titleCancelColor={theme.linkColor}
                     onChangeText={this.handleSearch}
+                    onCancelButtonPress={this.cancelSearch}
                     value={this.state.term}
                 />
             </View>
@@ -314,7 +318,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         },
         searchContainer: {
             backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
-            paddingBottom: 2
+            paddingBottom: 2,
+            paddingHorizontal: 5
         },
         searchBarInput: {
             backgroundColor: '#fff',

share_extension/ios/extension_post.js

@@ -513,7 +513,7 @@ export default class ExtensionPost extends PureComponent {
     };
 
     selectTeam = (team, channel) => {
-        this.setState({channel, team});
+        this.setState({channel, team, error: null});
 
         // Update the channels for the team
         Client4.getMyChannels(team.id).then((channels) => {
@@ -523,7 +523,18 @@ export default class ExtensionPost extends PureComponent {
                 this.setState({channel: defaultChannel});
             }
         }).catch((error) => {
-            this.setState({error});
+            const {entities} = this.props;
+            if (entities.channels.channelsInTeam[team.id]) {
+                const townSquare = Object.values(entities.channels.channels).find((c) => {
+                    return c.name === General.DEFAULT_CHANNEL && c.team_id === team.id;
+                });
+
+                if (!channel) {
+                    this.setState({channel: townSquare});
+                }
+            } else {
+                this.setState({error});
+            }
         });
     };
 

share_extension/ios/extension_team_item.js

@@ -8,7 +8,6 @@ import {
     TouchableHighlight,
     View
 } from 'react-native';
-import IonIcon from 'react-native-vector-icons/Ionicons';
 
 import {wrapWithPreventDoubleTap} from 'app/utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
@@ -34,18 +33,6 @@ export default class TeamsListItem extends React.PureComponent {
         } = this.props;
         const styles = getStyleSheet(theme);
 
-        let current;
-        if (team.id === currentTeamId) {
-            current = (
-                <View style={styles.checkmarkContainer}>
-                    <IonIcon
-                        name='md-checkmark'
-                        style={styles.checkmark}
-                    />
-                </View>
-            );
-        }
-
         const icon = (
             <View style={styles.iconContainer}>
                 <Text style={styles.icon}>
@@ -54,10 +41,18 @@ export default class TeamsListItem extends React.PureComponent {
             </View>
         );
 
+        const wrapperStyle = [styles.wrapper];
+        if (team.id === currentTeamId) {
+            wrapperStyle.push({
+                width: '90%'
+            });
+        }
+
         return (
             <TouchableHighlight
                 underlayColor={changeOpacity(theme.sidebarTextHoverBg, 0.5)}
                 onPress={this.onPress}
+                style={styles.wrapper}
             >
                 <View style={styles.container}>
                     <View style={styles.item}>
@@ -69,7 +64,6 @@ export default class TeamsListItem extends React.PureComponent {
                         >
                             {team.display_name}
                         </Text>
-                        {current}
                     </View>
                 </View>
             </TouchableHighlight>
@@ -79,6 +73,10 @@ export default class TeamsListItem extends React.PureComponent {
 
 const getStyleSheet = makeStyleSheetFromTheme((theme) => {
     return {
+        wrapper: {
+            height: 45,
+            width: '100%'
+        },
         container: {
             flex: 1,
             flexDirection: 'row',

share_extension/ios/extension_teams.js

@@ -3,9 +3,10 @@
 
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {ActivityIndicator, FlatList, Text, View} from 'react-native';
+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 {General} from 'mattermost-redux/constants';
 import {getChannelsInTeam} from 'mattermost-redux/selectors/entities/channels';
@@ -49,8 +50,6 @@ export default class ExtensionTeams extends PureComponent {
         this.goBack();
     };
 
-    keyExtractor = (item) => item.id;
-
     loadTeams = async () => {
         try {
             const defaultChannels = {};
@@ -85,6 +84,7 @@ export default class ExtensionTeams extends PureComponent {
     };
 
     renderBody = (styles) => {
+        const {theme} = this.props;
         const {error, myTeams} = this.state;
 
         if (error) {
@@ -106,43 +106,44 @@ export default class ExtensionTeams extends PureComponent {
         }
 
         return (
-            <FlatList
-                data={myTeams}
-                ItemSeparatorComponent={this.renderItemSeparator}
-                renderItem={this.renderItem}
-                keyExtractor={this.keyExtractor}
-                keyboardShouldPersistTaps='always'
-                keyboardDismissMode='on-drag'
-                initialNumToRender={10}
-                maxToRenderPerBatch={10}
-                scrollEventThrottle={100}
-                windowSize={5}
-            />
+            <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.Section>
+                    {this.renderItems(myTeams)}
+                </TableView.Section>
+            </TableView>
         );
     };
 
-    renderItem = ({item}) => {
+    renderItems = (myTeams) => {
         const {currentTeamId, theme} = this.props;
 
-        return (
-            <ExtensionTeamItem
-                currentTeamId={currentTeamId}
-                onSelectTeam={this.handleSelectTeam}
-                team={item}
-                theme={theme}
-            />
-        );
-    };
-
-    renderItemSeparator = () => {
-        const {theme} = this.props;
-        const styles = getStyleSheet(theme);
-
-        return (
-            <View style={styles.separatorContainer}>
-                <View style={styles.separator}/>
-            </View>
-        );
+        return myTeams.map((team) => {
+            return (
+                <TableView.Cell
+                    key={team.id}
+                    selected={team.id === currentTeamId}
+                >
+                    <View>
+                        <ExtensionTeamItem
+                            currentTeamId={currentTeamId}
+                            onSelectTeam={this.handleSelectTeam}
+                            team={team}
+                            theme={theme}
+                        />
+                    </View>
+                </TableView.Cell>
+            );
+        });
     };
 
     sortDisplayName = (a, b) => {