react-native-gifted-chat 3.3.2 → 3.4.0

package/src/Day/index.tsx

@@ -1,63 +0,0 @@
-import React, { useMemo } from 'react'
-import {
-  View,
-} from 'react-native'
-import dayjs from 'dayjs'
-import calendar from 'dayjs/plugin/calendar'
-import relativeTime from 'dayjs/plugin/relativeTime'
-
-import { Text } from 'react-native-gesture-handler'
-import { DATE_FORMAT } from '../Constant'
-
-import { useChatContext } from '../GiftedChatContext'
-import stylesCommon from '../styles'
-import styles from './styles'
-import { DayProps } from './types'
-
-export * from './types'
-
-dayjs.extend(relativeTime)
-dayjs.extend(calendar)
-
-export function Day ({
-  dateFormat = DATE_FORMAT,
-  dateFormatCalendar,
-  createdAt,
-  containerStyle,
-  wrapperStyle,
-  textProps,
-}: DayProps) {
-  const { getLocale } = useChatContext()
-
-  const dateStr = useMemo(() => {
-    if (createdAt == null)
-      return null
-
-    const now = dayjs().startOf('day')
-    const date = dayjs(createdAt).locale(getLocale()).startOf('day')
-
-    if (!now.isSame(date, 'year'))
-      return date.format('D MMMM YYYY')
-
-    if (now.diff(date, 'days') < 1)
-      return date.calendar(now, {
-        sameDay: '[Today]',
-        ...dateFormatCalendar,
-      })
-
-    return date.format(dateFormat)
-  }, [createdAt, dateFormat, getLocale, dateFormatCalendar])
-
-  if (!dateStr)
-    return null
-
-  return (
-    <View style={[stylesCommon.centerItems, styles.container, containerStyle]}>
-      <View style={[styles.wrapper, wrapperStyle]}>
-        <Text {...textProps} style={[styles.text, textProps?.style]}>
-          {dateStr}
-        </Text>
-      </View>
-    </View>
-  )
-}

package/src/Day/styles.ts

@@ -1,22 +0,0 @@
-import { StyleSheet } from 'react-native'
-import { Color } from '../Color'
-
-export default StyleSheet.create({
-  container: {
-    marginTop: 5,
-    marginBottom: 10,
-  },
-  wrapper: {
-    backgroundColor: 'rgba(0, 0, 0, 0.75)',
-    paddingTop: 6,
-    paddingBottom: 6,
-    paddingLeft: 10,
-    paddingRight: 10,
-    borderRadius: 15,
-  },
-  text: {
-    color: Color.white,
-    fontSize: 12,
-    fontWeight: '600',
-  },
-})

package/src/Day/types.ts

@@ -1,15 +0,0 @@
-import {
-  StyleProp,
-  ViewStyle,
-  TextProps,
-} from 'react-native'
-
-export interface DayProps {
-  createdAt: Date | number
-  dateFormat?: string
-  dateFormatCalendar?: object
-  containerStyle?: StyleProp<ViewStyle>
-  wrapperStyle?: StyleProp<ViewStyle>
-  /** Props to pass to the Text component (e.g., style, allowFontScaling, numberOfLines) */
-  textProps?: Partial<TextProps>
-}

package/src/GiftedAvatar.tsx

@@ -1,187 +0,0 @@
-import React, { useCallback, useMemo } from 'react'
-import {
-  Image,
-  View,
-  StyleSheet,
-  StyleProp,
-  ImageStyle,
-  TextStyle,
-} from 'react-native'
-import { Text } from 'react-native-gesture-handler'
-import { Color } from './Color'
-import { TouchableOpacity } from './components/TouchableOpacity'
-import { User } from './Models'
-import stylesCommon from './styles'
-
-const {
-  carrot,
-  emerald,
-  peterRiver,
-  wisteria,
-  alizarin,
-  turquoise,
-  midnightBlue,
-} = Color
-
-const styles = StyleSheet.create({
-  avatarStyle: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-  },
-  avatarTransparent: {
-    backgroundColor: Color.backgroundTransparent,
-  },
-  textStyle: {
-    color: Color.white,
-    fontSize: 16,
-    backgroundColor: Color.backgroundTransparent,
-    fontWeight: '100',
-  },
-})
-
-export interface GiftedAvatarProps {
-  user?: User
-  avatarStyle?: StyleProp<ImageStyle>
-  textStyle?: StyleProp<TextStyle>
-  onPress?: (props: GiftedAvatarProps) => void
-  onLongPress?: (props: GiftedAvatarProps) => void
-}
-
-export function GiftedAvatar (
-  props: GiftedAvatarProps
-) {
-  const {
-    user,
-    avatarStyle,
-    textStyle,
-    onPress,
-  } = props
-
-  const avatarName = useMemo(() => {
-    const userName = user?.name || ''
-    const name = userName.toUpperCase().split(' ')
-
-    if (name.length === 1)
-      return `${name[0].charAt(0)}`
-    else if (name.length > 1)
-      return `${name[0].charAt(0)}${name[1].charAt(0)}`
-    else
-      return ''
-  }, [user?.name])
-
-  const backgroundColor = useMemo(() => {
-    let sumChars = 0
-    if (user?.name)
-      for (let i = 0; i < user.name.length; i += 1)
-        sumChars += user.name.charCodeAt(i)
-
-    // inspired by https://github.com/wbinnssmith/react-user-avatar
-    // colors from https://flatuicolors.com/
-    const colors = [
-      carrot,
-      emerald,
-      peterRiver,
-      wisteria,
-      alizarin,
-      turquoise,
-      midnightBlue,
-    ]
-
-    return colors[sumChars % colors.length]
-  }, [user?.name])
-
-  const renderAvatar = useCallback(() => {
-    switch (typeof user?.avatar) {
-      case 'function':
-        return user.avatar([stylesCommon.centerItems, styles.avatarStyle, avatarStyle])
-      case 'string':
-        return (
-          <Image
-            source={{ uri: user.avatar }}
-            style={[stylesCommon.centerItems, styles.avatarStyle, avatarStyle]}
-          />
-        )
-      case 'number':
-        return (
-          <Image
-            source={user.avatar}
-            style={[stylesCommon.centerItems, styles.avatarStyle, avatarStyle]}
-          />
-        )
-      default:
-        return null
-    }
-  }, [user, avatarStyle])
-
-  const renderInitials = useCallback(() => {
-    return (
-      <Text style={[styles.textStyle, textStyle]}>
-        {avatarName}
-      </Text>
-    )
-  }, [textStyle, avatarName])
-
-  const handleOnPress = useCallback(() => {
-    const {
-      onPress,
-      ...rest
-    } = props
-
-    onPress?.(rest)
-  }, [props])
-
-  const handleOnLongPress = useCallback(() => {
-    const {
-      onLongPress,
-      ...rest
-    } = props
-
-    if (onLongPress)
-      onLongPress(rest)
-  }, [props])
-
-  const placeholderView = useMemo(() => (
-    <View
-      style={[
-        stylesCommon.centerItems,
-        styles.avatarStyle,
-        styles.avatarTransparent,
-        avatarStyle,
-      ]}
-      accessibilityRole='image'
-    />
-  ), [avatarStyle])
-
-  if (!user || (!user.name && !user.avatar))
-    return placeholderView
-
-  if (user.avatar)
-    return (
-      <TouchableOpacity
-        enabled={!!onPress}
-        onPress={handleOnPress}
-        onLongPress={handleOnLongPress}
-        accessibilityRole='image'
-      >
-        {renderAvatar()}
-      </TouchableOpacity>
-    )
-
-  return (
-    <TouchableOpacity
-      enabled={!!onPress}
-      onPress={handleOnPress}
-      onLongPress={handleOnLongPress}
-      style={[
-        stylesCommon.centerItems,
-        styles.avatarStyle,
-        { backgroundColor },
-        avatarStyle,
-      ]}
-      accessibilityRole='image'
-    >
-      {renderInitials()}
-    </TouchableOpacity>
-  )
-}

package/src/GiftedChat/index.tsx

@@ -1,397 +0,0 @@
-import React, {
-  createRef,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  useCallback,
-  RefObject,
-} from 'react'
-import {
-  View,
-  LayoutChangeEvent,
-  useColorScheme,
-} from 'react-native'
-import {
-  ActionSheetProvider,
-  ActionSheetProviderRef,
-} from '@expo/react-native-action-sheet'
-import dayjs from 'dayjs'
-import localizedFormat from 'dayjs/plugin/localizedFormat'
-import { GestureHandlerRootView, TextInput } from 'react-native-gesture-handler'
-import { KeyboardAvoidingView, KeyboardProvider } from 'react-native-keyboard-controller'
-import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
-import { TEST_ID } from '../Constant'
-import { GiftedChatContext } from '../GiftedChatContext'
-import { InputToolbar } from '../InputToolbar'
-import { MessagesContainer, AnimatedList } from '../MessagesContainer'
-import { IMessage, ReplyMessage } from '../Models'
-import stylesCommon from '../styles'
-import { renderComponentOrElement } from '../utils'
-import styles from './styles'
-import { GiftedChatProps } from './types'
-
-dayjs.extend(localizedFormat)
-
-function GiftedChat<TMessage extends IMessage = IMessage> (
-  props: GiftedChatProps<TMessage>
-) {
-  const {
-    messages = [],
-    initialText = '',
-    isTyping,
-
-    // "random" function from here: https://stackoverflow.com/a/8084248/3452513
-    // we do not use uuid since it would add extra native dependency (https://www.npmjs.com/package/react-native-get-random-values)
-    // lib's user can decide which algorithm to use and pass it as a prop
-    messageIdGenerator = () => (Math.random() + 1).toString(36).substring(7),
-
-    user = {},
-    onSend,
-    locale = 'en',
-    colorScheme: colorSchemeProp,
-    renderLoading,
-    actionSheet,
-    textInputProps,
-    renderChatFooter,
-    renderInputToolbar,
-    isInverted = true,
-
-    // Reply props
-    reply,
-  } = props
-
-  // Extract reply props for internal use
-  const replyMessageProp = reply?.message
-  const onClearReply = reply?.onClear
-  const onSwipeToReply = reply?.swipe?.onSwipe
-  const renderReplyPreview = reply?.renderPreview
-  const replyPreviewContainerStyle = reply?.previewStyle?.containerStyle
-  const replyPreviewTextStyle = reply?.previewStyle?.textStyle
-
-  const systemColorScheme = useColorScheme()
-  const colorScheme = colorSchemeProp !== undefined ? colorSchemeProp : systemColorScheme
-
-  const actionSheetRef = useRef<ActionSheetProviderRef>(null)
-
-  const insets = useSafeAreaInsets()
-
-  const messagesContainerRef = useMemo(
-    () => props.messagesContainerRef || createRef<AnimatedList<TMessage>>(),
-    [props.messagesContainerRef]
-  ) as RefObject<AnimatedList<TMessage>>
-
-  const textInputRef = useMemo(
-    () => props.textInputRef || createRef<TextInput>(),
-    [props.textInputRef]
-  )
-
-  const [isInitialized, setIsInitialized] = useState<boolean>(false)
-  const [text, setText] = useState<string | undefined>(() => props.text || '')
-  const [internalReplyMessage, setInternalReplyMessage] = useState<ReplyMessage | null>(null)
-
-  // Use controlled or uncontrolled reply state
-  const replyMessage = replyMessageProp !== undefined ? replyMessageProp : internalReplyMessage
-
-  const getTextFromProp = useCallback(
-    (fallback: string) => {
-      if (props.text === undefined)
-        return fallback
-
-      return props.text
-    },
-    [props.text]
-  )
-
-  const scrollToBottom = useCallback(
-    (isAnimated = true) => {
-      if (!messagesContainerRef?.current)
-        return
-
-      if (isInverted) {
-        messagesContainerRef.current.scrollToOffset({
-          offset: 0,
-          animated: isAnimated,
-        })
-        return
-      }
-
-      messagesContainerRef.current.scrollToEnd({ animated: isAnimated })
-    },
-    [isInverted, messagesContainerRef]
-  )
-
-  const handleSwipeToReply = useCallback(
-    (message: TMessage) => {
-      if (replyMessageProp === undefined)
-        // Uncontrolled mode: manage state internally
-        setInternalReplyMessage({
-          _id: message._id,
-          text: message.text,
-          user: message.user,
-          image: message.image,
-          audio: message.audio,
-        })
-
-      onSwipeToReply?.(message)
-    },
-    [replyMessageProp, onSwipeToReply]
-  )
-
-  const clearReply = useCallback(() => {
-    if (replyMessageProp === undefined)
-      // Uncontrolled mode: manage state internally
-      setInternalReplyMessage(null)
-
-    onClearReply?.()
-  }, [replyMessageProp, onClearReply])
-
-  const renderMessages = useMemo(() => {
-    if (!isInitialized)
-      return null
-
-    const { messagesContainerStyle, ...messagesContainerProps } = props
-
-    return (
-      <View style={[stylesCommon.fill, messagesContainerStyle]}>
-        <MessagesContainer<TMessage>
-          {...messagesContainerProps}
-          isInverted={isInverted}
-          messages={messages}
-          forwardRef={messagesContainerRef}
-          isTyping={isTyping}
-          reply={{
-            ...reply,
-            swipe: reply?.swipe ? {
-              ...reply.swipe,
-              onSwipe: handleSwipeToReply,
-            } : undefined,
-          }}
-        />
-        {renderComponentOrElement(renderChatFooter, {})}
-      </View>
-    )
-  }, [
-    isInitialized,
-    isTyping,
-    messages,
-    props,
-    isInverted,
-    messagesContainerRef,
-    renderChatFooter,
-    reply,
-    handleSwipeToReply,
-  ])
-
-  const notifyInputTextReset = useCallback(() => {
-    props.textInputProps?.onChangeText?.('')
-  }, [props.textInputProps])
-
-  const resetInputToolbar = useCallback(() => {
-    textInputRef.current?.clear()
-
-    notifyInputTextReset()
-
-    setText(getTextFromProp(''))
-  }, [
-    getTextFromProp,
-    textInputRef,
-    notifyInputTextReset,
-  ])
-
-  const _onSend = useCallback(
-    (messages: TMessage[] = [], shouldResetInputToolbar = false) => {
-      if (!Array.isArray(messages))
-        messages = [messages]
-
-      const newMessages: TMessage[] = messages.map(message => {
-        return {
-          ...message,
-          user: user!,
-          createdAt: new Date(),
-          _id: messageIdGenerator?.(),
-          // Attach reply message if exists
-          ...(replyMessage ? { replyMessage } : {}),
-        }
-      })
-
-      if (shouldResetInputToolbar === true)
-        resetInputToolbar()
-
-      // Clear reply after sending
-      clearReply()
-
-      onSend?.(newMessages)
-
-      setTimeout(() => scrollToBottom(), 10)
-    },
-    [messageIdGenerator, onSend, user, resetInputToolbar, scrollToBottom, replyMessage, clearReply]
-  )
-
-  const _onChangeText = useCallback(
-    (text: string) => {
-      props.textInputProps?.onChangeText?.(text)
-
-      // Only set state if it's not being overridden by a prop.
-      if (props.text === undefined)
-        setText(text)
-    },
-    [props.text, props.textInputProps]
-  )
-
-  const onInitialLayoutViewLayout = useCallback(
-    (e: LayoutChangeEvent) => {
-      if (isInitialized)
-        return
-
-      const { layout } = e.nativeEvent
-
-      if (layout.height <= 0)
-        return
-
-      notifyInputTextReset()
-
-      setIsInitialized(true)
-      setText(getTextFromProp(initialText))
-    },
-    [isInitialized, initialText, notifyInputTextReset, getTextFromProp]
-  )
-
-  const inputToolbarFragment = useMemo(() => {
-    if (!isInitialized)
-      return null
-
-    const inputToolbarProps = {
-      ...props,
-      text: getTextFromProp(text!),
-      onSend: _onSend,
-      textInputProps: {
-        ...textInputProps,
-        onChangeText: _onChangeText,
-        ref: textInputRef,
-      },
-      // Reply preview props
-      replyMessage,
-      onClearReply: clearReply,
-      renderReplyPreview,
-      replyPreviewContainerStyle,
-      replyPreviewTextStyle,
-    }
-
-    if (renderInputToolbar)
-      return renderComponentOrElement(renderInputToolbar, inputToolbarProps)
-
-    return <InputToolbar {...inputToolbarProps} />
-  }, [
-    isInitialized,
-    _onSend,
-    getTextFromProp,
-    props,
-    text,
-    renderInputToolbar,
-    textInputRef,
-    textInputProps,
-    _onChangeText,
-    replyMessage,
-    clearReply,
-    renderReplyPreview,
-    replyPreviewContainerStyle,
-    replyPreviewTextStyle,
-  ])
-
-  const contextValues = useMemo(
-    () => ({
-      actionSheet:
-        actionSheet ||
-        (() => ({
-          showActionSheetWithOptions:
-            actionSheetRef.current!.showActionSheetWithOptions,
-        })),
-      getLocale: () => locale,
-      getColorScheme: () => colorScheme,
-    }),
-    [actionSheet, locale, colorScheme]
-  )
-
-  useEffect(() => {
-    if (props.text != null)
-      setText(props.text)
-  }, [props.text])
-
-  return (
-    <GiftedChatContext.Provider value={contextValues}>
-      <ActionSheetProvider ref={actionSheetRef}>
-        <View
-          testID={TEST_ID.WRAPPER}
-          style={[stylesCommon.fill, styles.contentContainer]}
-          onLayout={onInitialLayoutViewLayout}
-        >
-          {/* @ts-expect-error */}
-          <KeyboardAvoidingView
-            behavior='translate-with-padding'
-            keyboardVerticalOffset={insets.top}
-            style={stylesCommon.fill}
-            {...props.keyboardAvoidingViewProps}
-          >
-            <View style={[stylesCommon.fill, !isInitialized && styles.hidden]}>
-              {renderMessages}
-              {inputToolbarFragment}
-            </View>
-            {!isInitialized && renderComponentOrElement(renderLoading, {})}
-          </KeyboardAvoidingView>
-        </View>
-      </ActionSheetProvider>
-    </GiftedChatContext.Provider>
-  )
-}
-
-function GiftedChatWrapper<TMessage extends IMessage = IMessage> (props: GiftedChatProps<TMessage>) {
-  const {
-    keyboardProviderProps,
-    ...rest
-  } = props
-
-  return (
-    <GestureHandlerRootView style={styles.fill}>
-      <SafeAreaProvider>
-        <KeyboardProvider
-          statusBarTranslucent
-          navigationBarTranslucent
-          {...keyboardProviderProps}
-        >
-          <GiftedChat<TMessage> {...rest} />
-        </KeyboardProvider>
-      </SafeAreaProvider>
-    </GestureHandlerRootView>
-  )
-}
-
-GiftedChatWrapper.append = <TMessage extends IMessage>(
-  currentMessages: TMessage[] = [],
-  messages: TMessage[],
-  isInverted = true
-) => {
-  if (!Array.isArray(messages))
-    messages = [messages]
-
-  return isInverted
-    ? messages.concat(currentMessages)
-    : currentMessages.concat(messages)
-}
-
-GiftedChatWrapper.prepend = <TMessage extends IMessage>(
-  currentMessages: TMessage[] = [],
-  messages: TMessage[],
-  isInverted = true
-) => {
-  if (!Array.isArray(messages))
-    messages = [messages]
-
-  return isInverted
-    ? currentMessages.concat(messages)
-    : messages.concat(currentMessages)
-}
-
-export {
-  GiftedChatWrapper as GiftedChat
-}

package/src/GiftedChat/styles.ts

@@ -1,13 +0,0 @@
-import { StyleSheet } from 'react-native'
-
-export default StyleSheet.create({
-  fill: {
-    flex: 1,
-  },
-  contentContainer: {
-    overflow: 'hidden',
-  },
-  hidden: {
-    opacity: 0,
-  },
-})