feat: implement show in channel button

Author: isekovanic

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -252,6 +252,7 @@ const useStyles = () => {
         paddingLeft: 16,
         paddingVertical: 12,
         textAlignVertical: 'center', // for android vertical text centering
+        alignSelf: 'center',
       },
     });
   }, [semantics]);

package/src/components/AutoCompleteInput/InputView.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { AutoCompleteInput } from './AutoCompleteInput';
+
+import { CommandChip } from '../MessageInput/CommandChip';
+import { ShowThreadMessageInChannelButton } from '../MessageInput/ShowThreadMessageInChannelButton';
+
+type InputViewProps = React.ComponentProps<typeof AutoCompleteInput>;
+
+export const InputView = (props: InputViewProps) => (
+  <View style={styles.container}>
+    <View style={styles.inputRow}>
+      <CommandChip />
+      <AutoCompleteInput {...props} />
+    </View>
+    <ShowThreadMessageInChannelButton />
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  inputRow: {
+    flexDirection: 'row',
+  },
+});

package/src/components/Channel/Channel.tsx

@@ -190,6 +190,7 @@ import { CooldownTimer as CooldownTimerDefault } from '../MessageInput/component
 import { SendButton as SendButtonDefault } from '../MessageInput/components/OutputButtons/SendButton';
 import { MessageComposerLeadingView as MessageComposerLeadingViewDefault } from '../MessageInput/MessageComposerLeadingView';
 import { MessageComposerTrailingView as MessageComposerTrailingViewDefault } from '../MessageInput/MessageComposerTrailingView';
+import { MessageInputFooterView as MessageInputFooterViewDefault } from '../MessageInput/MessageInputFooterView';
 import { MessageInputHeaderView as MessageInputHeaderViewDefault } from '../MessageInput/MessageInputHeaderView';
 import { MessageInputLeadingView as MessageInputLeadingViewDefault } from '../MessageInput/MessageInputLeadingView';
 import { MessageInputTrailingView as MessageInputTrailingViewDefault } from '../MessageInput/MessageInputTrailingView';
@@ -702,6 +703,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     MessageDeleted = MessageDeletedDefault,
     MessageError = MessageErrorDefault,
     messageInputFloating = false,
+    MessageInputFooterView = MessageInputFooterViewDefault,
     MessageInputHeaderView = MessageInputHeaderViewDefault,
     MessageInputLeadingView = MessageInputLeadingViewDefault,
     MessageInputTrailingView = MessageInputTrailingViewDefault,
@@ -1889,6 +1891,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     MessageComposerTrailingView,
     messageInputFloating,
     messageInputHeightStore,
+    MessageInputFooterView,
     MessageInputHeaderView,
     MessageInputLeadingView,
     MessageInputTrailingView,

package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts

@@ -50,6 +50,7 @@ export const useCreateInputMessageInputContext = ({
   MessageComposerTrailingView,
   messageInputFloating,
   messageInputHeightStore,
+  MessageInputFooterView,
   MessageInputHeaderView,
   MessageInputLeadingView,
   MessageInputTrailingView,
@@ -117,6 +118,7 @@ export const useCreateInputMessageInputContext = ({
       MessageComposerTrailingView,
       messageInputFloating,
       messageInputHeightStore,
+      MessageInputFooterView,
       MessageInputHeaderView,
       MessageInputLeadingView,
       MessageInputTrailingView,

package/src/components/MessageInput/CommandChip.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect } from 'react';
+import { StyleSheet } from 'react-native';
+
+import Animated, { LinearTransition, ZoomIn, ZoomOut } from 'react-native-reanimated';
+
+import { textComposerStateSelector } from './utils/messageComposerSelectors';
+
+import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
+import { useStateStore } from '../../hooks/useStateStore';
+import { primitives } from '../../theme';
+import { GiphyChip } from '../ui/GiphyChip';
+
+export const CommandChip = () => {
+  const messageComposer = useMessageComposer();
+  const { textComposer, attachmentManager } = messageComposer;
+  const { command } = useStateStore(textComposer.state, textComposerStateSelector);
+
+  useEffect(() => {
+    if (attachmentManager.state.getLatestValue().attachments.length > 0) {
+      textComposer.clearCommand();
+    }
+  }, [textComposer, attachmentManager]);
+
+  return command ? (
+    <Animated.View
+      entering={ZoomIn.duration(200)}
+      exiting={ZoomOut.duration(200)}
+      layout={LinearTransition.duration(200)}
+      style={styles.giphyContainer}
+    >
+      <GiphyChip />
+    </Animated.View>
+  ) : null;
+};
+
+const styles = StyleSheet.create({
+  giphyContainer: {
+    padding: primitives.spacingSm,
+    alignSelf: 'flex-end',
+  },
+});

package/src/components/MessageInput/MessageInput.tsx

@@ -54,10 +54,8 @@ import { useStateStore } from '../../hooks/useStateStore';
 import { AudioRecorderManagerState } from '../../state-store/audio-recorder-manager';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
-import {
-  AutoCompleteInput,
-  type TextInputOverrideComponent,
-} from '../AutoCompleteInput/AutoCompleteInput';
+import { type TextInputOverrideComponent } from '../AutoCompleteInput/AutoCompleteInput';
+import { InputView } from '../AutoCompleteInput/InputView';
 import { CreatePoll } from '../Poll/CreatePollContent';
 import { PortalWhileClosingView } from '../UIComponents/PortalWhileClosingView';
 import { SafeAreaViewWrapper } from '../UIComponents/SafeAreaViewWrapper';
@@ -153,7 +151,7 @@ const useStyles = () => {
 };
 
 type MessageInputPropsWithContext = Pick<ChatContextValue, 'isOnline'> &
-  Pick<ChannelContextValue, 'channel' | 'members' | 'threadList' | 'watchers'> &
+  Pick<ChannelContextValue, 'channel' | 'members' | 'watchers'> &
   Pick<
     MessageInputContextValue,
     | 'audioRecorderManager'
@@ -179,10 +177,8 @@ type MessageInputPropsWithContext = Pick<ChatContextValue, 'isOnline'> &
     | 'messageInputFloating'
     | 'messageInputHeightStore'
     | 'MessageInputHeaderView'
-    | 'MessageInputLeadingView'
     | 'MessageInputTrailingView'
     | 'SendButton'
-    | 'ShowThreadMessageInChannelButton'
     | 'StartAudioRecordingButton'
     | 'uploadNewFile'
     | 'openPollCreationDialog'
@@ -228,16 +224,13 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     messageInputFloating,
     messageInputHeightStore,
     MessageInputHeaderView,
-    MessageInputLeadingView,
     MessageInputTrailingView,
     Input,
     inputBoxRef,
     isKeyboardVisible,
     members,
-    threadList,
     sendMessage,
     showPollCreationDialog,
-    ShowThreadMessageInChannelButton,
     TextInputComponent,
     watchers,
     micLocked,
@@ -451,14 +444,10 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                       {!isRecordingStateIdle ? (
                         <AudioRecorder slideToCancelStyle={slideToCancelAnimatedStyle} />
                       ) : (
-                        <>
-                          <MessageInputLeadingView />
-
-                          <AutoCompleteInput
-                            TextInputComponent={TextInputComponent}
-                            {...additionalTextInputProps}
-                          />
-                        </>
+                        <InputView
+                          TextInputComponent={TextInputComponent}
+                          {...additionalTextInputProps}
+                        />
                       )}
 
                       <MessageInputTrailingView />
@@ -467,7 +456,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                 </Animated.View>
               </View>
             )}
-            <ShowThreadMessageInChannelButton threadList={threadList} />
             {!isRecordingStateIdle ? (
               <View
                 style={[
@@ -538,7 +526,6 @@ const areEqual = (
     openPollCreationDialog: prevOpenPollCreationDialog,
     showPollCreationDialog: prevShowPollCreationDialog,
     t: prevT,
-    threadList: prevThreadList,
     micLocked: prevMicLocked,
     isRecordingStateIdle: prevIsRecordingStateIdle,
     recordingStatus: prevRecordingStatus,
@@ -558,7 +545,6 @@ const areEqual = (
     openPollCreationDialog: nextOpenPollCreationDialog,
     showPollCreationDialog: nextShowPollCreationDialog,
     t: nextT,
-    threadList: nextThreadList,
     micLocked: nextMicLocked,
     isRecordingStateIdle: nextIsRecordingStateIdle,
     recordingStatus: nextRecordingStatus,
@@ -627,11 +613,6 @@ const areEqual = (
     return false;
   }
 
-  const threadListEqual = prevThreadList === nextThreadList;
-  if (!threadListEqual) {
-    return false;
-  }
-
   const micLockedEqual = prevMicLocked === nextMicLocked;
   if (!micLockedEqual) {
     return false;
@@ -670,7 +651,7 @@ export const MessageInput = (props: MessageInputProps) => {
   const { isOnline } = useChatContext();
   const ownCapabilities = useOwnCapabilitiesContext();
 
-  const { channel, members, threadList, watchers } = useChannelContext();
+  const { channel, members, watchers } = useChannelContext();
 
   const {
     audioRecorderManager,
@@ -699,14 +680,12 @@ export const MessageInput = (props: MessageInputProps) => {
     messageInputFloating,
     messageInputHeightStore,
     MessageInputHeaderView,
-    MessageInputLeadingView,
     MessageInputTrailingView,
     openPollCreationDialog,
     SendButton,
     sendMessage,
     SendMessageDisallowedIndicator,
     showPollCreationDialog,
-    ShowThreadMessageInChannelButton,
     StartAudioRecordingButton,
     StopMessageStreamingButton,
     uploadNewFile,
@@ -771,19 +750,16 @@ export const MessageInput = (props: MessageInputProps) => {
         messageInputFloating,
         messageInputHeightStore,
         MessageInputHeaderView,
-        MessageInputLeadingView,
         MessageInputTrailingView,
         openPollCreationDialog,
         Reply,
         SendButton,
         sendMessage,
         SendMessageDisallowedIndicator,
         showPollCreationDialog,
-        ShowThreadMessageInChannelButton,
         StartAudioRecordingButton,
         StopMessageStreamingButton,
         t,
-        threadList,
         uploadNewFile,
         watchers,
       }}

package/src/components/MessageInput/MessageInputFooterView.tsx

@@ -0,0 +1,3 @@
+export const MessageInputFooterView = () => {
+  return null;
+};

package/src/components/MessageInput/MessageInputLeadingView.tsx

@@ -1,41 +1 @@
-import React, { useEffect } from 'react';
-import { StyleSheet } from 'react-native';
-
-import Animated, { LinearTransition, ZoomIn, ZoomOut } from 'react-native-reanimated';
-
-import { textComposerStateSelector } from './utils/messageComposerSelectors';
-
-import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
-import { useStateStore } from '../../hooks/useStateStore';
-import { primitives } from '../../theme';
-import { GiphyChip } from '../ui/GiphyChip';
-
-export const MessageInputLeadingView = () => {
-  const messageComposer = useMessageComposer();
-  const { textComposer, attachmentManager } = messageComposer;
-  const { command } = useStateStore(textComposer.state, textComposerStateSelector);
-
-  useEffect(() => {
-    if (attachmentManager.state.getLatestValue().attachments.length > 0) {
-      textComposer.clearCommand();
-    }
-  }, [textComposer, attachmentManager]);
-
-  return command ? (
-    <Animated.View
-      entering={ZoomIn.duration(200)}
-      exiting={ZoomOut.duration(200)}
-      layout={LinearTransition.duration(200)}
-      style={styles.giphyContainer}
-    >
-      <GiphyChip />
-    </Animated.View>
-  ) : null;
-};
-
-const styles = StyleSheet.create({
-  giphyContainer: {
-    padding: primitives.spacingSm,
-    alignSelf: 'flex-end',
-  },
-});
+export const MessageInputLeadingView = () => null;

package/src/components/MessageInput/MessageInputTrailingView.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
+
+import Animated, { LinearTransition } from 'react-native-reanimated';
 
 import { OutputButtons } from './components/OutputButtons';
 
@@ -22,9 +24,12 @@ export const MessageInputTrailingView = () => {
     audioRecorderSelector,
   );
   return (recordingStatus === 'idle' || recordingStatus === 'recording') && !micLocked ? (
-    <View style={[styles.outputButtonsContainer, outputButtonsContainer]}>
+    <Animated.View
+      layout={LinearTransition.duration(200)}
+      style={[styles.outputButtonsContainer, outputButtonsContainer]}
+    >
       <OutputButtons />
-    </View>
+    </Animated.View>
   ) : null;
 };