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

package/lib/module/components/AutoCompleteInput/{CommandsItem.js → AutoCompleteSuggestionCommandIcon.js}

@@ -3,7 +3,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CommandsItem = void 0;
+exports.AutoCompleteSuggestionCommandIcon = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -14,18 +14,9 @@ var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _icons = require("../../icons");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/AutoCompleteInput/CommandsItem.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx";
 
 var styles = _reactNative.StyleSheet.create({
-  args: {
-    fontSize: 14
-  },
-  container: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    paddingHorizontal: 16,
-    paddingVertical: 8
-  },
   iconContainer: {
     alignItems: 'center',
     borderRadius: 12,
@@ -33,15 +24,10 @@ var styles = _reactNative.StyleSheet.create({
     justifyContent: 'center',
     marginRight: 8,
     width: 24
-  },
-  title: {
-    fontSize: 14,
-    fontWeight: 'bold',
-    paddingRight: 8
   }
 });
 
-var Icon = function Icon(_ref) {
+var AutoCompleteSuggestionCommandIcon = function AutoCompleteSuggestionCommandIcon(_ref) {
   var name = _ref.name;
 
   var _useTheme = (0, _ThemeContext.useTheme)(),
@@ -60,7 +46,7 @@ var Icon = function Icon(_ref) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 53,
+          lineNumber: 38,
           columnNumber: 9
         }
       }, _react["default"].createElement(_icons.UserDelete, {
@@ -70,7 +56,7 @@ var Icon = function Icon(_ref) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 54,
+          lineNumber: 39,
           columnNumber: 11
         }
       }));
@@ -83,7 +69,7 @@ var Icon = function Icon(_ref) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 59,
+          lineNumber: 44,
           columnNumber: 9
         }
       }, _react["default"].createElement(_icons.Flag, {
@@ -91,7 +77,7 @@ var Icon = function Icon(_ref) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 60,
+          lineNumber: 45,
           columnNumber: 11
         }
       }));
@@ -104,14 +90,14 @@ var Icon = function Icon(_ref) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 65,
+          lineNumber: 50,
           columnNumber: 9
         }
       }, _react["default"].createElement(_icons.GiphyIcon, {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 66,
+          lineNumber: 51,
           columnNumber: 11
         }
       }));
@@ -124,14 +110,14 @@ var Icon = function Icon(_ref) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 71,
+          lineNumber: 56,
           columnNumber: 9
         }
       }, _react["default"].createElement(_icons.Imgur, {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 72,
+          lineNumber: 57,
           columnNumber: 11
         }
       }));
@@ -144,7 +130,7 @@ var Icon = function Icon(_ref) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 77,
+          lineNumber: 62,
           columnNumber: 9
         }
       }, _react["default"].createElement(_icons.Mute, {
@@ -154,7 +140,7 @@ var Icon = function Icon(_ref) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 78,
+          lineNumber: 63,
           columnNumber: 11
         }
       }));
@@ -167,7 +153,7 @@ var Icon = function Icon(_ref) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 83,
+          lineNumber: 68,
           columnNumber: 9
         }
       }, _react["default"].createElement(_icons.UserAdd, {
@@ -177,7 +163,7 @@ var Icon = function Icon(_ref) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 84,
+          lineNumber: 69,
           columnNumber: 11
         }
       }));
@@ -190,7 +176,7 @@ var Icon = function Icon(_ref) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 89,
+          lineNumber: 74,
           columnNumber: 9
         }
       }, _react["default"].createElement(_icons.Sound, {
@@ -198,7 +184,7 @@ var Icon = function Icon(_ref) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 90,
+          lineNumber: 75,
           columnNumber: 11
         }
       }));
@@ -211,7 +197,7 @@ var Icon = function Icon(_ref) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 95,
+          lineNumber: 80,
           columnNumber: 9
         }
       }, _react["default"].createElement(_icons.Lightning, {
@@ -221,71 +207,12 @@ var Icon = function Icon(_ref) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 96,
+          lineNumber: 81,
           columnNumber: 11
         }
       }));
   }
 };
 
-var CommandsItem = function CommandsItem(_ref2) {
-  var _ref2$item = _ref2.item,
-      args = _ref2$item.args,
-      name = _ref2$item.name;
-
-  var _useTheme2 = (0, _ThemeContext.useTheme)(),
-      _useTheme2$theme = _useTheme2.theme,
-      _useTheme2$theme$colo = _useTheme2$theme.colors,
-      black = _useTheme2$theme$colo.black,
-      grey = _useTheme2$theme$colo.grey,
-      _useTheme2$theme$mess = _useTheme2$theme.messageInput.suggestions.command,
-      argsStyle = _useTheme2$theme$mess.args,
-      container = _useTheme2$theme$mess.container,
-      title = _useTheme2$theme$mess.title;
-
-  return _react["default"].createElement(_reactNative.View, {
-    style: [styles.container, container],
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 127,
-      columnNumber: 5
-    }
-  }, _react["default"].createElement(Icon, {
-    name: name,
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 128,
-      columnNumber: 7
-    }
-  }), _react["default"].createElement(_reactNative.Text, {
-    style: [styles.title, {
-      color: black
-    }, title],
-    testID: "commands-item-title",
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 129,
-      columnNumber: 7
-    }
-  }, (name || '').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: 132,
-      columnNumber: 7
-    }
-  }, "/" + name + " " + args));
-};
-
-exports.CommandsItem = CommandsItem;
-CommandsItem.displayName = 'CommandsItem{messageInput{suggestions{command}}}';
-//# sourceMappingURL=CommandsItem.js.map
+exports.AutoCompleteSuggestionCommandIcon = AutoCompleteSuggestionCommandIcon;
+//# sourceMappingURL=AutoCompleteSuggestionCommandIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["AutoCompleteSuggestionCommandIcon.tsx"],"names":["styles","StyleSheet","create","iconContainer","alignItems","borderRadius","height","justifyContent","marginRight","width","AutoCompleteSuggestionCommandIcon","name","theme","colors","accent_blue","white","messageInput","suggestions","command","backgroundColor"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;AAIA,IAAMA,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,aAAa,EAAE;AACbC,IAAAA,UAAU,EAAE,QADC;AAEbC,IAAAA,YAAY,EAAE,EAFD;AAGbC,IAAAA,MAAM,EAAE,EAHK;AAIbC,IAAAA,cAAc,EAAE,QAJH;AAKbC,IAAAA,WAAW,EAAE,CALA;AAMbC,IAAAA,KAAK,EAAE;AANM;AADgB,CAAlB,CAAf;;AAWO,IAAMC,iCAAiC,GAAG,SAApCA,iCAAoC,OAI3C;AAAA,MAHJC,IAGI,QAHJA,IAGI;;AACJ,kBASI,6BATJ;AAAA,kCACEC,KADF;AAAA,8CAEIC,MAFJ;AAAA,MAEcC,WAFd,yBAEcA,WAFd;AAAA,MAE2BC,KAF3B,yBAE2BA,KAF3B;AAAA,MAKmBZ,aALnB,mBAGIa,YAHJ,CAIMC,WAJN,CAKQC,OALR,CAKmBf,aALnB;;AAUA,UAAQQ,IAAR;AACE,SAAK,KAAL;AACE,aACE,gCAAC,iBAAD;AAAM,QAAA,KAAK,EAAE,CAACX,MAAM,CAACG,aAAR,EAAuB;AAAEgB,UAAAA,eAAe,EAAEL;AAAnB,SAAvB,EAAyDX,aAAzD,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SACE,gCAAC,iBAAD;AAAY,QAAA,MAAM,EAAE,EAApB;AAAwB,QAAA,QAAQ,EAAEY,KAAlC;AAAyC,QAAA,KAAK,EAAE,EAAhD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QADF,CADF;;AAKF,SAAK,MAAL;AACE,aACE,gCAAC,iBAAD;AAAM,QAAA,KAAK,EAAE,CAACf,MAAM,CAACG,aAAR,EAAuB;AAAEgB,UAAAA,eAAe,EAAEL;AAAnB,SAAvB,EAAyDX,aAAzD,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SACE,gCAAC,WAAD;AAAM,QAAA,QAAQ,EAAEY,KAAhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QADF,CADF;;AAKF,SAAK,OAAL;AACE,aACE,gCAAC,iBAAD;AAAM,QAAA,KAAK,EAAE,CAACf,MAAM,CAACG,aAAR,EAAuB;AAAEgB,UAAAA,eAAe,EAAEL;AAAnB,SAAvB,EAAyDX,aAAzD,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SACE,gCAAC,gBAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QADF,CADF;;AAKF,SAAK,OAAL;AACE,aACE,gCAAC,iBAAD;AAAM,QAAA,KAAK,EAAE,CAACH,MAAM,CAACG,aAAR,EAAuB;AAAEgB,UAAAA,eAAe,EAAEL;AAAnB,SAAvB,EAAyDX,aAAzD,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SACE,gCAAC,YAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QADF,CADF;;AAKF,SAAK,MAAL;AACE,aACE,gCAAC,iBAAD;AAAM,QAAA,KAAK,EAAE,CAACH,MAAM,CAACG,aAAR,EAAuB;AAAEgB,UAAAA,eAAe,EAAEL;AAAnB,SAAvB,EAAyDX,aAAzD,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SACE,gCAAC,WAAD;AAAM,QAAA,MAAM,EAAE,EAAd;AAAkB,QAAA,QAAQ,EAAEY,KAA5B;AAAmC,QAAA,KAAK,EAAE,EAA1C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QADF,CADF;;AAKF,SAAK,OAAL;AACE,aACE,gCAAC,iBAAD;AAAM,QAAA,KAAK,EAAE,CAACf,MAAM,CAACG,aAAR,EAAuB;AAAEgB,UAAAA,eAAe,EAAEL;AAAnB,SAAvB,EAAyDX,aAAzD,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SACE,gCAAC,cAAD;AAAS,QAAA,MAAM,EAAE,EAAjB;AAAqB,QAAA,QAAQ,EAAEY,KAA/B;AAAsC,QAAA,KAAK,EAAE,EAA7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QADF,CADF;;AAKF,SAAK,QAAL;AACE,aACE,gCAAC,iBAAD;AAAM,QAAA,KAAK,EAAE,CAACf,MAAM,CAACG,aAAR,EAAuB;AAAEgB,UAAAA,eAAe,EAAEL;AAAnB,SAAvB,EAAyDX,aAAzD,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SACE,gCAAC,YAAD;AAAO,QAAA,QAAQ,EAAEY,KAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QADF,CADF;;AAKF;AACE,aACE,gCAAC,iBAAD;AAAM,QAAA,KAAK,EAAE,CAACf,MAAM,CAACG,aAAR,EAAuB;AAAEgB,UAAAA,eAAe,EAAEL;AAAnB,SAAvB,EAAyDX,aAAzD,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SACE,gCAAC,gBAAD;AAAW,QAAA,MAAM,EAAE,EAAnB;AAAuB,QAAA,QAAQ,EAAEY,KAAjC;AAAwC,QAAA,KAAK,EAAE,EAA/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QADF,CADF;AA5CJ;AAkDD,CAjEM","sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { Flag, GiphyIcon, Imgur, Lightning, Mute, Sound, UserAdd, UserDelete } from '../../icons';\nimport type { SuggestionCommand } from '../../contexts/suggestionsContext/SuggestionsContext';\nimport type { DefaultCommandType } from '../../types/types';\n\nconst styles = StyleSheet.create({\n  iconContainer: {\n    alignItems: 'center',\n    borderRadius: 12,\n    height: 24,\n    justifyContent: 'center',\n    marginRight: 8,\n    width: 24,\n  },\n});\n\nexport const AutoCompleteSuggestionCommandIcon = <Co extends string = DefaultCommandType>({\n  name,\n}: {\n  name: SuggestionCommand<Co>['name'];\n}) => {\n  const {\n    theme: {\n      colors: { accent_blue, white },\n      messageInput: {\n        suggestions: {\n          command: { iconContainer },\n        },\n      },\n    },\n  } = useTheme();\n  switch (name) {\n    case 'ban':\n      return (\n        <View style={[styles.iconContainer, { backgroundColor: accent_blue }, iconContainer]}>\n          <UserDelete height={16} pathFill={white} width={16} />\n        </View>\n      );\n    case 'flag':\n      return (\n        <View style={[styles.iconContainer, { backgroundColor: accent_blue }, iconContainer]}>\n          <Flag pathFill={white} />\n        </View>\n      );\n    case 'giphy':\n      return (\n        <View style={[styles.iconContainer, { backgroundColor: accent_blue }, iconContainer]}>\n          <GiphyIcon />\n        </View>\n      );\n    case 'imgur':\n      return (\n        <View style={[styles.iconContainer, { backgroundColor: accent_blue }, iconContainer]}>\n          <Imgur />\n        </View>\n      );\n    case 'mute':\n      return (\n        <View style={[styles.iconContainer, { backgroundColor: accent_blue }, iconContainer]}>\n          <Mute height={16} pathFill={white} width={16} />\n        </View>\n      );\n    case 'unban':\n      return (\n        <View style={[styles.iconContainer, { backgroundColor: accent_blue }, iconContainer]}>\n          <UserAdd height={16} pathFill={white} width={16} />\n        </View>\n      );\n    case 'unmute':\n      return (\n        <View style={[styles.iconContainer, { backgroundColor: accent_blue }, iconContainer]}>\n          <Sound pathFill={white} />\n        </View>\n      );\n    default:\n      return (\n        <View style={[styles.iconContainer, { backgroundColor: accent_blue }, iconContainer]}>\n          <Lightning height={16} pathFill={white} width={16} />\n        </View>\n      );\n  }\n};\n"]}

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

@@ -0,0 +1,145 @@
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutoCompleteSuggestionHeader = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
+
+var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
+
+var _Lightning = require("../../icons/Lightning");
+
+var _Smile = require("../../icons/Smile");
+
+var _this = this,
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx";
+
+var styles = _reactNative.StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    padding: 8
+  },
+  title: {
+    fontSize: 14,
+    paddingLeft: 8
+  }
+});
+
+var AutoCompleteSuggestionHeaderWithContext = function AutoCompleteSuggestionHeaderWithContext(_ref) {
+  var queryText = _ref.queryText,
+      triggerType = _ref.triggerType;
+
+  var _useTranslationContex = (0, _TranslationContext.useTranslationContext)(),
+      t = _useTranslationContex.t;
+
+  var _useTheme = (0, _ThemeContext.useTheme)(),
+      _useTheme$theme = _useTheme.theme,
+      _useTheme$theme$color = _useTheme$theme.colors,
+      accent_blue = _useTheme$theme$color.accent_blue,
+      grey = _useTheme$theme$color.grey,
+      _useTheme$theme$messa = _useTheme$theme.messageInput.suggestions.header,
+      container = _useTheme$theme$messa.container,
+      title = _useTheme$theme$messa.title;
+
+  if (triggerType === 'command') {
+    return _react["default"].createElement(_reactNative.View, {
+      style: [styles.container, container],
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 50,
+        columnNumber: 7
+      }
+    }, _react["default"].createElement(_Lightning.Lightning, {
+      pathFill: accent_blue,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 51,
+        columnNumber: 9
+      }
+    }), _react["default"].createElement(_reactNative.Text, {
+      style: [styles.title, {
+        color: grey
+      }, title],
+      testID: "commands-header-title",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 52,
+        columnNumber: 9
+      }
+    }, t('Instant Commands')));
+  } else if (triggerType === 'emoji') {
+    return _react["default"].createElement(_reactNative.View, {
+      style: [styles.container, container],
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 59,
+        columnNumber: 7
+      }
+    }, _react["default"].createElement(_Smile.Smile, {
+      pathFill: accent_blue,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 60,
+        columnNumber: 9
+      }
+    }), _react["default"].createElement(_reactNative.Text, {
+      style: [styles.title, {
+        color: grey
+      }, title],
+      testID: "emojis-header-title",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 61,
+        columnNumber: 9
+      }
+    }, t('Emoji matching') + ' "' + queryText + '"'));
+  } else if (triggerType === 'mention') {
+    return null;
+  } else {
+    return null;
+  }
+};
+
+var areEqual = function areEqual(prevProps, nextProps) {
+  var prevQueryText = prevProps.queryText,
+      prevType = prevProps.triggerType;
+  var nextQueryText = nextProps.queryText,
+      nextType = nextProps.triggerType;
+  var typeEqual = prevType === nextType;
+  if (!typeEqual) return false;
+  var valueEqual = prevQueryText === nextQueryText;
+  if (!valueEqual) return false;
+  return true;
+};
+
+var MemoizedAutoCompleteSuggestionHeader = _react["default"].memo(AutoCompleteSuggestionHeaderWithContext, areEqual);
+
+var AutoCompleteSuggestionHeader = function AutoCompleteSuggestionHeader(props) {
+  return _react["default"].createElement(MemoizedAutoCompleteSuggestionHeader, (0, _extends2["default"])({}, props, {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 106,
+      columnNumber: 6
+    }
+  }));
+};
+
+exports.AutoCompleteSuggestionHeader = AutoCompleteSuggestionHeader;
+AutoCompleteSuggestionHeader.displayName = 'AutoCompleteSuggestionHeader{messageInput{suggestions{Header}}}';
+//# sourceMappingURL=AutoCompleteSuggestionHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["AutoCompleteSuggestionHeader.tsx"],"names":["styles","StyleSheet","create","container","alignItems","flexDirection","padding","title","fontSize","paddingLeft","AutoCompleteSuggestionHeaderWithContext","queryText","triggerType","t","theme","colors","accent_blue","grey","messageInput","suggestions","header","color","areEqual","prevProps","nextProps","prevQueryText","prevType","nextQueryText","nextType","typeEqual","valueEqual","MemoizedAutoCompleteSuggestionHeader","React","memo","AutoCompleteSuggestionHeader","props","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { useTranslationContext } from '../../contexts/translationContext/TranslationContext';\n\nimport type { DefaultCommandType, DefaultUserType, UnknownType } from '../../types/types';\nimport { Lightning } from '../../icons/Lightning';\nimport { Smile } from '../../icons/Smile';\nimport type { SuggestionsContextValue } from '../../contexts/suggestionsContext/SuggestionsContext';\n\nexport type AutoCompleteSuggestionHeaderPropsWithContext<\n  Co extends string = DefaultCommandType,\n  Us extends UnknownType = DefaultUserType,\n> = Pick<SuggestionsContextValue<Co, Us>, 'triggerType' | 'queryText'>;\n\nconst styles = StyleSheet.create({\n  container: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    padding: 8,\n  },\n  title: {\n    fontSize: 14,\n    paddingLeft: 8,\n  },\n});\n\nconst AutoCompleteSuggestionHeaderWithContext = <\n  Co extends string = DefaultCommandType,\n  Us extends DefaultUserType = DefaultUserType,\n>({\n  queryText,\n  triggerType,\n}: AutoCompleteSuggestionHeaderPropsWithContext<Co, Us>) => {\n  const { t } = useTranslationContext();\n  const {\n    theme: {\n      colors: { accent_blue, grey },\n      messageInput: {\n        suggestions: {\n          header: { container, title },\n        },\n      },\n    },\n  } = useTheme();\n\n  if (triggerType === 'command') {\n    return (\n      <View style={[styles.container, container]}>\n        <Lightning pathFill={accent_blue} />\n        <Text style={[styles.title, { color: grey }, title]} testID='commands-header-title'>\n          {t('Instant Commands')}\n        </Text>\n      </View>\n    );\n  } else if (triggerType === 'emoji') {\n    return (\n      <View style={[styles.container, container]}>\n        <Smile pathFill={accent_blue} />\n        <Text style={[styles.title, { color: grey }, title]} testID='emojis-header-title'>\n          {t('Emoji matching') + ' \"' + queryText + '\"'}\n        </Text>\n      </View>\n    );\n  } else if (triggerType === 'mention') {\n    return null;\n  } else {\n    return null;\n  }\n};\n\nconst areEqual = <\n  Co extends string = DefaultCommandType,\n  Us extends DefaultUserType = DefaultUserType,\n>(\n  prevProps: AutoCompleteSuggestionHeaderPropsWithContext<Co, Us>,\n  nextProps: AutoCompleteSuggestionHeaderPropsWithContext<Co, Us>,\n) => {\n  const { queryText: prevQueryText, triggerType: prevType } = prevProps;\n  const { queryText: nextQueryText, triggerType: nextType } = nextProps;\n\n  const typeEqual = prevType === nextType;\n  if (!typeEqual) return false;\n\n  const valueEqual = prevQueryText === nextQueryText;\n  if (!valueEqual) return false;\n  return true;\n};\n\nconst MemoizedAutoCompleteSuggestionHeader = React.memo(\n  AutoCompleteSuggestionHeaderWithContext,\n  areEqual,\n) as typeof AutoCompleteSuggestionHeaderWithContext;\n\nexport type AutoCompleteSuggestionHeaderProps<\n  Co extends string = DefaultCommandType,\n  Us extends DefaultUserType = DefaultUserType,\n> = AutoCompleteSuggestionHeaderPropsWithContext<Co, Us>;\n\nexport const AutoCompleteSuggestionHeader = <\n  Co extends string = DefaultCommandType,\n  Us extends DefaultUserType = DefaultUserType,\n>(\n  props: AutoCompleteSuggestionHeaderProps<Co, Us>,\n) => <MemoizedAutoCompleteSuggestionHeader {...props} />;\n\nAutoCompleteSuggestionHeader.displayName =\n  'AutoCompleteSuggestionHeader{messageInput{suggestions{Header}}}';\n"]}

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 _ThemeContext = require("../../contexts/themeContext/ThemeContext");
+
+var _Avatar = require("../Avatar/Avatar");
+
+var _AtMentions = require("../../icons/AtMentions");
+
+var _AutoCompleteSuggestionCommandIcon = require("./AutoCompleteSuggestionCommandIcon");
+
+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: 80,
+        columnNumber: 7
+      }
+    }, _react["default"].createElement(_Avatar.Avatar, {
+      image: image,
+      name: name,
+      online: online,
+      size: avatarSize,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 81,
+        columnNumber: 9
+      }
+    }), _react["default"].createElement(_reactNative.View, {
+      style: [styles.column, column],
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 82,
+        columnNumber: 9
+      }
+    }, _react["default"].createElement(_reactNative.Text, {
+      style: [styles.name, {
+        color: black
+      }, nameStyle],
+      testID: "mentions-item-name",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 83,
+        columnNumber: 11
+      }
+    }, name || id)), _react["default"].createElement(_AtMentions.AtMentions, {
+      pathFill: accent_blue,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 87,
+        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: 93,
+        columnNumber: 7
+      }
+    }, _react["default"].createElement(_reactNative.Text, {
+      style: [styles.text, {
+        color: black
+      }, text],
+      testID: "emojis-item-unicode",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 94,
+        columnNumber: 9
+      }
+    }, unicode), _react["default"].createElement(_reactNative.Text, {
+      style: [styles.text, {
+        color: black
+      }, text],
+      testID: "emojis-item-name",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 97,
+        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: 105,
+        columnNumber: 7
+      }
+    }, _react["default"].createElement(_AutoCompleteSuggestionCommandIcon.AutoCompleteSuggestionCommandIcon, {
+      name: _name2,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 106,
+        columnNumber: 9
+      }
+    }), _react["default"].createElement(_reactNative.Text, {
+      style: [styles.title, {
+        color: black
+      }, title],
+      testID: "commands-item-title",
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 107,
+        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: 110,
+        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: 151,
+      columnNumber: 6
+    }
+  }));
+};
+
+exports.AutoCompleteSuggestionItem = AutoCompleteSuggestionItem;
+AutoCompleteSuggestionItem.displayName = 'AutoCompleteSuggestionItem{messageInput{suggestions{Item}}}';
+//# sourceMappingURL=AutoCompleteSuggestionItem.js.map