stream-chat-react-native-core 3.10.2 → 4.0.0-beta.4

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -9,19 +9,20 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
+
 import BottomSheet, {
   BottomSheetFlatList,
   BottomSheetHandleProps,
   TouchableOpacity,
 } from '@gorhom/bottom-sheet';
 
+import type { AttachmentPickerErrorProps } from './components/AttachmentPickerError';
+
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Asset, getPhotos } from '../../native';
 import { vh, vw } from '../../utils/utils';
 
-import type { AttachmentPickerErrorProps } from './components/AttachmentPickerError';
-
 const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
@@ -344,6 +345,7 @@ export const AttachmentPicker = React.forwardRef(
       <>
         <BottomSheet
           containerHeight={fullScreenHeight}
+          enablePanDownToClose={true}
           handleComponent={
             /**
              * using `null` here instead of `style={{ opacity: photoError ? 0 : 1 }}`

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -1,9 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { StyleSheet, TextInput } from 'react-native';
-import throttle from 'lodash/throttle';
+import { StyleSheet, TextInput, TextInputProps } from 'react-native';
 
-import { CommandsHeader } from './CommandsHeader';
-import { EmojisHeader } from './EmojisHeader';
+import throttle from 'lodash/throttle';
 
 import {
   ChannelContextValue,
@@ -28,10 +26,6 @@ import {
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
-import { isCommandTrigger, isEmojiTrigger, isMentionTrigger } from '../../utils/utils';
-
-import type { TextInputProps } from 'react-native';
-
 import type { Emoji } from '../../emoji-data/compiled';
 import type {
   DefaultAttachmentType,
@@ -43,6 +37,8 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { isCommandTrigger, isEmojiTrigger, isMentionTrigger } from '../../utils/utils';
+
 import type { Trigger } from '../../utils/utils';
 
 const styles = StyleSheet.create({
@@ -90,7 +86,13 @@ type AutoCompleteInputPropsWithContext<
     SuggestionsContextValue<Co, Us>,
     'closeSuggestions' | 'openSuggestions' | 'updateSuggestions'
   > &
-  Pick<TranslationContextValue, 't'>;
+  Pick<TranslationContextValue, 't'> & {
+    /**
+     * This is currently passed in from MessageInput to avoid rerenders
+     * that would happen if we put this in the MessageInputContext
+     */
+    cooldownActive?: boolean;
+  };
 
 export type AutoCompleteInputProps<
   At extends UnknownType = DefaultAttachmentType,
@@ -117,6 +119,7 @@ const AutoCompleteInputWithContext = <
     additionalTextInputProps,
     autoCompleteSuggestionsLimit,
     closeSuggestions,
+    cooldownActive = false,
     giphyActive,
     giphyEnabled,
     maxMessageLength,
@@ -161,15 +164,8 @@ const AutoCompleteInputWithContext = <
     const triggerSetting = triggerSettings[trigger];
     if (triggerSetting) {
       isTrackingStarted.current = true;
-      const { component: Component } = triggerSetting;
-      openSuggestions(
-        typeof Component === 'string' ? Component : <Component />,
-        trigger === ':' ? (
-          <EmojisHeader title='' />
-        ) : trigger === '/' ? (
-          <CommandsHeader />
-        ) : undefined,
-      );
+      const { type } = triggerSetting;
+      openSuggestions(type);
     }
   };
 
@@ -196,6 +192,7 @@ const AutoCompleteInputWithContext = <
               updateSuggestionsContext({
                 data,
                 onSelect: (item) => onSelectSuggestion({ item, trigger }),
+                queryText: query,
               });
             }
           },
@@ -220,6 +217,7 @@ const AutoCompleteInputWithContext = <
             updateSuggestionsContext({
               data,
               onSelect: (item) => onSelectSuggestion({ item, trigger }),
+              queryText: query,
             });
           },
           {
@@ -235,13 +233,11 @@ const AutoCompleteInputWithContext = <
             return;
           }
 
-          updateSuggestionsContext(
-            {
-              data,
-              onSelect: (item) => onSelectSuggestion({ item, trigger }),
-            },
-            <EmojisHeader title={query} />,
-          );
+          updateSuggestionsContext({
+            data,
+            onSelect: (item) => onSelectSuggestion({ item, trigger }),
+            queryText: query,
+          });
         });
       }
     }
@@ -408,6 +404,12 @@ const AutoCompleteInputWithContext = <
     }
   };
 
+  const placeholderText = giphyActive
+    ? t('Search GIFs')
+    : cooldownActive
+    ? t('Slow mode ON')
+    : t('Send a message');
+
   const handleSuggestionsThrottled = throttle(handleSuggestions, 100, {
     leading: false,
   });
@@ -434,7 +436,7 @@ const AutoCompleteInputWithContext = <
         }
       }}
       onSelectionChange={handleSelectionChange}
-      placeholder={giphyActive ? t('Search GIFs') : t('Send a message')}
+      placeholder={placeholderText}
       placeholderTextColor={grey}
       ref={setInputBoxRef}
       style={[
@@ -470,8 +472,18 @@ const areEqual = <
   prevProps: AutoCompleteInputPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
   nextProps: AutoCompleteInputPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
-  const { giphyActive: prevGiphyActive, t: prevT, text: prevText } = prevProps;
-  const { giphyActive: nextGiphyActive, t: nextT, text: nextText } = nextProps;
+  const {
+    cooldownActive: prevCooldownActive,
+    giphyActive: prevGiphyActive,
+    t: prevT,
+    text: prevText,
+  } = prevProps;
+  const {
+    cooldownActive: nextCooldownActive,
+    giphyActive: nextGiphyActive,
+    t: nextT,
+    text: nextText,
+  } = nextProps;
 
   const giphyActiveEqual = prevGiphyActive === nextGiphyActive;
   if (!giphyActiveEqual) return false;
@@ -482,6 +494,9 @@ const areEqual = <
   const textEqual = prevText === nextText;
   if (!textEqual) return false;
 
+  const cooldownActiveEqual = prevCooldownActive === nextCooldownActive;
+  if (!cooldownActiveEqual) return false;
+
   return true;
 };
 

package/src/components/AutoCompleteInput/{CommandsItem.tsx → AutoCompleteSuggestionCommandIcon.tsx}

@@ -1,22 +1,12 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
+import type { SuggestionCommand } from '../../contexts/suggestionsContext/SuggestionsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Flag, GiphyIcon, Imgur, Lightning, Mute, Sound, UserAdd, UserDelete } from '../../icons';
-
-import type { SuggestionCommand } from '../../contexts/suggestionsContext/SuggestionsContext';
 import type { DefaultCommandType } from '../../types/types';
 
 const styles = StyleSheet.create({
-  args: {
-    fontSize: 14,
-  },
-  container: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-  },
   iconContainer: {
     alignItems: 'center',
     borderRadius: 12,
@@ -25,14 +15,9 @@ const styles = StyleSheet.create({
     marginRight: 8,
     width: 24,
   },
-  title: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    paddingRight: 8,
-  },
 });
 
-const Icon = <Co extends string = DefaultCommandType>({
+export const AutoCompleteSuggestionCommandIcon = <Co extends string = DefaultCommandType>({
   name,
 }: {
   name: SuggestionCommand<Co>['name'];
@@ -98,42 +83,3 @@ const Icon = <Co extends string = DefaultCommandType>({
       );
   }
 };
-
-export type CommandsItemProps<Co extends string = DefaultCommandType> = {
-  /**
-   * A CommandResponse of suggested CommandTypes with these properties
-   *
-   * - args: Arguments which can be passed to the command
-   * - name: Name of the command
-   */
-  item: SuggestionCommand<Co>;
-};
-
-export const CommandsItem = <Co extends string = DefaultCommandType>({
-  item: { args, name },
-}: CommandsItemProps<Co>) => {
-  const {
-    theme: {
-      colors: { black, grey },
-      messageInput: {
-        suggestions: {
-          command: { args: argsStyle, container, title },
-        },
-      },
-    },
-  } = useTheme();
-
-  return (
-    <View style={[styles.container, container]}>
-      <Icon name={name} />
-      <Text style={[styles.title, { color: black }, title]} testID='commands-item-title'>
-        {(name || '').replace(/^\w/, (char) => char.toUpperCase())}
-      </Text>
-      <Text style={[styles.args, { color: grey }, argsStyle]} testID='commands-item-args'>
-        {`/${name} ${args}`}
-      </Text>
-    </View>
-  );
-};
-
-CommandsItem.displayName = 'CommandsItem{messageInput{suggestions{command}}}';

package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import type { SuggestionsContextValue } from '../../contexts/suggestionsContext/SuggestionsContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+
+import { Lightning } from '../../icons/Lightning';
+import { Smile } from '../../icons/Smile';
+import type { DefaultCommandType, DefaultUserType, UnknownType } from '../../types/types';
+
+export type AutoCompleteSuggestionHeaderPropsWithContext<
+  Co extends string = DefaultCommandType,
+  Us extends UnknownType = DefaultUserType,
+> = Pick<SuggestionsContextValue<Co, Us>, 'triggerType' | 'queryText'>;
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    padding: 8,
+  },
+  title: {
+    fontSize: 14,
+    paddingLeft: 8,
+  },
+});
+
+const AutoCompleteSuggestionHeaderWithContext = <
+  Co extends string = DefaultCommandType,
+  Us extends DefaultUserType = DefaultUserType,
+>({
+  queryText,
+  triggerType,
+}: AutoCompleteSuggestionHeaderPropsWithContext<Co, Us>) => {
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      colors: { accent_blue, grey },
+      messageInput: {
+        suggestions: {
+          header: { container, title },
+        },
+      },
+    },
+  } = useTheme();
+
+  if (triggerType === 'command') {
+    return (
+      <View style={[styles.container, container]}>
+        <Lightning pathFill={accent_blue} />
+        <Text style={[styles.title, { color: grey }, title]} testID='commands-header-title'>
+          {t('Instant Commands')}
+        </Text>
+      </View>
+    );
+  } else if (triggerType === 'emoji') {
+    return (
+      <View style={[styles.container, container]}>
+        <Smile pathFill={accent_blue} />
+        <Text style={[styles.title, { color: grey }, title]} testID='emojis-header-title'>
+          {t('Emoji matching') + ' "' + queryText + '"'}
+        </Text>
+      </View>
+    );
+  } else if (triggerType === 'mention') {
+    return null;
+  } else {
+    return null;
+  }
+};
+
+const areEqual = <
+  Co extends string = DefaultCommandType,
+  Us extends DefaultUserType = DefaultUserType,
+>(
+  prevProps: AutoCompleteSuggestionHeaderPropsWithContext<Co, Us>,
+  nextProps: AutoCompleteSuggestionHeaderPropsWithContext<Co, Us>,
+) => {
+  const { queryText: prevQueryText, triggerType: prevType } = prevProps;
+  const { queryText: nextQueryText, triggerType: nextType } = nextProps;
+
+  const typeEqual = prevType === nextType;
+  if (!typeEqual) return false;
+
+  const valueEqual = prevQueryText === nextQueryText;
+  if (!valueEqual) return false;
+  return true;
+};
+
+const MemoizedAutoCompleteSuggestionHeader = React.memo(
+  AutoCompleteSuggestionHeaderWithContext,
+  areEqual,
+) as typeof AutoCompleteSuggestionHeaderWithContext;
+
+export type AutoCompleteSuggestionHeaderProps<
+  Co extends string = DefaultCommandType,
+  Us extends DefaultUserType = DefaultUserType,
+> = AutoCompleteSuggestionHeaderPropsWithContext<Co, Us>;
+
+export const AutoCompleteSuggestionHeader = <
+  Co extends string = DefaultCommandType,
+  Us extends DefaultUserType = DefaultUserType,
+>(
+  props: AutoCompleteSuggestionHeaderProps<Co, Us>,
+) => <MemoizedAutoCompleteSuggestionHeader {...props} />;
+
+AutoCompleteSuggestionHeader.displayName =
+  'AutoCompleteSuggestionHeader{messageInput{suggestions{Header}}}';

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { AutoCompleteSuggestionCommandIcon } from './AutoCompleteSuggestionCommandIcon';
+
+import type {
+  Suggestion,
+  SuggestionCommand,
+  SuggestionsContextValue,
+  SuggestionUser,
+} from '../../contexts/suggestionsContext/SuggestionsContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import type { Emoji } from '../../emoji-data/compiled';
+import { AtMentions } from '../../icons/AtMentions';
+import type { DefaultCommandType, DefaultUserType } from '../../types/types';
+import { Avatar } from '../Avatar/Avatar';
+
+export type AutoCompleteSuggestionItemPropsWithContext<
+  Co extends string = DefaultCommandType,
+  Us extends DefaultUserType = DefaultUserType,
+> = Pick<SuggestionsContextValue, 'triggerType'> & {
+  itemProps: Suggestion<Co, Us>;
+};
+
+const styles = StyleSheet.create({
+  args: {
+    fontSize: 14,
+  },
+  column: {
+    flex: 1,
+    justifyContent: 'space-evenly',
+    paddingLeft: 8,
+  },
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  name: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingBottom: 2,
+  },
+  tag: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  text: {
+    fontSize: 14,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingRight: 8,
+  },
+});
+
+const AutoCompleteSuggestionItemWithContext = <
+  Co extends string = DefaultCommandType,
+  Us extends DefaultUserType = DefaultUserType,
+>({
+  itemProps,
+  triggerType,
+}: AutoCompleteSuggestionItemPropsWithContext<Co, Us>) => {
+  const {
+    theme: {
+      colors: { accent_blue, black, grey },
+      messageInput: {
+        suggestions: {
+          command: { args: argsStyle, container: commandContainer, title },
+          emoji: { container: emojiContainer, text },
+          mention: { avatarSize, column, container: mentionContainer, name: nameStyle },
+        },
+      },
+    },
+  } = useTheme();
+
+  if (triggerType === 'mention') {
+    const { id, image, name, online } = itemProps as SuggestionUser<Us>;
+    return (
+      <View style={[styles.container, mentionContainer]}>
+        <Avatar image={image} name={name} online={online} size={avatarSize} />
+        <View style={[styles.column, column]}>
+          <Text style={[styles.name, { color: black }, nameStyle]} testID='mentions-item-name'>
+            {name || id}
+          </Text>
+        </View>
+        <AtMentions pathFill={accent_blue} />
+      </View>
+    );
+  } else if (triggerType === 'emoji') {
+    const { name, unicode } = itemProps as Emoji;
+    return (
+      <View style={[styles.container, emojiContainer]}>
+        <Text style={[styles.text, { color: black }, text]} testID='emojis-item-unicode'>
+          {unicode}
+        </Text>
+        <Text style={[styles.text, { color: black }, text]} testID='emojis-item-name'>
+          {` ${name}`}
+        </Text>
+      </View>
+    );
+  } else if (triggerType === 'command') {
+    const { args, name } = itemProps as SuggestionCommand<Co>;
+    return (
+      <View style={[styles.container, commandContainer]}>
+        <AutoCompleteSuggestionCommandIcon name={name} />
+        <Text style={[styles.title, { color: black }, title]} testID='commands-item-title'>
+          {(name || '').replace(/^\w/, (char) => char.toUpperCase())}
+        </Text>
+        <Text style={[styles.args, { color: grey }, argsStyle]} testID='commands-item-args'>
+          {`/${name} ${args}`}
+        </Text>
+      </View>
+    );
+  } else {
+    return null;
+  }
+};
+
+const areEqual = <
+  Co extends string = DefaultCommandType,
+  Us extends DefaultUserType = DefaultUserType,
+>(
+  prevProps: AutoCompleteSuggestionItemPropsWithContext<Co, Us>,
+  nextProps: AutoCompleteSuggestionItemPropsWithContext<Co, Us>,
+) => {
+  const { itemProps: prevItemProps, triggerType: prevType } = prevProps;
+  const { itemProps: nextItemProps, triggerType: nextType } = nextProps;
+  const itemPropsEqual = prevItemProps === nextItemProps;
+  if (!itemPropsEqual) return false;
+  const typeEqual = prevType === nextType;
+  if (!typeEqual) return false;
+  return true;
+};
+
+const MemoizedAutoCompleteSuggestionItem = React.memo(
+  AutoCompleteSuggestionItemWithContext,
+  areEqual,
+) as typeof AutoCompleteSuggestionItemWithContext;
+
+export type AutoCompleteSuggestionItemProps<
+  Co extends string = DefaultCommandType,
+  Us extends DefaultUserType = DefaultUserType,
+> = AutoCompleteSuggestionItemPropsWithContext<Co, Us>;
+
+export const AutoCompleteSuggestionItem = <
+  Co extends string = DefaultCommandType,
+  Us extends DefaultUserType = DefaultUserType,
+>(
+  props: AutoCompleteSuggestionItemProps<Co, Us>,
+) => <MemoizedAutoCompleteSuggestionItem {...props} />;
+
+AutoCompleteSuggestionItem.displayName =
+  'AutoCompleteSuggestionItem{messageInput{suggestions{Item}}}';