react-native-gifted-chat 3.3.0 → 3.3.3

package/src/QuickReplies.tsx

@@ -1,181 +0,0 @@
-import React, { useState, useMemo, useCallback } from 'react'
-import {
-  StyleSheet,
-  View,
-  StyleProp,
-  ViewStyle,
-  TextStyle,
-} from 'react-native'
-import { Text } from 'react-native-gesture-handler'
-import { Color } from './Color'
-import { TouchableOpacity } from './components/TouchableOpacity'
-import { warning } from './logging'
-import { IMessage, Reply } from './Models'
-import stylesCommon from './styles'
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    maxWidth: 300,
-  },
-  quickReply: {
-    borderWidth: 1,
-    maxWidth: 200,
-    paddingVertical: 7,
-    paddingHorizontal: 12,
-    minHeight: 50,
-    borderRadius: 13,
-    margin: 3,
-  },
-  quickReplyText: {
-    overflow: 'visible',
-  },
-  sendLink: {
-    borderWidth: 0,
-  },
-  sendLinkText: {
-    color: Color.defaultBlue,
-    fontWeight: '600',
-    fontSize: 17,
-  },
-})
-
-export interface QuickRepliesProps<TMessage extends IMessage = IMessage> {
-  nextMessage?: TMessage
-  currentMessage: TMessage
-  color?: string
-  sendText?: string
-  quickReplyStyle?: StyleProp<ViewStyle>
-  quickReplyTextStyle?: StyleProp<TextStyle>
-  quickReplyContainerStyle?: StyleProp<ViewStyle>
-  onQuickReply?(reply: Reply[]): void
-  renderQuickReplySend?(): React.ReactNode
-}
-
-const sameReply = (currentReply: Reply) => (reply: Reply) =>
-  currentReply.value === reply.value
-
-const diffReply = (currentReply: Reply) => (reply: Reply) =>
-  currentReply.value !== reply.value
-
-export function QuickReplies ({
-  currentMessage,
-  nextMessage,
-  color = Color.peterRiver,
-  quickReplyStyle,
-  quickReplyTextStyle,
-  quickReplyContainerStyle,
-  onQuickReply,
-  sendText = 'Send',
-  renderQuickReplySend,
-}: QuickRepliesProps<IMessage>) {
-  const { type } = currentMessage!.quickReplies!
-  const [replies, setReplies] = useState<Reply[]>([])
-
-  const shouldComponentDisplay = useMemo(() => {
-    const hasReplies = !!currentMessage && !!currentMessage!.quickReplies
-    const hasNext = !!nextMessage && !!nextMessage!._id
-    const keepIt = currentMessage!.quickReplies!.keepIt
-
-    if (hasReplies && !hasNext)
-      return true
-
-    if (hasReplies && hasNext && keepIt)
-      return true
-
-    return false
-  }, [currentMessage, nextMessage])
-
-  const handleSend = useCallback((repliesData: Reply[]) => () => {
-    onQuickReply?.(
-      repliesData.map((reply: Reply) => ({
-        ...reply,
-        messageId: currentMessage!._id,
-      }))
-    )
-  }, [onQuickReply, currentMessage])
-
-  const handlePress = useCallback(
-    (reply: Reply) => () => {
-      if (currentMessage) {
-        const { type } = currentMessage.quickReplies!
-        switch (type) {
-          case 'radio': {
-            handleSend([reply])()
-            return
-          }
-          case 'checkbox': {
-            if (replies.find(sameReply(reply)))
-              setReplies(replies.filter(diffReply(reply)))
-            else
-              setReplies([...replies, reply])
-
-            return
-          }
-          default: {
-            warning(`onQuickReply unknown type: ${type}`)
-          }
-        }
-      }
-    },
-    [replies, currentMessage, handleSend]
-  )
-
-  const renderSendButton = useMemo(() => {
-    if (!replies.length)
-      return null
-
-    return (
-      <TouchableOpacity
-        style={[stylesCommon.centerItems, styles.quickReply, styles.sendLink]}
-        onPress={handleSend(replies)}
-      >
-        {renderQuickReplySend?.() || (
-          <Text style={styles.sendLinkText}>{sendText}</Text>
-        )}
-      </TouchableOpacity>
-    )
-  }, [replies, handleSend, renderQuickReplySend, sendText])
-
-  if (!shouldComponentDisplay)
-    return null
-
-  return (
-    <View style={[styles.container, quickReplyContainerStyle]}>
-      {currentMessage!.quickReplies!.values.map(
-        (reply: Reply, index: number) => {
-          const selected =
-            type === 'checkbox' && replies.find(sameReply(reply))
-
-          return (
-            <TouchableOpacity
-              onPress={handlePress(reply)}
-              style={[
-                stylesCommon.centerItems,
-                styles.quickReply,
-                quickReplyStyle,
-                { borderColor: color },
-                selected && { backgroundColor: color },
-              ]}
-              key={`${reply.value}-${index}`}
-            >
-              <Text
-                numberOfLines={10}
-                ellipsizeMode='tail'
-                style={[
-                  styles.quickReplyText,
-                  { color: selected ? Color.white : color },
-                  quickReplyTextStyle,
-                ]}
-              >
-                {reply.title}
-              </Text>
-            </TouchableOpacity>
-          )
-        }
-      )}
-      {renderSendButton}
-    </View>
-  )
-}

package/src/Reply/index.ts

@@ -1 +0,0 @@
-export * from './types'

package/src/Reply/types.ts

@@ -1,80 +0,0 @@
-import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native'
-import { SharedValue } from 'react-native-reanimated'
-
-import { MessageReplyProps } from '../components/MessageReply'
-import { ReplyPreviewProps } from '../components/ReplyPreview'
-import { IMessage, ReplyMessage } from '../Models'
-
-/**
- * Props for swipe-to-reply gesture behavior
- */
-export interface SwipeToReplyProps<TMessage extends IMessage> {
-  /** Enable swipe to reply on messages; default is false */
-  isEnabled?: boolean
-  /** Direction to swipe for reply; default is 'left' (swipe left, icon appears on right) */
-  direction?: 'left' | 'right'
-  /** Callback when swipe to reply is triggered */
-  onSwipe?: (message: TMessage) => void
-  /** Custom render for swipe action indicator */
-  renderAction?: (
-    progress: SharedValue<number>,
-    translation: SharedValue<number>,
-    position: 'left' | 'right'
-  ) => React.ReactNode
-  /** Style for the swipe action container */
-  actionContainerStyle?: StyleProp<ViewStyle>
-}
-
-/**
- * Props for reply preview shown above input toolbar
- */
-export interface ReplyPreviewStyleProps {
-  /** Style for reply preview container */
-  containerStyle?: StyleProp<ViewStyle>
-  /** Style for reply preview text */
-  textStyle?: StyleProp<TextStyle>
-  /** Style for reply preview image */
-  imageStyle?: StyleProp<ImageStyle>
-}
-
-/**
- * Props for message reply display inside bubble
- */
-export interface MessageReplyStyleProps {
-  /** Style for message reply container */
-  containerStyle?: StyleProp<ViewStyle>
-  /** Style for message reply container on left side */
-  containerStyleLeft?: StyleProp<ViewStyle>
-  /** Style for message reply container on right side */
-  containerStyleRight?: StyleProp<ViewStyle>
-  /** Style for message reply image */
-  imageStyle?: StyleProp<ImageStyle>
-  /** Style for message reply text */
-  textStyle?: StyleProp<TextStyle>
-  /** Style for message reply text on left side */
-  textStyleLeft?: StyleProp<TextStyle>
-  /** Style for message reply text on right side */
-  textStyleRight?: StyleProp<TextStyle>
-}
-
-/**
- * Grouped props for reply functionality
- */
-export interface ReplyProps<TMessage extends IMessage> {
-  /** Reply message to show in input toolbar preview */
-  message?: ReplyMessage | null
-  /** Callback when reply is cleared */
-  onClear?: () => void
-  /** Callback when message reply is pressed inside bubble */
-  onPress?: (replyMessage: ReplyMessage) => void
-  /** Custom render for reply preview in input toolbar */
-  renderPreview?: (props: ReplyPreviewProps) => React.ReactNode
-  /** Custom render for message reply inside bubble */
-  renderMessageReply?: (props: MessageReplyProps<TMessage>) => React.ReactNode
-  /** Swipe-to-reply configuration */
-  swipe?: SwipeToReplyProps<TMessage>
-  /** Reply preview styling */
-  previewStyle?: ReplyPreviewStyleProps
-  /** Message reply styling */
-  messageStyle?: MessageReplyStyleProps
-}

package/src/ReplyPreview.tsx

@@ -1,132 +0,0 @@
-import React, { useMemo } from 'react'
-import { StyleSheet, View, StyleProp, ViewStyle, TextStyle, Pressable } from 'react-native'
-
-import { Text } from 'react-native-gesture-handler'
-import { Color } from './Color'
-import { useColorScheme } from './hooks/useColorScheme'
-import { ReplyMessage } from './Models'
-
-export interface ReplyPreviewProps {
-  replyMessage: ReplyMessage
-  onClearReply: () => void
-  containerStyle?: StyleProp<ViewStyle>
-  usernameStyle?: StyleProp<TextStyle>
-  textStyle?: StyleProp<TextStyle>
-  clearButtonStyle?: StyleProp<ViewStyle>
-  clearButtonTextStyle?: StyleProp<TextStyle>
-}
-
-export function ReplyPreview ({
-  replyMessage,
-  onClearReply,
-  containerStyle,
-  usernameStyle,
-  textStyle,
-  clearButtonStyle,
-  clearButtonTextStyle,
-}: ReplyPreviewProps) {
-  const colorScheme = useColorScheme()
-
-  const containerStyles = useMemo(() => [
-    styles.container,
-    colorScheme === 'dark' && styles.container_dark,
-    containerStyle,
-  ], [colorScheme, containerStyle])
-
-  const usernameStyles = useMemo(() => [
-    styles.username,
-    colorScheme === 'dark' && styles.username_dark,
-    usernameStyle,
-  ], [colorScheme, usernameStyle])
-
-  const textStyles = useMemo(() => [
-    styles.text,
-    colorScheme === 'dark' && styles.text_dark,
-    textStyle,
-  ], [colorScheme, textStyle])
-
-  return (
-    <View style={containerStyles}>
-      <View style={styles.border} />
-      <View style={styles.content}>
-        <Text
-          style={usernameStyles}
-          numberOfLines={1}
-        >
-          {replyMessage.user?.name || 'User'}
-        </Text>
-        <Text
-          style={textStyles}
-          numberOfLines={1}
-        >
-          {replyMessage.text || (replyMessage.image ? 'Photo' : (replyMessage.audio ? 'Audio' : 'Message'))}
-        </Text>
-      </View>
-      <Pressable
-        onPress={onClearReply}
-        style={[styles.clearButton, clearButtonStyle]}
-        hitSlop={8}
-      >
-        <Text style={[styles.clearButtonText, clearButtonTextStyle]}>
-          {'✕'}
-        </Text>
-      </Pressable>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    backgroundColor: '#f5f5f5',
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: Color.defaultColor,
-  },
-  container_dark: {
-    backgroundColor: '#2a2a2a',
-    borderBottomColor: '#444',
-  },
-  border: {
-    width: 3,
-    height: '100%',
-    backgroundColor: Color.defaultBlue,
-    borderRadius: 1.5,
-    marginRight: 10,
-  },
-  content: {
-    flex: 1,
-  },
-  username: {
-    fontSize: 13,
-    fontWeight: '600',
-    color: Color.defaultBlue,
-    marginBottom: 2,
-  },
-  username_dark: {
-    color: '#6eb5ff',
-  },
-  text: {
-    fontSize: 13,
-    color: '#666',
-  },
-  text_dark: {
-    color: '#999',
-  },
-  clearButton: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    backgroundColor: Color.defaultColor,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginLeft: 10,
-  },
-  clearButtonText: {
-    fontSize: 12,
-    fontWeight: '600',
-    color: '#666',
-  },
-})

package/src/Send.tsx

@@ -1,115 +0,0 @@
-import React, { useMemo, useCallback, useEffect } from 'react'
-import {
-  StyleSheet,
-  StyleProp,
-  ViewStyle,
-  TextStyle,
-} from 'react-native'
-import { Text } from 'react-native-gesture-handler'
-import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated'
-
-import { Color } from './Color'
-import { TouchableOpacity, TouchableOpacityProps } from './components/TouchableOpacity'
-import { TEST_ID } from './Constant'
-import { useColorScheme } from './hooks/useColorScheme'
-import { IMessage } from './Models'
-import { getColorSchemeStyle } from './styles'
-
-export interface SendProps<TMessage extends IMessage> {
-  text?: string
-  label?: string
-  containerStyle?: StyleProp<ViewStyle>
-  textStyle?: StyleProp<TextStyle>
-  children?: React.ReactNode
-  /** Always show send button, even when text is empty */
-  isSendButtonAlwaysVisible?: boolean
-  /** Text is optional, allow sending empty messages (useful for media-only messages) */
-  isTextOptional?: boolean
-  sendButtonProps?: Partial<TouchableOpacityProps>
-  onSend?(
-    messages: Partial<TMessage> | Partial<TMessage>[],
-    shouldResetInputToolbar: boolean,
-  ): void
-}
-
-export const Send = <TMessage extends IMessage = IMessage>({
-  text,
-  containerStyle,
-  children,
-  textStyle,
-  label = 'Send',
-  isSendButtonAlwaysVisible = false,
-  isTextOptional = false,
-  sendButtonProps,
-  onSend,
-}: SendProps<TMessage>) => {
-  const colorScheme = useColorScheme()
-  const opacity = useSharedValue(0)
-
-  const handleOnPress = useCallback(() => {
-    const trimmedText = text?.trim() ?? ''
-    const message = { text: trimmedText } as Partial<TMessage>
-
-    if (onSend && (trimmedText.length || isTextOptional))
-      onSend(message, true)
-  }, [text, onSend, isTextOptional])
-
-  const isVisible = useMemo(
-    () => isSendButtonAlwaysVisible || !!text?.trim().length,
-    [isSendButtonAlwaysVisible, text]
-  )
-
-  useEffect(() => {
-    opacity.value = withTiming(isVisible ? 1 : 0, { duration: 200 })
-  }, [isVisible, opacity])
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    opacity: opacity.value,
-  }), [opacity])
-
-  return (
-    <Animated.View style={[styles.container, containerStyle, animatedStyle]} pointerEvents={isVisible ? 'auto' : 'none'}>
-      <TouchableOpacity
-        testID={TEST_ID.SEND_TOUCHABLE}
-        style={styles.touchable}
-        onPress={handleOnPress}
-        accessible
-        accessibilityLabel='send'
-        accessibilityRole='button'
-        {...sendButtonProps}
-      >
-        {
-          children ||
-          <Text
-            style={[
-              getColorSchemeStyle(styles, 'text', colorScheme),
-              textStyle,
-            ]}
-          >
-            {label}
-          </Text>
-        }
-      </TouchableOpacity>
-    </Animated.View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'flex-end',
-  },
-  touchable: {
-    justifyContent: 'flex-end',
-  },
-  text: {
-    color: Color.defaultBlue,
-    fontWeight: '600',
-    fontSize: 17,
-    backgroundColor: Color.backgroundTransparent,
-    paddingVertical: 10,
-    paddingHorizontal: 10,
-  },
-  text_dark: {
-    color: '#4da6ff',
-  },
-})

package/src/SystemMessage.tsx

@@ -1,79 +0,0 @@
-import React from 'react'
-import {
-  StyleSheet,
-  View,
-  ViewStyle,
-  StyleProp,
-  TextStyle,
-} from 'react-native'
-import { Color } from './Color'
-import { MessageText, MessageTextProps } from './MessageText'
-import { IMessage } from './Models'
-import stylesCommon from './styles'
-
-export interface SystemMessageProps<TMessage extends IMessage> {
-  currentMessage: TMessage
-  containerStyle?: StyleProp<ViewStyle>
-  messageContainerStyle?: StyleProp<ViewStyle>
-  textStyle?: StyleProp<TextStyle>
-  messageTextProps?: Partial<MessageTextProps<TMessage>>
-  children?: React.ReactNode
-}
-
-export function SystemMessage<TMessage extends IMessage> ({
-  currentMessage,
-  containerStyle,
-  messageContainerStyle,
-  textStyle,
-  messageTextProps,
-  children,
-}: SystemMessageProps<TMessage>) {
-  if (currentMessage == null)
-    return null
-
-  return (
-    <View style={[stylesCommon.fill, styles.wrapper]}>
-      <View style={[styles.container, containerStyle]}>
-        {
-          !!currentMessage.text && (
-            <MessageText
-              currentMessage={currentMessage}
-              customTextStyle={[styles.text, textStyle]}
-              position='left'
-              containerStyle={{ left: [styles.messageContainer, messageContainerStyle] }}
-              {...messageTextProps}
-            />
-          )
-        }
-        {children}
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  wrapper: {
-    alignItems: 'center',
-    marginVertical: 5,
-    marginHorizontal: 10,
-  },
-  container: {
-    maxWidth: '70%',
-    borderRadius: 20,
-    borderWidth: 1,
-    borderColor: 'rgba(0,0,0,0.1)',
-    paddingHorizontal: 10,
-    paddingVertical: 10,
-    backgroundColor: 'rgba(0,0,0,0.05)',
-  },
-  messageContainer: {
-    marginVertical: 0,
-    marginHorizontal: 0,
-  },
-  text: {
-    backgroundColor: Color.backgroundTransparent,
-    fontSize: 12,
-    fontWeight: '300',
-    textAlign: 'center',
-  },
-})

package/src/Time.tsx

@@ -1,64 +0,0 @@
-import React, { useMemo } from 'react'
-import { StyleSheet, View, ViewStyle, TextStyle } from 'react-native'
-import dayjs from 'dayjs'
-
-import { Text } from 'react-native-gesture-handler'
-import { Color } from './Color'
-import { TIME_FORMAT } from './Constant'
-import { useChatContext } from './GiftedChatContext'
-import { LeftRightStyle, IMessage } from './Models'
-import { getStyleWithPosition } from './styles'
-
-const styles = StyleSheet.create({
-  text: {
-    fontSize: 10,
-    textAlign: 'right',
-  },
-  text_left: {
-    color: Color.timeTextColor,
-  },
-  text_right: {
-    color: Color.white,
-  },
-})
-
-export interface TimeProps<TMessage extends IMessage> {
-  position?: 'left' | 'right'
-  currentMessage: TMessage
-  containerStyle?: LeftRightStyle<ViewStyle>
-  timeTextStyle?: LeftRightStyle<TextStyle>
-  timeFormat?: string
-}
-
-export const Time = <TMessage extends IMessage = IMessage>({
-  position = 'left',
-  containerStyle,
-  currentMessage,
-  timeFormat = TIME_FORMAT,
-  timeTextStyle,
-}: TimeProps<TMessage>) => {
-  const { getLocale } = useChatContext()
-
-  const formattedTime = useMemo(() => {
-    if (!currentMessage)
-      return null
-
-    return dayjs(currentMessage.createdAt).locale(getLocale()).format(timeFormat)
-  }, [currentMessage, getLocale, timeFormat])
-
-  if (!currentMessage)
-    return null
-
-  return (
-    <View style={containerStyle?.[position]}>
-      <Text
-        style={[
-          getStyleWithPosition(styles, 'text', position),
-          timeTextStyle?.[position],
-        ]}
-      >
-        {formattedTime}
-      </Text>
-    </View>
-  )
-}