stream-chat-react-native-core 4.0.0-beta.2 → 4.0.0-beta.6

package/lib/module/components/AutoCompleteInput/AutoCompleteSuggestionList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AutoCompleteSuggestionList.tsx"],"names":["SuggestionsItem","props","children","touchableOpacityProps","displayName","AutoCompleteSuggestionListWithContext","active","AutoCompleteSuggestionHeader","AutoCompleteSuggestionItem","data","onSelect","queryText","triggerType","theme","messageInput","maxHeight","container","itemStyle","suggestions","item","flatlist","suggestionsListContainer","renderItem","index","paddingBottom","length","paddingTop","name","id","areEqual","prevProps","nextProps","prevActive","prevData","prevQueryText","prevType","nextActive","nextData","nextQueryText","nextType","activeEqual","queryTextEqual","dataEqual","typeEqual","MemoizedAutoCompleteSuggestionList","React","memo","AutoCompleteSuggestionList"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { FlatList, TouchableOpacity, TouchableOpacityProps } from 'react-native';\nimport {\n  isSuggestionCommand,\n  isSuggestionEmoji,\n  isSuggestionUser,\n  Suggestion,\n} from '../../contexts/suggestionsContext/SuggestionsContext';\nimport type { DefaultCommandType, DefaultUserType, UnknownType } from '../../types/types';\n\nimport type { AutoCompleteSuggestionHeaderProps } from './AutoCompleteSuggestionHeader';\nimport type { AutoCompleteSuggestionItemProps } from './AutoCompleteSuggestionItem';\nimport {\n  SuggestionsContextValue,\n  useSuggestionsContext,\n} from '../../contexts/suggestionsContext/SuggestionsContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\n\ntype AutoCompleteSuggestionListComponentProps<\n  Co extends string = DefaultCommandType,\n  Us extends UnknownType = DefaultUserType,\n> = Pick<SuggestionsContextValue, 'queryText' | 'triggerType'> & {\n  active: boolean;\n  data: Suggestion<Co, Us>[];\n  onSelect: (item: Suggestion<Co, Us>) => void;\n};\n\nexport type AutoCompleteSuggestionListPropsWithContext<\n  Co extends string = DefaultCommandType,\n  Us extends UnknownType = DefaultUserType,\n> = Pick<\n  SuggestionsContextValue<Co, Us>,\n  'AutoCompleteSuggestionHeader' | 'AutoCompleteSuggestionItem'\n> &\n  AutoCompleteSuggestionListComponentProps<Co, Us>;\n\nconst SuggestionsItem: React.FC<TouchableOpacityProps> = (props) => {\n  const { children, ...touchableOpacityProps } = props;\n  return <TouchableOpacity {...touchableOpacityProps}>{children}</TouchableOpacity>;\n};\n\nSuggestionsItem.displayName = 'SuggestionsHeader{messageInput{suggestions}}';\n\nexport const AutoCompleteSuggestionListWithContext = <\n  Co extends string = DefaultCommandType,\n  Us extends UnknownType = DefaultUserType,\n>(\n  props: AutoCompleteSuggestionListPropsWithContext<Co, Us>,\n) => {\n  const {\n    active,\n    AutoCompleteSuggestionHeader,\n    AutoCompleteSuggestionItem,\n    data,\n    onSelect,\n    queryText,\n    triggerType,\n  } = props;\n\n  const {\n    theme: {\n      messageInput: {\n        container: { maxHeight },\n        suggestions: { item: itemStyle },\n        suggestionsListContainer: { flatlist },\n      },\n    },\n  } = useTheme();\n\n  const renderItem = ({ index, item }: { index: number; item: Suggestion<Co, Us> }) => {\n    switch (triggerType) {\n      case 'mention':\n        if (isSuggestionUser(item)) {\n          return (\n            <SuggestionsItem\n              onPress={() => {\n                onSelect(item);\n              }}\n              style={[\n                {\n                  paddingBottom: index === data.length - 1 ? 8 : 0,\n                  paddingTop: index === 0 ? 8 : 0,\n                },\n                itemStyle,\n              ]}\n            >\n              {AutoCompleteSuggestionItem && (\n                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />\n              )}\n            </SuggestionsItem>\n          );\n        }\n        return null;\n      case 'command':\n        if (isSuggestionCommand(item)) {\n          return (\n            <SuggestionsItem\n              onPress={() => {\n                onSelect(item);\n              }}\n              style={[itemStyle]}\n            >\n              {AutoCompleteSuggestionItem && (\n                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />\n              )}\n            </SuggestionsItem>\n          );\n        }\n        return null;\n      case 'emoji':\n        if (isSuggestionEmoji(item)) {\n          return (\n            <SuggestionsItem\n              onPress={() => {\n                onSelect(item);\n              }}\n              style={[itemStyle]}\n            >\n              {AutoCompleteSuggestionItem && (\n                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />\n              )}\n            </SuggestionsItem>\n          );\n        }\n        return null;\n      default:\n        return null;\n    }\n  };\n\n  if (!active || data.length === 0) return null;\n\n  return (\n    <FlatList\n      data={data}\n      keyboardShouldPersistTaps='always'\n      keyExtractor={(item, index) =>\n        `${item.name || (isSuggestionUser(item) ? item.id : '')}${index}`\n      }\n      ListHeaderComponent={\n        AutoCompleteSuggestionHeader ? (\n          <AutoCompleteSuggestionHeader queryText={queryText} triggerType={triggerType} />\n        ) : null\n      }\n      renderItem={renderItem}\n      style={[flatlist, { maxHeight }]}\n    />\n  );\n};\n\nconst areEqual = <Co extends string = DefaultCommandType, Us extends UnknownType = DefaultUserType>(\n  prevProps: AutoCompleteSuggestionListPropsWithContext<Co, Us>,\n  nextProps: AutoCompleteSuggestionListPropsWithContext<Co, Us>,\n) => {\n  const {\n    active: prevActive,\n    data: prevData,\n    queryText: prevQueryText,\n    triggerType: prevType,\n  } = prevProps;\n  const {\n    active: nextActive,\n    data: nextData,\n    queryText: nextQueryText,\n    triggerType: nextType,\n  } = nextProps;\n\n  const activeEqual = prevActive === nextActive;\n  if (!activeEqual) return false;\n\n  const queryTextEqual = prevQueryText === nextQueryText;\n  if (!queryTextEqual) return false;\n\n  const dataEqual = prevData === nextData;\n  if (!dataEqual) return false;\n\n  const typeEqual = prevType === nextType;\n  if (!typeEqual) return false;\n\n  return true;\n};\n\nconst MemoizedAutoCompleteSuggestionList = React.memo(\n  AutoCompleteSuggestionListWithContext,\n  areEqual,\n) as typeof AutoCompleteSuggestionListWithContext;\n\nexport type AutoCompleteSuggestionListProps<\n  Co extends string = DefaultCommandType,\n  Us extends UnknownType = DefaultUserType,\n> = AutoCompleteSuggestionListComponentProps<Co, Us> & {\n  AutoCompleteSuggestionHeader?: React.ComponentType<AutoCompleteSuggestionHeaderProps>;\n  AutoCompleteSuggestionItem?: React.ComponentType<AutoCompleteSuggestionItemProps<Co, Us>>;\n};\n\nexport const AutoCompleteSuggestionList = <\n  Co extends string = DefaultCommandType,\n  Us extends UnknownType = DefaultUserType,\n>(\n  props: AutoCompleteSuggestionListProps<Co, Us>,\n) => {\n  const { AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem } =\n    useSuggestionsContext<Co, Us>();\n  return (\n    <MemoizedAutoCompleteSuggestionList\n      {...{ AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem }}\n      {...props}\n    />\n  );\n};\n\nAutoCompleteSuggestionList.displayName =\n  'AutoCompleteSuggestionList{messageInput{suggestions{List}}}';\n"]}
+{"version":3,"sources":["AutoCompleteSuggestionList.tsx"],"names":["SuggestionsItem","props","children","touchableOpacityProps","displayName","AutoCompleteSuggestionListWithContext","active","AutoCompleteSuggestionHeader","AutoCompleteSuggestionItem","data","onSelect","queryText","triggerType","theme","messageInput","maxHeight","container","itemStyle","suggestions","item","flatlist","suggestionsListContainer","renderItem","index","paddingBottom","length","paddingTop","name","id","areEqual","prevProps","nextProps","prevActive","prevData","prevQueryText","prevType","nextActive","nextData","nextQueryText","nextType","activeEqual","queryTextEqual","dataEqual","typeEqual","MemoizedAutoCompleteSuggestionList","React","memo","AutoCompleteSuggestionList"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { FlatList, TouchableOpacity, TouchableOpacityProps } from 'react-native';\n\nimport type { AutoCompleteSuggestionHeaderProps } from './AutoCompleteSuggestionHeader';\nimport type { AutoCompleteSuggestionItemProps } from './AutoCompleteSuggestionItem';\n\nimport {\n  isSuggestionCommand,\n  isSuggestionEmoji,\n  isSuggestionUser,\n  Suggestion,\n  SuggestionsContextValue,\n  useSuggestionsContext,\n} from '../../contexts/suggestionsContext/SuggestionsContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\n\ntype AutoCompleteSuggestionListComponentProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<SuggestionsContextValue, 'queryText' | 'triggerType'> & {\n  active: boolean;\n  data: Suggestion<StreamChatGenerics>[];\n  onSelect: (item: Suggestion<StreamChatGenerics>) => void;\n};\n\nexport type AutoCompleteSuggestionListPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<\n  SuggestionsContextValue<StreamChatGenerics>,\n  'AutoCompleteSuggestionHeader' | 'AutoCompleteSuggestionItem'\n> &\n  AutoCompleteSuggestionListComponentProps<StreamChatGenerics>;\n\nconst SuggestionsItem: React.FC<TouchableOpacityProps> = (props) => {\n  const { children, ...touchableOpacityProps } = props;\n  return <TouchableOpacity {...touchableOpacityProps}>{children}</TouchableOpacity>;\n};\n\nSuggestionsItem.displayName = 'SuggestionsHeader{messageInput{suggestions}}';\n\nexport const AutoCompleteSuggestionListWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: AutoCompleteSuggestionListPropsWithContext<StreamChatGenerics>,\n) => {\n  const {\n    active,\n    AutoCompleteSuggestionHeader,\n    AutoCompleteSuggestionItem,\n    data,\n    onSelect,\n    queryText,\n    triggerType,\n  } = props;\n\n  const {\n    theme: {\n      messageInput: {\n        container: { maxHeight },\n        suggestions: { item: itemStyle },\n        suggestionsListContainer: { flatlist },\n      },\n    },\n  } = useTheme();\n\n  const renderItem = ({ index, item }: { index: number; item: Suggestion<StreamChatGenerics> }) => {\n    switch (triggerType) {\n      case 'mention':\n        if (isSuggestionUser(item)) {\n          return (\n            <SuggestionsItem\n              onPress={() => {\n                onSelect(item);\n              }}\n              style={[\n                {\n                  paddingBottom: index === data.length - 1 ? 8 : 0,\n                  paddingTop: index === 0 ? 8 : 0,\n                },\n                itemStyle,\n              ]}\n            >\n              {AutoCompleteSuggestionItem && (\n                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />\n              )}\n            </SuggestionsItem>\n          );\n        }\n        return null;\n      case 'command':\n        if (isSuggestionCommand(item)) {\n          return (\n            <SuggestionsItem\n              onPress={() => {\n                onSelect(item);\n              }}\n              style={[itemStyle]}\n            >\n              {AutoCompleteSuggestionItem && (\n                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />\n              )}\n            </SuggestionsItem>\n          );\n        }\n        return null;\n      case 'emoji':\n        if (isSuggestionEmoji(item)) {\n          return (\n            <SuggestionsItem\n              onPress={() => {\n                onSelect(item);\n              }}\n              style={[itemStyle]}\n            >\n              {AutoCompleteSuggestionItem && (\n                <AutoCompleteSuggestionItem itemProps={item} triggerType={triggerType} />\n              )}\n            </SuggestionsItem>\n          );\n        }\n        return null;\n      default:\n        return null;\n    }\n  };\n\n  if (!active || data.length === 0) return null;\n\n  return (\n    <FlatList\n      data={data}\n      keyboardShouldPersistTaps='always'\n      keyExtractor={(item, index) =>\n        `${item.name || (isSuggestionUser(item) ? item.id : '')}${index}`\n      }\n      ListHeaderComponent={\n        AutoCompleteSuggestionHeader ? (\n          <AutoCompleteSuggestionHeader queryText={queryText} triggerType={triggerType} />\n        ) : null\n      }\n      renderItem={renderItem}\n      style={[flatlist, { maxHeight }]}\n    />\n  );\n};\n\nconst areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(\n  prevProps: AutoCompleteSuggestionListPropsWithContext<StreamChatGenerics>,\n  nextProps: AutoCompleteSuggestionListPropsWithContext<StreamChatGenerics>,\n) => {\n  const {\n    active: prevActive,\n    data: prevData,\n    queryText: prevQueryText,\n    triggerType: prevType,\n  } = prevProps;\n  const {\n    active: nextActive,\n    data: nextData,\n    queryText: nextQueryText,\n    triggerType: nextType,\n  } = nextProps;\n\n  const activeEqual = prevActive === nextActive;\n  if (!activeEqual) return false;\n\n  const queryTextEqual = prevQueryText === nextQueryText;\n  if (!queryTextEqual) return false;\n\n  const dataEqual = prevData === nextData;\n  if (!dataEqual) return false;\n\n  const typeEqual = prevType === nextType;\n  if (!typeEqual) return false;\n\n  return true;\n};\n\nconst MemoizedAutoCompleteSuggestionList = React.memo(\n  AutoCompleteSuggestionListWithContext,\n  areEqual,\n) as typeof AutoCompleteSuggestionListWithContext;\n\nexport type AutoCompleteSuggestionListProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = AutoCompleteSuggestionListComponentProps<StreamChatGenerics> & {\n  AutoCompleteSuggestionHeader?: React.ComponentType<AutoCompleteSuggestionHeaderProps>;\n  AutoCompleteSuggestionItem?: React.ComponentType<\n    AutoCompleteSuggestionItemProps<StreamChatGenerics>\n  >;\n};\n\nexport const AutoCompleteSuggestionList = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: AutoCompleteSuggestionListProps<StreamChatGenerics>,\n) => {\n  const { AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem } =\n    useSuggestionsContext<StreamChatGenerics>();\n  return (\n    <MemoizedAutoCompleteSuggestionList\n      {...{ AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem }}\n      {...props}\n    />\n  );\n};\n\nAutoCompleteSuggestionList.displayName =\n  'AutoCompleteSuggestionList{messageInput{suggestions{List}}}';\n"]}

package/lib/module/components/Avatar/Avatar.js

@@ -19,6 +19,8 @@ var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
+var _getResizedImageUrl = require("../../utils/getResizedImageUrl");
+
 var _this = this,
     _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Avatar/Avatar.tsx";
 
@@ -82,7 +84,7 @@ var Avatar = function Avatar(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 81,
+      lineNumber: 74,
       columnNumber: 5
     }
   }, _react["default"].createElement(_reactNative.View, {
@@ -94,7 +96,7 @@ var Avatar = function Avatar(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 82,
+      lineNumber: 75,
       columnNumber: 7
     }
   }, _react["default"].createElement(_reactNative.Image, {
@@ -103,7 +105,11 @@ var Avatar = function Avatar(props) {
       return setImageError(true);
     },
     source: {
-      uri: imageError || !imageProp || imageProp.includes(randomImageBaseUrl) || imageProp.includes(randomSvgBaseUrl) ? imageProp != null && imageProp.includes(streamCDN) ? imageProp : "" + randomImageBaseUrl + (name ? "?name=" + getInitials(name) + "&size=" + size : '') : imageProp.replace('h=%2A', "h=" + _reactNative.PixelRatio.getPixelSizeForLayoutSize(size))
+      uri: imageError || !imageProp || imageProp.includes(randomImageBaseUrl) || imageProp.includes(randomSvgBaseUrl) ? imageProp != null && imageProp.includes(streamCDN) ? imageProp : "" + randomImageBaseUrl + (name ? "?name=" + getInitials(name) + "&size=" + size : '') : (0, _getResizedImageUrl.getResizedImageUrl)({
+        height: size,
+        url: imageProp,
+        width: size
+      })
     },
     style: [image, size ? {
       borderRadius: size / 2,
@@ -114,7 +120,7 @@ var Avatar = function Avatar(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 94,
+      lineNumber: 87,
       columnNumber: 9
     }
   })), online && _react["default"].createElement(_reactNative.View, {
@@ -122,14 +128,14 @@ var Avatar = function Avatar(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 123,
+      lineNumber: 120,
       columnNumber: 9
     }
   }, _react["default"].createElement(_reactNativeSvg["default"], {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 130,
+      lineNumber: 127,
       columnNumber: 11
     }
   }, _react["default"].createElement(_reactNativeSvg.Circle, (0, _extends2["default"])({
@@ -139,7 +145,7 @@ var Avatar = function Avatar(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 131,
+      lineNumber: 128,
       columnNumber: 13
     }
   })))));

package/lib/module/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Avatar.tsx"],"names":["randomImageBaseUrl","randomSvgBaseUrl","streamCDN","styles","StyleSheet","create","container","alignItems","justifyContent","overflow","presenceIndicatorContainer","height","position","right","top","width","getInitials","fullName","split","slice","map","name","charAt","join","Avatar","props","containerStyle","imageProp","image","imageStyle","online","presenceIndicatorProp","presenceIndicator","presenceIndicatorContainerStyle","size","testID","theme","avatar","colors","accent_green","white","imageError","setImageError","borderRadius","uri","includes","replace","PixelRatio","getPixelSizeForLayoutSize","displayName"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport {\n  Image,\n  ImageStyle,\n  PixelRatio,\n  StyleProp,\n  StyleSheet,\n  View,\n  ViewStyle,\n} from 'react-native';\nimport Svg, { Circle, CircleProps } from 'react-native-svg';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\n\nconst randomImageBaseUrl = 'https://getstream.io/random_png/';\nconst randomSvgBaseUrl = 'https://getstream.io/random_svg/';\nconst streamCDN = 'stream-io-cdn.com';\n\nconst styles = StyleSheet.create({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n  presenceIndicatorContainer: {\n    height: 12,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n    width: 12,\n  },\n});\n\nconst getInitials = (fullName: string) =>\n  fullName\n    .split(' ')\n    .slice(0, 2)\n    .map((name) => name.charAt(0))\n    .join(' ');\n\nexport type AvatarProps = {\n  /** size in pixels */\n  size: number;\n  containerStyle?: StyleProp<ViewStyle>;\n  /** image url */\n  image?: string;\n  /** name of the picture, used for fallback */\n  imageStyle?: StyleProp<ImageStyle>;\n  name?: string;\n  online?: boolean;\n  presenceIndicator?: CircleProps;\n  presenceIndicatorContainerStyle?: StyleProp<ViewStyle>;\n  testID?: string;\n};\n\n/**\n * Avatar - A round avatar image with fallback to user's initials\n */\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n  const {\n    containerStyle,\n    image: imageProp,\n    imageStyle,\n    name,\n    online,\n    presenceIndicator: presenceIndicatorProp,\n    presenceIndicatorContainerStyle,\n    size,\n    testID,\n  } = props;\n  const {\n    theme: {\n      avatar: { container, image, presenceIndicator, presenceIndicatorContainer },\n      colors: { accent_green, white },\n    },\n  } = useTheme();\n\n  const [imageError, setImageError] = useState(false);\n\n  return (\n    <View>\n      <View\n        style={[\n          styles.container,\n          {\n            borderRadius: size / 2,\n            height: size,\n            width: size,\n          },\n          container,\n          containerStyle,\n        ]}\n      >\n        <Image\n          accessibilityLabel={testID || 'avatar-image'}\n          onError={() => setImageError(true)}\n          source={{\n            uri:\n              imageError ||\n              !imageProp ||\n              imageProp.includes(randomImageBaseUrl) ||\n              imageProp.includes(randomSvgBaseUrl)\n                ? imageProp?.includes(streamCDN)\n                  ? imageProp\n                  : `${randomImageBaseUrl}${name ? `?name=${getInitials(name)}&size=${size}` : ''}`\n                : imageProp.replace('h=%2A', `h=${PixelRatio.getPixelSizeForLayoutSize(size)}`),\n          }}\n          style={[\n            image,\n            size\n              ? {\n                  borderRadius: size / 2,\n                  height: size,\n                  width: size,\n                }\n              : {},\n            imageStyle,\n          ]}\n          testID={testID || 'avatar-image'}\n        />\n      </View>\n      {online && (\n        <View\n          style={[\n            styles.presenceIndicatorContainer,\n            presenceIndicatorContainer,\n            presenceIndicatorContainerStyle,\n          ]}\n        >\n          <Svg>\n            <Circle\n              fill={accent_green}\n              stroke={white}\n              {...presenceIndicator}\n              {...presenceIndicatorProp}\n            />\n          </Svg>\n        </View>\n      )}\n    </View>\n  );\n};\n\nAvatar.displayName = 'Avatar{avatar}';\n"]}
+{"version":3,"sources":["Avatar.tsx"],"names":["randomImageBaseUrl","randomSvgBaseUrl","streamCDN","styles","StyleSheet","create","container","alignItems","justifyContent","overflow","presenceIndicatorContainer","height","position","right","top","width","getInitials","fullName","split","slice","map","name","charAt","join","Avatar","props","containerStyle","imageProp","image","imageStyle","online","presenceIndicatorProp","presenceIndicator","presenceIndicatorContainerStyle","size","testID","theme","avatar","colors","accent_green","white","imageError","setImageError","borderRadius","uri","includes","url","displayName"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { Image, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\nimport Svg, { Circle, CircleProps } from 'react-native-svg';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { getResizedImageUrl } from '../../utils/getResizedImageUrl';\n\nconst randomImageBaseUrl = 'https://getstream.io/random_png/';\nconst randomSvgBaseUrl = 'https://getstream.io/random_svg/';\nconst streamCDN = 'stream-io-cdn.com';\n\nconst styles = StyleSheet.create({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n  presenceIndicatorContainer: {\n    height: 12,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n    width: 12,\n  },\n});\n\nconst getInitials = (fullName: string) =>\n  fullName\n    .split(' ')\n    .slice(0, 2)\n    .map((name) => name.charAt(0))\n    .join(' ');\n\nexport type AvatarProps = {\n  /** size in pixels */\n  size: number;\n  containerStyle?: StyleProp<ViewStyle>;\n  /** image url */\n  image?: string;\n  /** name of the picture, used for fallback */\n  imageStyle?: StyleProp<ImageStyle>;\n  name?: string;\n  online?: boolean;\n  presenceIndicator?: CircleProps;\n  presenceIndicatorContainerStyle?: StyleProp<ViewStyle>;\n  testID?: string;\n};\n\n/**\n * Avatar - A round avatar image with fallback to user's initials.\n */\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n  const {\n    containerStyle,\n    image: imageProp,\n    imageStyle,\n    name,\n    online,\n    presenceIndicator: presenceIndicatorProp,\n    presenceIndicatorContainerStyle,\n    size,\n    testID,\n  } = props;\n  const {\n    theme: {\n      avatar: { container, image, presenceIndicator, presenceIndicatorContainer },\n      colors: { accent_green, white },\n    },\n  } = useTheme();\n\n  const [imageError, setImageError] = useState(false);\n\n  return (\n    <View>\n      <View\n        style={[\n          styles.container,\n          {\n            borderRadius: size / 2,\n            height: size,\n            width: size,\n          },\n          container,\n          containerStyle,\n        ]}\n      >\n        <Image\n          accessibilityLabel={testID || 'avatar-image'}\n          onError={() => setImageError(true)}\n          source={{\n            uri:\n              imageError ||\n              !imageProp ||\n              imageProp.includes(randomImageBaseUrl) ||\n              imageProp.includes(randomSvgBaseUrl)\n                ? imageProp?.includes(streamCDN)\n                  ? imageProp\n                  : `${randomImageBaseUrl}${name ? `?name=${getInitials(name)}&size=${size}` : ''}`\n                : getResizedImageUrl({\n                    height: size,\n                    url: imageProp,\n                    width: size,\n                  }),\n          }}\n          style={[\n            image,\n            size\n              ? {\n                  borderRadius: size / 2,\n                  height: size,\n                  width: size,\n                }\n              : {},\n            imageStyle,\n          ]}\n          testID={testID || 'avatar-image'}\n        />\n      </View>\n      {online && (\n        <View\n          style={[\n            styles.presenceIndicatorContainer,\n            presenceIndicatorContainer,\n            presenceIndicatorContainerStyle,\n          ]}\n        >\n          <Svg>\n            <Circle\n              fill={accent_green}\n              stroke={white}\n              {...presenceIndicator}\n              {...presenceIndicatorProp}\n            />\n          </Svg>\n        </View>\n      )}\n    </View>\n  );\n};\n\nAvatar.displayName = 'Avatar{avatar}';\n"]}

package/lib/module/components/Avatar/GroupAvatar.js

@@ -17,6 +17,8 @@ var _reactNative = require("react-native");
 
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
+var _getResizedImageUrl = require("../../utils/getResizedImageUrl");
+
 var _this = this,
     _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Avatar/GroupAvatar.tsx";
 
@@ -101,7 +103,7 @@ var GroupAvatar = function GroupAvatar(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 108,
+      lineNumber: 109,
       columnNumber: 5
     }
   }, avatarImages.map(function (column, colIndex) {
@@ -113,7 +115,7 @@ var GroupAvatar = function GroupAvatar(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 118,
+        lineNumber: 119,
         columnNumber: 9
       }
     }, column.map(function (_ref, rowIndex) {
@@ -128,7 +130,11 @@ var GroupAvatar = function GroupAvatar(props) {
           return setImageError(true);
         },
         source: {
-          uri: imageError || url.includes(randomSvgBaseUrl) ? url.includes(streamCDN) ? url : "" + randomImageBaseUrl + (name ? "?name=" + getInitials(name) + "&size=" + height : '') : url.replace('h=%2A', "h=" + _reactNative.PixelRatio.getPixelSizeForLayoutSize(height))
+          uri: imageError || url.includes(randomSvgBaseUrl) ? url.includes(streamCDN) ? url : "" + randomImageBaseUrl + (name ? "?name=" + getInitials(name) + "&size=" + height : '') : (0, _getResizedImageUrl.getResizedImageUrl)({
+            height: height,
+            url: url,
+            width: width
+          })
         },
         style: [image, size ? {
           height: height,
@@ -138,7 +144,7 @@ var GroupAvatar = function GroupAvatar(props) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 128,
+          lineNumber: 129,
           columnNumber: 13
         }
       });

package/lib/module/components/Avatar/GroupAvatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["GroupAvatar.tsx"],"names":["randomImageBaseUrl","randomSvgBaseUrl","streamCDN","styles","StyleSheet","create","container","overflow","flex","getInitials","fullName","split","slice","map","name","charAt","join","GroupAvatar","props","containerStyle","images","names","size","testID","theme","groupAvatar","image","imageError","setImageError","imagesOrNames","avatarImages","reduce","returnArray","currentImage","index","url","startsWith","length","height","width","borderRadius","column","colIndex","flexDirection","rowIndex","uri","includes","replace","PixelRatio","getPixelSizeForLayoutSize","displayName"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;AAEA,IAAMA,kBAAkB,GAAG,kCAA3B;AACA,IAAMC,gBAAgB,GAAG,kCAAzB;AACA,IAAMC,SAAS,GAAG,mBAAlB;;AAEA,IAAMC,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,SAAS,EAAE;AACTC,IAAAA,QAAQ,EAAE;AADD,GADoB;AAI/BC,EAAAA,IAAI,EAAE;AAAEA,IAAAA,IAAI,EAAE;AAAR;AAJyB,CAAlB,CAAf;;AAOA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,QAAD;AAAA,SAClBA,QAAQ,CACLC,KADH,CACS,GADT,EAEGC,KAFH,CAES,CAFT,EAEY,CAFZ,EAGGC,GAHH,CAGO,UAACC,IAAD;AAAA,WAAUA,IAAI,CAACC,MAAL,CAAY,CAAZ,CAAV;AAAA,GAHP,EAIGC,IAJH,CAIQ,GAJR,CADkB;AAAA,CAApB;;AAqBO,IAAMC,WAAuC,GAAG,SAA1CA,WAA0C,CAACC,KAAD,EAAW;AAChE,MAAQC,cAAR,GAAwDD,KAAxD,CAAQC,cAAR;AAAA,MAAwBC,MAAxB,GAAwDF,KAAxD,CAAwBE,MAAxB;AAAA,MAAgCC,KAAhC,GAAwDH,KAAxD,CAAgCG,KAAhC;AAAA,MAAuCC,IAAvC,GAAwDJ,KAAxD,CAAuCI,IAAvC;AAAA,MAA6CC,MAA7C,GAAwDL,KAAxD,CAA6CK,MAA7C;;AACA,kBAII,6BAJJ;AAAA,wCACEC,KADF,CAEIC,WAFJ;AAAA,MAEmBnB,SAFnB,yBAEmBA,SAFnB;AAAA,MAE8BoB,KAF9B,yBAE8BA,KAF9B;;AAMA,kBAAoC,qBAAS,KAAT,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AAcA,MAAMC,aAAa,GAAGT,MAAM,IAAIC,KAAV,IAAmB,EAAzC;AACA,MAAMS,YAAY,GAAGD,aAAa,CAACjB,KAAd,CAAoB,CAApB,EAAuB,CAAvB,EAA0BmB,MAA1B,CAAiC,UAACC,WAAD,EAAcC,YAAd,EAA4BC,KAA5B,EAAsC;AAC1F,QAAMC,GAAG,GAAGF,YAAY,CAACG,UAAb,CAAwB,MAAxB,IACRH,YADQ,QAELjC,kBAFK,IAGNqB,KAAK,cACQZ,WAAW,CAACY,KAAK,CAACa,KAAD,CAAN,CADnB,eAECL,aAAa,CAACQ,MAAd,IAAwB,CAAxB,GAA4Bf,IAA5B,GAAmCA,IAAI,GAAG,CAF3C,IAID,EAPE,CAAZ;;AASA,QAAIO,aAAa,CAACQ,MAAd,IAAwB,CAA5B,EAA+B;AAC7BL,MAAAA,WAAW,CAAC,CAAD,CAAX,iDACMA,WAAW,CAAC,CAAD,CAAX,IAAkB,EADxB,IAEE;AACEM,QAAAA,MAAM,EAAET,aAAa,CAACQ,MAAd,KAAyB,CAAzB,GAA6Bf,IAA7B,GAAoCA,IAAI,GAAG,CADrD;AAEER,QAAAA,IAAI,EAAEO,KAAK,GAAGA,KAAK,CAACa,KAAD,CAAR,GAAkB,EAF/B;AAGEC,QAAAA,GAAG,EAAHA,GAHF;AAIEI,QAAAA,KAAK,EAAEjB;AAJT,OAFF;AASD,KAVD,MAUO;AACL,UAAIY,KAAK,GAAG,CAAZ,EAAe;AACbF,QAAAA,WAAW,CAAC,CAAD,CAAX,iDACMA,WAAW,CAAC,CAAD,CAAX,IAAkB,EADxB,IAEE;AACEM,UAAAA,MAAM,EAAEhB,IAAI,GAAG,CADjB;AAEER,UAAAA,IAAI,EAAEO,KAAK,GAAGA,KAAK,CAACa,KAAD,CAAR,GAAkB,EAF/B;AAGEC,UAAAA,GAAG,EAAHA,GAHF;AAIEI,UAAAA,KAAK,EAAEjB,IAAI,GAAG;AAJhB,SAFF;AASD,OAVD,MAUO;AACLU,QAAAA,WAAW,CAAC,CAAD,CAAX,iDACMA,WAAW,CAAC,CAAD,CAAX,IAAkB,EADxB,IAEE;AACEM,UAAAA,MAAM,EAAEhB,IAAI,GAAG,CADjB;AAEER,UAAAA,IAAI,EAAEO,KAAK,GAAGA,KAAK,CAACa,KAAD,CAAR,GAAkB,EAF/B;AAGEC,UAAAA,GAAG,EAAHA,GAHF;AAIEI,UAAAA,KAAK,EAAEV,aAAa,CAACQ,MAAd,KAAyB,CAAzB,GAA6Bf,IAA7B,GAAoCA,IAAI,GAAG;AAJpD,SAFF;AASD;AACF;;AACD,WAAOU,WAAP;AACD,GA5CoB,EA4ClB,EA5CkB,CAArB;AA8CA,SACE,gCAAC,iBAAD;AACE,IAAA,KAAK,EAAE,CACL7B,MAAM,CAACG,SADF,EAEL;AAAEkC,MAAAA,YAAY,EAAElB,IAAI,GAAG,CAAvB;AAA0BgB,MAAAA,MAAM,EAAEhB,IAAlC;AAAwCiB,MAAAA,KAAK,EAAEjB;AAA/C,KAFK,EAGLhB,SAHK,EAILa,cAJK,CADT;AAOE,IAAA,MAAM,EAAEI,MAAM,IAAI,cAPpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KASGO,YAAY,CAACjB,GAAb,CAAiB,UAAC4B,MAAD,EAASC,QAAT;AAAA,WAChB,gCAAC,iBAAD;AACE,MAAA,GAAG,qBAAmBA,QADxB;AAEE,MAAA,KAAK,EAAE,CACLvC,MAAM,CAACK,IADF,EAEL;AACEmC,QAAAA,aAAa,EAAEd,aAAa,CAACQ,MAAd,KAAyB,CAAzB,GAA6B,QAA7B,GAAwC;AADzD,OAFK,CAFT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OASGI,MAAM,CAAC5B,GAAP,CAAW,gBAA+B+B,QAA/B;AAAA,UAAGN,MAAH,QAAGA,MAAH;AAAA,UAAWxB,IAAX,QAAWA,IAAX;AAAA,UAAiBqB,GAAjB,QAAiBA,GAAjB;AAAA,UAAsBI,KAAtB,QAAsBA,KAAtB;AAAA,aACV,gCAAC,kBAAD;AACE,QAAA,kBAAkB,EAAEhB,MAAM,IAAI,cADhC;AAEE,QAAA,GAAG,cAAYY,GAAZ,SAAmBS,QAFxB;AAGE,QAAA,OAAO,EAAE;AAAA,iBAAMhB,aAAa,CAAC,IAAD,CAAnB;AAAA,SAHX;AAIE,QAAA,MAAM,EAAE;AACNiB,UAAAA,GAAG,EACDlB,UAAU,IAAIQ,GAAG,CAACW,QAAJ,CAAa7C,gBAAb,CAAd,GACIkC,GAAG,CAACW,QAAJ,CAAa5C,SAAb,IACEiC,GADF,QAEKnC,kBAFL,IAGIc,IAAI,cAAYL,WAAW,CAACK,IAAD,CAAvB,cAAsCwB,MAAtC,GAAiD,EAHzD,CADJ,GAMIH,GAAG,CAACY,OAAJ,CAAY,OAAZ,SAA0BC,wBAAWC,yBAAX,CAAqCX,MAArC,CAA1B;AARA,SAJV;AAcE,QAAA,KAAK,EAAE,CACLZ,KADK,EAELJ,IAAI,GACA;AACEgB,UAAAA,MAAM,EAANA,MADF;AAEEC,UAAAA,KAAK,EAALA;AAFF,SADA,GAKA,EAPC,CAdT;AAuBE,QAAA,MAAM,0BAAwBG,QAAxB,SAAoCE,QAvB5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QADU;AAAA,KAAX,CATH,CADgB;AAAA,GAAjB,CATH,CADF;AAmDD,CAxHM;;;AA0HP3B,WAAW,CAACiC,WAAZ,GAA0B,0BAA1B","sourcesContent":["import React, { useState } from 'react';\nimport { Image, PixelRatio, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\n\nconst randomImageBaseUrl = 'https://getstream.io/random_png/';\nconst randomSvgBaseUrl = 'https://getstream.io/random_svg/';\nconst streamCDN = 'stream-io-cdn.com';\n\nconst styles = StyleSheet.create({\n  container: {\n    overflow: 'hidden',\n  },\n  flex: { flex: 1 },\n});\n\nconst getInitials = (fullName: string) =>\n  fullName\n    .split(' ')\n    .slice(0, 2)\n    .map((name) => name.charAt(0))\n    .join(' ');\n\nexport type GroupAvatarProps = {\n  /** total size in pixels */\n  size: number;\n  containerStyle?: StyleProp<ViewStyle>;\n  /** image urls */\n  images?: string[];\n  /** name of the users, used for fallback */\n  names?: string[];\n  testID?: string;\n};\n\n/**\n * GroupAvatar - A round group of avatar images with fallbacks to users' initials\n */\nexport const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {\n  const { containerStyle, images, names, size, testID } = props;\n  const {\n    theme: {\n      groupAvatar: { container, image },\n    },\n  } = useTheme();\n\n  const [imageError, setImageError] = useState(false);\n\n  /**\n   * [\n   *    [\n   *        { height: number; name: string; url: string; width: number },\n   *        { height: number; name: string; url: string; width: number },\n   *    ],\n   *    [\n   *        { height: number; name: string; url: string; width: number },\n   *        { height: number; name: string; url: string; width: number },\n   *    ],\n   * ]\n   */\n  const imagesOrNames = images || names || [];\n  const avatarImages = imagesOrNames.slice(0, 4).reduce((returnArray, currentImage, index) => {\n    const url = currentImage.startsWith('http')\n      ? currentImage\n      : `${randomImageBaseUrl}${\n          names\n            ? `?name=${getInitials(names[index])}&size=${\n                imagesOrNames.length <= 2 ? size : size / 2\n              }`\n            : ''\n        }`;\n    if (imagesOrNames.length <= 2) {\n      returnArray[0] = [\n        ...(returnArray[0] || []),\n        {\n          height: imagesOrNames.length === 1 ? size : size / 2,\n          name: names ? names[index] : '',\n          url,\n          width: size,\n        },\n      ];\n    } else {\n      if (index < 2) {\n        returnArray[0] = [\n          ...(returnArray[0] || []),\n          {\n            height: size / 2,\n            name: names ? names[index] : '',\n            url,\n            width: size / 2,\n          },\n        ];\n      } else {\n        returnArray[1] = [\n          ...(returnArray[1] || []),\n          {\n            height: size / 2,\n            name: names ? names[index] : '',\n            url,\n            width: imagesOrNames.length === 3 ? size : size / 2,\n          },\n        ];\n      }\n    }\n    return returnArray;\n  }, [] as { height: number; name: string; url: string; width: number }[][]);\n\n  return (\n    <View\n      style={[\n        styles.container,\n        { borderRadius: size / 2, height: size, width: size },\n        container,\n        containerStyle,\n      ]}\n      testID={testID || 'group-avatar'}\n    >\n      {avatarImages.map((column, colIndex) => (\n        <View\n          key={`avatar-column-${colIndex}`}\n          style={[\n            styles.flex,\n            {\n              flexDirection: imagesOrNames.length === 2 ? 'column' : 'row',\n            },\n          ]}\n        >\n          {column.map(({ height, name, url, width }, rowIndex) => (\n            <Image\n              accessibilityLabel={testID || 'avatar-image'}\n              key={`avatar-${url}-${rowIndex}`}\n              onError={() => setImageError(true)}\n              source={{\n                uri:\n                  imageError || url.includes(randomSvgBaseUrl)\n                    ? url.includes(streamCDN)\n                      ? url\n                      : `${randomImageBaseUrl}${\n                          name ? `?name=${getInitials(name)}&size=${height}` : ''\n                        }`\n                    : url.replace('h=%2A', `h=${PixelRatio.getPixelSizeForLayoutSize(height)}`),\n              }}\n              style={[\n                image,\n                size\n                  ? {\n                      height,\n                      width,\n                    }\n                  : {},\n              ]}\n              testID={`group-avatar-image-${colIndex}-${rowIndex}`}\n            />\n          ))}\n        </View>\n      ))}\n    </View>\n  );\n};\n\nGroupAvatar.displayName = 'GroupAvatar{groupAvatar}';\n"]}
+{"version":3,"sources":["GroupAvatar.tsx"],"names":["randomImageBaseUrl","randomSvgBaseUrl","streamCDN","styles","StyleSheet","create","container","overflow","flex","getInitials","fullName","split","slice","map","name","charAt","join","GroupAvatar","props","containerStyle","images","names","size","testID","theme","groupAvatar","image","imageError","setImageError","imagesOrNames","avatarImages","reduce","returnArray","currentImage","index","url","startsWith","length","height","width","borderRadius","column","colIndex","flexDirection","rowIndex","uri","includes","displayName"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { getResizedImageUrl } from '../../utils/getResizedImageUrl';\n\nconst randomImageBaseUrl = 'https://getstream.io/random_png/';\nconst randomSvgBaseUrl = 'https://getstream.io/random_svg/';\nconst streamCDN = 'stream-io-cdn.com';\n\nconst styles = StyleSheet.create({\n  container: {\n    overflow: 'hidden',\n  },\n  flex: { flex: 1 },\n});\n\nconst getInitials = (fullName: string) =>\n  fullName\n    .split(' ')\n    .slice(0, 2)\n    .map((name) => name.charAt(0))\n    .join(' ');\n\nexport type GroupAvatarProps = {\n  /** total size in pixels */\n  size: number;\n  containerStyle?: StyleProp<ViewStyle>;\n  /** image urls */\n  images?: string[];\n  /** name of the users, used for fallback */\n  names?: string[];\n  testID?: string;\n};\n\n/**\n * GroupAvatar - A round group of avatar images with fallbacks to users' initials\n */\nexport const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {\n  const { containerStyle, images, names, size, testID } = props;\n  const {\n    theme: {\n      groupAvatar: { container, image },\n    },\n  } = useTheme();\n\n  const [imageError, setImageError] = useState(false);\n\n  /**\n   * [\n   *    [\n   *        { height: number; name: string; url: string; width: number },\n   *        { height: number; name: string; url: string; width: number },\n   *    ],\n   *    [\n   *        { height: number; name: string; url: string; width: number },\n   *        { height: number; name: string; url: string; width: number },\n   *    ],\n   * ]\n   */\n  const imagesOrNames = images || names || [];\n  const avatarImages = imagesOrNames.slice(0, 4).reduce((returnArray, currentImage, index) => {\n    const url = currentImage.startsWith('http')\n      ? currentImage\n      : `${randomImageBaseUrl}${\n          names\n            ? `?name=${getInitials(names[index])}&size=${\n                imagesOrNames.length <= 2 ? size : size / 2\n              }`\n            : ''\n        }`;\n    if (imagesOrNames.length <= 2) {\n      returnArray[0] = [\n        ...(returnArray[0] || []),\n        {\n          height: imagesOrNames.length === 1 ? size : size / 2,\n          name: names ? names[index] : '',\n          url,\n          width: size,\n        },\n      ];\n    } else {\n      if (index < 2) {\n        returnArray[0] = [\n          ...(returnArray[0] || []),\n          {\n            height: size / 2,\n            name: names ? names[index] : '',\n            url,\n            width: size / 2,\n          },\n        ];\n      } else {\n        returnArray[1] = [\n          ...(returnArray[1] || []),\n          {\n            height: size / 2,\n            name: names ? names[index] : '',\n            url,\n            width: imagesOrNames.length === 3 ? size : size / 2,\n          },\n        ];\n      }\n    }\n    return returnArray;\n  }, [] as { height: number; name: string; url: string; width: number }[][]);\n\n  return (\n    <View\n      style={[\n        styles.container,\n        { borderRadius: size / 2, height: size, width: size },\n        container,\n        containerStyle,\n      ]}\n      testID={testID || 'group-avatar'}\n    >\n      {avatarImages.map((column, colIndex) => (\n        <View\n          key={`avatar-column-${colIndex}`}\n          style={[\n            styles.flex,\n            {\n              flexDirection: imagesOrNames.length === 2 ? 'column' : 'row',\n            },\n          ]}\n        >\n          {column.map(({ height, name, url, width }, rowIndex) => (\n            <Image\n              accessibilityLabel={testID || 'avatar-image'}\n              key={`avatar-${url}-${rowIndex}`}\n              onError={() => setImageError(true)}\n              source={{\n                uri:\n                  imageError || url.includes(randomSvgBaseUrl)\n                    ? url.includes(streamCDN)\n                      ? url\n                      : `${randomImageBaseUrl}${\n                          name ? `?name=${getInitials(name)}&size=${height}` : ''\n                        }`\n                    : getResizedImageUrl({\n                        height,\n                        url,\n                        width,\n                      }),\n              }}\n              style={[\n                image,\n                size\n                  ? {\n                      height,\n                      width,\n                    }\n                  : {},\n              ]}\n              testID={`group-avatar-image-${colIndex}-${rowIndex}`}\n            />\n          ))}\n        </View>\n      ))}\n    </View>\n  );\n};\n\nGroupAvatar.displayName = 'GroupAvatar{groupAvatar}';\n"]}

package/lib/module/components/Channel/Channel.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Channel = exports.reactionData = void 0;
+exports.reactionData = exports.Channel = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -29,14 +29,14 @@ var _throttle = _interopRequireDefault(require("lodash/throttle"));
 
 var _streamChat = require("stream-chat");
 
-var _useAppStateListener = require("../../hooks/useAppStateListener");
-
 var _useCreateChannelContext = require("./hooks/useCreateChannelContext");
 
 var _useCreateInputMessageInputContext = require("./hooks/useCreateInputMessageInputContext");
 
 var _useCreateMessagesContext = require("./hooks/useCreateMessagesContext");
 
+var _useCreateOwnCapabilitiesContext = require("./hooks/useCreateOwnCapabilitiesContext");
+
 var _useCreatePaginatedMessageListContext = require("./hooks/useCreatePaginatedMessageListContext");
 
 var _useCreateThreadContext = require("./hooks/useCreateThreadContext");
@@ -45,6 +45,38 @@ var _useCreateTypingContext = require("./hooks/useCreateTypingContext");
 
 var _useTargetedMessage2 = require("./hooks/useTargetedMessage");
 
+var _ChannelContext = require("../../contexts/channelContext/ChannelContext");
+
+var _useChannelState2 = require("../../contexts/channelsStateContext/useChannelState");
+
+var _ChatContext = require("../../contexts/chatContext/ChatContext");
+
+var _MessageInputContext = require("../../contexts/messageInputContext/MessageInputContext");
+
+var _MessagesContext = require("../../contexts/messagesContext/MessagesContext");
+
+var _OwnCapabilitiesContext = require("../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext");
+
+var _PaginatedMessageListContext = require("../../contexts/paginatedMessageListContext/PaginatedMessageListContext");
+
+var _SuggestionsContext = require("../../contexts/suggestionsContext/SuggestionsContext");
+
+var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
+
+var _ThreadContext = require("../../contexts/threadContext/ThreadContext");
+
+var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
+
+var _TypingContext = require("../../contexts/typingContext/TypingContext");
+
+var _useAppStateListener = require("../../hooks/useAppStateListener");
+
+var _icons = require("../../icons");
+
+var _native = require("../../native");
+
+var _utils = require("../../utils/utils");
+
 var _Attachment = require("../Attachment/Attachment");
 
 var _AttachmentActions = require("../Attachment/AttachmentActions");
@@ -61,14 +93,18 @@ var _Gallery = require("../Attachment/Gallery");
 
 var _Giphy = require("../Attachment/Giphy");
 
+var _AutoCompleteSuggestionHeader = require("../AutoCompleteInput/AutoCompleteSuggestionHeader");
+
+var _AutoCompleteSuggestionItem = require("../AutoCompleteInput/AutoCompleteSuggestionItem");
+
+var _AutoCompleteSuggestionList = require("../AutoCompleteInput/AutoCompleteSuggestionList");
+
 var _EmptyStateIndicator = require("../Indicators/EmptyStateIndicator");
 
 var _LoadingErrorIndicator = require("../Indicators/LoadingErrorIndicator");
 
 var _LoadingIndicator = require("../Indicators/LoadingIndicator");
 
-var _NetworkDownIndicator = require("../MessageList/NetworkDownIndicator");
-
 var _KeyboardCompatibleView = require("../KeyboardCompatibleView/KeyboardCompatibleView");
 
 var _Message = require("../Message/Message");
@@ -125,6 +161,8 @@ var _MessageList = require("../MessageList/MessageList");
 
 var _MessageSystem = require("../MessageList/MessageSystem");
 
+var _NetworkDownIndicator = require("../MessageList/NetworkDownIndicator");
+
 var _ScrollToBottomButton = require("../MessageList/ScrollToBottomButton");
 
 var _TypingIndicator = require("../MessageList/TypingIndicator");
@@ -135,44 +173,6 @@ var _OverlayReactionList = require("../MessageOverlay/OverlayReactionList");
 
 var _Reply = require("../Reply/Reply");
 
-var _AutoCompleteSuggestionList = require("../AutoCompleteInput/AutoCompleteSuggestionList");
-
-var _AutoCompleteSuggestionHeader = require("../AutoCompleteInput/AutoCompleteSuggestionHeader");
-
-var _AutoCompleteSuggestionItem = require("../AutoCompleteInput/AutoCompleteSuggestionItem");
-
-var _ChannelContext = require("../../contexts/channelContext/ChannelContext");
-
-var _useChannelState2 = require("../../contexts/channelsStateContext/useChannelState");
-
-var _ChatContext = require("../../contexts/chatContext/ChatContext");
-
-var _MessageInputContext = require("../../contexts/messageInputContext/MessageInputContext");
-
-var _MessagesContext = require("../../contexts/messagesContext/MessagesContext");
-
-var _PaginatedMessageListContext = require("../../contexts/paginatedMessageListContext/PaginatedMessageListContext");
-
-var _SuggestionsContext = require("../../contexts/suggestionsContext/SuggestionsContext");
-
-var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
-
-var _ThreadContext = require("../../contexts/threadContext/ThreadContext");
-
-var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
-
-var _TypingContext = require("../../contexts/typingContext/TypingContext");
-
-var _icons = require("../../icons");
-
-var _native = require("../../native");
-
-var _utils = require("../../utils/utils");
-
-var _useCreateOwnCapabilitiesContext = require("./hooks/useCreateOwnCapabilitiesContext");
-
-var _OwnCapabilitiesContext = require("../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext");
-
 var _excluded = ["attachments", "mentioned_users", "parent_id", "text"],
     _excluded2 = ["__html", "attachments", "created_at", "html", "id", "mentioned_users", "parent_id", "quoted_message", "reactions", "status", "text", "type", "updated_at", "user"];
 
@@ -1008,10 +1008,10 @@ var ChannelWithContext = function ChannelWithContext(props) {
               };
 
               failedMessages = messages.filter(function (message) {
-                return message.status === 'failed';
+                return message.status === _utils.MessageStatusTypes.FAILED;
               }).map(parseMessage);
               failedThreadMessages = thread ? threadMessages.filter(function (message) {
-                return message.status === 'failed';
+                return message.status === _utils.MessageStatusTypes.FAILED;
               }).map(parseMessage) : [];
               oldListTopMessageCreatedAt = oldListTopMessage.created_at;
               oldListBottomMessageCreatedAt = oldListBottomMessage.created_at;
@@ -1358,7 +1358,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
       })) || [],
       parent_id: parent_id,
       reactions: [],
-      status: 'sending',
+      status: _utils.MessageStatusTypes.SENDING,
       text: text,
       type: 'regular',
       user: (0, _extends2["default"])({
@@ -1425,7 +1425,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
 
             case 14:
               if (messageResponse.message) {
-                messageResponse.message.status = 'received';
+                messageResponse.message.status = _utils.MessageStatusTypes.RECEIVED;
 
                 if (retrying) {
                   replaceMessage(message, messageResponse.message);
@@ -1441,7 +1441,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
               _context12.prev = 17;
               _context12.t0 = _context12["catch"](2);
               console.log(_context12.t0);
-              message.status = 'failed';
+              message.status = _utils.MessageStatusTypes.FAILED;
               updateMessage(message);
 
             case 22:
@@ -1511,7 +1511,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
           switch (_context14.prev = _context14.next) {
             case 0:
               statusPendingMessage = (0, _extends2["default"])({}, message, {
-                status: 'sending'
+                status: _utils.MessageStatusTypes.SENDING
               });
               updateMessage(statusPendingMessage);
               _context14.next = 4;
@@ -1571,7 +1571,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
             case 6:
               oldestMessage = messages && messages[0];
 
-              if (!(oldestMessage && oldestMessage.status !== 'received')) {
+              if (!(oldestMessage && oldestMessage.status !== _utils.MessageStatusTypes.RECEIVED)) {
                 _context15.next = 9;
                 break;
               }
@@ -1653,7 +1653,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
               setLoadingMoreRecent(true);
               recentMessage = messages[messages.length - 1];
 
-              if (!((recentMessage == null ? void 0 : recentMessage.status) !== 'received')) {
+              if (!((recentMessage == null ? void 0 : recentMessage.status) !== _utils.MessageStatusTypes.RECEIVED)) {
                 _context16.next = 8;
                 break;
               }
@@ -2026,7 +2026,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1817,
+        lineNumber: 1755,
         columnNumber: 12
       }
     });
@@ -2041,7 +2041,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 1822,
+        lineNumber: 1760,
         columnNumber: 7
       }
     }, t('Please select a channel first'));
@@ -2055,7 +2055,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1829,
+      lineNumber: 1767,
       columnNumber: 5
     }
   }), _react["default"].createElement(_ChannelContext.ChannelProvider, {
@@ -2063,7 +2063,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1835,
+      lineNumber: 1773,
       columnNumber: 7
     }
   }, _react["default"].createElement(_OwnCapabilitiesContext.OwnCapabilitiesProvider, {
@@ -2071,7 +2071,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1836,
+      lineNumber: 1774,
       columnNumber: 9
     }
   }, _react["default"].createElement(_TypingContext.TypingProvider, {
@@ -2079,7 +2079,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1837,
+      lineNumber: 1775,
       columnNumber: 11
     }
   }, _react["default"].createElement(_PaginatedMessageListContext.PaginatedMessageListProvider, {
@@ -2087,7 +2087,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1838,
+      lineNumber: 1776,
       columnNumber: 13
     }
   }, _react["default"].createElement(_MessagesContext.MessagesProvider, {
@@ -2095,7 +2095,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1839,
+      lineNumber: 1777,
       columnNumber: 15
     }
   }, _react["default"].createElement(_ThreadContext.ThreadProvider, {
@@ -2103,7 +2103,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1840,
+      lineNumber: 1778,
       columnNumber: 17
     }
   }, _react["default"].createElement(_SuggestionsContext.SuggestionsProvider, {
@@ -2111,7 +2111,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1841,
+      lineNumber: 1779,
       columnNumber: 19
     }
   }, _react["default"].createElement(_MessageInputContext.MessageInputProvider, {
@@ -2119,7 +2119,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1842,
+      lineNumber: 1780,
       columnNumber: 21
     }
   }, _react["default"].createElement(_reactNative.View, {
@@ -2129,7 +2129,7 @@ var ChannelWithContext = function ChannelWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1845,
+      lineNumber: 1781,
       columnNumber: 23
     }
   }, children))))))))));
@@ -2184,7 +2184,7 @@ var Channel = function Channel(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1914,
+      lineNumber: 1838,
       columnNumber: 5
     }
   }));