react-native-gifted-chat 2.6.5 → 2.7.0

package/src/Day/styles.ts

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,14 @@
+import {
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native'
+
+export interface DayProps {
+  createdAt: Date | number
+  dateFormat?: string
+  dateFormatCalendar?: object
+  containerStyle?: StyleProp<ViewStyle>
+  wrapperStyle?: StyleProp<ViewStyle>
+  textStyle?: StyleProp<TextStyle>
+}

package/src/GiftedAvatar.tsx

@@ -1,5 +1,4 @@
-import PropTypes from 'prop-types'
-import React, { useCallback, useRef } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import {
   Image,
   Text,
@@ -11,8 +10,8 @@ import {
   TextStyle,
 } from 'react-native'
 import Color from './Color'
-import { User } from './Models'
-import { StylePropType } from './utils'
+import { User } from './types'
+import stylesCommon from './styles'
 
 const {
   carrot,
@@ -26,8 +25,6 @@ const {
 
 const styles = StyleSheet.create({
   avatarStyle: {
-    justifyContent: 'center',
-    alignItems: 'center',
     width: 40,
     height: 40,
     borderRadius: 20,
@@ -54,29 +51,29 @@ export interface GiftedAvatarProps {
 export function GiftedAvatar (
   props: GiftedAvatarProps
 ) {
-  const avatarNameRef = useRef<string | undefined>(undefined)
-  const avatarColorRef = useRef<string | undefined>(undefined)
+  const [avatarName, setAvatarName] = useState<string | undefined>(undefined)
+  const [backgroundColor, setBackgroundColor] = useState<string | undefined>(undefined)
 
   const {
-    user = {
-      name: null,
-      avatar: null,
-    },
-    avatarStyle = {},
-    textStyle = {},
+    user,
+    avatarStyle,
+    textStyle,
     onPress,
   } = props
 
   const setAvatarColor = useCallback(() => {
-    const userName = user.name || ''
+    if (backgroundColor)
+      return
+
+    const userName = user?.name || ''
     const name = userName.toUpperCase().split(' ')
 
     if (name.length === 1)
-      avatarNameRef.current = `${name[0].charAt(0)}`
+      setAvatarName(`${name[0].charAt(0)}`)
     else if (name.length > 1)
-      avatarNameRef.current = `${name[0].charAt(0)}${name[1].charAt(0)}`
+      setAvatarName(`${name[0].charAt(0)}${name[1].charAt(0)}`)
     else
-      avatarNameRef.current = ''
+      setAvatarName('')
 
     let sumChars = 0
     for (let i = 0; i < userName.length; i += 1)
@@ -94,39 +91,39 @@ export function GiftedAvatar (
       midnightBlue,
     ]
 
-    avatarColorRef.current = colors[sumChars % colors.length]
-  }, [user.name])
+    setBackgroundColor(colors[sumChars % colors.length])
+  }, [user?.name, backgroundColor])
 
   const renderAvatar = useCallback(() => {
-    switch (typeof user.avatar) {
+    switch (typeof user?.avatar) {
       case 'function':
-        return user.avatar([styles.avatarStyle, avatarStyle])
+        return user.avatar([stylesCommon.centerItems, styles.avatarStyle, avatarStyle])
       case 'string':
         return (
           <Image
             source={{ uri: user.avatar }}
-            style={[styles.avatarStyle, avatarStyle]}
+            style={[stylesCommon.centerItems, styles.avatarStyle, avatarStyle]}
           />
         )
       case 'number':
         return (
           <Image
             source={user.avatar}
-            style={[styles.avatarStyle, avatarStyle]}
+            style={[stylesCommon.centerItems, styles.avatarStyle, avatarStyle]}
           />
         )
       default:
         return null
     }
-  }, [user.name, user.avatar, avatarStyle])
+  }, [user, avatarStyle])
 
   const renderInitials = useCallback(() => {
     return (
       <Text style={[styles.textStyle, textStyle]}>
-        {avatarNameRef.current}
+        {avatarName}
       </Text>
     )
-  }, [textStyle])
+  }, [textStyle, avatarName])
 
   const handleOnPress = () => {
     const {
@@ -148,11 +145,16 @@ export function GiftedAvatar (
       onLongPress(rest)
   }
 
+  useEffect(() => {
+    setAvatarColor()
+  }, [setAvatarColor])
+
   if (!user || (!user.name && !user.avatar))
     // render placeholder
     return (
       <View
         style={[
+          stylesCommon.centerItems,
           styles.avatarStyle,
           styles.avatarTransparent,
           avatarStyle,
@@ -173,16 +175,15 @@ export function GiftedAvatar (
       </TouchableOpacity>
     )
 
-  setAvatarColor()
-
   return (
     <TouchableOpacity
       disabled={!onPress}
       onPress={handleOnPress}
       onLongPress={handleOnLongPress}
       style={[
+        stylesCommon.centerItems,
         styles.avatarStyle,
-        { backgroundColor: avatarColorRef.current },
+        { backgroundColor },
         avatarStyle,
       ]}
       accessibilityRole='image'
@@ -191,11 +192,3 @@ export function GiftedAvatar (
     </TouchableOpacity>
   )
 }
-
-GiftedAvatar.propTypes = {
-  user: PropTypes.object,
-  onPress: PropTypes.func,
-  onLongPress: PropTypes.func,
-  avatarStyle: StylePropType,
-  textStyle: StylePropType,
-}

package/src/GiftedChat/index.tsx

@@ -0,0 +1,503 @@
+import React, {
+  createRef,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useCallback,
+  RefObject,
+} from 'react'
+import {
+  ActionSheetProvider,
+  ActionSheetProviderRef,
+} from '@expo/react-native-action-sheet'
+import dayjs from 'dayjs'
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+import {
+  Platform,
+  TextInput,
+  View,
+  LayoutChangeEvent,
+} from 'react-native'
+import { Actions } from '../Actions'
+import { Avatar } from '../Avatar'
+import Bubble from '../Bubble'
+import { Composer } from '../Composer'
+import { MAX_COMPOSER_HEIGHT, MIN_COMPOSER_HEIGHT, TEST_ID } from '../Constant'
+import { Day } from '../Day'
+import { GiftedAvatar } from '../GiftedAvatar'
+import { GiftedChatContext } from '../GiftedChatContext'
+import { InputToolbar } from '../InputToolbar'
+import { LoadEarlier } from '../LoadEarlier'
+import Message from '../Message'
+import MessageContainer, { AnimatedList } from '../MessageContainer'
+import { MessageImage } from '../MessageImage'
+import { MessageText } from '../MessageText'
+import {
+  IMessage,
+} from '../types'
+import { Send } from '../Send'
+import { SystemMessage } from '../SystemMessage'
+import { Time } from '../Time'
+import * as utils from '../utils'
+import Animated, {
+  useAnimatedStyle,
+  useAnimatedReaction,
+  useSharedValue,
+  withTiming,
+  runOnJS,
+} from 'react-native-reanimated'
+import { KeyboardProvider, useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller'
+import { GiftedChatProps } from './types'
+
+import stylesCommon from '../styles'
+import styles from './styles'
+
+dayjs.extend(localizedFormat)
+
+function GiftedChat<TMessage extends IMessage = IMessage> (
+  props: GiftedChatProps
+) {
+  const {
+    messages = [],
+    initialText = '',
+    isTyping,
+    messageIdGenerator = () => crypto.randomUUID(),
+    user = {},
+    onSend,
+    locale = 'en',
+    renderLoading,
+    actionSheet = null,
+    textInputProps,
+    renderChatFooter = null,
+    renderInputToolbar = null,
+    bottomOffset = 0,
+    focusOnInputWhenOpeningKeyboard = true,
+    keyboardShouldPersistTaps = Platform.select({
+      ios: 'never',
+      android: 'always',
+      default: 'never',
+    }),
+    onInputTextChanged = null,
+    maxInputLength = null,
+    inverted = true,
+    minComposerHeight = MIN_COMPOSER_HEIGHT,
+    maxComposerHeight = MAX_COMPOSER_HEIGHT,
+    isKeyboardInternallyHandled = true,
+  } = props
+
+  const actionSheetRef = useRef<ActionSheetProviderRef>(null)
+
+  const messageContainerRef = useMemo(
+    () => props.messageContainerRef || createRef<AnimatedList>(),
+    [props.messageContainerRef]
+  )
+
+  const textInputRef = useMemo(
+    () => props.textInputRef || createRef<TextInput>(),
+    [props.textInputRef]
+  )
+
+  const isTextInputWasFocused: RefObject<boolean> = useRef(false)
+
+  const [isInitialized, setIsInitialized] = useState<boolean>(false)
+  const [composerHeight, setComposerHeight] = useState<number>(
+    minComposerHeight!
+  )
+  const [text, setText] = useState<string | undefined>(() => props.text || '')
+  const [isTypingDisabled, setIsTypingDisabled] = useState<boolean>(false)
+
+  const keyboard = useReanimatedKeyboardAnimation()
+  const trackingKeyboardMovement = useSharedValue(false)
+  const debounceEnableTypingTimeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)
+  const keyboardOffsetBottom = useSharedValue(0)
+
+  const contentStyleAnim = useAnimatedStyle(
+    () => ({
+      transform: [
+        { translateY: keyboard.height.value - keyboardOffsetBottom.value },
+      ],
+    }),
+    [keyboard, keyboardOffsetBottom]
+  )
+
+  const getTextFromProp = useCallback(
+    (fallback: string) => {
+      if (props.text === undefined)
+        return fallback
+
+      return props.text
+    },
+    [props.text]
+  )
+
+  /**
+   * Store text input focus status when keyboard hide to retrieve
+   * it afterwards if needed.
+   * `onKeyboardWillHide` may be called twice in sequence so we
+   * make a guard condition (eg. showing image picker)
+   */
+  const handleTextInputFocusWhenKeyboardHide = useCallback(() => {
+    if (!isTextInputWasFocused.current)
+      isTextInputWasFocused.current =
+        textInputRef.current?.isFocused() || false
+  }, [textInputRef])
+
+  /**
+   * Refocus the text input only if it was focused before showing keyboard.
+   * This is needed in some cases (eg. showing image picker).
+   */
+  const handleTextInputFocusWhenKeyboardShow = useCallback(() => {
+    if (
+      textInputRef.current &&
+      isTextInputWasFocused.current &&
+      !textInputRef.current.isFocused()
+    )
+      textInputRef.current.focus()
+
+    // Reset the indicator since the keyboard is shown
+    isTextInputWasFocused.current = false
+  }, [textInputRef])
+
+  const disableTyping = useCallback(() => {
+    clearTimeout(debounceEnableTypingTimeoutId.current)
+    setIsTypingDisabled(true)
+  }, [])
+
+  const enableTyping = useCallback(() => {
+    clearTimeout(debounceEnableTypingTimeoutId.current)
+    setIsTypingDisabled(false)
+  }, [])
+
+  const debounceEnableTyping = useCallback(() => {
+    clearTimeout(debounceEnableTypingTimeoutId.current)
+    debounceEnableTypingTimeoutId.current = setTimeout(() => {
+      enableTyping()
+    }, 50)
+  }, [enableTyping])
+
+  const scrollToBottom = useCallback(
+    (isAnimated = true) => {
+      if (!messageContainerRef?.current)
+        return
+
+      if (inverted) {
+        messageContainerRef.current.scrollToOffset({
+          offset: 0,
+          animated: isAnimated,
+        })
+        return
+      }
+
+      messageContainerRef.current.scrollToEnd({ animated: isAnimated })
+    },
+    [inverted, messageContainerRef]
+  )
+
+  const renderMessages = useMemo(() => {
+    if (!isInitialized)
+      return null
+
+    const { messagesContainerStyle, ...messagesContainerProps } = props
+
+    const fragment = (
+      <View style={[stylesCommon.fill, messagesContainerStyle]}>
+        <MessageContainer
+          {...messagesContainerProps}
+          invertibleScrollViewProps={{
+            inverted,
+            keyboardShouldPersistTaps,
+          }}
+          messages={messages}
+          forwardRef={messageContainerRef}
+          isTyping={isTyping}
+        />
+        {renderChatFooter?.()}
+      </View>
+    )
+
+    return fragment
+  }, [
+    isInitialized,
+    isTyping,
+    messages,
+    props,
+    inverted,
+    keyboardShouldPersistTaps,
+    messageContainerRef,
+    renderChatFooter,
+  ])
+
+  const notifyInputTextReset = useCallback(() => {
+    onInputTextChanged?.('')
+  }, [onInputTextChanged])
+
+  const resetInputToolbar = useCallback(() => {
+    textInputRef.current?.clear()
+
+    notifyInputTextReset()
+
+    setComposerHeight(minComposerHeight!)
+    setText(getTextFromProp(''))
+    enableTyping()
+  }, [
+    minComposerHeight,
+    getTextFromProp,
+    textInputRef,
+    notifyInputTextReset,
+    enableTyping,
+  ])
+
+  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?.(),
+        }
+      })
+
+      if (shouldResetInputToolbar === true) {
+        disableTyping()
+
+        resetInputToolbar()
+      }
+
+      onSend?.(newMessages)
+
+      setTimeout(() => scrollToBottom(), 10)
+    },
+    [messageIdGenerator, onSend, user, resetInputToolbar, disableTyping, scrollToBottom]
+  )
+
+  const onInputSizeChanged = useCallback(
+    (size: { height: number }) => {
+      const newComposerHeight = Math.max(
+        minComposerHeight!,
+        Math.min(maxComposerHeight!, size.height)
+      )
+
+      setComposerHeight(newComposerHeight)
+    },
+    [maxComposerHeight, minComposerHeight]
+  )
+
+  const _onInputTextChanged = useCallback(
+    (_text: string) => {
+      if (isTypingDisabled)
+        return
+
+      onInputTextChanged?.(_text)
+
+      // Only set state if it's not being overridden by a prop.
+      if (props.text === undefined)
+        setText(_text)
+    },
+    [onInputTextChanged, isTypingDisabled, props.text]
+  )
+
+  const onInitialLayoutViewLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      if (isInitialized)
+        return
+
+      const { layout } = e.nativeEvent
+
+      if (layout.height <= 0)
+        return
+
+      notifyInputTextReset()
+
+      setIsInitialized(true)
+      setComposerHeight(minComposerHeight!)
+      setText(getTextFromProp(initialText))
+    },
+    [isInitialized, initialText, minComposerHeight, notifyInputTextReset, getTextFromProp]
+  )
+
+  const inputToolbarFragment = useMemo(() => {
+    if (!isInitialized)
+      return null
+
+    const inputToolbarProps = {
+      ...props,
+      text: getTextFromProp(text!),
+      composerHeight: Math.max(minComposerHeight!, composerHeight),
+      onSend: _onSend,
+      onInputSizeChanged,
+      onTextChanged: _onInputTextChanged,
+      textInputProps: {
+        ...textInputProps,
+        ref: textInputRef,
+        maxLength: isTypingDisabled ? 0 : maxInputLength,
+      },
+    }
+
+    if (renderInputToolbar)
+      return renderInputToolbar(inputToolbarProps)
+
+    return <InputToolbar {...inputToolbarProps} />
+  }, [
+    isInitialized,
+    _onSend,
+    getTextFromProp,
+    maxInputLength,
+    minComposerHeight,
+    onInputSizeChanged,
+    props,
+    text,
+    renderInputToolbar,
+    composerHeight,
+    isTypingDisabled,
+    textInputRef,
+    textInputProps,
+    _onInputTextChanged,
+  ])
+
+  const contextValues = useMemo(
+    () => ({
+      actionSheet:
+        actionSheet ||
+        (() => ({
+          showActionSheetWithOptions:
+            actionSheetRef.current!.showActionSheetWithOptions,
+        })),
+      getLocale: () => locale,
+    }),
+    [actionSheet, locale]
+  )
+
+  useEffect(() => {
+    if (props.text != null)
+      setText(props.text)
+  }, [props.text])
+
+  useAnimatedReaction(
+    () => -keyboard.height.value,
+    (value, prevValue) => {
+      if (prevValue !== null && value !== prevValue) {
+        const isKeyboardMovingUp = value > prevValue
+        if (isKeyboardMovingUp !== trackingKeyboardMovement.value) {
+          trackingKeyboardMovement.value = isKeyboardMovingUp
+          keyboardOffsetBottom.value = withTiming(
+            isKeyboardMovingUp ? bottomOffset : 0,
+            {
+              // If `bottomOffset` exists, we change the duration to a smaller value to fix the delay in the keyboard animation speed
+              duration: bottomOffset ? 150 : 400,
+            }
+          )
+
+          if (focusOnInputWhenOpeningKeyboard)
+            if (isKeyboardMovingUp)
+              runOnJS(handleTextInputFocusWhenKeyboardShow)()
+            else
+              runOnJS(handleTextInputFocusWhenKeyboardHide)()
+
+          if (value === 0) {
+            runOnJS(enableTyping)()
+          } else {
+            runOnJS(disableTyping)()
+            runOnJS(debounceEnableTyping)()
+          }
+        }
+      }
+    },
+    [
+      keyboard,
+      trackingKeyboardMovement,
+      focusOnInputWhenOpeningKeyboard,
+      handleTextInputFocusWhenKeyboardHide,
+      handleTextInputFocusWhenKeyboardShow,
+      enableTyping,
+      disableTyping,
+      debounceEnableTyping,
+      bottomOffset,
+    ]
+  )
+
+  console.log('!')
+
+  return (
+    <GiftedChatContext.Provider value={contextValues}>
+      <ActionSheetProvider ref={actionSheetRef}>
+        <View
+          testID={TEST_ID.WRAPPER}
+          style={[stylesCommon.fill, styles.contentContainer]}
+          onLayout={onInitialLayoutViewLayout}
+        >
+          {isInitialized
+            ? (
+              <Animated.View style={[stylesCommon.fill, isKeyboardInternallyHandled && contentStyleAnim]}>
+                {renderMessages}
+                {inputToolbarFragment}
+              </Animated.View>
+            )
+            : (
+              renderLoading?.()
+            )}
+        </View>
+      </ActionSheetProvider>
+    </GiftedChatContext.Provider>
+  )
+}
+
+function GiftedChatWrapper (props: GiftedChatProps) {
+  return (
+    <KeyboardProvider>
+      <GiftedChat {...props} />
+    </KeyboardProvider>
+  )
+}
+
+GiftedChatWrapper.append = <TMessage extends IMessage>(
+  currentMessages: TMessage[] = [],
+  messages: TMessage[],
+  inverted = true
+) => {
+  if (!Array.isArray(messages))
+    messages = [messages]
+
+  return inverted
+    ? messages.concat(currentMessages)
+    : currentMessages.concat(messages)
+}
+
+GiftedChatWrapper.prepend = <TMessage extends IMessage>(
+  currentMessages: TMessage[] = [],
+  messages: TMessage[],
+  inverted = true
+) => {
+  if (!Array.isArray(messages))
+    messages = [messages]
+
+  return inverted
+    ? currentMessages.concat(messages)
+    : messages.concat(currentMessages)
+}
+
+export * from '../types'
+
+export {
+  GiftedChatWrapper as GiftedChat,
+  Actions,
+  Avatar,
+  Bubble,
+  SystemMessage,
+  MessageImage,
+  MessageText,
+  Composer,
+  Day,
+  InputToolbar,
+  LoadEarlier,
+  Message,
+  MessageContainer,
+  Send,
+  Time,
+  GiftedAvatar,
+  utils
+}

package/src/GiftedChat/styles.ts

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