react-native-gifted-chat 2.4.1 → 2.5.1

package/src/Actions.tsx

@@ -0,0 +1,114 @@
+import PropTypes from 'prop-types'
+import React, { ReactNode, useCallback } from 'react'
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native'
+import Color from './Color'
+import { StylePropType } from './utils'
+import { useChatContext } from './GiftedChatContext'
+
+export interface ActionsProps {
+  options?: { [key: string]: () => void }
+  optionTintColor?: string
+  icon?: () => ReactNode
+  wrapperStyle?: StyleProp<ViewStyle>
+  iconTextStyle?: StyleProp<TextStyle>
+  containerStyle?: StyleProp<ViewStyle>
+  onPressActionButton?(): void
+}
+
+export function Actions ({
+  options,
+  optionTintColor = Color.optionTintColor,
+  icon,
+  wrapperStyle,
+  iconTextStyle,
+  onPressActionButton,
+  containerStyle,
+}: ActionsProps) {
+  const { actionSheet } = useChatContext()
+
+  const onActionsPress = useCallback(() => {
+    if (!options)
+      return
+
+    const optionKeys = Object.keys(options)
+    const cancelButtonIndex = optionKeys.indexOf('Cancel')
+
+    actionSheet().showActionSheetWithOptions(
+      {
+        options: optionKeys,
+        cancelButtonIndex,
+        tintColor: optionTintColor,
+      },
+      (buttonIndex: number | undefined) => {
+        if (buttonIndex === undefined)
+          return
+
+        const key = optionKeys[buttonIndex]
+        if (key)
+          options[key]()
+      }
+    )
+  }, [actionSheet, options, optionTintColor])
+
+  const renderIcon = useCallback(() => {
+    if (icon)
+      return icon()
+
+    return (
+      <View style={[styles.wrapper, wrapperStyle]}>
+        <Text style={[styles.iconText, iconTextStyle]}>{'+'}</Text>
+      </View>
+    )
+  }, [icon, iconTextStyle, wrapperStyle])
+
+  return (
+    <TouchableOpacity
+      style={[styles.container, containerStyle]}
+      onPress={onPressActionButton || onActionsPress}
+    >
+      {renderIcon()}
+    </TouchableOpacity>
+  )
+}
+
+Actions.propTypes = {
+  options: PropTypes.object,
+  optionTintColor: PropTypes.string,
+  icon: PropTypes.func,
+  onPressActionButton: PropTypes.func,
+  wrapperStyle: StylePropType,
+  containerStyle: StylePropType,
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 26,
+    height: 26,
+    marginLeft: 10,
+    marginBottom: 10,
+  },
+  wrapper: {
+    borderRadius: 13,
+    borderColor: Color.defaultColor,
+    borderWidth: 2,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconText: {
+    color: Color.defaultColor,
+    fontWeight: 'bold',
+    fontSize: 16,
+    lineHeight: 16,
+    backgroundColor: Color.backgroundTransparent,
+    textAlign: 'center',
+  },
+})

package/src/Avatar.tsx

@@ -0,0 +1,178 @@
+import PropTypes from 'prop-types'
+import React, { ReactNode } from 'react'
+import {
+  ImageStyle,
+  StyleSheet,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native'
+import GiftedAvatar from './GiftedAvatar'
+import { StylePropType, isSameUser, isSameDay } from './utils'
+import { IMessage, LeftRightStyle, User } from './Models'
+
+interface Styles {
+  left: {
+    container: ViewStyle
+    onTop: ViewStyle
+    image: ImageStyle
+  }
+  right: {
+    container: ViewStyle
+    onTop: ViewStyle
+    image: ImageStyle
+  }
+}
+
+const styles: Styles = {
+  left: StyleSheet.create({
+    container: {
+      marginRight: 8,
+    },
+    onTop: {
+      alignSelf: 'flex-start',
+    },
+    image: {
+      height: 36,
+      width: 36,
+      borderRadius: 18,
+    },
+  }),
+  right: StyleSheet.create({
+    container: {
+      marginLeft: 8,
+    },
+    onTop: {
+      alignSelf: 'flex-start',
+    },
+    image: {
+      height: 36,
+      width: 36,
+      borderRadius: 18,
+    },
+  }),
+}
+
+export interface AvatarProps<TMessage extends IMessage> {
+  currentMessage: TMessage
+  previousMessage?: TMessage
+  nextMessage?: TMessage
+  position: 'left' | 'right'
+  renderAvatarOnTop?: boolean
+  showAvatarForEveryMessage?: boolean
+  imageStyle?: LeftRightStyle<ImageStyle>
+  containerStyle?: LeftRightStyle<ViewStyle>
+  textStyle?: TextStyle
+  renderAvatar?(props: Omit<AvatarProps<TMessage>, 'renderAvatar'>): ReactNode
+  onPressAvatar?: (user: User) => void
+  onLongPressAvatar?: (user: User) => void
+}
+
+export function Avatar<TMessage extends IMessage = IMessage> (
+  props: AvatarProps<TMessage>
+) {
+  const {
+    renderAvatarOnTop,
+    showAvatarForEveryMessage,
+    containerStyle,
+    position,
+    currentMessage,
+    renderAvatar,
+    previousMessage,
+    nextMessage,
+    imageStyle,
+    onPressAvatar,
+    onLongPressAvatar,
+  } = props
+
+  const messageToCompare = renderAvatarOnTop ? previousMessage : nextMessage
+
+  if (renderAvatar === null)
+    return null
+
+  if (
+    !showAvatarForEveryMessage &&
+    currentMessage &&
+    messageToCompare &&
+    isSameUser(currentMessage, messageToCompare) &&
+    isSameDay(currentMessage, messageToCompare)
+  )
+    return (
+      <View
+        style={[
+          styles[position].container,
+          containerStyle?.[position],
+        ]}
+      >
+        <GiftedAvatar
+          avatarStyle={[
+            styles[position].image,
+            imageStyle?.[position],
+          ]}
+        />
+      </View>
+    )
+
+  const renderAvatarComponent = () => {
+    if (renderAvatar)
+      return renderAvatar({
+        renderAvatarOnTop,
+        showAvatarForEveryMessage,
+        containerStyle,
+        position,
+        currentMessage,
+        previousMessage,
+        nextMessage,
+        imageStyle,
+        onPressAvatar,
+        onLongPressAvatar,
+      })
+
+    if (currentMessage)
+      return (
+        <GiftedAvatar
+          avatarStyle={[
+            styles[position].image,
+            imageStyle?.[position],
+          ]}
+          user={currentMessage.user}
+          onPress={() => onPressAvatar?.(currentMessage.user)}
+          onLongPress={() => onLongPressAvatar?.(currentMessage.user)}
+        />
+      )
+
+    return null
+  }
+
+  return (
+    <View
+      style={[
+        styles[position].container,
+        renderAvatarOnTop && styles[position].onTop,
+        containerStyle?.[position],
+      ]}
+    >
+      {renderAvatarComponent()}
+    </View>
+  )
+}
+
+Avatar.propTypes = {
+  renderAvatarOnTop: PropTypes.bool,
+  showAvatarForEveryMessage: PropTypes.bool,
+  position: PropTypes.oneOf(['left', 'right']),
+  currentMessage: PropTypes.object,
+  previousMessage: PropTypes.object,
+  nextMessage: PropTypes.object,
+  onPressAvatar: PropTypes.func,
+  onLongPressAvatar: PropTypes.func,
+  renderAvatar: PropTypes.func,
+  containerStyle: PropTypes.shape({
+    left: StylePropType,
+    right: StylePropType,
+  }),
+  imageStyle: PropTypes.shape({
+    left: StylePropType,
+    right: StylePropType,
+  }),
+}