react-native-gifted-chat 2.4.1 → 2.6.0

package/src/Models.ts

@@ -0,0 +1,84 @@
+import { StyleProp, ViewStyle } from 'react-native'
+import { LightboxProps } from 'react-native-lightbox-v2'
+
+export { ActionsProps } from './Actions'
+export { AvatarProps } from './Avatar'
+export {
+  BubbleProps,
+  RenderMessageImageProps,
+  RenderMessageVideoProps,
+  RenderMessageAudioProps,
+  RenderMessageTextProps
+} from './Bubble'
+export { ComposerProps } from './Composer'
+export { DayProps } from './Day'
+export { GiftedAvatarProps } from './GiftedAvatar'
+export { InputToolbarProps } from './InputToolbar'
+export { LoadEarlierProps } from './LoadEarlier'
+export { MessageProps } from './Message'
+export { MessageContainerProps } from './MessageContainer'
+export { MessageImageProps } from './MessageImage'
+export { MessageTextProps } from './MessageText'
+export { QuickRepliesProps } from './QuickReplies'
+export { SendProps } from './Send'
+export { SystemMessageProps } from './SystemMessage'
+export { TimeProps } from './Time'
+
+export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
+
+export interface LeftRightStyle<T> {
+  left?: StyleProp<T>
+  right?: StyleProp<T>
+}
+
+type renderFunction = (x: unknown) => JSX.Element
+
+export interface User {
+  _id: string | number
+  name?: string
+  avatar?: string | number | renderFunction
+}
+
+export interface Reply {
+  title: string
+  value: string
+  messageId?: number | string
+}
+
+export interface QuickReplies {
+  type: 'radio' | 'checkbox'
+  values: Reply[]
+  keepIt?: boolean
+}
+
+export interface IMessage {
+  _id: string | number
+  text: string
+  createdAt: Date | number
+  user: User
+  image?: string
+  video?: string
+  audio?: string
+  system?: boolean
+  sent?: boolean
+  received?: boolean
+  pending?: boolean
+  quickReplies?: QuickReplies
+}
+
+export type IChatMessage = IMessage
+
+export interface MessageVideoProps<TMessage extends IMessage> {
+  currentMessage: TMessage
+  containerStyle?: StyleProp<ViewStyle>
+  videoStyle?: StyleProp<ViewStyle>
+  videoProps?: object
+  lightboxProps?: LightboxProps
+}
+
+export interface MessageAudioProps<TMessage extends IMessage> {
+  currentMessage: TMessage
+  containerStyle?: StyleProp<ViewStyle>
+  audioStyle?: StyleProp<ViewStyle>
+  audioProps?: object
+}

package/src/QuickReplies.tsx

@@ -0,0 +1,186 @@
+import PropTypes from 'prop-types'
+import React, { useState, useMemo } from 'react'
+import {
+  Text,
+  StyleSheet,
+  View,
+  TouchableOpacity,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native'
+import { useCallbackOne } from 'use-memo-one'
+import { IMessage, Reply } from './Models'
+import Color from './Color'
+import { StylePropType } from './utils'
+import { warning } from './logging'
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    maxWidth: 300,
+  },
+  quickReply: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    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 handlePress = useCallbackOne(
+    (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]
+  )
+
+  const handleSend = (repliesData: Reply[]) => () => {
+    onQuickReply?.(
+      repliesData.map((reply: Reply) => ({
+        ...reply,
+        messageId: currentMessage!._id,
+      }))
+    )
+  }
+
+  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={[
+                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>
+          )
+        }
+      )}
+      {replies.length > 0 && (
+        <TouchableOpacity
+          style={[styles.quickReply, styles.sendLink]}
+          onPress={handleSend(replies)}
+        >
+          {renderQuickReplySend?.() || (
+            <Text style={styles.sendLinkText}>{sendText}</Text>
+          )}
+        </TouchableOpacity>
+      )}
+    </View>
+  )
+}
+
+QuickReplies.propTypes = {
+  currentMessage: PropTypes.object.isRequired,
+  onQuickReply: PropTypes.func,
+  color: PropTypes.string,
+  sendText: PropTypes.string,
+  renderQuickReplySend: PropTypes.func,
+  quickReplyStyle: StylePropType,
+}

package/src/Send.tsx

@@ -0,0 +1,102 @@
+import React, { useMemo, useCallback } from 'react'
+import PropTypes from 'prop-types'
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  TouchableOpacityProps,
+} from 'react-native'
+
+import Color from './Color'
+import { IMessage } from './Models'
+import { StylePropType } from './utils'
+import { TEST_ID } from './Constant'
+
+const styles = StyleSheet.create({
+  container: {
+    height: 44,
+    justifyContent: 'flex-end',
+  },
+  text: {
+    color: Color.defaultBlue,
+    fontWeight: '600',
+    fontSize: 17,
+    backgroundColor: Color.backgroundTransparent,
+    marginBottom: 12,
+    marginLeft: 10,
+    marginRight: 10,
+  },
+})
+
+export interface SendProps<TMessage extends IMessage> {
+  text?: string
+  label?: string
+  containerStyle?: StyleProp<ViewStyle>
+  textStyle?: StyleProp<TextStyle>
+  children?: React.ReactNode
+  alwaysShowSend?: boolean
+  disabled?: 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',
+  alwaysShowSend = false,
+  disabled = false,
+  sendButtonProps,
+  onSend,
+}: SendProps<TMessage>) => {
+  const handleOnPress = useCallback(() => {
+    if (text && onSend)
+      onSend({ text: text.trim() } as Partial<TMessage>, true)
+  }, [text, onSend])
+
+  const showSend = useMemo(
+    () => alwaysShowSend || (text && text.trim().length > 0),
+    [alwaysShowSend, text]
+  )
+
+  if (!showSend)
+    return null
+
+  return (
+    <TouchableOpacity
+      testID={TEST_ID.SEND_TOUCHABLE}
+      accessible
+      accessibilityLabel='send'
+      style={[styles.container, containerStyle]}
+      onPress={handleOnPress}
+      accessibilityRole='button'
+      disabled={disabled}
+      {...sendButtonProps}
+    >
+      <View>
+        {children || <Text style={[styles.text, textStyle]}>{label}</Text>}
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+Send.propTypes = {
+  text: PropTypes.string,
+  onSend: PropTypes.func,
+  label: PropTypes.string,
+  containerStyle: StylePropType,
+  textStyle: StylePropType,
+  children: PropTypes.element,
+  alwaysShowSend: PropTypes.bool,
+  disabled: PropTypes.bool,
+  sendButtonProps: PropTypes.object,
+}

package/src/SystemMessage.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import {
+  StyleSheet,
+  Text,
+  View,
+  ViewStyle,
+  StyleProp,
+  TextStyle,
+} from 'react-native'
+import PropTypes from 'prop-types'
+import Color from './Color'
+import { IMessage } from './Models'
+import { StylePropType } from './utils'
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+    marginTop: 5,
+    marginBottom: 10,
+  },
+  text: {
+    backgroundColor: Color.backgroundTransparent,
+    color: Color.defaultColor,
+    fontSize: 12,
+    fontWeight: '300',
+  },
+})
+
+export interface SystemMessageProps<TMessage extends IMessage> {
+  currentMessage: TMessage
+  containerStyle?: StyleProp<ViewStyle>
+  wrapperStyle?: StyleProp<ViewStyle>
+  textStyle?: StyleProp<TextStyle>
+}
+
+export function SystemMessage<TMessage extends IMessage = IMessage> ({
+  currentMessage,
+  containerStyle,
+  wrapperStyle,
+  textStyle,
+}: SystemMessageProps<TMessage>) {
+  if (currentMessage == null || currentMessage.system === false)
+    return null
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <View style={wrapperStyle}>
+        <Text style={[styles.text, textStyle]}>{currentMessage.text}</Text>
+      </View>
+    </View>
+  )
+}
+
+SystemMessage.propTypes = {
+  currentMessage: PropTypes.object,
+  containerStyle: StylePropType,
+  wrapperStyle: StylePropType,
+  textStyle: StylePropType,
+}

package/src/Time.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import { StyleSheet, Text, View, ViewStyle, TextStyle } from 'react-native'
+import dayjs from 'dayjs'
+
+import Color from './Color'
+import { TIME_FORMAT } from './Constant'
+import { LeftRightStyle, IMessage } from './Models'
+import { StylePropType } from './utils'
+import { useChatContext } from './GiftedChatContext'
+
+const { containerStyle } = StyleSheet.create({
+  containerStyle: {
+    marginLeft: 10,
+    marginRight: 10,
+    marginBottom: 5,
+  },
+})
+const { textStyle } = StyleSheet.create({
+  textStyle: {
+    fontSize: 10,
+    textAlign: 'right',
+  },
+})
+
+const styles = {
+  left: StyleSheet.create({
+    container: {
+      ...containerStyle,
+    },
+    text: {
+      color: Color.timeTextColor,
+      ...textStyle,
+    },
+  }),
+  right: StyleSheet.create({
+    container: {
+      ...containerStyle,
+    },
+    text: {
+      color: Color.white,
+      ...textStyle,
+    },
+  }),
+}
+
+export interface TimeProps<TMessage extends IMessage> {
+  position?: 'left' | 'right'
+  currentMessage: TMessage
+  containerStyle?: LeftRightStyle<ViewStyle>
+  timeTextStyle?: LeftRightStyle<TextStyle>
+  timeFormat?: string
+}
+
+export function Time<TMessage extends IMessage = IMessage> ({
+  position = 'left',
+  containerStyle,
+  currentMessage,
+  timeFormat = TIME_FORMAT,
+  timeTextStyle,
+}: TimeProps<TMessage>) {
+  const { getLocale } = useChatContext()
+  if (currentMessage == null)
+    return null
+
+  return (
+    <View
+      style={[
+        styles[position].container,
+        containerStyle && containerStyle[position],
+      ]}
+    >
+      <Text
+        style={[
+          styles[position].text,
+          timeTextStyle && timeTextStyle[position],
+        ]}
+      >
+        {dayjs(currentMessage.createdAt).locale(getLocale()).format(timeFormat)}
+      </Text>
+    </View>
+  )
+}
+
+Time.propTypes = {
+  position: PropTypes.oneOf(['left', 'right']),
+  currentMessage: PropTypes.object,
+  containerStyle: PropTypes.shape({
+    left: StylePropType,
+    right: StylePropType,
+  }),
+  timeFormat: PropTypes.string,
+  timeTextStyle: PropTypes.shape({
+    left: StylePropType,
+    right: StylePropType,
+  }),
+}

package/src/TypingIndicator.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react'
+import { Animated, StyleSheet } from 'react-native'
+import { TypingAnimation } from 'react-native-typing-animation'
+import { useUpdateLayoutEffect } from './hooks/useUpdateLayoutEffect'
+import Color from './Color'
+
+interface Props {
+  isTyping?: boolean
+}
+
+const TypingIndicator = ({ isTyping }: Props) => {
+  const { yCoords, heightScale, marginScale } = React.useMemo(
+    () => ({
+      yCoords: new Animated.Value(200),
+      heightScale: new Animated.Value(0),
+      marginScale: new Animated.Value(0),
+    }),
+    []
+  )
+
+  // on isTyping fire side effect
+  useUpdateLayoutEffect(() => {
+    if (isTyping)
+      slideIn()
+    else
+      slideOut()
+  }, [isTyping])
+
+  // side effect
+  const slideIn = () => {
+    Animated.parallel([
+      Animated.spring(yCoords, {
+        toValue: 0,
+        useNativeDriver: false,
+      }),
+      Animated.timing(heightScale, {
+        toValue: 35,
+        duration: 250,
+        useNativeDriver: false,
+      }),
+      Animated.timing(marginScale, {
+        toValue: 8,
+        duration: 250,
+        useNativeDriver: false,
+      }),
+    ]).start()
+  }
+
+  // side effect
+  const slideOut = () => {
+    Animated.parallel([
+      Animated.spring(yCoords, {
+        toValue: 200,
+        useNativeDriver: false,
+      }),
+      Animated.timing(heightScale, {
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: false,
+      }),
+      Animated.timing(marginScale, {
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: false,
+      }),
+    ]).start()
+  }
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          transform: [
+            {
+              translateY: yCoords,
+            },
+          ],
+          height: heightScale,
+          marginBottom: marginScale,
+        },
+      ]}
+    >
+      {
+        isTyping
+          ? (
+            <TypingAnimation
+              style={{ marginLeft: 6, marginTop: 7.2 }}
+              dotRadius={4}
+              dotMargin={5.5}
+              dotColor='rgba(0, 0, 0, 0.38)'
+            />
+          )
+          : null
+      }
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginLeft: 8,
+    width: 45,
+    borderRadius: 15,
+    backgroundColor: Color.leftBubbleBackground,
+  },
+})
+
+export default TypingIndicator

package/src/__tests__/Actions.test.tsx

@@ -0,0 +1,10 @@
+import 'react-native'
+import React from 'react'
+import renderer from 'react-test-renderer'
+
+import { Actions } from '../GiftedChat'
+
+it('should render <Actions /> and compare with snapshot', () => {
+  const tree = renderer.create(<Actions />).toJSON()
+  expect(tree).toMatchSnapshot()
+})

package/src/__tests__/Avatar.test.tsx

@@ -0,0 +1,13 @@
+import 'react-native'
+import React from 'react'
+import renderer from 'react-test-renderer'
+
+import { Avatar } from '../GiftedChat'
+
+it('should render <Avatar /> and compare with snapshot', () => {
+  const tree = renderer
+    .create(<Avatar renderAvatar={() => 'renderAvatar'} position='left' />)
+    .toJSON()
+
+  expect(tree).toMatchSnapshot()
+})

package/src/__tests__/Bubble.test.tsx

@@ -0,0 +1,23 @@
+import 'react-native'
+import React from 'react'
+import renderer from 'react-test-renderer'
+
+import { Bubble } from '../GiftedChat'
+
+it('should render <Bubble /> and compare with snapshot', () => {
+  const tree = renderer
+    .create(
+      <Bubble
+        user={{ _id: 1 }}
+        currentMessage={{
+          _id: 1,
+          text: 'test',
+          createdAt: 1554744013721,
+          user: { _id: 1 },
+        }}
+      />
+    )
+    .toJSON()
+
+  expect(tree).toMatchSnapshot()
+})

package/src/__tests__/Color.test.tsx

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

package/src/__tests__/Composer.test.tsx

@@ -0,0 +1,11 @@
+import 'react-native'
+import React from 'react'
+import renderer from 'react-test-renderer'
+
+import { Composer } from '../GiftedChat'
+
+it('should render <Composer /> and compare with snapshot', () => {
+  const tree = renderer.create(<Composer />).toJSON()
+
+  expect(tree).toMatchSnapshot()
+})