react-native-gifted-chat 2.6.5 → 2.7.0

package/src/{Bubble.tsx → Bubble/index.tsx}

@@ -1,258 +1,32 @@
-import PropTypes from 'prop-types'
 import React from 'react'
 import {
   Text,
-  StyleSheet,
   TouchableWithoutFeedback,
   View,
-  StyleProp,
-  ViewStyle,
-  TextStyle,
 } from 'react-native'
 
-import { GiftedChatContext } from './GiftedChatContext'
-import { QuickReplies, QuickRepliesProps } from './QuickReplies'
-import { MessageText, MessageTextProps } from './MessageText'
-import { MessageImage, MessageImageProps } from './MessageImage'
-import { MessageVideo } from './MessageVideo'
-import { MessageAudio } from './MessageAudio'
-import { Time, TimeProps } from './Time'
+import { GiftedChatContext } from '../GiftedChatContext'
+import { QuickReplies } from '../QuickReplies'
+import { MessageText } from '../MessageText'
+import { MessageImage } from '../MessageImage'
+import { MessageVideo } from '../MessageVideo'
+import { MessageAudio } from '../MessageAudio'
+import { Time } from '../Time'
 
-import Color from './Color'
-import { StylePropType, isSameUser, isSameDay } from './utils'
-import {
-  User,
-  IMessage,
-  LeftRightStyle,
-  Reply,
-  Omit,
-  MessageVideoProps,
-  MessageAudioProps,
-} from './Models'
-
-const styles = {
-  left: StyleSheet.create({
-    container: {
-      flex: 1,
-      alignItems: 'flex-start',
-    },
-    wrapper: {
-      borderRadius: 15,
-      backgroundColor: Color.leftBubbleBackground,
-      marginRight: 60,
-      minHeight: 20,
-      justifyContent: 'flex-end',
-    },
-    containerToNext: {
-      borderBottomLeftRadius: 3,
-    },
-    containerToPrevious: {
-      borderTopLeftRadius: 3,
-    },
-    bottom: {
-      flexDirection: 'row',
-      justifyContent: 'flex-start',
-    },
-  }),
-  right: StyleSheet.create({
-    container: {
-      flex: 1,
-      alignItems: 'flex-end',
-    },
-    wrapper: {
-      borderRadius: 15,
-      backgroundColor: Color.defaultBlue,
-      marginLeft: 60,
-      minHeight: 20,
-      justifyContent: 'flex-end',
-    },
-    containerToNext: {
-      borderBottomRightRadius: 3,
-    },
-    containerToPrevious: {
-      borderTopRightRadius: 3,
-    },
-    bottom: {
-      flexDirection: 'row',
-      justifyContent: 'flex-end',
-    },
-  }),
-  content: StyleSheet.create({
-    tick: {
-      fontSize: 10,
-      backgroundColor: Color.backgroundTransparent,
-      color: Color.white,
-    },
-    tickView: {
-      flexDirection: 'row',
-      marginRight: 10,
-    },
-    username: {
-      top: -3,
-      left: 0,
-      fontSize: 12,
-      backgroundColor: 'transparent',
-      color: '#aaa',
-    },
-    usernameView: {
-      flexDirection: 'row',
-      marginHorizontal: 10,
-    },
-  }),
-}
+import { isSameUser, isSameDay } from '../utils'
+import { IMessage } from '../types'
+import { BubbleProps } from './types'
 
-/* eslint-disable no-use-before-define */
-export type RenderMessageImageProps<TMessage extends IMessage> = Omit<
-  BubbleProps<TMessage>,
-  'containerStyle' | 'wrapperStyle'
-> &
-  MessageImageProps<TMessage>
-
-export type RenderMessageVideoProps<TMessage extends IMessage> = Omit<
-  BubbleProps<TMessage>,
-  'containerStyle' | 'wrapperStyle'
-> &
-  MessageVideoProps<TMessage>
-
-export type RenderMessageAudioProps<TMessage extends IMessage> = Omit<
-  BubbleProps<TMessage>,
-  'containerStyle' | 'wrapperStyle'
-> &
-  MessageAudioProps<TMessage>
-
-export type RenderMessageTextProps<TMessage extends IMessage> = Omit<
-  BubbleProps<TMessage>,
-  'containerStyle' | 'wrapperStyle'
-> &
-  MessageTextProps<TMessage>
-/* eslint-enable no-use-before-define */
-
-export interface BubbleProps<TMessage extends IMessage> {
-  user?: User
-  touchableProps?: object
-  renderUsernameOnMessage?: boolean
-  isCustomViewBottom?: boolean
-  inverted?: boolean
-  position: 'left' | 'right'
-  currentMessage: TMessage
-  nextMessage?: TMessage
-  previousMessage?: TMessage
-  optionTitles?: string[]
-  containerStyle?: LeftRightStyle<ViewStyle>
-  wrapperStyle?: LeftRightStyle<ViewStyle>
-  textStyle?: LeftRightStyle<TextStyle>
-  bottomContainerStyle?: LeftRightStyle<ViewStyle>
-  tickStyle?: StyleProp<TextStyle>
-  containerToNextStyle?: LeftRightStyle<ViewStyle>
-  containerToPreviousStyle?: LeftRightStyle<ViewStyle>
-  usernameStyle?: TextStyle
-  quickReplyStyle?: StyleProp<ViewStyle>
-  quickReplyTextStyle?: StyleProp<TextStyle>
-  quickReplyContainerStyle?: StyleProp<ViewStyle>
-  onPress?(context?: unknown, message?: unknown): void
-  onLongPress?(context?: unknown, message?: unknown): void
-  onQuickReply?(replies: Reply[]): void
-  renderMessageImage?(
-    props: RenderMessageImageProps<TMessage>,
-  ): React.ReactNode
-  renderMessageVideo?(
-    props: RenderMessageVideoProps<TMessage>,
-  ): React.ReactNode
-  renderMessageAudio?(
-    props: RenderMessageAudioProps<TMessage>,
-  ): React.ReactNode
-  renderMessageText?(props: RenderMessageTextProps<TMessage>): React.ReactNode
-  renderCustomView?(bubbleProps: BubbleProps<TMessage>): React.ReactNode
-  renderTime?(timeProps: TimeProps<TMessage>): React.ReactNode
-  renderTicks?(currentMessage: TMessage): React.ReactNode
-  renderUsername?(user?: TMessage['user']): React.ReactNode
-  renderQuickReplySend?(): React.ReactNode
-  renderQuickReplies?(
-    quickReplies: QuickRepliesProps<TMessage>,
-  ): React.ReactNode
-}
+import stylesCommon from '../styles'
+import styles from './styles'
+
+export * from './types'
 
 export default class Bubble<
   TMessage extends IMessage = IMessage,
 > extends React.Component<BubbleProps<TMessage>> {
   static contextType = GiftedChatContext
 
-  static defaultProps = {
-    touchableProps: {},
-    onPress: null,
-    onLongPress: null,
-    renderMessageImage: null,
-    renderMessageVideo: null,
-    renderMessageAudio: null,
-    renderMessageText: null,
-    renderCustomView: null,
-    renderUsername: null,
-    renderTicks: null,
-    renderTime: null,
-    renderQuickReplies: null,
-    onQuickReply: null,
-    position: 'left',
-    currentMessage: {
-      text: null,
-      createdAt: null,
-      image: null,
-    },
-    nextMessage: {},
-    previousMessage: {},
-    containerStyle: {},
-    wrapperStyle: {},
-    bottomContainerStyle: {},
-    tickStyle: {},
-    usernameStyle: {},
-    containerToNextStyle: {},
-    containerToPreviousStyle: {},
-  }
-
-  static propTypes = {
-    user: PropTypes.object.isRequired,
-    touchableProps: PropTypes.object,
-    onLongPress: PropTypes.func,
-    renderMessageImage: PropTypes.func,
-    renderMessageVideo: PropTypes.func,
-    renderMessageAudio: PropTypes.func,
-    renderMessageText: PropTypes.func,
-    renderCustomView: PropTypes.func,
-    isCustomViewBottom: PropTypes.bool,
-    renderUsernameOnMessage: PropTypes.bool,
-    renderUsername: PropTypes.func,
-    renderTime: PropTypes.func,
-    renderTicks: PropTypes.func,
-    renderQuickReplies: PropTypes.func,
-    onQuickReply: PropTypes.func,
-    position: PropTypes.oneOf(['left', 'right']),
-    optionTitles: PropTypes.arrayOf(PropTypes.string),
-    currentMessage: PropTypes.object,
-    nextMessage: PropTypes.object,
-    previousMessage: PropTypes.object,
-    containerStyle: PropTypes.shape({
-      left: StylePropType,
-      right: StylePropType,
-    }),
-    wrapperStyle: PropTypes.shape({
-      left: StylePropType,
-      right: StylePropType,
-    }),
-    bottomContainerStyle: PropTypes.shape({
-      left: StylePropType,
-      right: StylePropType,
-    }),
-    tickStyle: StylePropType,
-    usernameStyle: StylePropType,
-    containerToNextStyle: PropTypes.shape({
-      left: StylePropType,
-      right: StylePropType,
-    }),
-    containerToPreviousStyle: PropTypes.shape({
-      left: StylePropType,
-      right: StylePropType,
-    }),
-  }
-
   onPress = () => {
     if (this.props.onPress)
       this.props.onPress(this.context, this.props.currentMessage)
@@ -338,7 +112,8 @@ export default class Bubble<
       quickReplyTextStyle,
       quickReplyContainerStyle,
     } = this.props
-    if (currentMessage && currentMessage.quickReplies) {
+
+    if (currentMessage?.quickReplies) {
       const {
         /* eslint-disable @typescript-eslint/no-unused-vars */
         containerStyle,
@@ -362,11 +137,12 @@ export default class Bubble<
         />
       )
     }
+
     return null
   }
 
   renderMessageText () {
-    if (this.props.currentMessage && this.props.currentMessage.text) {
+    if (this.props.currentMessage?.text) {
       const {
         /* eslint-disable @typescript-eslint/no-unused-vars */
         containerStyle,
@@ -384,7 +160,7 @@ export default class Bubble<
   }
 
   renderMessageImage () {
-    if (this.props.currentMessage && this.props.currentMessage.image) {
+    if (this.props.currentMessage?.image) {
       const {
         /* eslint-disable @typescript-eslint/no-unused-vars */
         containerStyle,
@@ -438,14 +214,18 @@ export default class Bubble<
   }
 
   renderTicks () {
-    const { currentMessage, renderTicks, user } = this.props
+    const {
+      currentMessage,
+      renderTicks,
+      user,
+    } = this.props
+
     if (renderTicks && currentMessage)
       return renderTicks(currentMessage)
 
     if (
-      currentMessage &&
       user &&
-      currentMessage.user &&
+      currentMessage?.user &&
       currentMessage.user._id !== user._id
     )
       return null
@@ -478,7 +258,7 @@ export default class Bubble<
   }
 
   renderTime () {
-    if (this.props.currentMessage && this.props.currentMessage.createdAt) {
+    if (this.props.currentMessage?.createdAt) {
       const {
         /* eslint-disable @typescript-eslint/no-unused-vars */
         containerStyle,
@@ -497,7 +277,12 @@ export default class Bubble<
   }
 
   renderUsername () {
-    const { currentMessage, user, renderUsername } = this.props
+    const {
+      currentMessage,
+      user,
+      renderUsername,
+    } = this.props
+
     if (this.props.renderUsernameOnMessage && currentMessage) {
       if (user && currentMessage.user._id === user._id)
         return null
@@ -518,6 +303,7 @@ export default class Bubble<
         </View>
       )
     }
+
     return null
   }
 
@@ -529,33 +315,30 @@ export default class Bubble<
   }
 
   renderBubbleContent () {
-    return this.props.isCustomViewBottom
-      ? (
-        <View>
-          {this.renderMessageImage()}
-          {this.renderMessageVideo()}
-          {this.renderMessageAudio()}
-          {this.renderMessageText()}
-          {this.renderCustomView()}
-        </View>
-      )
-      : (
-        <View>
-          {this.renderCustomView()}
-          {this.renderMessageImage()}
-          {this.renderMessageVideo()}
-          {this.renderMessageAudio()}
-          {this.renderMessageText()}
-        </View>
-      )
+    return (
+      <View>
+        {!this.props.isCustomViewBottom && this.renderCustomView()}
+        {this.renderMessageImage()}
+        {this.renderMessageVideo()}
+        {this.renderMessageAudio()}
+        {this.renderMessageText()}
+        {this.props.isCustomViewBottom && this.renderCustomView()}
+      </View>
+    )
   }
 
   render () {
-    const { position, containerStyle, wrapperStyle, bottomContainerStyle } =
-      this.props
+    const {
+      position,
+      containerStyle,
+      wrapperStyle,
+      bottomContainerStyle,
+    } = this.props
+
     return (
       <View
         style={[
+          stylesCommon.fill,
           styles[position].container,
           containerStyle && containerStyle[position],
         ]}

package/src/Bubble/styles.ts

@@ -0,0 +1,73 @@
+import { StyleSheet } from 'react-native'
+import Color from '../Color'
+
+const styles = {
+  left: StyleSheet.create({
+    container: {
+      alignItems: 'flex-start',
+    },
+    wrapper: {
+      borderRadius: 15,
+      backgroundColor: Color.leftBubbleBackground,
+      marginRight: 60,
+      minHeight: 20,
+      justifyContent: 'flex-end',
+    },
+    containerToNext: {
+      borderBottomLeftRadius: 3,
+    },
+    containerToPrevious: {
+      borderTopLeftRadius: 3,
+    },
+    bottom: {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+    },
+  }),
+  right: StyleSheet.create({
+    container: {
+      alignItems: 'flex-end',
+    },
+    wrapper: {
+      borderRadius: 15,
+      backgroundColor: Color.defaultBlue,
+      marginLeft: 60,
+      minHeight: 20,
+      justifyContent: 'flex-end',
+    },
+    containerToNext: {
+      borderBottomRightRadius: 3,
+    },
+    containerToPrevious: {
+      borderTopRightRadius: 3,
+    },
+    bottom: {
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+    },
+  }),
+  content: StyleSheet.create({
+    tick: {
+      fontSize: 10,
+      backgroundColor: Color.backgroundTransparent,
+      color: Color.white,
+    },
+    tickView: {
+      flexDirection: 'row',
+      marginRight: 10,
+    },
+    username: {
+      top: -3,
+      left: 0,
+      fontSize: 12,
+      backgroundColor: Color.backgroundTransparent,
+      color: '#aaa',
+    },
+    usernameView: {
+      flexDirection: 'row',
+      marginHorizontal: 10,
+    },
+  }),
+}
+
+export default styles

package/src/Bubble/types.ts

@@ -0,0 +1,90 @@
+import React from 'react'
+import {
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native'
+import { QuickRepliesProps } from '../QuickReplies'
+import { MessageTextProps } from '../MessageText'
+import { MessageImageProps } from '../MessageImage'
+import { TimeProps } from '../Time'
+import {
+  User,
+  IMessage,
+  LeftRightStyle,
+  Reply,
+  Omit,
+  MessageVideoProps,
+  MessageAudioProps,
+} from '../types'
+
+/* eslint-disable no-use-before-define */
+export type RenderMessageImageProps<TMessage extends IMessage> = Omit<
+  BubbleProps<TMessage>,
+  'containerStyle' | 'wrapperStyle'
+> &
+  MessageImageProps<TMessage>
+
+export type RenderMessageVideoProps<TMessage extends IMessage> = Omit<
+  BubbleProps<TMessage>,
+  'containerStyle' | 'wrapperStyle'
+> &
+  MessageVideoProps<TMessage>
+
+export type RenderMessageAudioProps<TMessage extends IMessage> = Omit<
+  BubbleProps<TMessage>,
+  'containerStyle' | 'wrapperStyle'
+> &
+  MessageAudioProps<TMessage>
+
+export type RenderMessageTextProps<TMessage extends IMessage> = Omit<
+  BubbleProps<TMessage>,
+  'containerStyle' | 'wrapperStyle'
+> &
+  MessageTextProps<TMessage>
+/* eslint-enable no-use-before-define */
+
+export interface BubbleProps<TMessage extends IMessage> {
+  user?: User
+  touchableProps?: object
+  renderUsernameOnMessage?: boolean
+  isCustomViewBottom?: boolean
+  inverted?: boolean
+  position: 'left' | 'right'
+  currentMessage: TMessage
+  nextMessage?: TMessage
+  previousMessage?: TMessage
+  optionTitles?: string[]
+  containerStyle?: LeftRightStyle<ViewStyle>
+  wrapperStyle?: LeftRightStyle<ViewStyle>
+  textStyle?: LeftRightStyle<TextStyle>
+  bottomContainerStyle?: LeftRightStyle<ViewStyle>
+  tickStyle?: StyleProp<TextStyle>
+  containerToNextStyle?: LeftRightStyle<ViewStyle>
+  containerToPreviousStyle?: LeftRightStyle<ViewStyle>
+  usernameStyle?: TextStyle
+  quickReplyStyle?: StyleProp<ViewStyle>
+  quickReplyTextStyle?: StyleProp<TextStyle>
+  quickReplyContainerStyle?: StyleProp<ViewStyle>
+  onPress?(context?: unknown, message?: unknown): void
+  onLongPress?(context?: unknown, message?: unknown): void
+  onQuickReply?(replies: Reply[]): void
+  renderMessageImage?(
+    props: RenderMessageImageProps<TMessage>,
+  ): React.ReactNode
+  renderMessageVideo?(
+    props: RenderMessageVideoProps<TMessage>,
+  ): React.ReactNode
+  renderMessageAudio?(
+    props: RenderMessageAudioProps<TMessage>,
+  ): React.ReactNode
+  renderMessageText?(props: RenderMessageTextProps<TMessage>): React.ReactNode
+  renderCustomView?(bubbleProps: BubbleProps<TMessage>): React.ReactNode
+  renderTime?(timeProps: TimeProps<TMessage>): React.ReactNode
+  renderTicks?(currentMessage: TMessage): React.ReactNode
+  renderUsername?(user?: TMessage['user']): React.ReactNode
+  renderQuickReplySend?(): React.ReactNode
+  renderQuickReplies?(
+    quickReplies: QuickRepliesProps<TMessage>,
+  ): React.ReactNode
+}

package/src/Composer.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useRef } from 'react'
-import PropTypes from 'prop-types'
 import {
   Platform,
   StyleSheet,
@@ -10,7 +9,7 @@ import {
 } from 'react-native'
 import { MIN_COMPOSER_HEIGHT, DEFAULT_PLACEHOLDER } from './Constant'
 import Color from './Color'
-import { StylePropType } from './utils'
+import stylesCommon from './styles'
 
 export interface ComposerProps {
   composerHeight?: number
@@ -41,7 +40,7 @@ export function Composer ({
   textInputProps,
   textInputStyle,
 }: ComposerProps): React.ReactElement {
-  const dimensionsRef = useRef<{ width: number, height: number }>()
+  const dimensionsRef = useRef<{ width: number, height: number }>(null)
 
   const determineInputSizeChange = useCallback(
     (dimensions: { width: number, height: number }) => {
@@ -82,6 +81,7 @@ export function Composer ({
       onContentSizeChange={handleContentSizeChange}
       onChangeText={onTextChanged}
       style={[
+        stylesCommon.fill,
         styles.textInput,
         textInputStyle,
         {
@@ -105,24 +105,8 @@ export function Composer ({
   )
 }
 
-Composer.propTypes = {
-  composerHeight: PropTypes.number,
-  text: PropTypes.string,
-  placeholder: PropTypes.string,
-  placeholderTextColor: PropTypes.string,
-  textInputProps: PropTypes.object,
-  onTextChanged: PropTypes.func,
-  onInputSizeChanged: PropTypes.func,
-  multiline: PropTypes.bool,
-  disableComposer: PropTypes.bool,
-  textInputStyle: StylePropType,
-  textInputAutoFocus: PropTypes.bool,
-  keyboardAppearance: PropTypes.string,
-}
-
 const styles = StyleSheet.create({
   textInput: {
-    flex: 1,
     marginLeft: 10,
     fontSize: 16,
     lineHeight: 22,

package/src/Constant.ts

@@ -8,7 +8,7 @@ export const MIN_COMPOSER_HEIGHT = Platform.select({
 })
 export const MAX_COMPOSER_HEIGHT = 200
 export const DEFAULT_PLACEHOLDER = 'Type a message...'
-export const DATE_FORMAT = 'll'
+export const DATE_FORMAT = 'D MMMM'
 export const TIME_FORMAT = 'LT'
 
 export const TEST_ID = {

package/src/Day/index.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react'
+import {
+  Text,
+  View,
+} from 'react-native'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import calendar from 'dayjs/plugin/calendar'
+
+import { DATE_FORMAT } from '../Constant'
+import { DayProps } from './types'
+
+import { useChatContext } from '../GiftedChatContext'
+import stylesCommon from '../styles'
+import styles from './styles'
+
+export * from './types'
+
+dayjs.extend(relativeTime)
+dayjs.extend(calendar)
+
+export function Day ({
+  dateFormat = DATE_FORMAT,
+  dateFormatCalendar,
+  createdAt,
+  containerStyle,
+  wrapperStyle,
+  textStyle,
+}: DayProps) {
+  const { getLocale } = useChatContext()
+
+  const dateStr = React.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 style={[styles.text, textStyle]}>
+          {dateStr}
+        </Text>
+      </View>
+    </View>
+  )
+}