react-native-gifted-chat 3.3.0 → 3.3.3

package/src/Bubble/index.tsx

@@ -1,407 +0,0 @@
-import React, { useCallback, useMemo } from 'react'
-import {
-  View,
-  Pressable,
-} from 'react-native'
-
-import { Text } from 'react-native-gesture-handler'
-
-import { MessageReply } from '../components/MessageReply'
-import { useChatContext } from '../GiftedChatContext'
-import { MessageAudio } from '../MessageAudio'
-import { MessageImage } from '../MessageImage'
-import { MessageText } from '../MessageText'
-import { MessageVideo } from '../MessageVideo'
-import { IMessage } from '../Models'
-import { QuickReplies } from '../QuickReplies'
-import { getStyleWithPosition } from '../styles'
-import { Time } from '../Time'
-import { isSameUser, isSameDay, renderComponentOrElement } from '../utils'
-import styles from './styles'
-import { BubbleProps, RenderMessageTextProps } from './types'
-
-export * from './types'
-
-export const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessage>): React.ReactElement => {
-  const {
-    currentMessage,
-    nextMessage,
-    position,
-    containerToNextStyle,
-    previousMessage,
-    containerToPreviousStyle,
-    onQuickReply,
-    renderQuickReplySend,
-    quickReplyStyle,
-    quickReplyTextStyle,
-    quickReplyContainerStyle,
-    containerStyle,
-    wrapperStyle,
-    bottomContainerStyle,
-    onPressMessage: onPressMessageProp,
-    onLongPressMessage: onLongPressMessageProp,
-  } = props
-
-  const context = useChatContext()
-
-  const onPress = useCallback(() => {
-    onPressMessageProp?.(context, currentMessage)
-  }, [onPressMessageProp, context, currentMessage])
-
-  const onLongPress = useCallback(() => {
-    onLongPressMessageProp?.(context, currentMessage)
-  }, [
-    currentMessage,
-    context,
-    onLongPressMessageProp,
-  ])
-
-  const styledBubbleToNext = useMemo(() => {
-    if (
-      currentMessage &&
-      nextMessage &&
-      position &&
-      isSameUser(currentMessage, nextMessage) &&
-      isSameDay(currentMessage, nextMessage)
-    )
-      return [
-        getStyleWithPosition(styles, 'containerToNext', position),
-        containerToNextStyle?.[position],
-      ]
-
-    return null
-  }, [
-    currentMessage,
-    nextMessage,
-    position,
-    containerToNextStyle,
-  ])
-
-  const styledBubbleToPrevious = useMemo(() => {
-    if (
-      currentMessage &&
-      previousMessage &&
-      position &&
-      isSameUser(currentMessage, previousMessage) &&
-      isSameDay(currentMessage, previousMessage)
-    )
-      return [
-        getStyleWithPosition(styles, 'containerToPrevious', position),
-        containerToPreviousStyle?.[position],
-      ]
-
-    return null
-  }, [
-    currentMessage,
-    previousMessage,
-    position,
-    containerToPreviousStyle,
-  ])
-
-  const renderQuickReplies = useCallback(() => {
-    if (currentMessage?.quickReplies) {
-      const {
-        /* eslint-disable @typescript-eslint/no-unused-vars */
-        containerStyle,
-        wrapperStyle,
-        /* eslint-enable @typescript-eslint/no-unused-vars */
-        ...quickReplyProps
-      } = props
-
-      if (props.renderQuickReplies)
-        return renderComponentOrElement(props.renderQuickReplies, quickReplyProps)
-
-      return (
-        <QuickReplies
-          currentMessage={currentMessage}
-          onQuickReply={onQuickReply}
-          renderQuickReplySend={renderQuickReplySend}
-          quickReplyStyle={quickReplyStyle}
-          quickReplyTextStyle={quickReplyTextStyle}
-          quickReplyContainerStyle={quickReplyContainerStyle}
-          nextMessage={nextMessage}
-        />
-      )
-    }
-
-    return null
-  }, [
-    currentMessage,
-    onQuickReply,
-    renderQuickReplySend,
-    quickReplyStyle,
-    quickReplyTextStyle,
-    quickReplyContainerStyle,
-    nextMessage,
-    props,
-  ])
-
-  const renderMessageText = useCallback(() => {
-    if (currentMessage?.text) {
-      const {
-        /* eslint-disable @typescript-eslint/no-unused-vars */
-        containerStyle,
-        wrapperStyle,
-        messageTextProps,
-        /* eslint-enable @typescript-eslint/no-unused-vars */
-        ...messageTextPropsRest
-      } = props
-
-      const combinedProps = {
-        ...messageTextPropsRest,
-        ...messageTextProps,
-      } as RenderMessageTextProps<TMessage>
-
-      if (props.renderMessageText)
-        return renderComponentOrElement(props.renderMessageText, combinedProps)
-
-      return <MessageText {...combinedProps as any} />
-    }
-
-    return null
-  }, [props, currentMessage])
-
-  const renderMessageImage = useCallback(() => {
-    if (currentMessage?.image) {
-      const {
-        /* eslint-disable @typescript-eslint/no-unused-vars */
-        containerStyle,
-        wrapperStyle,
-        /* eslint-enable @typescript-eslint/no-unused-vars */
-        ...messageImageProps
-      } = props
-
-      if (props.renderMessageImage)
-        return renderComponentOrElement(props.renderMessageImage, messageImageProps)
-
-      return <MessageImage {...messageImageProps} />
-    }
-
-    return null
-  }, [props, currentMessage])
-
-  const renderMessageVideo = useCallback(() => {
-    if (!currentMessage?.video)
-      return null
-
-    const {
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      containerStyle,
-      wrapperStyle,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
-      ...messageVideoProps
-    } = props
-
-    if (props.renderMessageVideo)
-      return renderComponentOrElement(props.renderMessageVideo, messageVideoProps)
-
-    return <MessageVideo />
-  }, [props, currentMessage])
-
-  const renderMessageAudio = useCallback(() => {
-    if (!currentMessage?.audio)
-      return null
-
-    const {
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      containerStyle,
-      wrapperStyle,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
-      ...messageAudioProps
-    } = props
-
-    if (props.renderMessageAudio)
-      return renderComponentOrElement(props.renderMessageAudio, messageAudioProps)
-
-    return <MessageAudio />
-  }, [props, currentMessage])
-
-  const renderTicks = useCallback(() => {
-    const {
-      renderTicks,
-      user,
-    } = props
-
-    if (renderTicks && currentMessage)
-      return renderComponentOrElement(renderTicks, currentMessage)
-
-    if (
-      user &&
-      currentMessage?.user &&
-      currentMessage.user._id !== user._id
-    )
-      return null
-
-    if (
-      currentMessage &&
-      (currentMessage.sent || currentMessage.received || currentMessage.pending)
-    )
-      return (
-        <View style={styles.messageStatusContainer}>
-          {!!currentMessage.sent && (
-            <Text style={[styles.messageStatus, props.tickStyle]}>
-              {'✓'}
-            </Text>
-          )}
-          {!!currentMessage.received && (
-            <Text style={[styles.messageStatus, props.tickStyle]}>
-              {'✓'}
-            </Text>
-          )}
-          {!!currentMessage.pending && (
-            <Text style={[styles.messageStatus, props.tickStyle]}>
-              {'🕓'}
-            </Text>
-          )}
-        </View>
-      )
-
-    return null
-  }, [
-    props,
-    currentMessage,
-  ])
-
-  const renderTime = useCallback(() => {
-    if (currentMessage?.createdAt) {
-      const {
-        /* eslint-disable @typescript-eslint/no-unused-vars */
-        containerStyle,
-        wrapperStyle,
-        textStyle,
-        /* eslint-enable @typescript-eslint/no-unused-vars */
-        ...timeProps
-      } = props
-
-      if (props.renderTime)
-        return renderComponentOrElement(props.renderTime, timeProps)
-
-      return <Time {...timeProps} />
-    }
-
-    return null
-  }, [props, currentMessage])
-
-  const renderUsername = useCallback(() => {
-    const {
-      user,
-      renderUsername,
-    } = props
-
-    if (props.isUsernameVisible && currentMessage) {
-      if (user && currentMessage.user._id === user._id)
-        return null
-
-      if (renderUsername)
-        return renderComponentOrElement(renderUsername, currentMessage.user)
-
-      return (
-        <View style={styles.usernameContainer}>
-          <Text
-            style={[styles.username, props.usernameStyle]}
-          >
-            {currentMessage.user.name}
-          </Text>
-        </View>
-      )
-    }
-
-    return null
-  }, [
-    currentMessage,
-    props,
-  ])
-
-  const renderCustomView = useCallback(() => {
-    if (props.renderCustomView)
-      return renderComponentOrElement(props.renderCustomView, props)
-
-    return null
-  }, [props])
-
-  const renderMessageReply = useCallback(() => {
-    if (!currentMessage?.replyMessage)
-      return null
-
-    const { messageReply } = props
-
-    const messageReplyProps = {
-      replyMessage: currentMessage.replyMessage,
-      currentMessage,
-      position,
-      onPress: messageReply?.onPress,
-      containerStyle: position === 'left'
-        ? messageReply?.containerStyleLeft ?? messageReply?.containerStyle
-        : messageReply?.containerStyleRight ?? messageReply?.containerStyle,
-      textStyle: position === 'left'
-        ? messageReply?.textStyleLeft ?? messageReply?.textStyle
-        : messageReply?.textStyleRight ?? messageReply?.textStyle,
-      imageStyle: messageReply?.imageStyle,
-    }
-
-    if (messageReply?.renderMessageReply)
-      return renderComponentOrElement(messageReply.renderMessageReply, messageReplyProps)
-
-    return <MessageReply {...messageReplyProps} />
-  }, [
-    props,
-    currentMessage,
-    position,
-  ])
-
-  const renderBubbleContent = useCallback(() => {
-    return (
-      <>
-        {!props.isCustomViewBottom && renderCustomView()}
-        {renderMessageReply()}
-        {renderMessageImage()}
-        {renderMessageVideo()}
-        {renderMessageAudio()}
-        {renderMessageText()}
-        {props.isCustomViewBottom && renderCustomView()}
-      </>
-    )
-  }, [
-    renderMessageReply,
-    renderCustomView,
-    renderMessageImage,
-    renderMessageVideo,
-    renderMessageAudio,
-    renderMessageText,
-    props.isCustomViewBottom,
-  ])
-
-  return (
-    <View style={containerStyle?.[position]}>
-      <View
-        style={[
-          getStyleWithPosition(styles, 'wrapper', position),
-          styledBubbleToNext,
-          styledBubbleToPrevious,
-          wrapperStyle?.[position],
-        ]}
-      >
-        <Pressable
-          onPress={onPress}
-          onLongPress={onLongPress}
-          {...props.touchableProps}
-        >
-          {renderBubbleContent()}
-          <View
-            style={[
-              styles.bottom,
-              bottomContainerStyle?.[position],
-            ]}
-          >
-            {renderUsername()}
-            <View style={styles.messageTimeAndStatusContainer}>
-              {renderTime()}
-              {renderTicks()}
-            </View>
-          </View>
-        </Pressable>
-      </View>
-      {renderQuickReplies()}
-    </View>
-  )
-}

package/src/Bubble/styles.ts

@@ -1,66 +0,0 @@
-import { StyleSheet } from 'react-native'
-import { Color } from '../Color'
-
-const styles = StyleSheet.create({
-  wrapper: {
-    borderRadius: 15,
-    minHeight: 20,
-  },
-  wrapper_left: {
-    backgroundColor: Color.leftBubbleBackground,
-    justifyContent: 'flex-end',
-  },
-  wrapper_right: {
-    backgroundColor: Color.defaultBlue,
-    justifyContent: 'flex-end',
-  },
-
-  bottom: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'flex-end',
-    paddingHorizontal: 10,
-    paddingBottom: 5,
-  },
-
-  containerToNext_left: {
-    borderBottomLeftRadius: 3,
-  },
-  containerToNext_right: {
-    borderBottomRightRadius: 3,
-  },
-
-  containerToPrevious_left: {
-    borderTopLeftRadius: 3,
-  },
-  containerToPrevious_right: {
-    borderTopRightRadius: 3,
-  },
-
-  messageTimeAndStatusContainer: {
-    flexGrow: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-  },
-
-  messageStatusContainer: {
-    flexDirection: 'row',
-    marginLeft: 5,
-  },
-  messageStatus: {
-    fontSize: 10,
-    color: Color.white,
-  },
-
-  usernameContainer: {
-    flexDirection: 'row',
-    marginRight: 5,
-  },
-  username: {
-    fontSize: 12,
-    color: '#aaa',
-  },
-})
-
-export default styles

package/src/Bubble/types.ts

@@ -1,104 +0,0 @@
-import React, { ComponentProps } from 'react'
-import {
-  StyleProp,
-  ViewStyle,
-  TextStyle,
-  Pressable,
-} from 'react-native'
-
-import { MessageReplyProps } from '../components/MessageReply'
-import { MessageImageProps } from '../MessageImage'
-import { MessageTextProps } from '../MessageText'
-import {
-  User,
-  IMessage,
-  LeftRightStyle,
-  Reply,
-  ReplyMessage,
-  Omit,
-  MessageVideoProps,
-  MessageAudioProps,
-} from '../Models'
-import { QuickRepliesProps } from '../QuickReplies'
-import { MessageReplyStyleProps } from '../Reply'
-import { TimeProps } from '../Time'
-
-
-export type RenderMessageImageProps<TMessage extends IMessage> = Omit<
-  BubbleProps<TMessage>,
-  'containerStyle' | 'wrapperStyle'
-> &
-  MessageImageProps<TMessage>
-
-export type RenderMessageVideoProps<TMessage extends IMessage> = Omit<
-  BubbleProps<TMessage>,
-  'containerStyle' | 'wrapperStyle'
-> &
-  MessageVideoProps<TMessage>
-
-export type RenderMessageAudioProps<TMessage extends IMessage> = Omit<
-  BubbleProps<TMessage>,
-  'containerStyle' | 'wrapperStyle'
-> &
-  MessageAudioProps<TMessage>
-
-export type RenderMessageTextProps<TMessage extends IMessage> = Omit<
-  BubbleProps<TMessage>,
-  'containerStyle' | 'wrapperStyle'
-> &
-  MessageTextProps<TMessage>
-
-/** Props for message reply functionality in bubble */
-export interface BubbleReplyProps<TMessage extends IMessage> extends MessageReplyStyleProps {
-  /** Custom render for message reply; rendered on top of message content */
-  renderMessageReply?: (props: MessageReplyProps<TMessage>) => React.ReactNode
-  /** Callback when message reply is pressed */
-  onPress?: (replyMessage: ReplyMessage) => void
-}
-
-export interface BubbleProps<TMessage extends IMessage> {
-  user?: User
-  touchableProps?: ComponentProps<typeof Pressable>
-  isUsernameVisible?: boolean
-  isCustomViewBottom?: boolean
-  isInverted?: boolean
-  position: 'left' | 'right'
-  currentMessage: TMessage
-  nextMessage?: TMessage
-  previousMessage?: TMessage
-  containerStyle?: LeftRightStyle<ViewStyle>
-  wrapperStyle?: LeftRightStyle<ViewStyle>
-  textStyle?: LeftRightStyle<TextStyle>
-  bottomContainerStyle?: LeftRightStyle<ViewStyle>
-  tickStyle?: StyleProp<TextStyle>
-  containerToNextStyle?: LeftRightStyle<ViewStyle>
-  containerToPreviousStyle?: LeftRightStyle<ViewStyle>
-  usernameStyle?: TextStyle
-  quickReplyStyle?: StyleProp<ViewStyle>
-  quickReplyTextStyle?: StyleProp<TextStyle>
-  quickReplyContainerStyle?: StyleProp<ViewStyle>
-  messageTextProps?: Partial<MessageTextProps<TMessage>>
-  onPressMessage?: (context?: unknown, message?: unknown) => void
-  onLongPressMessage?: (context?: unknown, message?: unknown) => void
-  onQuickReply?: (replies: Reply[]) => void
-  renderMessageImage?: (
-    props: RenderMessageImageProps<TMessage>
-  ) => React.ReactNode
-  renderMessageVideo?: (
-    props: RenderMessageVideoProps<TMessage>
-  ) => React.ReactNode
-  renderMessageAudio?: (
-    props: RenderMessageAudioProps<TMessage>
-  ) => React.ReactNode
-  renderMessageText?: (props: RenderMessageTextProps<TMessage>) => React.ReactNode
-  renderCustomView?: (bubbleProps: BubbleProps<TMessage>) => React.ReactNode
-  renderTime?: (timeProps: TimeProps<TMessage>) => React.ReactNode
-  renderTicks?: (currentMessage: TMessage) => React.ReactNode
-  renderUsername?: (user?: TMessage['user']) => React.ReactNode
-  renderQuickReplySend?: () => React.ReactNode
-  renderQuickReplies?: (
-    quickReplies: QuickRepliesProps<TMessage>
-  ) => React.ReactNode
-  /** Message reply configuration */
-  messageReply?: BubbleReplyProps<TMessage>
-}

package/src/Color.ts

@@ -1,17 +0,0 @@
-export const Color = {
-  defaultColor: '#b2b2b2',
-  backgroundTransparent: 'transparent',
-  defaultBlue: '#0084ff',
-  leftBubbleBackground: '#f0f0f0',
-  black: '#000',
-  white: '#fff',
-  carrot: '#e67e22',
-  emerald: '#2ecc71',
-  peterRiver: '#3498db',
-  wisteria: '#8e44ad',
-  alizarin: '#e74c3c',
-  turquoise: '#1abc9c',
-  midnightBlue: '#2c3e50',
-  optionTintColor: '#007AFF',
-  timeTextColor: '#aaa',
-}

package/src/Composer.tsx

@@ -1,100 +0,0 @@
-import React, { useCallback, useMemo, useState } from 'react'
-import {
-  Platform,
-  StyleSheet,
-  TextInputChangeEvent,
-  TextInputContentSizeChangeEvent,
-  TextInputProps,
-  View,
-} from 'react-native'
-import { TextInput } from 'react-native-gesture-handler'
-import { Color } from './Color'
-import { useColorScheme } from './hooks/useColorScheme'
-import stylesCommon, { getColorSchemeStyle } from './styles'
-
-export interface ComposerProps {
-  composerHeight?: number
-  text?: string
-  textInputProps?: Partial<TextInputProps>
-}
-
-export function Composer ({
-  text = '',
-  textInputProps,
-}: ComposerProps): React.ReactElement {
-  const colorScheme = useColorScheme()
-  const isDark = colorScheme === 'dark'
-
-  const placeholder = textInputProps?.placeholder ?? 'Type a message...'
-
-  const minHeight = useMemo(() =>
-    Platform.select({
-      web: styles.textInput.lineHeight + styles.textInput.paddingTop + styles.textInput.paddingBottom,
-      default: undefined,
-    })
-  , [])
-
-  const [height, setHeight] = useState<number | undefined>(minHeight)
-
-  const handleContentSizeChange = useMemo(() => {
-    if (Platform.OS === 'web')
-      return (e: TextInputContentSizeChangeEvent) => {
-        const contentHeight = e.nativeEvent.contentSize.height
-        setHeight(Math.max(minHeight ?? 0, contentHeight))
-      }
-
-    return undefined
-  }, [minHeight])
-
-  const handleChange = useCallback((event: TextInputChangeEvent) => {
-    if (Platform.OS === 'web')
-      // Reset height to 0 to get the correct scrollHeight
-      requestAnimationFrame(() => {
-        // @ts-expect-error - web-specific code
-        event.nativeEvent.target.style.height = '0px'
-        // @ts-expect-error - web-specific code
-        event.nativeEvent.target.style.height = `${event.nativeEvent.target.scrollHeight}px`
-      })
-  }, [])
-
-  return (
-    <View style={stylesCommon.fill}>
-      <TextInput
-        testID={placeholder}
-        accessible
-        accessibilityLabel={placeholder}
-        placeholderTextColor={textInputProps?.placeholderTextColor ?? (isDark ? '#888' : Color.defaultColor)}
-        value={text}
-        enablesReturnKeyAutomatically
-        underlineColorAndroid='transparent'
-        keyboardAppearance={isDark ? 'dark' : 'default'}
-        multiline
-        placeholder={placeholder}
-        onContentSizeChange={handleContentSizeChange}
-        onChange={handleChange}
-        {...textInputProps}
-        style={[getColorSchemeStyle(styles, 'textInput', colorScheme), stylesWeb.textInput, { height }, textInputProps?.style]}
-      />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  textInput: {
-    fontSize: 16,
-    lineHeight: 22,
-    paddingTop: 8,
-    paddingBottom: 10,
-    paddingHorizontal: 8,
-  },
-  textInput_dark: {
-    color: '#fff',
-  },
-})
-
-const stylesWeb = StyleSheet.create({
-  textInput: {
-    /* @ts-expect-error - web-specific styles */
-    outlineStyle: 'none',
-  },
-})

package/src/Constant.ts

@@ -1,8 +0,0 @@
-export const DATE_FORMAT = 'D MMMM'
-export const TIME_FORMAT = 'LT'
-
-export const TEST_ID = {
-  WRAPPER: 'GC_WRAPPER',
-  LOADING_WRAPPER: 'GC_LOADING_CONTAINER',
-  SEND_TOUCHABLE: 'GC_SEND_TOUCHABLE',
-}