TopicItem: Show actionsheet on long-press.

src/ZulipMobile.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { Platform, UIManager } from 'react-native';
 import 'react-native-url-polyfill/auto';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 
 import RootErrorBoundary from './RootErrorBoundary';
 import { BRAND_COLOR } from './styles';
@@ -52,7 +53,9 @@ export default (): React$Node => (
                 <TranslationProvider>
                   <ThemeProvider>
                     <BackNavigationHandler>
-                      <ZulipNavigationContainer />
+                      <ActionSheetProvider>
+                        <ZulipNavigationContainer />
+                      </ActionSheetProvider>
                     </BackNavigationHandler>
                   </ThemeProvider>
                 </TranslationProvider>

src/chat/ChatScreen.js

@@ -2,7 +2,6 @@
 import React from 'react';
 import { View } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
-import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 
 import { useSelector, useDispatch } from '../react-redux';
 import type { RouteProp } from '../react-navigation';
@@ -117,39 +116,37 @@ export default function ChatScreen(props: Props) {
   const streamColor = useSelector(state => getStreamColorForNarrow(state, narrow));
 
   return (
-    <ActionSheetProvider>
-      <View style={[componentStyles.screen, { backgroundColor }]}>
-        <KeyboardAvoider style={styles.flexed} behavior="padding">
-          <ZulipStatusBar backgroundColor={streamColor} />
-          <ChatNavBar narrow={narrow} editMessage={editMessage} />
-          <OfflineNotice />
-          <UnreadNotice narrow={narrow} />
-          {(() => {
-            if (!isNarrowValid) {
-              return <InvalidNarrow narrow={narrow} />;
-            } else if (fetchError !== null) {
-              return <FetchError narrow={narrow} error={fetchError} />;
-            } else if (sayNoMessages) {
-              return <NoMessages narrow={narrow} />;
-            } else {
-              return (
-                <MessageList
-                  narrow={narrow}
-                  showMessagePlaceholders={showMessagePlaceholders}
-                  startEditMessage={setEditMessage}
-                />
-              );
-            }
-          })()}
-          {showComposeBox && (
-            <ComposeBox
-              narrow={narrow}
-              editMessage={editMessage}
-              completeEditMessage={() => setEditMessage(null)}
-            />
-          )}
-        </KeyboardAvoider>
-      </View>
-    </ActionSheetProvider>
+    <View style={[componentStyles.screen, { backgroundColor }]}>
+      <KeyboardAvoider style={styles.flexed} behavior="padding">
+        <ZulipStatusBar backgroundColor={streamColor} />
+        <ChatNavBar narrow={narrow} editMessage={editMessage} />
+        <OfflineNotice />
+        <UnreadNotice narrow={narrow} />
+        {(() => {
+          if (!isNarrowValid) {
+            return <InvalidNarrow narrow={narrow} />;
+          } else if (fetchError !== null) {
+            return <FetchError narrow={narrow} error={fetchError} />;
+          } else if (sayNoMessages) {
+            return <NoMessages narrow={narrow} />;
+          } else {
+            return (
+              <MessageList
+                narrow={narrow}
+                showMessagePlaceholders={showMessagePlaceholders}
+                startEditMessage={setEditMessage}
+              />
+            );
+          }
+        })()}
+        {showComposeBox && (
+          <ComposeBox
+            narrow={narrow}
+            editMessage={editMessage}
+            completeEditMessage={() => setEditMessage(null)}
+          />
+        )}
+      </KeyboardAvoider>
+    </View>
   );
 }

src/lightbox/LightboxScreen.js

@@ -1,7 +1,6 @@
 /* @flow strict-local */
 import React from 'react';
 import { View } from 'react-native';
-import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 
 import type { Message } from '../types';
 import type { RouteProp } from '../react-navigation';
@@ -30,9 +29,7 @@ export default function LightboxScreen(props: Props) {
   return (
     <View style={styles.screen}>
       <ZulipStatusBar hidden backgroundColor="black" />
-      <ActionSheetProvider>
-        <Lightbox src={src} message={message} />
-      </ActionSheetProvider>
+      <Lightbox src={src} message={message} />
     </View>
   );
 }

src/search/SearchMessagesCard.js

@@ -2,7 +2,6 @@
 
 import React, { PureComponent } from 'react';
 import { View } from 'react-native';
-import { ActionSheetProvider } from '@expo/react-native-action-sheet';
 
 import type { Message } from '../types';
 import { createStyleSheet } from '../styles';
@@ -49,17 +48,15 @@ export default class SearchMessagesCard extends PureComponent<Props> {
 
     return (
       <View style={styles.results}>
-        <ActionSheetProvider>
-          <MessageList
-            initialScrollMessageId={messages[0].id}
-            messages={messages}
-            narrow={HOME_NARROW}
-            htmlPieceDescriptorsForShownMessages={htmlPieceDescriptors}
-            fetching={SearchMessagesCard.NOT_FETCHING}
-            showMessagePlaceholders={false}
-            typingUsers={NULL_ARRAY}
-          />
-        </ActionSheetProvider>
+        <MessageList
+          initialScrollMessageId={messages[0].id}
+          messages={messages}
+          narrow={HOME_NARROW}
+          htmlPieceDescriptorsForShownMessages={htmlPieceDescriptors}
+          fetching={SearchMessagesCard.NOT_FETCHING}
+          showMessagePlaceholders={false}
+          typingUsers={NULL_ARRAY}
+        />
       </View>
     );
   }

src/streams/TopicItem.js

@@ -1,10 +1,15 @@
 /* @flow strict-local */
-import React from 'react';
+import React, { useContext } from 'react';
 import { View } from 'react-native';
+import { useActionSheet } from '@expo/react-native-action-sheet';
 
 import styles, { BRAND_COLOR, createStyleSheet } from '../styles';
 import { RawLabel, Touchable, UnreadCount } from '../common';
-import { showToast } from '../utils/info';
+import { showHeaderActionSheet } from '../message/messageActionSheet';
+import type { ShowActionSheetWithOptions } from '../message/messageActionSheet';
+import { TranslationContext } from '../boot/TranslationProvider';
+import { useDispatch, useSelector } from '../react-redux';
+import { getAuth, getMute, getFlags, getSubscriptions, getOwnUser } from '../selectors';
 
 const componentStyles = createStyleSheet({
   selectedRow: {
@@ -22,7 +27,7 @@ const componentStyles = createStyleSheet({
 });
 
 type Props = $ReadOnly<{|
-  stream?: string,
+  stream: string,
   name: string,
   isMuted?: boolean,
   isSelected?: boolean,
@@ -31,17 +36,33 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default function TopicItem(props: Props) {
-  const {
-    name,
-    stream = '',
-    isMuted = false,
-    isSelected = false,
-    unreadCount = 0,
-    onPress,
-  } = props;
+  const { name, stream, isMuted = false, isSelected = false, unreadCount = 0, onPress } = props;
+
+  const showActionSheetWithOptions: ShowActionSheetWithOptions = useActionSheet()
+    .showActionSheetWithOptions;
+  const _ = useContext(TranslationContext);
+  const dispatch = useDispatch();
+  const backgroundData = useSelector(state => ({
+    auth: getAuth(state),
+    mute: getMute(state),
+    subscriptions: getSubscriptions(state),
+    ownUser: getOwnUser(state),
+    flags: getFlags(state),
+  }));
 
   return (
-    <Touchable onPress={() => onPress(stream, name)} onLongPress={() => showToast(name)}>
+    <Touchable
+      onPress={() => onPress(stream, name)}
+      onLongPress={() => {
+        showHeaderActionSheet({
+          showActionSheetWithOptions,
+          callbacks: { dispatch, _ },
+          backgroundData,
+          stream,
+          topic: name,
+        });
+      }}
+    >
       <View
         style={[
           styles.listItem,

src/topics/TopicList.js

@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 import { FlatList } from 'react-native';
 
-import type { TopicExtended } from '../types';
+import type { Stream, TopicExtended } from '../types';
 import { createStyleSheet } from '../styles';
 import TopicItem from '../streams/TopicItem';
 import { LoadingIndicator, SearchEmptyState } from '../common';
@@ -15,13 +15,14 @@ const styles = createStyleSheet({
 });
 
 type Props = $ReadOnly<{|
+  stream: Stream,
   topics: ?(TopicExtended[]),
   onPress: (stream: string, topic: string) => void,
 |}>;
 
 export default class TopicList extends PureComponent<Props> {
   render() {
-    const { topics, onPress } = this.props;
+    const { stream, topics, onPress } = this.props;
 
     if (!topics) {
       return <LoadingIndicator size={40} />;
@@ -40,6 +41,7 @@ export default class TopicList extends PureComponent<Props> {
         renderItem={({ item }) => (
           <TopicItem
             name={item.name}
+            stream={stream.name}
             isMuted={item.isMuted}
             unreadCount={item.unreadCount}
             onPress={onPress}

src/topics/TopicListScreen.js

@@ -48,14 +48,14 @@ class TopicListScreen extends PureComponent<Props, State> {
   handleFilterChange = (filter: string) => this.setState({ filter });
 
   render() {
-    const { topics } = this.props;
+    const { stream, topics } = this.props;
     const { filter } = this.state;
     const filteredTopics =
       topics && topics.filter(topic => topic.name.toLowerCase().includes(filter.toLowerCase()));
 
     return (
       <Screen title="Topics" centerContent search searchBarOnChange={this.handleFilterChange}>
-        <TopicList topics={filteredTopics} onPress={this.handlePress} />
+        <TopicList stream={stream} topics={filteredTopics} onPress={this.handlePress} />
       </Screen>
     );
   }