react-native-gifted-chat 3.3.2 → 3.4.0

package/src/Message/index.tsx

@@ -1,273 +0,0 @@
-import React, { useCallback, useMemo, useRef } from 'react'
-import { View, StyleSheet } from 'react-native'
-import ReanimatedSwipeable, { SwipeableMethods } from 'react-native-gesture-handler/ReanimatedSwipeable'
-import Animated, { SharedValue, useAnimatedStyle } from 'react-native-reanimated'
-
-import { Avatar } from '../Avatar'
-import { Bubble } from '../Bubble'
-import { Color } from '../Color'
-import { IMessage } from '../Models'
-import { SwipeToReplyProps } from '../Reply'
-import { getStyleWithPosition } from '../styles'
-import { SystemMessage } from '../SystemMessage'
-import { isSameUser, renderComponentOrElement } from '../utils'
-import styles from './styles'
-import { MessageProps } from './types'
-
-export * from './types'
-
-interface ReplyIconProps {
-  progress: SharedValue<number>
-  translation: SharedValue<number>
-  direction: 'left' | 'right'
-  position: 'left' | 'right'
-  style?: SwipeToReplyProps<IMessage>['actionContainerStyle']
-}
-
-const ReplyIcon = ({ progress, direction, position, style }: ReplyIconProps) => {
-  const animatedStyle = useAnimatedStyle(() => {
-    'worklet'
-
-    const scale = Math.min(progress.value, 1)
-    // When swiping left (icon on right), icon should move left (negative)
-    // When swiping right (icon on left), icon should move right (positive)
-    const translateX = direction === 'left'
-      ? Math.min(progress.value * -12, -12)
-      : Math.max(progress.value * 12, 12)
-
-    return {
-      transform: [{ scale }, { translateX }],
-      marginLeft: position === 'left' ? 0 : 16,
-      marginRight: position === 'right' ? 0 : 16,
-    }
-  })
-
-  return (
-    <Animated.View style={[localStyles.swipeActionContainer, animatedStyle, style]}>
-      <View style={localStyles.replyIconContainer}>
-        <View style={localStyles.replyIcon}>
-          <View style={localStyles.replyIconArrow} />
-          <View style={localStyles.replyIconLine} />
-        </View>
-      </View>
-    </Animated.View>
-  )
-}
-
-export const Message = <TMessage extends IMessage = IMessage>(props: MessageProps<TMessage>) => {
-  const {
-    currentMessage,
-    renderBubble: renderBubbleProp,
-    renderSystemMessage: renderSystemMessageProp,
-    onMessageLayout,
-    nextMessage,
-    position,
-    containerStyle,
-    user,
-    isUserAvatarVisible,
-    swipeToReply,
-  } = props
-
-  // Extract swipe props
-  const isSwipeToReplyEnabled = swipeToReply?.isEnabled ?? false
-  const swipeToReplyDirection = swipeToReply?.direction ?? 'left'
-  const onSwipeToReply = swipeToReply?.onSwipe
-  const renderSwipeToReplyActionProp = swipeToReply?.renderAction
-  const swipeToReplyActionContainerStyle = swipeToReply?.actionContainerStyle
-
-  const swipeableRef = useRef<SwipeableMethods>(null)
-
-  const renderBubble = useCallback(() => {
-    const {
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      containerStyle,
-      onMessageLayout,
-      swipeToReply,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
-      ...rest
-    } = props
-
-    if (renderBubbleProp)
-      return renderComponentOrElement(renderBubbleProp, rest)
-
-    return <Bubble {...rest} />
-  }, [props, renderBubbleProp])
-
-  const renderSystemMessage = useCallback(() => {
-    const {
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      containerStyle,
-      onMessageLayout,
-      swipeToReply,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
-      ...rest
-    } = props
-
-    if (renderSystemMessageProp)
-      return renderComponentOrElement(renderSystemMessageProp, rest)
-
-    return <SystemMessage {...rest} />
-  }, [props, renderSystemMessageProp])
-
-  const renderAvatar = useCallback(() => {
-    if (
-      user?._id &&
-      currentMessage?.user &&
-      user._id === currentMessage.user._id &&
-      !isUserAvatarVisible
-    )
-      return null
-
-    if (currentMessage?.user?.avatar === null)
-      return null
-
-    const {
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      containerStyle,
-      onMessageLayout,
-      swipeToReply,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
-      ...rest
-    } = props
-
-    return <Avatar {...rest} />
-  }, [
-    props,
-    user,
-    currentMessage,
-    isUserAvatarVisible,
-  ])
-
-  const renderSwipeAction = useCallback((
-    progress: SharedValue<number>,
-    translation: SharedValue<number>
-  ) => {
-    if (renderSwipeToReplyActionProp)
-      return renderSwipeToReplyActionProp(progress, translation, position)
-
-    return (
-      <ReplyIcon
-        progress={progress}
-        translation={translation}
-        direction={swipeToReplyDirection}
-        position={position}
-        style={swipeToReplyActionContainerStyle}
-      />
-    )
-  }, [position, renderSwipeToReplyActionProp, swipeToReplyDirection, swipeToReplyActionContainerStyle])
-
-  const handleSwipeableOpen = useCallback(() => {
-    swipeableRef.current?.close()
-  }, [])
-
-  const handleSwipeableWillOpen = useCallback(() => {
-    if (onSwipeToReply && currentMessage)
-      onSwipeToReply(currentMessage)
-  }, [onSwipeToReply, currentMessage])
-
-  const sameUser = useMemo(() =>
-    isSameUser(currentMessage, nextMessage!)
-  , [currentMessage, nextMessage])
-
-  const messageContent = useMemo(() => {
-    if (currentMessage?.system)
-      return renderSystemMessage()
-
-    return (
-      <View
-        style={[
-          getStyleWithPosition(styles, 'container', position),
-          { marginBottom: sameUser ? 2 : 10 },
-          !props.isInverted && { marginBottom: 2 },
-          containerStyle?.[position],
-        ]}
-      >
-        {position === 'left' && renderAvatar()}
-        {renderBubble()}
-        {position === 'right' && renderAvatar()}
-      </View>
-    )
-  }, [
-    currentMessage?.system,
-    renderSystemMessage,
-    position,
-    sameUser,
-    props.isInverted,
-    containerStyle,
-    renderAvatar,
-    renderBubble,
-  ])
-
-  if (!currentMessage)
-    return null
-
-  // Don't wrap system messages in Swipeable
-  if (currentMessage.system || !isSwipeToReplyEnabled)
-    return (
-      <View onLayout={onMessageLayout}>
-        {messageContent}
-      </View>
-    )
-
-  return (
-    <View onLayout={onMessageLayout}>
-      <ReanimatedSwipeable
-        ref={swipeableRef}
-        friction={2}
-        overshootFriction={8}
-        renderRightActions={swipeToReplyDirection === 'left' ? renderSwipeAction : undefined}
-        renderLeftActions={swipeToReplyDirection === 'right' ? renderSwipeAction : undefined}
-        onSwipeableOpen={handleSwipeableOpen}
-        onSwipeableWillOpen={handleSwipeableWillOpen}
-      >
-        {messageContent}
-      </ReanimatedSwipeable>
-    </View>
-  )
-}
-
-const localStyles = StyleSheet.create({
-  swipeActionContainer: {
-    width: 40,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  replyIconContainer: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    backgroundColor: Color.defaultBlue,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  replyIcon: {
-    width: 14,
-    height: 10,
-    transform: [{ scaleX: -1 }],
-  },
-  replyIconArrow: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: 0,
-    height: 0,
-    borderTopWidth: 5,
-    borderTopColor: 'transparent',
-    borderBottomWidth: 5,
-    borderBottomColor: 'transparent',
-    borderRightWidth: 6,
-    borderRightColor: Color.white,
-  },
-  replyIconLine: {
-    position: 'absolute',
-    top: 3,
-    left: 5,
-    width: 9,
-    height: 4,
-    borderTopWidth: 2,
-    borderRightWidth: 2,
-    borderTopColor: Color.white,
-    borderRightColor: Color.white,
-    borderTopRightRadius: 4,
-  },
-})

package/src/Message/styles.ts

@@ -1,18 +0,0 @@
-import { StyleSheet } from 'react-native'
-
-export default StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    maxWidth: '70%',
-  },
-  container_left: {
-    justifyContent: 'flex-start',
-    marginLeft: 8,
-  },
-  container_right: {
-    justifyContent: 'flex-end',
-    marginRight: 8,
-    alignSelf: 'flex-end',
-  },
-})

package/src/Message/types.ts

@@ -1,26 +0,0 @@
-import { ViewStyle, LayoutChangeEvent } from 'react-native'
-
-import { AvatarProps } from '../Avatar'
-import { BubbleProps } from '../Bubble'
-import { DayProps } from '../Day'
-import { IMessage, User, LeftRightStyle } from '../Models'
-import { SwipeToReplyProps } from '../Reply'
-import { SystemMessageProps } from '../SystemMessage'
-
-export interface MessageProps<TMessage extends IMessage> {
-  isUserAvatarVisible?: boolean
-  position: 'left' | 'right'
-  currentMessage: TMessage
-  nextMessage?: TMessage
-  previousMessage?: TMessage
-  user: User
-  isInverted?: boolean
-  containerStyle?: LeftRightStyle<ViewStyle>
-  renderBubble?: (props: BubbleProps<TMessage>) => React.ReactNode
-  renderDay?: (props: DayProps) => React.ReactNode
-  renderSystemMessage?: (props: SystemMessageProps<TMessage>) => React.ReactNode
-  renderAvatar?: (props: AvatarProps<TMessage>) => React.ReactNode
-  onMessageLayout?: (event: LayoutChangeEvent) => void
-  /** Swipe to reply configuration */
-  swipeToReply?: SwipeToReplyProps<TMessage>
-}

package/src/MessageAudio.tsx

@@ -1,29 +0,0 @@
-import React, { useMemo } from 'react'
-import { View, StyleSheet } from 'react-native'
-import { Text } from 'react-native-gesture-handler'
-import { Color } from './Color'
-
-const styles = StyleSheet.create({
-  container: {
-    padding: 10,
-  },
-  text: {
-    color: Color.alizarin,
-    fontWeight: '600',
-  },
-})
-
-export function MessageAudio () {
-  const content = useMemo(() => (
-    <View style={styles.container}>
-      <Text style={styles.text}>
-        {'Audio is not implemented by GiftedChat.'}
-      </Text>
-      <Text style={styles.text}>
-        {'\nYou need to provide your own implementation by using renderMessageAudio prop.'}
-      </Text>
-    </View>
-  ), [])
-
-  return content
-}

package/src/MessageImage.tsx

@@ -1,251 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import {
-  Image,
-  StyleSheet,
-  View,
-  ImageProps,
-  ViewStyle,
-  StyleProp,
-  ImageStyle,
-  ImageURISource,
-  LayoutChangeEvent,
-  useWindowDimensions,
-  StatusBar,
-} from 'react-native'
-import { BaseButton, GestureHandlerRootView, Text } from 'react-native-gesture-handler'
-import { OverKeyboardView } from 'react-native-keyboard-controller'
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-  Easing,
-  runOnJS,
-} from 'react-native-reanimated'
-import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
-import Zoom from 'react-native-zoom-reanimated'
-import { TouchableOpacity } from './components/TouchableOpacity'
-import { IMessage } from './Models'
-import commonStyles from './styles'
-
-interface ModalContentProps {
-  isVisible: boolean
-  imageSource: ImageURISource
-  modalImageDimensions: { width: number, height: number } | undefined
-  imageProps?: Partial<ImageProps>
-  onClose: () => void
-}
-
-function ModalContent({ isVisible, imageSource, modalImageDimensions, imageProps, onClose }: ModalContentProps) {
-  const insets = useSafeAreaInsets()
-
-  // Animation values
-  const modalOpacity = useSharedValue(0)
-  const modalScale = useSharedValue(0.9)
-  const modalBorderRadius = useSharedValue(40)
-
-  const handleModalClose = useCallback(() => {
-    modalOpacity.value = withTiming(0, { duration: 200, easing: Easing.in(Easing.ease) })
-    modalScale.value = withTiming(0.9, { duration: 200, easing: Easing.in(Easing.ease) }, () => {
-      runOnJS(onClose)()
-    })
-    modalBorderRadius.value = withTiming(40, { duration: 200, easing: Easing.in(Easing.ease) })
-  }, [onClose, modalOpacity, modalScale, modalBorderRadius])
-
-  // Animate on visibility change
-  useEffect(() => {
-    if (isVisible) {
-      modalOpacity.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.ease) })
-      modalScale.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.ease) })
-      modalBorderRadius.value = withTiming(0, { duration: 300, easing: Easing.out(Easing.ease) })
-    }
-  }, [isVisible, modalOpacity, modalScale, modalBorderRadius])
-
-  const modalAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: modalOpacity.value,
-    transform: [{ scale: modalScale.value }],
-  }), [modalOpacity, modalScale])
-
-  const modalBorderRadiusStyle = useAnimatedStyle(() => ({
-    borderRadius: modalBorderRadius.value,
-  }), [modalBorderRadius])
-
-  return (
-    <>
-      <StatusBar animated barStyle='dark-content' />
-      <Animated.View style={[styles.modalOverlay, modalAnimatedStyle, modalBorderRadiusStyle]}>
-        <GestureHandlerRootView style={commonStyles.fill}>
-          <Animated.View style={[commonStyles.fill, styles.modalContent, modalBorderRadiusStyle, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
-
-            {/* close button */}
-            <View style={styles.closeButtonContainer}>
-              <BaseButton onPress={handleModalClose}>
-                <View style={styles.closeButtonContent}>
-                  <Text style={styles.closeButtonIcon}>
-                    {'X'}
-                  </Text>
-                </View>
-              </BaseButton>
-            </View>
-
-            <View style={[commonStyles.fill, commonStyles.centerItems]}>
-              <Zoom>
-                <Image
-                  style={modalImageDimensions}
-                  source={imageSource}
-                  resizeMode='contain'
-                  {...imageProps}
-                />
-              </Zoom>
-            </View>
-          </Animated.View>
-        </GestureHandlerRootView>
-      </Animated.View>
-    </>
-  )
-}
-
-export interface MessageImageProps<TMessage extends IMessage> {
-  currentMessage: TMessage
-  containerStyle?: StyleProp<ViewStyle>
-  imageSourceProps?: Partial<ImageURISource>
-  imageStyle?: StyleProp<ImageStyle>
-  imageProps?: Partial<ImageProps>
-}
-
-export function MessageImage<TMessage extends IMessage = IMessage> ({
-  containerStyle,
-  imageProps,
-  imageSourceProps,
-  imageStyle,
-  currentMessage,
-}: MessageImageProps<TMessage>) {
-  const [isModalVisible, setIsModalVisible] = useState(false)
-  const [imageDimensions, setImageDimensions] = useState<{ width: number, height: number }>()
-  const windowDimensions = useWindowDimensions()
-
-  const imageSource = useMemo(() => ({
-    ...imageSourceProps,
-    uri: currentMessage?.image,
-  }), [imageSourceProps, currentMessage?.image])
-
-  const isImageSourceChanged = useRef(true)
-
-  const computedImageStyle = useMemo(() => [
-    styles.image,
-    imageStyle,
-  ], [imageStyle])
-
-  const handleImagePress = useCallback(() => {
-    if (!imageSource.uri)
-      return
-
-    setIsModalVisible(true)
-
-    if (isImageSourceChanged.current || !imageDimensions)
-      Image.getSize(imageSource.uri, (width, height) => {
-        setImageDimensions({ width, height })
-      })
-  }, [imageSource.uri, imageDimensions])
-
-  const handleModalClose = useCallback(() => {
-    setIsModalVisible(false)
-  }, [])
-
-  const handleImageLayout = useCallback((e: LayoutChangeEvent) => {
-    setImageDimensions({
-      width: e.nativeEvent.layout.width,
-      height: e.nativeEvent.layout.height,
-    })
-  }, [])
-
-  const modalImageDimensions = useMemo(() => {
-    if (!imageDimensions)
-      return undefined
-
-    const aspectRatio = imageDimensions.width / imageDimensions.height
-
-    let width = windowDimensions.width
-    let height = width / aspectRatio
-
-    if (height > windowDimensions.height) {
-      height = windowDimensions.height
-      width = height * aspectRatio
-    }
-
-    return {
-      width,
-      height,
-    }
-  }, [imageDimensions, windowDimensions.height, windowDimensions.width])
-
-  useEffect(() => {
-    isImageSourceChanged.current = true
-  }, [imageSource.uri])
-
-  if (currentMessage == null)
-    return null
-
-  return (
-    <View style={containerStyle}>
-      <TouchableOpacity onPress={handleImagePress}>
-        <Image
-          {...imageProps}
-          style={computedImageStyle}
-          source={imageSource}
-          onLayout={handleImageLayout}
-          resizeMode='cover'
-        />
-      </TouchableOpacity>
-
-      <OverKeyboardView visible={isModalVisible}>
-        <SafeAreaProvider>
-          <ModalContent
-            isVisible={isModalVisible}
-            imageSource={imageSource}
-            modalImageDimensions={modalImageDimensions}
-            imageProps={imageProps}
-            onClose={handleModalClose}
-          />
-        </SafeAreaProvider>
-      </OverKeyboardView>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  image: {
-    width: 150,
-    height: 100,
-    borderRadius: 13,
-    margin: 3,
-  },
-  modalOverlay: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 1000,
-  },
-  modalContent: {
-    backgroundColor: '#000',
-    overflow: 'hidden',
-  },
-  modalImageContainer: {
-    width: '100%',
-    height: '100%',
-  },
-
-  closeButtonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-  },
-  closeButtonContent: {
-    padding: 20,
-  },
-  closeButtonIcon: {
-    fontSize: 20,
-    lineHeight: 20,
-    color: 'white',
-  },
-})