TitleStream: Show action sheet on long-press

Related: #4532
zulip · Apr 6, 2021 · 3910b8f · 3910b8f
1 parent 9d38dc7
commit 3910b8f
Showing 1 changed file with 48 additions and 7 deletions.
diff --git a/src/title/TitleStream.js b/src/title/TitleStream.js
@@ -1,18 +1,44 @@
 /* @flow strict-local */
 
-import React from 'react';
+import React, { useContext } from 'react';
 import { Text, View, TouchableWithoutFeedback } from 'react-native';
+import { useActionSheet } from '@expo/react-native-action-sheet';
 
-import type { Narrow, Stream, Subscription, Dispatch } from '../types';
+import { TranslationContext } from '../boot/TranslationProvider';
+import type {
+  Narrow,
+  Stream,
+  Subscription,
+  Dispatch,
+  Auth,
+  MuteState,
+  User,
+  FlagsState,
+} from '../types';
 import styles, { createStyleSheet } from '../styles';
 import { connect } from '../react-redux';
 import StreamIcon from '../streams/StreamIcon';
 import { isTopicNarrow, topicOfNarrow } from '../utils/narrow';
-import { getStreamInNarrow } from '../selectors';
-import { showToast } from '../utils/info';
+import {
+  getAuth,
+  getMute,
+  getFlags,
+  getSubscriptions,
+  getOwnUser,
+  getStreamInNarrow,
+} from '../selectors';
+import { showHeaderActionSheet } from '../message/messageActionSheet';
+import type { ShowActionSheetWithOptions } from '../message/messageActionSheet';
 
 type SelectorProps = {|
   stream: Subscription | {| ...Stream, in_home_view: boolean |},
+  backgroundData: {|
+    auth: Auth,
+    mute: MuteState,
+    subscriptions: Subscription[],
+    ownUser: User,
+    flags: FlagsState,
+  |},
 |};
 
 type Props = $ReadOnly<{|
@@ -24,6 +50,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 const TitleStream = (props: Props) => {
+  const { narrow, stream, color, dispatch, backgroundData } = props;
   const componentStyles = createStyleSheet({
     outer: {
       flex: 1,
@@ -36,8 +63,9 @@ const TitleStream = (props: Props) => {
       alignItems: 'center',
     },
   });
-
-  const { narrow, stream, color } = props;
+  const showActionSheetWithOptions: ShowActionSheetWithOptions = useActionSheet()
+    .showActionSheetWithOptions;
+  const _ = useContext(TranslationContext);
 
   return (
     <View style={componentStyles.outer}>
@@ -56,7 +84,13 @@ const TitleStream = (props: Props) => {
       {isTopicNarrow(narrow) && (
         <TouchableWithoutFeedback
           onLongPress={() => {
-            showToast(topicOfNarrow(narrow));
+            showHeaderActionSheet({
+              showActionSheetWithOptions,
+              callbacks: { dispatch, _ },
+              backgroundData,
+              stream: stream.name,
+              topic: topicOfNarrow(narrow),
+            });
           }}
         >
           <Text style={[styles.navSubtitle, { color }]} numberOfLines={1} ellipsizeMode="tail">
@@ -70,4 +104,11 @@ const TitleStream = (props: Props) => {
 
 export default connect<SelectorProps, _, _>((state, props) => ({
   stream: getStreamInNarrow(state, props.narrow),
+  backgroundData: {
+    auth: getAuth(state),
+    mute: getMute(state),
+    subscriptions: getSubscriptions(state),
+    ownUser: getOwnUser(state),
+    flags: getFlags(state),
+  },
 }))(TitleStream);