react-native-gifted-chat 2.4.0 → 2.5.1

package/src/InputToolbar.tsx

@@ -0,0 +1,113 @@
+import PropTypes from 'prop-types'
+import React, { useMemo } from 'react'
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native'
+
+import { Composer, ComposerProps } from './Composer'
+import { Send, SendProps } from './Send'
+import { Actions, ActionsProps } from './Actions'
+import Color from './Color'
+import { StylePropType } from './utils'
+import { IMessage } from './Models'
+
+export interface InputToolbarProps<TMessage extends IMessage> {
+  options?: { [key: string]: () => void }
+  optionTintColor?: string
+  containerStyle?: StyleProp<ViewStyle>
+  primaryStyle?: StyleProp<ViewStyle>
+  accessoryStyle?: StyleProp<ViewStyle>
+  renderAccessory?(props: InputToolbarProps<TMessage>): React.ReactNode
+  renderActions?(props: ActionsProps): React.ReactNode
+  renderSend?(props: SendProps<TMessage>): React.ReactNode
+  renderComposer?(props: ComposerProps): React.ReactNode
+  onPressActionButton?(): void
+  icon?: () => React.ReactNode
+  wrapperStyle?: StyleProp<ViewStyle>
+}
+
+export function InputToolbar<TMessage extends IMessage = IMessage> (
+  props: InputToolbarProps<TMessage>
+) {
+  const {
+    renderActions,
+    onPressActionButton,
+    renderComposer,
+    renderSend,
+    renderAccessory,
+    options,
+    optionTintColor,
+    icon,
+    wrapperStyle,
+    containerStyle,
+  } = props
+
+  const actionsFragment = useMemo(() => {
+    const props = {
+      options,
+      optionTintColor,
+      icon,
+      wrapperStyle,
+      containerStyle,
+    }
+
+    return (
+      renderActions?.(props) || (onPressActionButton && <Actions {...props} />)
+    )
+  }, [
+    renderActions,
+    onPressActionButton,
+    options,
+    optionTintColor,
+    icon,
+    wrapperStyle,
+    containerStyle,
+  ])
+
+  const composerFragment = useMemo(() => {
+    return (
+      renderComposer?.(props as ComposerProps) || (
+        <Composer {...(props as ComposerProps)} />
+      )
+    )
+  }, [renderComposer, props])
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <View style={[styles.primary, props.primaryStyle]}>
+        {actionsFragment}
+        {composerFragment}
+        {renderSend?.(props) || <Send {...props} />}
+      </View>
+      {renderAccessory && (
+        <View style={[styles.accessory, props.accessoryStyle]}>
+          {renderAccessory(props)}
+        </View>
+      )}
+    </View>
+  )
+}
+
+InputToolbar.propTypes = {
+  renderAccessory: PropTypes.func,
+  renderActions: PropTypes.func,
+  renderSend: PropTypes.func,
+  renderComposer: PropTypes.func,
+  onPressActionButton: PropTypes.func,
+  containerStyle: StylePropType,
+  primaryStyle: StylePropType,
+  accessoryStyle: StylePropType,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: Color.defaultColor,
+    backgroundColor: Color.white,
+  },
+  primary: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+  },
+  accessory: {
+    height: 44,
+  },
+})

package/src/LoadEarlier.tsx

@@ -0,0 +1,108 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import {
+  ActivityIndicator,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native'
+import Color from './Color'
+import { StylePropType } from './utils'
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    marginTop: 5,
+    marginBottom: 10,
+  },
+  wrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: Color.defaultColor,
+    borderRadius: 15,
+    height: 30,
+    paddingLeft: 10,
+    paddingRight: 10,
+  },
+  text: {
+    backgroundColor: Color.backgroundTransparent,
+    color: Color.white,
+    fontSize: 12,
+  },
+  activityIndicator: {
+    marginTop: Platform.select({
+      ios: -14,
+      android: -16,
+      default: -15,
+    }),
+  },
+})
+
+export interface LoadEarlierProps {
+  isLoadingEarlier?: boolean
+  label?: string
+  containerStyle?: StyleProp<ViewStyle>
+  wrapperStyle?: StyleProp<ViewStyle>
+  textStyle?: StyleProp<TextStyle>
+  activityIndicatorStyle?: StyleProp<ViewStyle>
+  activityIndicatorColor?: string
+  activityIndicatorSize?: number | 'small' | 'large'
+  onLoadEarlier?(): void
+}
+
+export function LoadEarlier ({
+  isLoadingEarlier = false,
+  onLoadEarlier = () => {},
+  label = 'Load earlier messages',
+  containerStyle,
+  wrapperStyle,
+  textStyle,
+  activityIndicatorColor = 'white',
+  activityIndicatorSize = 'small',
+  activityIndicatorStyle,
+}: LoadEarlierProps): React.ReactElement {
+  return (
+    <TouchableOpacity
+      style={[styles.container, containerStyle]}
+      onPress={onLoadEarlier}
+      disabled={isLoadingEarlier}
+      accessibilityRole='button'
+    >
+      <View style={[styles.wrapper, wrapperStyle]}>
+        {isLoadingEarlier
+          ? (
+            <View>
+              <Text style={[styles.text, textStyle, { opacity: 0 }]}>
+                {label}
+              </Text>
+              <ActivityIndicator
+                color={activityIndicatorColor!}
+                size={activityIndicatorSize!}
+                style={[styles.activityIndicator, activityIndicatorStyle]}
+              />
+            </View>
+          )
+          : (
+            <Text style={[styles.text, textStyle]}>{label}</Text>
+          )}
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+LoadEarlier.propTypes = {
+  onLoadEarlier: PropTypes.func,
+  isLoadingEarlier: PropTypes.bool,
+  label: PropTypes.string,
+  containerStyle: StylePropType,
+  wrapperStyle: StylePropType,
+  textStyle: StylePropType,
+  activityIndicatorStyle: StylePropType,
+  activityIndicatorColor: PropTypes.string,
+  activityIndicatorSize: PropTypes.string,
+}

package/src/Message.tsx

@@ -0,0 +1,229 @@
+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/MessageAudio.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Color from './Color'
+import { View, Text } from 'react-native'
+
+export function MessageAudio () {
+  return (
+    <View style={{ padding: 20 }}>
+      <Text style={{ color: Color.alizarin, fontWeight: '600' }}>
+        {'Audio is not implemented by GiftedChat.'}
+      </Text>
+      <Text style={{ color: Color.alizarin, fontWeight: '600' }}>
+        {
+          'You need to provide your own implementation by using renderMessageAudio'
+        }
+        {'prop.'}
+      </Text>
+    </View>
+  )
+}