stream-chat-react-native-core 3.10.2-next.1 → 4.0.0-beta.3

package/lib/module/components/AutoCompleteInput/AutoCompleteSuggestionItem.js

@@ -0,0 +1,248 @@
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutoCompleteSuggestionItem = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _AutoCompleteSuggestionCommandIcon = require("./AutoCompleteSuggestionCommandIcon");
+
+var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
+
+var _AtMentions = require("../../icons/AtMentions");
+
+var _Avatar = require("../Avatar/Avatar");
+
+var _this = this,
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx";
+
+var styles = _reactNative.StyleSheet.create({
+  args: {
+    fontSize: 14
+  },
+  column: {
+    flex: 1,
+    justifyContent: 'space-evenly',
+    paddingLeft: 8
+  },
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+    paddingVertical: 8
+  },
+  name: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingBottom: 2
+  },
+  tag: {
+    fontSize: 12,
+    fontWeight: '600'
+  },
+  text: {
+    fontSize: 14
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    paddingRight: 8
+  }
+});
+
+var AutoCompleteSuggestionItemWithContext = function AutoCompleteSuggestionItemWithContext(_ref) {
+  var itemProps = _ref.itemProps,
+      triggerType = _ref.triggerType;
+
+  var _useTheme = (0, _ThemeContext.useTheme)(),
+      _useTheme$theme = _useTheme.theme,
+      _useTheme$theme$color = _useTheme$theme.colors,
+      accent_blue = _useTheme$theme$color.accent_blue,
+      black = _useTheme$theme$color.black,
+      grey = _useTheme$theme$color.grey,
+      _useTheme$theme$messa = _useTheme$theme.messageInput.suggestions,
+      _useTheme$theme$messa2 = _useTheme$theme$messa.command,
+      argsStyle = _useTheme$theme$messa2.args,
+      commandContainer = _useTheme$theme$messa2.container,
+      title = _useTheme$theme$messa2.title,
+      _useTheme$theme$messa3 = _useTheme$theme$messa.emoji,
+      emojiContainer = _useTheme$theme$messa3.container,
+      text = _useTheme$theme$messa3.text,
+      _useTheme$theme$messa4 = _useTheme$theme$messa.mention,
+      avatarSize = _useTheme$theme$messa4.avatarSize,
+      column = _useTheme$theme$messa4.column,
+      mentionContainer = _useTheme$theme$messa4.container,
+      nameStyle = _useTheme$theme$messa4.name;
+
+  if (triggerType === 'mention') {
+    var _ref2 = itemProps,
+        id = _ref2.id,
+        image = _ref2.image,
+        name = _ref2.name,
+        online = _ref2.online;
+    return _react["default"].createElement(_reactNative.View, {
+      style: [styles.container, mentionContainer],
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 82,
+        columnNumber: 7
+      }
+    }, _react["default"].createElement(_Avatar.Avatar, {
+      image: image,
+      name: name,
+      online: online,
+      size: avatarSize,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 83,
+        columnNumber: 9
+      }
+    }), _react["default"].createElement(_reactNative.View, {
+      style: [styles.column, column],
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 84,
+        columnNumber: 9
+      }
+    }, _react["default"].createElement(_reactNative.Text, {
+      style: [styles.name, {
+        color: black
+      }, nameStyle],
+      testID: "mentions-item-name",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 85,
+        columnNumber: 11
+      }
+    }, name || id)), _react["default"].createElement(_AtMentions.AtMentions, {
+      pathFill: accent_blue,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 89,
+        columnNumber: 9
+      }
+    }));
+  } else if (triggerType === 'emoji') {
+    var _ref3 = itemProps,
+        _name = _ref3.name,
+        unicode = _ref3.unicode;
+    return _react["default"].createElement(_reactNative.View, {
+      style: [styles.container, emojiContainer],
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 95,
+        columnNumber: 7
+      }
+    }, _react["default"].createElement(_reactNative.Text, {
+      style: [styles.text, {
+        color: black
+      }, text],
+      testID: "emojis-item-unicode",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 96,
+        columnNumber: 9
+      }
+    }, unicode), _react["default"].createElement(_reactNative.Text, {
+      style: [styles.text, {
+        color: black
+      }, text],
+      testID: "emojis-item-name",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 99,
+        columnNumber: 9
+      }
+    }, " " + _name));
+  } else if (triggerType === 'command') {
+    var _ref4 = itemProps,
+        args = _ref4.args,
+        _name2 = _ref4.name;
+    return _react["default"].createElement(_reactNative.View, {
+      style: [styles.container, commandContainer],
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 107,
+        columnNumber: 7
+      }
+    }, _react["default"].createElement(_AutoCompleteSuggestionCommandIcon.AutoCompleteSuggestionCommandIcon, {
+      name: _name2,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 108,
+        columnNumber: 9
+      }
+    }), _react["default"].createElement(_reactNative.Text, {
+      style: [styles.title, {
+        color: black
+      }, title],
+      testID: "commands-item-title",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 109,
+        columnNumber: 9
+      }
+    }, (_name2 || '').replace(/^\w/, function (_char) {
+      return _char.toUpperCase();
+    })), _react["default"].createElement(_reactNative.Text, {
+      style: [styles.args, {
+        color: grey
+      }, argsStyle],
+      testID: "commands-item-args",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 112,
+        columnNumber: 9
+      }
+    }, "/" + _name2 + " " + args));
+  } else {
+    return null;
+  }
+};
+
+var areEqual = function areEqual(prevProps, nextProps) {
+  var prevItemProps = prevProps.itemProps,
+      prevType = prevProps.triggerType;
+  var nextItemProps = nextProps.itemProps,
+      nextType = nextProps.triggerType;
+  var itemPropsEqual = prevItemProps === nextItemProps;
+  if (!itemPropsEqual) return false;
+  var typeEqual = prevType === nextType;
+  if (!typeEqual) return false;
+  return true;
+};
+
+var MemoizedAutoCompleteSuggestionItem = _react["default"].memo(AutoCompleteSuggestionItemWithContext, areEqual);
+
+var AutoCompleteSuggestionItem = function AutoCompleteSuggestionItem(props) {
+  return _react["default"].createElement(MemoizedAutoCompleteSuggestionItem, (0, _extends2["default"])({}, props, {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 153,
+      columnNumber: 6
+    }
+  }));
+};
+
+exports.AutoCompleteSuggestionItem = AutoCompleteSuggestionItem;
+AutoCompleteSuggestionItem.displayName = 'AutoCompleteSuggestionItem{messageInput{suggestions{Item}}}';
+//# sourceMappingURL=AutoCompleteSuggestionItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["AutoCompleteSuggestionItem.tsx"],"names":["styles","StyleSheet","create","args","fontSize","column","flex","justifyContent","paddingLeft","container","alignItems","flexDirection","paddingHorizontal","paddingVertical","name","fontWeight","paddingBottom","tag","text","title","paddingRight","AutoCompleteSuggestionItemWithContext","itemProps","triggerType","theme","colors","accent_blue","black","grey","messageInput","suggestions","command","argsStyle","commandContainer","emoji","emojiContainer","mention","avatarSize","mentionContainer","nameStyle","id","image","online","color","unicode","replace","char","toUpperCase","areEqual","prevProps","nextProps","prevItemProps","prevType","nextItemProps","nextType","itemPropsEqual","typeEqual","MemoizedAutoCompleteSuggestionItem","React","memo","AutoCompleteSuggestionItem","props","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\n\nimport { AutoCompleteSuggestionCommandIcon } from './AutoCompleteSuggestionCommandIcon';\n\nimport type {\n  Suggestion,\n  SuggestionCommand,\n  SuggestionsContextValue,\n  SuggestionUser,\n} from '../../contexts/suggestionsContext/SuggestionsContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport type { Emoji } from '../../emoji-data/compiled';\nimport { AtMentions } from '../../icons/AtMentions';\nimport type { DefaultCommandType, DefaultUserType } from '../../types/types';\nimport { Avatar } from '../Avatar/Avatar';\n\nexport type AutoCompleteSuggestionItemPropsWithContext<\n  Co extends string = DefaultCommandType,\n  Us extends DefaultUserType = DefaultUserType,\n> = Pick<SuggestionsContextValue, 'triggerType'> & {\n  itemProps: Suggestion<Co, Us>;\n};\n\nconst styles = StyleSheet.create({\n  args: {\n    fontSize: 14,\n  },\n  column: {\n    flex: 1,\n    justifyContent: 'space-evenly',\n    paddingLeft: 8,\n  },\n  container: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    paddingHorizontal: 16,\n    paddingVertical: 8,\n  },\n  name: {\n    fontSize: 14,\n    fontWeight: 'bold',\n    paddingBottom: 2,\n  },\n  tag: {\n    fontSize: 12,\n    fontWeight: '600',\n  },\n  text: {\n    fontSize: 14,\n  },\n  title: {\n    fontSize: 14,\n    fontWeight: 'bold',\n    paddingRight: 8,\n  },\n});\n\nconst AutoCompleteSuggestionItemWithContext = <\n  Co extends string = DefaultCommandType,\n  Us extends DefaultUserType = DefaultUserType,\n>({\n  itemProps,\n  triggerType,\n}: AutoCompleteSuggestionItemPropsWithContext<Co, Us>) => {\n  const {\n    theme: {\n      colors: { accent_blue, black, grey },\n      messageInput: {\n        suggestions: {\n          command: { args: argsStyle, container: commandContainer, title },\n          emoji: { container: emojiContainer, text },\n          mention: { avatarSize, column, container: mentionContainer, name: nameStyle },\n        },\n      },\n    },\n  } = useTheme();\n\n  if (triggerType === 'mention') {\n    const { id, image, name, online } = itemProps as SuggestionUser<Us>;\n    return (\n      <View style={[styles.container, mentionContainer]}>\n        <Avatar image={image} name={name} online={online} size={avatarSize} />\n        <View style={[styles.column, column]}>\n          <Text style={[styles.name, { color: black }, nameStyle]} testID='mentions-item-name'>\n            {name || id}\n          </Text>\n        </View>\n        <AtMentions pathFill={accent_blue} />\n      </View>\n    );\n  } else if (triggerType === 'emoji') {\n    const { name, unicode } = itemProps as Emoji;\n    return (\n      <View style={[styles.container, emojiContainer]}>\n        <Text style={[styles.text, { color: black }, text]} testID='emojis-item-unicode'>\n          {unicode}\n        </Text>\n        <Text style={[styles.text, { color: black }, text]} testID='emojis-item-name'>\n          {` ${name}`}\n        </Text>\n      </View>\n    );\n  } else if (triggerType === 'command') {\n    const { args, name } = itemProps as SuggestionCommand<Co>;\n    return (\n      <View style={[styles.container, commandContainer]}>\n        <AutoCompleteSuggestionCommandIcon name={name} />\n        <Text style={[styles.title, { color: black }, title]} testID='commands-item-title'>\n          {(name || '').replace(/^\\w/, (char) => char.toUpperCase())}\n        </Text>\n        <Text style={[styles.args, { color: grey }, argsStyle]} testID='commands-item-args'>\n          {`/${name} ${args}`}\n        </Text>\n      </View>\n    );\n  } else {\n    return null;\n  }\n};\n\nconst areEqual = <\n  Co extends string = DefaultCommandType,\n  Us extends DefaultUserType = DefaultUserType,\n>(\n  prevProps: AutoCompleteSuggestionItemPropsWithContext<Co, Us>,\n  nextProps: AutoCompleteSuggestionItemPropsWithContext<Co, Us>,\n) => {\n  const { itemProps: prevItemProps, triggerType: prevType } = prevProps;\n  const { itemProps: nextItemProps, triggerType: nextType } = nextProps;\n  const itemPropsEqual = prevItemProps === nextItemProps;\n  if (!itemPropsEqual) return false;\n  const typeEqual = prevType === nextType;\n  if (!typeEqual) return false;\n  return true;\n};\n\nconst MemoizedAutoCompleteSuggestionItem = React.memo(\n  AutoCompleteSuggestionItemWithContext,\n  areEqual,\n) as typeof AutoCompleteSuggestionItemWithContext;\n\nexport type AutoCompleteSuggestionItemProps<\n  Co extends string = DefaultCommandType,\n  Us extends DefaultUserType = DefaultUserType,\n> = AutoCompleteSuggestionItemPropsWithContext<Co, Us>;\n\nexport const AutoCompleteSuggestionItem = <\n  Co extends string = DefaultCommandType,\n  Us extends DefaultUserType = DefaultUserType,\n>(\n  props: AutoCompleteSuggestionItemProps<Co, Us>,\n) => <MemoizedAutoCompleteSuggestionItem {...props} />;\n\nAutoCompleteSuggestionItem.displayName =\n  'AutoCompleteSuggestionItem{messageInput{suggestions{Item}}}';\n"]}

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

@@ -0,0 +1,223 @@
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutoCompleteSuggestionListWithContext = exports.AutoCompleteSuggestionList = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _SuggestionsContext = require("../../contexts/suggestionsContext/SuggestionsContext");
+
+var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
+
+var _excluded = ["children"];
+
+var _this = this,
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx";
+
+var SuggestionsItem = function SuggestionsItem(props) {
+  var children = props.children,
+      touchableOpacityProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  return _react["default"].createElement(_reactNative.TouchableOpacity, (0, _extends2["default"])({}, touchableOpacityProps, {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 38,
+      columnNumber: 10
+    }
+  }), children);
+};
+
+SuggestionsItem.displayName = 'SuggestionsHeader{messageInput{suggestions}}';
+
+var AutoCompleteSuggestionListWithContext = function AutoCompleteSuggestionListWithContext(props) {
+  var active = props.active,
+      AutoCompleteSuggestionHeader = props.AutoCompleteSuggestionHeader,
+      AutoCompleteSuggestionItem = props.AutoCompleteSuggestionItem,
+      data = props.data,
+      onSelect = props.onSelect,
+      queryText = props.queryText,
+      triggerType = props.triggerType;
+
+  var _useTheme = (0, _ThemeContext.useTheme)(),
+      _useTheme$theme$messa = _useTheme.theme.messageInput,
+      maxHeight = _useTheme$theme$messa.container.maxHeight,
+      itemStyle = _useTheme$theme$messa.suggestions.item,
+      flatlist = _useTheme$theme$messa.suggestionsListContainer.flatlist;
+
+  var renderItem = function renderItem(_ref) {
+    var index = _ref.index,
+        item = _ref.item;
+
+    switch (triggerType) {
+      case 'mention':
+        if ((0, _SuggestionsContext.isSuggestionUser)(item)) {
+          return _react["default"].createElement(SuggestionsItem, {
+            onPress: function onPress() {
+              onSelect(item);
+            },
+            style: [{
+              paddingBottom: index === data.length - 1 ? 8 : 0,
+              paddingTop: index === 0 ? 8 : 0
+            }, itemStyle],
+            __self: _this,
+            __source: {
+              fileName: _jsxFileName,
+              lineNumber: 74,
+              columnNumber: 13
+            }
+          }, AutoCompleteSuggestionItem && _react["default"].createElement(AutoCompleteSuggestionItem, {
+            itemProps: item,
+            triggerType: triggerType,
+            __self: _this,
+            __source: {
+              fileName: _jsxFileName,
+              lineNumber: 87,
+              columnNumber: 17
+            }
+          }));
+        }
+
+        return null;
+
+      case 'command':
+        if ((0, _SuggestionsContext.isSuggestionCommand)(item)) {
+          return _react["default"].createElement(SuggestionsItem, {
+            onPress: function onPress() {
+              onSelect(item);
+            },
+            style: [itemStyle],
+            __self: _this,
+            __source: {
+              fileName: _jsxFileName,
+              lineNumber: 96,
+              columnNumber: 13
+            }
+          }, AutoCompleteSuggestionItem && _react["default"].createElement(AutoCompleteSuggestionItem, {
+            itemProps: item,
+            triggerType: triggerType,
+            __self: _this,
+            __source: {
+              fileName: _jsxFileName,
+              lineNumber: 103,
+              columnNumber: 17
+            }
+          }));
+        }
+
+        return null;
+
+      case 'emoji':
+        if ((0, _SuggestionsContext.isSuggestionEmoji)(item)) {
+          return _react["default"].createElement(SuggestionsItem, {
+            onPress: function onPress() {
+              onSelect(item);
+            },
+            style: [itemStyle],
+            __self: _this,
+            __source: {
+              fileName: _jsxFileName,
+              lineNumber: 112,
+              columnNumber: 13
+            }
+          }, AutoCompleteSuggestionItem && _react["default"].createElement(AutoCompleteSuggestionItem, {
+            itemProps: item,
+            triggerType: triggerType,
+            __self: _this,
+            __source: {
+              fileName: _jsxFileName,
+              lineNumber: 119,
+              columnNumber: 17
+            }
+          }));
+        }
+
+        return null;
+
+      default:
+        return null;
+    }
+  };
+
+  if (!active || data.length === 0) return null;
+  return _react["default"].createElement(_reactNative.FlatList, {
+    data: data,
+    keyboardShouldPersistTaps: "always",
+    keyExtractor: function keyExtractor(item, index) {
+      return "" + (item.name || ((0, _SuggestionsContext.isSuggestionUser)(item) ? item.id : '')) + index;
+    },
+    ListHeaderComponent: AutoCompleteSuggestionHeader ? _react["default"].createElement(AutoCompleteSuggestionHeader, {
+      queryText: queryText,
+      triggerType: triggerType,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 141,
+        columnNumber: 11
+      }
+    }) : null,
+    renderItem: renderItem,
+    style: [flatlist, {
+      maxHeight: maxHeight
+    }],
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 133,
+      columnNumber: 5
+    }
+  });
+};
+
+exports.AutoCompleteSuggestionListWithContext = AutoCompleteSuggestionListWithContext;
+
+var areEqual = function areEqual(prevProps, nextProps) {
+  var prevActive = prevProps.active,
+      prevData = prevProps.data,
+      prevQueryText = prevProps.queryText,
+      prevType = prevProps.triggerType;
+  var nextActive = nextProps.active,
+      nextData = nextProps.data,
+      nextQueryText = nextProps.queryText,
+      nextType = nextProps.triggerType;
+  var activeEqual = prevActive === nextActive;
+  if (!activeEqual) return false;
+  var queryTextEqual = prevQueryText === nextQueryText;
+  if (!queryTextEqual) return false;
+  var dataEqual = prevData === nextData;
+  if (!dataEqual) return false;
+  var typeEqual = prevType === nextType;
+  if (!typeEqual) return false;
+  return true;
+};
+
+var MemoizedAutoCompleteSuggestionList = _react["default"].memo(AutoCompleteSuggestionListWithContext, areEqual);
+
+var AutoCompleteSuggestionList = function AutoCompleteSuggestionList(props) {
+  var _useSuggestionsContex = (0, _SuggestionsContext.useSuggestionsContext)(),
+      AutoCompleteSuggestionHeader = _useSuggestionsContex.AutoCompleteSuggestionHeader,
+      AutoCompleteSuggestionItem = _useSuggestionsContex.AutoCompleteSuggestionItem;
+
+  return _react["default"].createElement(MemoizedAutoCompleteSuggestionList, (0, _extends2["default"])({
+    AutoCompleteSuggestionHeader: AutoCompleteSuggestionHeader,
+    AutoCompleteSuggestionItem: AutoCompleteSuggestionItem
+  }, props, {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 204,
+      columnNumber: 5
+    }
+  }));
+};
+
+exports.AutoCompleteSuggestionList = AutoCompleteSuggestionList;
+AutoCompleteSuggestionList.displayName = 'AutoCompleteSuggestionList{messageInput{suggestions{List}}}';
+//# sourceMappingURL=AutoCompleteSuggestionList.js.map

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

@@ -0,0 +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":";;;;;;;;;;;AAAA;;AACA;;AAKA;;AAQA;;;;;;;AAqBA,IAAMA,eAAgD,GAAG,SAAnDA,eAAmD,CAACC,KAAD,EAAW;AAClE,MAAQC,QAAR,GAA+CD,KAA/C,CAAQC,QAAR;AAAA,MAAqBC,qBAArB,6CAA+CF,KAA/C;AACA,SAAO,gCAAC,6BAAD,gCAAsBE,qBAAtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAA8CD,QAA9C,CAAP;AACD,CAHD;;AAKAF,eAAe,CAACI,WAAhB,GAA8B,8CAA9B;;AAEO,IAAMC,qCAAqC,GAAG,SAAxCA,qCAAwC,CAInDJ,KAJmD,EAKhD;AACH,MACEK,MADF,GAQIL,KARJ,CACEK,MADF;AAAA,MAEEC,4BAFF,GAQIN,KARJ,CAEEM,4BAFF;AAAA,MAGEC,0BAHF,GAQIP,KARJ,CAGEO,0BAHF;AAAA,MAIEC,IAJF,GAQIR,KARJ,CAIEQ,IAJF;AAAA,MAKEC,QALF,GAQIT,KARJ,CAKES,QALF;AAAA,MAMEC,SANF,GAQIV,KARJ,CAMEU,SANF;AAAA,MAOEC,WAPF,GAQIX,KARJ,CAOEW,WAPF;;AAUA,kBAQI,6BARJ;AAAA,wCACEC,KADF,CAEIC,YAFJ;AAAA,MAGmBC,SAHnB,yBAGMC,SAHN,CAGmBD,SAHnB;AAAA,MAI2BE,SAJ3B,yBAIMC,WAJN,CAIqBC,IAJrB;AAAA,MAKkCC,QALlC,yBAKMC,wBALN,CAKkCD,QALlC;;AAUA,MAAME,UAAU,GAAG,SAAbA,UAAa,OAAkE;AAAA,QAA/DC,KAA+D,QAA/DA,KAA+D;AAAA,QAAxDJ,IAAwD,QAAxDA,IAAwD;;AACnF,YAAQP,WAAR;AACE,WAAK,SAAL;AACE,YAAI,0CAAiBO,IAAjB,CAAJ,EAA4B;AAC1B,iBACE,gCAAC,eAAD;AACE,YAAA,OAAO,EAAE,mBAAM;AACbT,cAAAA,QAAQ,CAACS,IAAD,CAAR;AACD,aAHH;AAIE,YAAA,KAAK,EAAE,CACL;AACEK,cAAAA,aAAa,EAAED,KAAK,KAAKd,IAAI,CAACgB,MAAL,GAAc,CAAxB,GAA4B,CAA5B,GAAgC,CADjD;AAEEC,cAAAA,UAAU,EAAEH,KAAK,KAAK,CAAV,GAAc,CAAd,GAAkB;AAFhC,aADK,EAKLN,SALK,CAJT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAYGT,0BAA0B,IACzB,gCAAC,0BAAD;AAA4B,YAAA,SAAS,EAAEW,IAAvC;AAA6C,YAAA,WAAW,EAAEP,WAA1D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAbJ,CADF;AAkBD;;AACD,eAAO,IAAP;;AACF,WAAK,SAAL;AACE,YAAI,6CAAoBO,IAApB,CAAJ,EAA+B;AAC7B,iBACE,gCAAC,eAAD;AACE,YAAA,OAAO,EAAE,mBAAM;AACbT,cAAAA,QAAQ,CAACS,IAAD,CAAR;AACD,aAHH;AAIE,YAAA,KAAK,EAAE,CAACF,SAAD,CAJT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMGT,0BAA0B,IACzB,gCAAC,0BAAD;AAA4B,YAAA,SAAS,EAAEW,IAAvC;AAA6C,YAAA,WAAW,EAAEP,WAA1D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAPJ,CADF;AAYD;;AACD,eAAO,IAAP;;AACF,WAAK,OAAL;AACE,YAAI,2CAAkBO,IAAlB,CAAJ,EAA6B;AAC3B,iBACE,gCAAC,eAAD;AACE,YAAA,OAAO,EAAE,mBAAM;AACbT,cAAAA,QAAQ,CAACS,IAAD,CAAR;AACD,aAHH;AAIE,YAAA,KAAK,EAAE,CAACF,SAAD,CAJT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMGT,0BAA0B,IACzB,gCAAC,0BAAD;AAA4B,YAAA,SAAS,EAAEW,IAAvC;AAA6C,YAAA,WAAW,EAAEP,WAA1D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAPJ,CADF;AAYD;;AACD,eAAO,IAAP;;AACF;AACE,eAAO,IAAP;AAxDJ;AA0DD,GA3DD;;AA6DA,MAAI,CAACN,MAAD,IAAWG,IAAI,CAACgB,MAAL,KAAgB,CAA/B,EAAkC,OAAO,IAAP;AAElC,SACE,gCAAC,qBAAD;AACE,IAAA,IAAI,EAAEhB,IADR;AAEE,IAAA,yBAAyB,EAAC,QAF5B;AAGE,IAAA,YAAY,EAAE,sBAACU,IAAD,EAAOI,KAAP;AAAA,mBACTJ,IAAI,CAACQ,IAAL,KAAc,0CAAiBR,IAAjB,IAAyBA,IAAI,CAACS,EAA9B,GAAmC,EAAjD,CADS,IAC8CL,KAD9C;AAAA,KAHhB;AAME,IAAA,mBAAmB,EACjBhB,4BAA4B,GAC1B,gCAAC,4BAAD;AAA8B,MAAA,SAAS,EAAEI,SAAzC;AAAoD,MAAA,WAAW,EAAEC,WAAjE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAD0B,GAExB,IATR;AAWE,IAAA,UAAU,EAAEU,UAXd;AAYE,IAAA,KAAK,EAAE,CAACF,QAAD,EAAW;AAAEL,MAAAA,SAAS,EAATA;AAAF,KAAX,CAZT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF;AAgBD,CAzGM;;;;AA2GP,IAAMc,QAAQ,GAAG,SAAXA,QAAW,CACfC,SADe,EAEfC,SAFe,EAGZ;AACH,MACUC,UADV,GAKIF,SALJ,CACExB,MADF;AAAA,MAEQ2B,QAFR,GAKIH,SALJ,CAEErB,IAFF;AAAA,MAGayB,aAHb,GAKIJ,SALJ,CAGEnB,SAHF;AAAA,MAIewB,QAJf,GAKIL,SALJ,CAIElB,WAJF;AAMA,MACUwB,UADV,GAKIL,SALJ,CACEzB,MADF;AAAA,MAEQ+B,QAFR,GAKIN,SALJ,CAEEtB,IAFF;AAAA,MAGa6B,aAHb,GAKIP,SALJ,CAGEpB,SAHF;AAAA,MAIe4B,QAJf,GAKIR,SALJ,CAIEnB,WAJF;AAOA,MAAM4B,WAAW,GAAGR,UAAU,KAAKI,UAAnC;AACA,MAAI,CAACI,WAAL,EAAkB,OAAO,KAAP;AAElB,MAAMC,cAAc,GAAGP,aAAa,KAAKI,aAAzC;AACA,MAAI,CAACG,cAAL,EAAqB,OAAO,KAAP;AAErB,MAAMC,SAAS,GAAGT,QAAQ,KAAKI,QAA/B;AACA,MAAI,CAACK,SAAL,EAAgB,OAAO,KAAP;AAEhB,MAAMC,SAAS,GAAGR,QAAQ,KAAKI,QAA/B;AACA,MAAI,CAACI,SAAL,EAAgB,OAAO,KAAP;AAEhB,SAAO,IAAP;AACD,CA9BD;;AAgCA,IAAMC,kCAAkC,GAAGC,kBAAMC,IAAN,CACzCzC,qCADyC,EAEzCwB,QAFyC,CAA3C;;AAaO,IAAMkB,0BAA0B,GAAG,SAA7BA,0BAA6B,CAIxC9C,KAJwC,EAKrC;AACH,8BACE,gDADF;AAAA,MAAQM,4BAAR,yBAAQA,4BAAR;AAAA,MAAsCC,0BAAtC,yBAAsCA,0BAAtC;;AAEA,SACE,gCAAC,kCAAD;AACQD,IAAAA,4BAA4B,EAA5BA,4BADR;AACsCC,IAAAA,0BAA0B,EAA1BA;AADtC,KAEMP,KAFN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KADF;AAMD,CAdM;;;AAgBP8C,0BAA0B,CAAC3C,WAA3B,GACE,6DADF","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 { DefaultCommandType, DefaultUserType, UnknownType } from '../../types/types';\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"]}

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"]}