Merge branch 'V8' of github.com:GetStream/stream-chat-react-native into draft-message

Author: khushal87

package/src/components/MessageInput/CommandsButton.tsx

@@ -9,14 +9,10 @@ import { Lightning } from '../../icons/Lightning';
 export type CommandsButtonProps = {
   /** Function that opens commands selector. */
   handleOnPress?: PressableProps['onPress'];
-  /**
-   * Determines if the text input has text
-   */
-  hasText?: boolean;
 };
 
 export const CommandsButton = (props: CommandsButtonProps) => {
-  const { handleOnPress, hasText } = props;
+  const { handleOnPress } = props;
   const messageComposer = useMessageComposer();
   const { textComposer } = messageComposer;
 
@@ -45,10 +41,6 @@ export const CommandsButton = (props: CommandsButtonProps) => {
     },
   } = useTheme();
 
-  if (hasText) {
-    return null;
-  }
-
   return (
     <Pressable onPress={onPressHandler} style={[commandsButton]} testID='commands-button'>
       <Lightning fill={grey} size={32} />

package/src/components/MessageInput/InputButtons.tsx

@@ -76,6 +76,7 @@ export const InputButtonsWithContext = (props: InputButtonsWithContextProps) =>
 
   const hasAttachmentUploadCapabilities =
     (hasCameraPicker || hasFilePicker || hasImagePicker) && ownCapabilitiesUploadFile;
+  const showCommandsButton = hasCommands && !hasText;
 
   if (command) {
     return null;
@@ -96,7 +97,7 @@ export const InputButtonsWithContext = (props: InputButtonsWithContextProps) =>
           <AttachButton />
         </View>
       ) : null}
-      {hasCommands ? <CommandsButton hasText={hasText} /> : null}
+      {showCommandsButton ? <CommandsButton /> : null}
     </>
   );
 };

package/src/components/MessageInput/__tests__/CommandsButton.test.js

@@ -31,19 +31,8 @@ describe('CommandsButton', () => {
     channel = channels[0];
   });
 
-  it('should not render component when hasText is true', async () => {
-    const props = { hasText: true };
-    renderComponent({ channel, client, props });
-
-    const { queryByTestId } = screen;
-
-    await waitFor(() => {
-      expect(queryByTestId('commands-button')).toBeFalsy();
-    });
-  });
-
-  it('should render component when hasText is false', async () => {
-    const props = { hasText: false };
+  it('should render component', async () => {
+    const props = {};
     renderComponent({ channel, client, props });
 
     const { queryByTestId } = screen;
@@ -73,26 +62,4 @@ describe('CommandsButton', () => {
       expect(handleOnPress).toHaveBeenCalled();
     });
   });
-
-  it('should call textComposer handleChange when the button is clicked by default', async () => {
-    const props = {};
-
-    renderComponent({ channel, client, props });
-
-    const { getByTestId, queryByTestId } = screen;
-
-    await waitFor(() => {
-      expect(queryByTestId('commands-button')).toBeTruthy();
-    });
-
-    await act(() => {
-      userEvent.press(getByTestId('commands-button'));
-    });
-
-    await waitFor(() => {
-      expect(channel.messageComposer.textComposer.text).toBe('/');
-      expect(channel.messageComposer.textComposer.selection.start).toBe(1);
-      expect(channel.messageComposer.textComposer.selection.end).toBe(1);
-    });
-  });
 });

package/src/components/MessageInput/__tests__/InputButtons.test.js

@@ -132,6 +132,20 @@ describe('InputButtons', () => {
     });
   });
 
+  it('should not show commands buttons when there is text in the textComposer', async () => {
+    const props = {};
+    const channelProps = {
+      channel,
+    };
+    channel.messageComposer.textComposer.setText('hello');
+    renderComponent({ channelProps, client, props });
+    const { queryByTestId } = screen;
+
+    await waitFor(() => {
+      expect(queryByTestId('commands-button')).toBeFalsy();
+    });
+  });
+
   it('should show more options button when there is text in the textComposer', async () => {
     const props = {};
     const channelProps = {