TopicItem: Show actionsheet on long-press.

zulip · Apr 7, 2021 · 0509909 · 0509909
1 parent 8001d4e
commit 0509909
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/src/ZulipMobile.js b/src/ZulipMobile.js
@@ -3,7 +3,6 @@ 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';

diff --git a/src/streams/TopicItem.js b/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: {
@@ -40,8 +45,31 @@ export default function TopicItem(props: Props) {
     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,