react-native-gifted-chat 2.4.1 → 2.6.0

package/src/Composer.tsx

@@ -0,0 +1,147 @@
+import PropTypes from 'prop-types'
+import React, { useCallback, useRef } from 'react'
+import {
+  Platform,
+  StyleSheet,
+  TextInput,
+  TextInputProps,
+  NativeSyntheticEvent,
+  TextInputContentSizeChangeEventData,
+} from 'react-native'
+import { MIN_COMPOSER_HEIGHT, DEFAULT_PLACEHOLDER } from './Constant'
+import Color from './Color'
+import { StylePropType } from './utils'
+import { useCallbackOne } from 'use-memo-one'
+
+export interface ComposerProps {
+  composerHeight?: number
+  text?: string
+  placeholder?: string
+  placeholderTextColor?: string
+  textInputProps?: Partial<TextInputProps>
+  textInputStyle?: TextInputProps['style']
+  textInputAutoFocus?: boolean
+  keyboardAppearance?: TextInputProps['keyboardAppearance']
+  multiline?: boolean
+  disableComposer?: boolean
+  onTextChanged?(text: string): void
+  onInputSizeChanged?(layout: { width: number, height: number }): void
+}
+
+export function Composer ({
+  composerHeight = MIN_COMPOSER_HEIGHT,
+  disableComposer = false,
+  keyboardAppearance = 'default',
+  multiline = true,
+  onInputSizeChanged,
+  onTextChanged,
+  placeholder = DEFAULT_PLACEHOLDER,
+  placeholderTextColor = Color.defaultColor,
+  text = '',
+  textInputAutoFocus = false,
+  textInputProps,
+  textInputStyle,
+}: ComposerProps): React.ReactElement {
+  const dimensionsRef = useRef<{ width: number, height: number }>()
+
+  const determineInputSizeChange = useCallbackOne(
+    (dimensions: { width: number, height: number }) => {
+      // Support earlier versions of React Native on Android.
+      if (!dimensions)
+        return
+
+      if (
+        !dimensionsRef.current ||
+        (dimensionsRef.current &&
+          (dimensionsRef.current.width !== dimensions.width ||
+            dimensionsRef.current.height !== dimensions.height))
+      ) {
+        dimensionsRef.current = dimensions
+        onInputSizeChanged?.(dimensions)
+      }
+    },
+    [onInputSizeChanged]
+  )
+
+  const handleContentSizeChange = useCallback(
+    ({
+      nativeEvent: { contentSize },
+    }: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) =>
+      determineInputSizeChange(contentSize),
+    [determineInputSizeChange]
+  )
+
+  return (
+    <TextInput
+      testID={placeholder}
+      accessible
+      accessibilityLabel={placeholder}
+      placeholder={placeholder}
+      placeholderTextColor={placeholderTextColor}
+      multiline={multiline}
+      editable={!disableComposer}
+      onContentSizeChange={handleContentSizeChange}
+      onChangeText={onTextChanged}
+      style={[
+        styles.textInput,
+        textInputStyle,
+        {
+          height: composerHeight,
+          ...Platform.select({
+            web: {
+              outlineWidth: 0,
+              outlineColor: 'transparent',
+              outlineOffset: 0,
+            },
+          }),
+        },
+      ]}
+      autoFocus={textInputAutoFocus}
+      value={text}
+      enablesReturnKeyAutomatically
+      underlineColorAndroid='transparent'
+      keyboardAppearance={keyboardAppearance}
+      {...textInputProps}
+    />
+  )
+}
+
+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,
+    ...Platform.select({
+      web: {
+        paddingTop: 6,
+        paddingLeft: 4,
+      },
+    }),
+    marginTop: Platform.select({
+      ios: 6,
+      android: 0,
+      web: 6,
+    }),
+    marginBottom: Platform.select({
+      ios: 5,
+      android: 3,
+      web: 4,
+    }),
+  },
+})

package/src/Constant.ts

@@ -0,0 +1,18 @@
+import { Platform } from 'react-native'
+
+export const MIN_COMPOSER_HEIGHT = Platform.select({
+  ios: 33,
+  android: 41,
+  web: 34,
+  windows: 34,
+})
+export const MAX_COMPOSER_HEIGHT = 200
+export const DEFAULT_PLACEHOLDER = 'Type a message...'
+export const DATE_FORMAT = 'll'
+export const TIME_FORMAT = 'LT'
+
+export const TEST_ID = {
+  WRAPPER: 'GC_WRAPPER',
+  LOADING_WRAPPER: 'GC_LOADING_CONTAINER',
+  SEND_TOUCHABLE: 'GC_SEND_TOUCHABLE',
+}

package/src/Day.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react'
+import {
+  StyleSheet,
+  Text,
+  View,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  TextProps,
+} from 'react-native'
+import dayjs from 'dayjs'
+
+import Color from './Color'
+import { isSameDay } from './utils'
+import { DATE_FORMAT } from './Constant'
+import { IMessage } from './Models'
+
+import { useChatContext } from './GiftedChatContext'
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 5,
+    marginBottom: 10,
+  },
+  text: {
+    backgroundColor: Color.backgroundTransparent,
+    color: Color.defaultColor,
+    fontSize: 12,
+    fontWeight: '600',
+  },
+})
+
+export interface DayProps<TMessage extends IMessage = IMessage> {
+  currentMessage: TMessage
+  nextMessage?: TMessage
+  previousMessage?: TMessage
+  containerStyle?: StyleProp<ViewStyle>
+  wrapperStyle?: StyleProp<ViewStyle>
+  textStyle?: StyleProp<TextStyle>
+  textProps?: TextProps
+  dateFormat?: string
+  inverted?: boolean
+}
+
+export function Day<TMessage extends IMessage = IMessage> ({
+  dateFormat = DATE_FORMAT,
+  currentMessage,
+  previousMessage,
+  containerStyle,
+  wrapperStyle,
+  textStyle,
+}: DayProps<TMessage>) {
+  const { getLocale } = useChatContext()
+
+  if (currentMessage == null || isSameDay(currentMessage, previousMessage))
+    return null
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <View style={wrapperStyle}>
+        <Text style={[styles.text, textStyle]}>
+          {dayjs(currentMessage.createdAt)
+            .locale(getLocale())
+            .format(dateFormat)}
+        </Text>
+      </View>
+    </View>
+  )
+}

package/src/GiftedAvatar.tsx

@@ -0,0 +1,205 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import {
+  Image,
+  Text,
+  TouchableOpacity,
+  View,
+  StyleSheet,
+  StyleProp,
+  ImageStyle,
+  TextStyle,
+} from 'react-native'
+import Color from './Color'
+import { User } from './Models'
+import { StylePropType } from './utils'
+
+const {
+  carrot,
+  emerald,
+  peterRiver,
+  wisteria,
+  alizarin,
+  turquoise,
+  midnightBlue,
+} = Color
+
+const styles = StyleSheet.create({
+  avatarStyle: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+  },
+  avatarTransparent: {
+    backgroundColor: Color.backgroundTransparent,
+  },
+  textStyle: {
+    color: Color.white,
+    fontSize: 16,
+    backgroundColor: Color.backgroundTransparent,
+    fontWeight: '100',
+  },
+})
+
+export interface GiftedAvatarProps {
+  user?: User
+  avatarStyle?: StyleProp<ImageStyle>
+  textStyle?: StyleProp<TextStyle>
+  onPress?: (props: GiftedAvatarProps) => void
+  onLongPress?: (props: GiftedAvatarProps) => void
+}
+
+export default class GiftedAvatar extends React.Component<GiftedAvatarProps> {
+  static defaultProps = {
+    user: {
+      name: null,
+      avatar: null,
+    },
+    onPress: undefined,
+    onLongPress: undefined,
+    avatarStyle: {},
+    textStyle: {},
+  }
+
+  static propTypes = {
+    user: PropTypes.object,
+    onPress: PropTypes.func,
+    onLongPress: PropTypes.func,
+    avatarStyle: StylePropType,
+    textStyle: StylePropType,
+  }
+
+  avatarName?: string = undefined
+  avatarColor?: string = undefined
+
+  setAvatarColor () {
+    const userName = (this.props.user && this.props.user.name) || ''
+    const name = userName.toUpperCase().split(' ')
+    if (name.length === 1)
+      this.avatarName = `${name[0].charAt(0)}`
+    else if (name.length > 1)
+      this.avatarName = `${name[0].charAt(0)}${name[1].charAt(0)}`
+    else
+      this.avatarName = ''
+
+    let sumChars = 0
+    for (let i = 0; i < userName.length; i += 1)
+      sumChars += userName.charCodeAt(i)
+
+    // inspired by https://github.com/wbinnssmith/react-user-avatar
+    // colors from https://flatuicolors.com/
+    const colors = [
+      carrot,
+      emerald,
+      peterRiver,
+      wisteria,
+      alizarin,
+      turquoise,
+      midnightBlue,
+    ]
+
+    this.avatarColor = colors[sumChars % colors.length]
+  }
+
+  renderAvatar () {
+    const { user } = this.props
+    if (user)
+      if (typeof user.avatar === 'function')
+        return user.avatar([styles.avatarStyle, this.props.avatarStyle])
+      else if (typeof user.avatar === 'string')
+        return (
+          <Image
+            source={{ uri: user.avatar }}
+            style={[styles.avatarStyle, this.props.avatarStyle]}
+          />
+        )
+      else if (typeof user.avatar === 'number')
+        return (
+          <Image
+            source={user.avatar}
+            style={[styles.avatarStyle, this.props.avatarStyle]}
+          />
+        )
+
+    return null
+  }
+
+  renderInitials () {
+    return (
+      <Text style={[styles.textStyle, this.props.textStyle]}>
+        {this.avatarName}
+      </Text>
+    )
+  }
+
+  handleOnPress = () => {
+    const {
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      onPress,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      ...rest
+    } = this.props
+
+    if (this.props.onPress)
+      this.props.onPress(rest)
+  }
+
+  handleOnLongPress = () => {
+    const {
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      onLongPress,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      ...rest
+    } = this.props
+
+    if (this.props.onLongPress)
+      this.props.onLongPress(rest)
+  }
+
+  render () {
+    if (!this.props.user || (!this.props.user.name && !this.props.user.avatar))
+      // render placeholder
+      return (
+        <View
+          style={[
+            styles.avatarStyle,
+            styles.avatarTransparent,
+            this.props.avatarStyle,
+          ]}
+          accessibilityRole='image'
+        />
+      )
+
+    if (this.props.user.avatar)
+      return (
+        <TouchableOpacity
+          disabled={!this.props.onPress}
+          onPress={this.handleOnPress}
+          onLongPress={this.handleOnLongPress}
+          accessibilityRole='image'
+        >
+          {this.renderAvatar()}
+        </TouchableOpacity>
+      )
+
+    this.setAvatarColor()
+
+    return (
+      <TouchableOpacity
+        disabled={!this.props.onPress}
+        onPress={this.handleOnPress}
+        onLongPress={this.handleOnLongPress}
+        style={[
+          styles.avatarStyle,
+          { backgroundColor: this.avatarColor },
+          this.props.avatarStyle,
+        ]}
+        accessibilityRole='image'
+      >
+        {this.renderInitials()}
+      </TouchableOpacity>
+    )
+  }
+}