react-native-gifted-chat 2.6.5 → 2.7.0

package/src/Message.tsx

@@ -1,229 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { View, StyleSheet, ViewStyle, LayoutChangeEvent } from 'react-native'
-import isEqual from 'lodash.isequal'
-
-import { Avatar, AvatarProps } from './Avatar'
-import Bubble from './Bubble'
-import { SystemMessage, SystemMessageProps } from './SystemMessage'
-import { Day, DayProps } from './Day'
-
-import { StylePropType, isSameUser } from './utils'
-import { IMessage, User, LeftRightStyle } from './Models'
-
-const styles = {
-  left: StyleSheet.create({
-    container: {
-      flexDirection: 'row',
-      alignItems: 'flex-end',
-      justifyContent: 'flex-start',
-      marginLeft: 8,
-      marginRight: 0,
-    },
-  }),
-  right: StyleSheet.create({
-    container: {
-      flexDirection: 'row',
-      alignItems: 'flex-end',
-      justifyContent: 'flex-end',
-      marginLeft: 0,
-      marginRight: 8,
-    },
-  }),
-}
-
-export interface MessageProps<TMessage extends IMessage> {
-  showUserAvatar?: boolean
-  position: 'left' | 'right'
-  currentMessage: TMessage
-  nextMessage?: TMessage
-  previousMessage?: TMessage
-  user: User
-  inverted?: boolean
-  containerStyle?: LeftRightStyle<ViewStyle>
-  renderBubble?(props: Bubble['props']): React.ReactNode
-  renderDay?(props: DayProps<TMessage>): React.ReactNode
-  renderSystemMessage?(props: SystemMessageProps<TMessage>): React.ReactNode
-  renderAvatar?(props: AvatarProps<TMessage>): React.ReactNode
-  shouldUpdateMessage?(
-    props: MessageProps<IMessage>,
-    nextProps: MessageProps<IMessage>,
-  ): boolean
-  onMessageLayout?(event: LayoutChangeEvent): void
-}
-
-export default class Message<
-  TMessage extends IMessage = IMessage,
-> extends React.Component<MessageProps<TMessage>> {
-  static defaultProps = {
-    renderAvatar: undefined,
-    renderBubble: null,
-    renderDay: null,
-    renderSystemMessage: null,
-    position: 'left',
-    currentMessage: {},
-    nextMessage: {},
-    previousMessage: {},
-    user: {},
-    containerStyle: {},
-    showUserAvatar: false,
-    inverted: true,
-    shouldUpdateMessage: undefined,
-    onMessageLayout: undefined,
-  }
-
-  static propTypes = {
-    renderAvatar: PropTypes.func,
-    showUserAvatar: PropTypes.bool,
-    renderBubble: PropTypes.func,
-    renderDay: PropTypes.func,
-    renderSystemMessage: PropTypes.func,
-    position: PropTypes.oneOf(['left', 'right']),
-    currentMessage: PropTypes.object,
-    nextMessage: PropTypes.object,
-    previousMessage: PropTypes.object,
-    user: PropTypes.object,
-    inverted: PropTypes.bool,
-    containerStyle: PropTypes.shape({
-      left: StylePropType,
-      right: StylePropType,
-    }),
-    shouldUpdateMessage: PropTypes.func,
-    onMessageLayout: PropTypes.func,
-  }
-
-  shouldComponentUpdate (nextProps: MessageProps<TMessage>) {
-    const next = nextProps.currentMessage!
-    const current = this.props.currentMessage!
-    const { previousMessage, nextMessage } = this.props
-    const nextPropsMessage = nextProps.nextMessage
-    const nextPropsPreviousMessage = nextProps.previousMessage
-
-    let shouldUpdate =
-      this.props.shouldUpdateMessage?.(this.props, nextProps) || false
-
-    shouldUpdate =
-      shouldUpdate ||
-      !isEqual(current, next) ||
-      !isEqual(previousMessage, nextPropsPreviousMessage) ||
-      !isEqual(nextMessage, nextPropsMessage)
-
-    return shouldUpdate
-  }
-
-  renderDay () {
-    if (this.props.currentMessage && this.props.currentMessage.createdAt) {
-      const {
-        /* eslint-disable @typescript-eslint/no-unused-vars */
-        containerStyle,
-        onMessageLayout,
-        /* eslint-enable @typescript-eslint/no-unused-vars */
-        ...props
-      } = this.props
-
-      if (this.props.renderDay)
-        return this.props.renderDay(props)
-
-      return <Day {...props} />
-    }
-    return null
-  }
-
-  renderBubble () {
-    const {
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      containerStyle,
-      onMessageLayout,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
-      ...props
-    } = this.props
-
-    if (this.props.renderBubble)
-      return this.props.renderBubble(props)
-
-    return <Bubble {...props} />
-  }
-
-  renderSystemMessage () {
-    const {
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      containerStyle,
-      onMessageLayout,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
-      ...props
-    } = this.props
-
-    if (this.props.renderSystemMessage)
-      return this.props.renderSystemMessage(props)
-
-    return <SystemMessage {...props} />
-  }
-
-  renderAvatar () {
-    const { user, currentMessage, showUserAvatar } = this.props
-
-    if (
-      user &&
-      user._id &&
-      currentMessage &&
-      currentMessage.user &&
-      user._id === currentMessage.user._id &&
-      !showUserAvatar
-    )
-      return null
-
-    if (
-      currentMessage &&
-      currentMessage.user &&
-      currentMessage.user.avatar === null
-    )
-      return null
-
-    const {
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      containerStyle,
-      onMessageLayout,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
-      ...props
-    } = this.props
-
-    return <Avatar {...props} />
-  }
-
-  render () {
-    const {
-      currentMessage,
-      onMessageLayout,
-      nextMessage,
-      position,
-      containerStyle,
-    } = this.props
-    if (currentMessage) {
-      const sameUser = isSameUser(currentMessage, nextMessage!)
-      return (
-        <View onLayout={onMessageLayout}>
-          {this.renderDay()}
-          {currentMessage.system
-            ? (
-              this.renderSystemMessage()
-            )
-            : (
-              <View
-                style={[
-                  styles[position].container,
-                  { marginBottom: sameUser ? 2 : 10 },
-                  !this.props.inverted && { marginBottom: 2 },
-                  containerStyle && containerStyle[position],
-                ]}
-              >
-                {this.props.position === 'left' ? this.renderAvatar() : null}
-                {this.renderBubble()}
-                {this.props.position === 'right' ? this.renderAvatar() : null}
-              </View>
-            )}
-        </View>
-      )
-    }
-    return null
-  }
-}

package/src/MessageContainer.tsx

@@ -1,361 +0,0 @@
-import React, { RefObject } from 'react'
-import PropTypes from 'prop-types'
-
-import {
-  FlatList,
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  Text,
-  ListRenderItemInfo,
-  NativeSyntheticEvent,
-  NativeScrollEvent,
-  StyleProp,
-  ViewStyle,
-  Platform,
-} from 'react-native'
-
-import { LoadEarlier, LoadEarlierProps } from './LoadEarlier'
-import Message from './Message'
-import Color from './Color'
-import { User, IMessage, Reply } from './Models'
-import TypingIndicator from './TypingIndicator'
-
-import { StylePropType } from './utils'
-import { warning } from './logging'
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  containerAlignTop: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-  },
-  contentContainerStyle: {
-    flexGrow: 1,
-    justifyContent: 'flex-start',
-  },
-  emptyChatContainer: {
-    flex: 1,
-    transform: [{ scaleY: -1 }],
-  },
-  headerWrapper: {
-    flex: 1,
-  },
-  listStyle: {
-    flex: 1,
-  },
-  scrollToBottomStyle: {
-    opacity: 0.8,
-    position: 'absolute',
-    right: 10,
-    bottom: 30,
-    zIndex: 999,
-    height: 40,
-    width: 40,
-    borderRadius: 20,
-    backgroundColor: Color.white,
-    alignItems: 'center',
-    justifyContent: 'center',
-    shadowColor: Color.black,
-    shadowOpacity: 0.5,
-    shadowOffset: { width: 0, height: 0 },
-    shadowRadius: 1,
-  },
-})
-
-export interface MessageContainerProps<TMessage extends IMessage> {
-  messages?: TMessage[]
-  isTyping?: boolean
-  user?: User
-  listViewProps: object
-  inverted?: boolean
-  loadEarlier?: boolean
-  alignTop?: boolean
-  scrollToBottom?: boolean
-  scrollToBottomStyle?: StyleProp<ViewStyle>
-  invertibleScrollViewProps?: object
-  extraData?: object
-  scrollToBottomOffset?: number
-  forwardRef?: RefObject<FlatList<TMessage>>
-  renderChatEmpty?(): React.ReactNode
-  renderFooter?(props: MessageContainerProps<TMessage>): React.ReactNode
-  renderMessage?(props: Message['props']): React.ReactElement
-  renderLoadEarlier?(props: LoadEarlierProps): React.ReactNode
-  renderTypingIndicator?(): React.ReactNode
-  scrollToBottomComponent?(): React.ReactNode
-  onLoadEarlier?(): void
-  onQuickReply?(replies: Reply[]): void
-  infiniteScroll?: boolean
-  isLoadingEarlier?: boolean
-  handleOnScroll?(event: NativeSyntheticEvent<NativeScrollEvent>): void
-}
-
-interface State {
-  showScrollBottom: boolean
-  hasScrolled: boolean
-}
-
-export default class MessageContainer<
-  TMessage extends IMessage = IMessage,
-> extends React.PureComponent<MessageContainerProps<TMessage>, State> {
-  static defaultProps = {
-    messages: [],
-    user: {},
-    isTyping: false,
-    renderChatEmpty: null,
-    renderFooter: null,
-    renderMessage: null,
-    onLoadEarlier: () => {},
-    onQuickReply: () => {},
-    inverted: true,
-    loadEarlier: false,
-    listViewProps: {},
-    invertibleScrollViewProps: {},
-    extraData: null,
-    scrollToBottom: false,
-    scrollToBottomOffset: 200,
-    alignTop: false,
-    scrollToBottomStyle: {},
-    infiniteScroll: false,
-    isLoadingEarlier: false,
-  }
-
-  static propTypes = {
-    messages: PropTypes.arrayOf(PropTypes.object),
-    isTyping: PropTypes.bool,
-    user: PropTypes.object,
-    renderChatEmpty: PropTypes.func,
-    renderFooter: PropTypes.func,
-    renderMessage: PropTypes.func,
-    renderLoadEarlier: PropTypes.func,
-    onLoadEarlier: PropTypes.func,
-    listViewProps: PropTypes.object,
-    inverted: PropTypes.bool,
-    loadEarlier: PropTypes.bool,
-    invertibleScrollViewProps: PropTypes.object,
-    extraData: PropTypes.object,
-    scrollToBottom: PropTypes.bool,
-    scrollToBottomOffset: PropTypes.number,
-    scrollToBottomComponent: PropTypes.func,
-    alignTop: PropTypes.bool,
-    scrollToBottomStyle: StylePropType,
-    infiniteScroll: PropTypes.bool,
-  }
-
-  state = {
-    showScrollBottom: false,
-    hasScrolled: false,
-  }
-
-  renderTypingIndicator = () => {
-    if (this.props.renderTypingIndicator)
-      return this.props.renderTypingIndicator()
-    return <TypingIndicator isTyping={this.props.isTyping || false} />
-  }
-
-  renderFooter = () => {
-    if (this.props.renderFooter)
-      return this.props.renderFooter(this.props)
-
-    return this.renderTypingIndicator()
-  }
-
-  renderLoadEarlier = (props: LoadEarlierProps) => {
-    if (this.props.loadEarlier === true) {
-      if (this.props.renderLoadEarlier)
-        return this.props.renderLoadEarlier(props)
-
-      return <LoadEarlier {...props} />
-    }
-    return null
-  }
-
-  scrollTo (options: { animated?: boolean, offset: number }) {
-    if (this.props.forwardRef?.current && options)
-      this.props.forwardRef.current.scrollToOffset(options)
-  }
-
-  scrollToBottom = (animated: boolean = true) => {
-    const { inverted } = this.props
-    if (inverted)
-      this.scrollTo({ offset: 0, animated })
-    else if (this.props.forwardRef?.current)
-      this.props.forwardRef.current.scrollToEnd({ animated })
-  }
-
-  handleOnScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    this.props.handleOnScroll?.(event)
-    const {
-      nativeEvent: {
-        contentOffset: { y: contentOffsetY },
-        contentSize: { height: contentSizeHeight },
-        layoutMeasurement: { height: layoutMeasurementHeight },
-      },
-    } = event
-    const { scrollToBottomOffset } = this.props
-    if (this.props.inverted)
-      if (contentOffsetY > scrollToBottomOffset!)
-        this.setState({ showScrollBottom: true, hasScrolled: true })
-      else
-        this.setState({ showScrollBottom: false, hasScrolled: true })
-    else if (
-      contentOffsetY < scrollToBottomOffset! &&
-      contentSizeHeight - layoutMeasurementHeight > scrollToBottomOffset!
-    )
-      this.setState({ showScrollBottom: true, hasScrolled: true })
-    else
-      this.setState({ showScrollBottom: false, hasScrolled: true })
-  }
-
-  renderRow = ({ item, index }: ListRenderItemInfo<TMessage>): React.ReactElement | null => {
-    if (!item._id && item._id !== 0)
-      warning('GiftedChat: `_id` is missing for message', JSON.stringify(item))
-
-    if (!item.user) {
-      if (!item.system)
-        warning(
-          'GiftedChat: `user` is missing for message',
-          JSON.stringify(item)
-        )
-
-      item.user = { _id: 0 }
-    }
-    const { messages, user, inverted, ...restProps } = this.props
-    if (messages && user) {
-      const previousMessage =
-        (inverted ? messages[index + 1] : messages[index - 1]) || {}
-      const nextMessage =
-        (inverted ? messages[index - 1] : messages[index + 1]) || {}
-
-      const messageProps: Message['props'] = {
-        ...restProps,
-        user,
-        currentMessage: item,
-        previousMessage,
-        inverted,
-        nextMessage,
-        position: item.user._id === user._id ? 'right' : 'left',
-      }
-
-      if (this.props.renderMessage)
-        return this.props.renderMessage(messageProps)
-
-      return <Message key={item._id.toString()} {...messageProps} />
-    }
-    return null
-  }
-
-  renderChatEmpty = () => {
-    if (this.props.renderChatEmpty)
-      return this.props.inverted
-        ? (
-          this.props.renderChatEmpty()
-        )
-        : (
-          <View style={styles.emptyChatContainer}>
-            {this.props.renderChatEmpty()}
-          </View>
-        )
-
-    return <View style={styles.container} />
-  }
-
-  renderHeaderWrapper = () => (
-    <View style={styles.headerWrapper}>{this.renderLoadEarlier({ ...this.props })}</View>
-  )
-
-  renderScrollBottomComponent () {
-    const { scrollToBottomComponent } = this.props
-
-    if (scrollToBottomComponent)
-      return scrollToBottomComponent()
-
-    return <Text>{'V'}</Text>
-  }
-
-  renderScrollToBottomWrapper () {
-    const propsStyle = this.props.scrollToBottomStyle || {}
-    return (
-      <View style={[styles.scrollToBottomStyle, propsStyle]}>
-        <TouchableOpacity
-          onPress={() => this.scrollToBottom()}
-          hitSlop={{ top: 5, left: 5, right: 5, bottom: 5 }}
-        >
-          {this.renderScrollBottomComponent()}
-        </TouchableOpacity>
-      </View>
-    )
-  }
-
-  onLayoutList = () => {
-    if (
-      !this.props.inverted &&
-      !!this.props.messages &&
-      this.props.messages!.length
-    )
-      setTimeout(
-        () => this.scrollToBottom && this.scrollToBottom(false),
-        15 * this.props.messages!.length
-      )
-  }
-
-  onEndReached = ({ distanceFromEnd }: { distanceFromEnd: number }) => {
-    const { loadEarlier, onLoadEarlier, infiniteScroll, isLoadingEarlier } =
-      this.props
-    if (
-      infiniteScroll &&
-      (this.state.hasScrolled || distanceFromEnd > 0) &&
-      distanceFromEnd <= 100 &&
-      loadEarlier &&
-      onLoadEarlier &&
-      !isLoadingEarlier &&
-      Platform.OS !== 'web'
-    )
-      onLoadEarlier()
-  }
-
-  keyExtractor = (item: TMessage) => `${item._id}`
-
-  render () {
-    const { inverted } = this.props
-
-    return (
-      <View
-        style={
-          this.props.alignTop ? styles.containerAlignTop : styles.container
-        }
-      >
-        <FlatList
-          ref={this.props.forwardRef}
-          extraData={[this.props.extraData, this.props.isTyping]}
-          keyExtractor={this.keyExtractor}
-          automaticallyAdjustContentInsets={false}
-          inverted={inverted}
-          data={this.props.messages}
-          style={styles.listStyle}
-          contentContainerStyle={styles.contentContainerStyle}
-          renderItem={this.renderRow}
-          {...this.props.invertibleScrollViewProps}
-          ListEmptyComponent={this.renderChatEmpty}
-          ListFooterComponent={
-            inverted ? this.renderHeaderWrapper : this.renderFooter
-          }
-          ListHeaderComponent={
-            inverted ? this.renderFooter : this.renderHeaderWrapper
-          }
-          onScroll={this.handleOnScroll}
-          scrollEventThrottle={100}
-          onLayout={this.onLayoutList}
-          onEndReached={this.onEndReached}
-          onEndReachedThreshold={0.1}
-          {...this.props.listViewProps}
-        />
-        {this.state.showScrollBottom && this.props.scrollToBottom
-          ? this.renderScrollToBottomWrapper()
-          : null}
-      </View>
-    )
-  }
-}