stream-chat-react-native-core 4.2.0 → 4.3.0-beta.1

package/src/components/MessageInput/components/InputGiphySearch.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
+import {
+  MessageInputContextValue,
+  useMessageInputContext,
+} from '../../../contexts/messageInputContext/MessageInputContext';
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+
+import { CircleClose, Lightning } from '../../../icons';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import { AutoCompleteInput } from '../../AutoCompleteInput/AutoCompleteInput';
+import { useCountdown } from '../hooks/useCountdown';
+
+const styles = StyleSheet.create({
+  autoCompleteInputContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingLeft: 8,
+    paddingRight: 10,
+  },
+  giphyContainer: {
+    alignItems: 'center',
+    borderRadius: 12,
+    flexDirection: 'row',
+    height: 24,
+    marginRight: 8,
+    paddingHorizontal: 8,
+  },
+  giphyText: {
+    fontSize: 12,
+    fontWeight: 'bold',
+  },
+});
+
+export type InputGiphySearchPropsWithContext<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<
+  MessageInputContextValue<StreamChatGenerics>,
+  'additionalTextInputProps' | 'cooldownEndsAt' | 'setGiphyActive' | 'setShowMoreOptions'
+> &
+  Pick<ChannelContextValue<StreamChatGenerics>, 'disabled'>;
+
+export const InputGiphySearchWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  additionalTextInputProps,
+  cooldownEndsAt,
+  disabled,
+  setGiphyActive,
+  setShowMoreOptions,
+}: InputGiphySearchPropsWithContext<StreamChatGenerics>) => {
+  const { seconds: cooldownRemainingSeconds } = useCountdown(cooldownEndsAt);
+
+  const {
+    theme: {
+      colors: { accent_blue, grey, white },
+      messageInput: {
+        autoCompleteInputContainer,
+        giphyCommandInput: { giphyContainer, giphyText },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <View style={[styles.autoCompleteInputContainer, autoCompleteInputContainer]}>
+      <View style={[styles.giphyContainer, { backgroundColor: accent_blue }, giphyContainer]}>
+        <Lightning height={16} pathFill={white} width={16} />
+        <Text style={[styles.giphyText, { color: white }, giphyText]}>GIPHY</Text>
+      </View>
+
+      <AutoCompleteInput<StreamChatGenerics>
+        additionalTextInputProps={additionalTextInputProps}
+        cooldownActive={!!cooldownRemainingSeconds}
+      />
+      <TouchableOpacity
+        disabled={disabled}
+        onPress={() => {
+          setGiphyActive(false);
+          setShowMoreOptions(true);
+        }}
+        testID='close-button'
+      >
+        <CircleClose height={20} pathFill={grey} width={20} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: InputGiphySearchPropsWithContext<StreamChatGenerics>,
+  nextProps: InputGiphySearchPropsWithContext<StreamChatGenerics>,
+) => {
+  const { disabled: prevDisabled } = prevProps;
+  const { disabled: nextDisabled } = nextProps;
+
+  const disabledEqual = prevDisabled === nextDisabled;
+  if (!disabledEqual) return false;
+
+  return true;
+};
+
+const MemoizedInputGiphySearch = React.memo(
+  InputGiphySearchWithContext,
+  areEqual,
+) as typeof InputGiphySearchWithContext;
+
+export type InputGiphySearchProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<InputGiphySearchPropsWithContext<StreamChatGenerics>>;
+
+export const InputGiphySearch = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: InputGiphySearchProps<StreamChatGenerics>,
+) => {
+  const { additionalTextInputProps, cooldownEndsAt, setGiphyActive, setShowMoreOptions } =
+    useMessageInputContext<StreamChatGenerics>();
+
+  return (
+    <MemoizedInputGiphySearch
+      {...{ additionalTextInputProps, cooldownEndsAt, setGiphyActive, setShowMoreOptions }}
+      {...props}
+    />
+  );
+};
+
+InputGiphySearch.displayName = 'InputGiphySearch{messageInput}';

package/src/components/MessageInput/components/InputReplyStateHeader.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
+import {
+  MessageInputContextValue,
+  useMessageInputContext,
+} from '../../../contexts/messageInputContext/MessageInputContext';
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+
+import { CircleClose, CurveLineLeftUp } from '../../../icons';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+
+const styles = StyleSheet.create({
+  replyBoxHeader: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingBottom: 10,
+  },
+  replyBoxHeaderTitle: {
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+});
+
+export type InputReplyStateHeaderPropsWithContext<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessageInputContextValue<StreamChatGenerics>, 'clearQuotedMessageState' | 'resetInput'> &
+  Pick<ChannelContextValue<StreamChatGenerics>, 'disabled'>;
+
+export const InputReplyStateHeaderWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  clearQuotedMessageState,
+  disabled,
+  resetInput,
+}: InputReplyStateHeaderPropsWithContext<StreamChatGenerics>) => {
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      colors: { black, grey, grey_gainsboro },
+      messageInput: {
+        editingStateHeader: { editingBoxHeader, editingBoxHeaderTitle },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <View style={[styles.replyBoxHeader, editingBoxHeader]}>
+      <CurveLineLeftUp pathFill={grey_gainsboro} />
+      <Text style={[styles.replyBoxHeaderTitle, { color: black }, editingBoxHeaderTitle]}>
+        {t('Reply to Message')}
+      </Text>
+      <TouchableOpacity
+        disabled={disabled}
+        onPress={() => {
+          resetInput();
+          clearQuotedMessageState();
+        }}
+        testID='close-button'
+      >
+        <CircleClose pathFill={grey} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: InputReplyStateHeaderPropsWithContext<StreamChatGenerics>,
+  nextProps: InputReplyStateHeaderPropsWithContext<StreamChatGenerics>,
+) => {
+  const { disabled: prevDisabled } = prevProps;
+  const { disabled: nextDisabled } = nextProps;
+
+  const disabledEqual = prevDisabled === nextDisabled;
+  if (!disabledEqual) return false;
+
+  return true;
+};
+
+const MemoizedInputReplyStateHeader = React.memo(
+  InputReplyStateHeaderWithContext,
+  areEqual,
+) as typeof InputReplyStateHeaderWithContext;
+
+export type InputReplyStateHeaderProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<InputReplyStateHeaderPropsWithContext<StreamChatGenerics>>;
+
+export const InputReplyStateHeader = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: InputReplyStateHeaderProps<StreamChatGenerics>,
+) => {
+  const { clearQuotedMessageState, resetInput } = useMessageInputContext<StreamChatGenerics>();
+
+  return <MemoizedInputReplyStateHeader {...{ clearQuotedMessageState, resetInput }} {...props} />;
+};
+
+InputReplyStateHeader.displayName = 'ReplyStateHeader{messageInput}';

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -22,6 +22,9 @@ import { isEditingBoolean, useMessageDetailsForState } from './hooks/useMessageD
 
 import type { AttachButtonProps } from '../../components/MessageInput/AttachButton';
 import type { CommandsButtonProps } from '../../components/MessageInput/CommandsButton';
+import type { InputEditingStateHeaderProps } from '../../components/MessageInput/components/InputEditingStateHeader';
+import type { InputGiphySearchProps } from '../../components/MessageInput/components/InputGiphySearch';
+import type { InputReplyStateHeaderProps } from '../../components/MessageInput/components/InputReplyStateHeader';
 import type { CooldownTimerProps } from '../../components/MessageInput/CooldownTimer';
 import type { FileUploadPreviewProps } from '../../components/MessageInput/FileUploadPreview';
 import { useCooldown } from '../../components/MessageInput/hooks/useCooldown';
@@ -239,11 +242,13 @@ export type InputMessageInputContextValue<
   CooldownTimer: React.ComponentType<CooldownTimerProps>;
   editing: boolean | MessageType<StreamChatGenerics>;
   editMessage: StreamChat<StreamChatGenerics>['updateMessage'];
+
   /**
    * Custom UI component for FileUploadPreview.
    * Defaults to and accepts same props as: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageInput/FileUploadPreview.tsx
    */
   FileUploadPreview: React.ComponentType<FileUploadPreviewProps<StreamChatGenerics>>;
+
   /** When false, CommandsButton will be hidden */
   hasCommands: boolean;
   /** When false, FileSelectorIcon will be hidden */
@@ -255,6 +260,9 @@ export type InputMessageInputContextValue<
    * Defaults to and accepts same props as: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageInput/ImageUploadPreview.tsx
    */
   ImageUploadPreview: React.ComponentType<ImageUploadPreviewProps<StreamChatGenerics>>;
+  InputEditingStateHeader: React.ComponentType<InputEditingStateHeaderProps<StreamChatGenerics>>;
+  InputGiphySearch: React.ComponentType<InputGiphySearchProps<StreamChatGenerics>>;
+  InputReplyStateHeader: React.ComponentType<InputReplyStateHeaderProps<StreamChatGenerics>>;
   /** Limit on allowed number of files to attach at a time. */
   maxNumberOfFiles: number;
   /**
@@ -341,6 +349,7 @@ export type InputMessageInputContextValue<
     },
     channel: ChannelContextValue<StreamChatGenerics>['channel'],
   ) => Promise<SendFileAPIResponse>;
+
   /** Initial value to set on input */
   initialValue?: string;
   /**

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -36,6 +36,9 @@ export const useCreateMessageInputContext = <
   Input,
   inputBoxRef,
   InputButtons,
+  InputEditingStateHeader,
+  InputGiphySearch,
+  InputReplyStateHeader,
   isValidMessage,
   maxMessageLength,
   maxNumberOfFiles,
@@ -134,6 +137,9 @@ export const useCreateMessageInputContext = <
       Input,
       inputBoxRef,
       InputButtons,
+      InputEditingStateHeader,
+      InputGiphySearch,
+      InputReplyStateHeader,
       isValidMessage,
       maxMessageLength,
       maxNumberOfFiles,

package/src/contexts/overlayContext/OverlayContext.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 
 import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+import type { Attachment } from 'stream-chat';
 
 import type { AttachmentPickerProps } from '../../components/AttachmentPicker/AttachmentPicker';
 import type { ImageGalleryCustomComponents } from '../../components/ImageGallery/ImageGallery';
@@ -52,6 +53,10 @@ export type OverlayProviderProps<
     >
   > &
   Pick<OverlayContextValue, 'translucentStatusBar'> & {
+    /**
+     * The giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values. Uses 'fixed_height' by default
+     * */
+    giphyVersion: keyof NonNullable<Attachment['giphy']>;
     closePicker?: (ref: React.RefObject<BottomSheetMethods>) => void;
     error?: boolean | Error;
     /** https://github.com/GetStream/stream-chat-react-native/wiki/Internationalization-(i18n) */

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -81,6 +81,7 @@ export const OverlayProvider = <
       }
     },
     FileSelectorIcon = DefaultFileSelectorIcon,
+    giphyVersion = 'fixed_height',
     i18nInstance,
     imageGalleryCustomComponents,
     imageGalleryGridHandleHeight,
@@ -222,6 +223,7 @@ export const OverlayProvider = <
                 )}
                 {overlay === 'gallery' && (
                   <ImageGallery<StreamChatGenerics>
+                    giphyVersion={giphyVersion}
                     imageGalleryCustomComponents={imageGalleryCustomComponents}
                     imageGalleryGridHandleHeight={imageGalleryGridHandleHeight}
                     imageGalleryGridSnapPoints={imageGalleryGridSnapPoints}

package/src/contexts/themeContext/utils/theme.ts

@@ -233,6 +233,10 @@ export type Theme = {
     editingBoxContainer: ViewStyle;
     editingBoxHeader: ViewStyle;
     editingBoxHeaderTitle: TextStyle;
+    editingStateHeader: {
+      editingBoxHeader: ViewStyle;
+      editingBoxHeaderTitle: TextStyle;
+    };
     fileUploadPreview: {
       dismiss: ViewStyle;
       fileContainer: ViewStyle;
@@ -242,8 +246,10 @@ export type Theme = {
       fileTextContainer: ViewStyle;
       flatList: ViewStyle;
     };
-    giphyContainer: ViewStyle;
-    giphyText: TextStyle;
+    giphyCommandInput: {
+      giphyContainer: ViewStyle;
+      giphyText: TextStyle;
+    };
     imageUploadPreview: {
       dismiss: ViewStyle;
       flatList: ViewStyle;
@@ -695,6 +701,10 @@ export const defaultTheme: Theme = {
     editingBoxContainer: {},
     editingBoxHeader: {},
     editingBoxHeaderTitle: {},
+    editingStateHeader: {
+      editingBoxHeader: {},
+      editingBoxHeaderTitle: {},
+    },
     fileUploadPreview: {
       dismiss: {},
       fileContainer: {},
@@ -704,8 +714,10 @@ export const defaultTheme: Theme = {
       fileTextContainer: {},
       flatList: {},
     },
-    giphyContainer: {},
-    giphyText: {},
+    giphyCommandInput: {
+      giphyContainer: {},
+      giphyText: {},
+    },
     imageUploadPreview: {
       dismiss: {},
       flatList: {},

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.2.0"
+  "version": "4.3.0-beta.1"
 }