react-native-gifted-chat 3.3.2 → 3.4.0

package/src/TypingIndicator/index.tsx

@@ -1,155 +0,0 @@
-import React, { useCallback, useEffect, useState, useMemo } from 'react'
-import { View } from 'react-native'
-import Animated, {
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-  withDelay,
-  withRepeat,
-  withSequence,
-  withTiming,
-} from 'react-native-reanimated'
-import stylesCommon from '../styles'
-
-import styles from './styles'
-import { TypingIndicatorProps } from './types'
-
-export * from './types'
-
-const DotsAnimation = () => {
-  const dot1 = useSharedValue(0)
-  const dot2 = useSharedValue(0)
-  const dot3 = useSharedValue(0)
-
-  const topY = useMemo(() => -5, [])
-  const bottomY = useMemo(() => 5, [])
-  const duration = useMemo(() => 500, [])
-
-  const dot1Style = useAnimatedStyle(() => ({
-    transform: [{
-      translateY: dot1.value,
-    }],
-  }), [dot1])
-
-  const dot2Style = useAnimatedStyle(() => ({
-    transform: [{
-      translateY: dot2.value,
-    }],
-  }), [dot2])
-
-  const dot3Style = useAnimatedStyle(() => ({
-    transform: [{
-      translateY: dot3.value,
-    }],
-  }), [dot3])
-
-  useEffect(() => {
-    dot1.value = withRepeat(
-      withSequence(
-        withTiming(topY, { duration }),
-        withTiming(bottomY, { duration })
-      ),
-      0,
-      true
-    )
-  }, [dot1, topY, bottomY, duration])
-
-  useEffect(() => {
-    dot2.value = withDelay(100,
-      withRepeat(
-        withSequence(
-          withTiming(topY, { duration }),
-          withTiming(bottomY, { duration })
-        ),
-        0,
-        true
-      )
-    )
-  }, [dot2, topY, bottomY, duration])
-
-  useEffect(() => {
-    dot3.value = withDelay(200,
-      withRepeat(
-        withSequence(
-          withTiming(topY, { duration }),
-          withTiming(bottomY, { duration })
-        ),
-        0,
-        true
-      )
-    )
-  }, [dot3, topY, bottomY, duration])
-
-  return (
-    <View style={[stylesCommon.fill, stylesCommon.centerItems, styles.dots]}>
-      <Animated.View style={[styles.dot, dot1Style]} />
-      <Animated.View style={[styles.dot, dot2Style]} />
-      <Animated.View style={[styles.dot, dot3Style]} />
-    </View>
-  )
-}
-
-export const TypingIndicator = ({ isTyping, style }: TypingIndicatorProps) => {
-  const yCoords = useSharedValue(200)
-  const heightScale = useSharedValue(0)
-  const marginScale = useSharedValue(0)
-
-  const [isVisible, setIsVisible] = useState(isTyping)
-
-  const containerStyle = useAnimatedStyle(() => ({
-    transform: [
-      {
-        translateY: yCoords.value,
-      },
-    ],
-    height: heightScale.value,
-    marginBottom: marginScale.value,
-  }), [yCoords, heightScale, marginScale])
-
-  const slideIn = useCallback(() => {
-    const duration = 250
-
-    yCoords.value = withTiming(0, { duration })
-    heightScale.value = withTiming(35, { duration })
-    marginScale.value = withTiming(8, { duration })
-  }, [yCoords, heightScale, marginScale])
-
-  const slideOut = useCallback(() => {
-    const duration = 250
-
-    yCoords.value = withTiming(200, { duration }, isFinished => {
-      if (isFinished)
-        runOnJS(setIsVisible)(false)
-    })
-    heightScale.value = withTiming(0, { duration })
-    marginScale.value = withTiming(0, { duration })
-  }, [yCoords, heightScale, marginScale])
-
-  useEffect(() => {
-    if (isVisible)
-      if (isTyping)
-        slideIn()
-      else
-        slideOut()
-  }, [isVisible, isTyping, slideIn, slideOut])
-
-  useEffect(() => {
-    if (isTyping)
-      setIsVisible(true)
-  }, [isTyping])
-
-  if (!isVisible)
-    return null
-
-  return (
-    <Animated.View
-      style={[
-        styles.container,
-        containerStyle,
-        style,
-      ]}
-    >
-      <DotsAnimation />
-    </Animated.View>
-  )
-}

package/src/TypingIndicator/styles.ts

@@ -1,22 +0,0 @@
-import { StyleSheet } from 'react-native'
-import { Color } from '../Color'
-
-export default StyleSheet.create({
-  container: {
-    marginLeft: 8,
-    width: 45,
-    borderRadius: 15,
-    backgroundColor: Color.leftBubbleBackground,
-  },
-  dots: {
-    flexDirection: 'row',
-  },
-  dot: {
-    marginLeft: 2,
-    marginRight: 2,
-    borderRadius: 4,
-    width: 8,
-    height: 8,
-    backgroundColor: 'rgba(0, 0, 0, 0.38)',
-  },
-})

package/src/TypingIndicator/types.ts

@@ -1,6 +0,0 @@
-import { StyleProp, ViewStyle } from 'react-native'
-
-export interface TypingIndicatorProps {
-  isTyping?: boolean
-  style?: StyleProp<ViewStyle>
-}

package/src/__tests__/Actions.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { Actions } from '..'
-
-it('should render <Actions /> and compare with snapshot', () => {
-  const { toJSON } = render(<Actions />)
-  expect(toJSON()).toMatchSnapshot()
-})

package/src/__tests__/Avatar.test.tsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { Avatar } from '..'
-import { DEFAULT_TEST_MESSAGE } from './data'
-
-it('should render <Avatar /> and compare with snapshot', () => {
-  const { toJSON } = render(
-    <Avatar
-      renderAvatar={() => 'renderAvatar'}
-      position='left'
-      currentMessage={DEFAULT_TEST_MESSAGE}
-    />
-  )
-
-  expect(toJSON()).toMatchSnapshot()
-})

package/src/__tests__/Bubble.test.tsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { Bubble } from '..'
-import { DEFAULT_TEST_MESSAGE } from './data'
-
-it('should render <Bubble /> and compare with snapshot', () => {
-  const { toJSON } = render(
-    <Bubble
-      user={{ _id: 1 }}
-      currentMessage={DEFAULT_TEST_MESSAGE}
-      position='left'
-    />
-  )
-
-  expect(toJSON()).toMatchSnapshot()
-})

package/src/__tests__/Color.test.tsx

@@ -1,5 +0,0 @@
-import { Color } from '../Color'
-
-it('should compare Color with snapshot', () => {
-  expect(Color).toMatchSnapshot()
-})

package/src/__tests__/Composer.test.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { Composer } from '..'
-
-it('should render <Composer /> and compare with snapshot', () => {
-  const { toJSON } = render(<Composer />)
-
-  expect(toJSON()).toMatchSnapshot()
-})

package/src/__tests__/Constant.test.tsx

@@ -1,5 +0,0 @@
-import * as Constant from '../Constant'
-
-it('should compare Constant with snapshot', () => {
-  expect(Constant).toMatchSnapshot()
-})

package/src/__tests__/Day.test.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { Day } from '..'
-import { DEFAULT_TEST_MESSAGE } from './data'
-
-describe('Day', () => {
-  it('should not render <Day /> and compare with snapshot', () => {
-    const { toJSON } = render(<Day createdAt={DEFAULT_TEST_MESSAGE.createdAt} />)
-
-    expect(toJSON()).toMatchSnapshot()
-  })
-
-  it('should render <Day /> and compare with snapshot', () => {
-    const { toJSON } = render(
-      <Day createdAt={DEFAULT_TEST_MESSAGE.createdAt} />
-    )
-    expect(toJSON()).toMatchSnapshot()
-  })
-})

package/src/__tests__/DayAnimated.test.tsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import { View, Text } from 'react-native'
-import { render } from '@testing-library/react-native'
-import { DayProps } from '../Day'
-import { DayAnimated } from '../MessagesContainer/components/DayAnimated'
-import { DEFAULT_TEST_MESSAGE } from './data'
-
-const mockDaysPositions = { value: {} }
-const mockScrolledY = { value: 0 }
-const mockListHeight = { value: 800 }
-
-describe('DayAnimated', () => {
-  it('should render DayAnimated with default Day component', () => {
-    const { toJSON } = render(
-      <DayAnimated
-        scrolledY={mockScrolledY}
-        daysPositions={mockDaysPositions}
-        listHeight={mockListHeight}
-        messages={[DEFAULT_TEST_MESSAGE]}
-        isLoading={false}
-      />
-    )
-    expect(toJSON()).toMatchSnapshot()
-  })
-
-  it('should use custom renderDay when provided', () => {
-    const customRenderDay = jest.fn((props: DayProps) => (
-      <View testID='custom-day'>
-        <Text>Custom Day: {props.createdAt.toLocaleString()}</Text>
-      </View>
-    ))
-
-    const { toJSON } = render(
-      <DayAnimated
-        scrolledY={mockScrolledY}
-        daysPositions={mockDaysPositions}
-        listHeight={mockListHeight}
-        messages={[DEFAULT_TEST_MESSAGE]}
-        isLoading={false}
-        renderDay={customRenderDay}
-      />
-    )
-
-    expect(toJSON()).toMatchSnapshot()
-  })
-})

package/src/__tests__/GiftedAvatar.test.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { GiftedAvatar } from '..'
-
-it('should render <GiftedAvatar /> and compare with snapshot', () => {
-  const { toJSON } = render(<GiftedAvatar />)
-
-  expect(toJSON()).toMatchSnapshot()
-})

package/src/__tests__/GiftedChat.test.tsx

@@ -1,60 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { GiftedChat } from '..'
-
-const messages = [
-  {
-    _id: 1,
-    text: 'Hello developer',
-    createdAt: new Date(),
-    user: {
-      _id: 2,
-      name: 'John Doe',
-    },
-  },
-]
-
-it('should render <GiftedChat/> and compare with snapshot', () => {
-  const { toJSON } = render(
-    <GiftedChat
-      messages={messages}
-      onSend={() => {}}
-      user={{
-        _id: 1,
-      }}
-    />
-  )
-
-  expect(toJSON()).toMatchSnapshot()
-})
-
-it('should render <GiftedChat/> with light colorScheme and compare with snapshot', () => {
-  const { toJSON } = render(
-    <GiftedChat
-      messages={messages}
-      onSend={() => {}}
-      user={{
-        _id: 1,
-      }}
-      colorScheme='light'
-    />
-  )
-
-  expect(toJSON()).toMatchSnapshot()
-})
-
-it('should render <GiftedChat/> with dark colorScheme and compare with snapshot', () => {
-  const { toJSON } = render(
-    <GiftedChat
-      messages={messages}
-      onSend={() => {}}
-      user={{
-        _id: 1,
-      }}
-      colorScheme='dark'
-    />
-  )
-
-  expect(toJSON()).toMatchSnapshot()
-})

package/src/__tests__/InputToolbar.test.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { InputToolbar } from '..'
-
-it('should render <InputToolbar /> and compare with snapshot', () => {
-  const { toJSON } = render(<InputToolbar />)
-
-  expect(toJSON()).toMatchSnapshot()
-})

package/src/__tests__/LoadEarlier.test.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { LoadEarlierMessages } from '..'
-
-it('should render <LoadEarlierMessages /> and compare with snapshot', () => {
-  const { toJSON } = render(<LoadEarlierMessages isAvailable isLoading={false} onPress={() => {}} />)
-
-  expect(toJSON()).toMatchSnapshot()
-})

package/src/__tests__/Message.test.tsx

@@ -1,67 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { Message } from '..'
-import { DEFAULT_TEST_MESSAGE } from './data'
-
-describe('Message component', () => {
-  it('should render <Message /> and compare with snapshot', () => {
-    const { toJSON } = render(
-      <Message
-        key='123'
-        user={{ _id: 1 }}
-        currentMessage={{
-          _id: 1,
-          text: 'test',
-          createdAt: 1554744013721,
-          user: { _id: 1 },
-        }}
-        position='left'
-      />
-    )
-
-    expect(toJSON()).toMatchSnapshot()
-  })
-
-  it('should NOT render <Message />', () => {
-    const { toJSON } = render(
-      <Message key='123' user={{ _id: 1 }} currentMessage={null} position='left' />
-    )
-
-    expect(toJSON()).toMatchSnapshot()
-  })
-
-  it('should render <Message /> with Avatar', () => {
-    const { toJSON } = render(
-      <Message
-        key='123'
-        user={{ _id: 1 }}
-        currentMessage={DEFAULT_TEST_MESSAGE}
-        position='left'
-        isUserAvatarVisible
-      />
-    )
-
-    expect(toJSON()).toMatchSnapshot()
-  })
-
-  it('should render null if user has no Avatar', () => {
-    const { toJSON } = render(
-      <Message
-        key='123'
-        user={{ _id: 1 }}
-        currentMessage={{
-          ...DEFAULT_TEST_MESSAGE,
-          user: {
-            _id: 1,
-            avatar: undefined,
-          },
-        }}
-        position='left'
-        isUserAvatarVisible
-      />
-    )
-
-    expect(toJSON()).toMatchSnapshot()
-  })
-})

package/src/__tests__/MessageImage.test.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { MessageImage } from '..'
-import { DEFAULT_TEST_MESSAGE } from './data'
-
-describe('MessageImage', () => {
-  it('should not render <MessageImage /> and compare with snapshot', () => {
-    const { toJSON } = render(<MessageImage currentMessage={null} />)
-    expect(toJSON()).toMatchSnapshot()
-  })
-
-  it('should  render <MessageImage /> and compare with snapshot', () => {
-    const { toJSON } = render(
-      <MessageImage
-        currentMessage={{
-          ...DEFAULT_TEST_MESSAGE,
-          image: 'url://to/image.png',
-        }}
-      />
-    )
-    expect(toJSON()).toMatchSnapshot()
-  })
-})

package/src/__tests__/MessageReply.test.tsx

@@ -1,54 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { MessageReply } from '../components/MessageReply'
-import { IMessage, ReplyMessage } from '../Models'
-
-const replyMessage: ReplyMessage = {
-  _id: 'reply-1',
-  text: 'Original message text',
-  user: {
-    _id: 2,
-    name: 'John Doe',
-  },
-}
-
-const currentMessage: IMessage = {
-  _id: 'msg-1',
-  text: 'Reply text',
-  createdAt: new Date(),
-  user: {
-    _id: 1,
-    name: 'Jane Doe',
-  },
-  replyMessage,
-}
-
-it('should render <MessageReply /> and compare with snapshot', () => {
-  const { toJSON } = render(
-    <MessageReply
-      replyMessage={replyMessage}
-      currentMessage={currentMessage}
-      position='left'
-    />
-  )
-
-  expect(toJSON()).toMatchSnapshot()
-})
-
-it('should render <MessageReply /> on right position and compare with snapshot', () => {
-  const currentMessageFromCurrentUser: IMessage = {
-    ...currentMessage,
-    user: replyMessage.user,
-  }
-
-  const { toJSON } = render(
-    <MessageReply
-      replyMessage={replyMessage}
-      currentMessage={currentMessageFromCurrentUser}
-      position='right'
-    />
-  )
-
-  expect(toJSON()).toMatchSnapshot()
-})

package/src/__tests__/MessageText.test.tsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { MessageText } from '..'
-import { DEFAULT_TEST_MESSAGE } from './data'
-
-it('should render <MessageText /> and compare with snapshot', () => {
-  const { toJSON } = render(
-    <MessageText
-      currentMessage={DEFAULT_TEST_MESSAGE}
-    />
-  )
-
-  expect(toJSON()).toMatchSnapshot()
-})

package/src/__tests__/MessagesContainer.test.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { MessagesContainer } from '..'
-import { DEFAULT_TEST_MESSAGE } from './data'
-
-it('should render <MessagesContainer /> without crashing', () => {
-  // Just verify it renders without throwing
-  expect(() => render(
-    <MessagesContainer
-      messages={[DEFAULT_TEST_MESSAGE]}
-      user={{ _id: 1 }}
-    />
-  )).not.toThrow()
-})
-
-it('should render <MessagesContainer /> with multiple messages', () => {
-  const messages = [
-    { ...DEFAULT_TEST_MESSAGE, _id: 'test1' },
-    { ...DEFAULT_TEST_MESSAGE, _id: 'test2' },
-  ]
-
-  expect(() => render(
-    <MessagesContainer
-      messages={messages}
-      user={{ _id: 1 }}
-    />
-  )).not.toThrow()
-})
-
-it('should render <MessagesContainer /> with empty messages', () => {
-  expect(() => render(
-    <MessagesContainer
-      messages={[]}
-      user={{ _id: 1 }}
-    />
-  )).not.toThrow()
-})

package/src/__tests__/ReplyPreview.test.tsx

@@ -1,41 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { ReplyPreview } from '../components/ReplyPreview'
-import { ReplyMessage } from '../Models'
-
-const replyMessage: ReplyMessage = {
-  _id: 'reply-1',
-  text: 'Original message to reply to',
-  user: {
-    _id: 2,
-    name: 'John Doe',
-  },
-}
-
-it('should render <ReplyPreview /> and compare with snapshot', () => {
-  const { toJSON } = render(
-    <ReplyPreview
-      replyMessage={replyMessage}
-      onClearReply={() => {}}
-    />
-  )
-
-  expect(toJSON()).toMatchSnapshot()
-})
-
-it('should render <ReplyPreview /> with image and compare with snapshot', () => {
-  const replyWithImage: ReplyMessage = {
-    ...replyMessage,
-    image: 'https://example.com/image.jpg',
-  }
-
-  const { toJSON } = render(
-    <ReplyPreview
-      replyMessage={replyWithImage}
-      onClearReply={() => {}}
-    />
-  )
-
-  expect(toJSON()).toMatchSnapshot()
-})

package/src/__tests__/Send.test.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { Send } from '..'
-
-describe('Send', () => {
-  it('should not render <Send /> and compare with snapshot', () => {
-    const { toJSON } = render(<Send />)
-    expect(toJSON()).toMatchSnapshot()
-  })
-
-  it('should always render <Send /> and compare with snapshot', () => {
-    const { toJSON } = render(<Send isSendButtonAlwaysVisible />)
-    expect(toJSON()).toMatchSnapshot()
-  })
-
-  it('should render <Send /> where there is input and compare with snapshot', () => {
-    const { toJSON } = render(<Send text='test input' />)
-    expect(toJSON()).toMatchSnapshot()
-  })
-})