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

package/lib/module/components/MessageInput/hooks/useCountdown.js

@@ -0,0 +1,57 @@
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCountdown = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _date = require("../../../utils/date");
+
+var useCountdown = function useCountdown(end) {
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      seconds = _useState2[0],
+      setSeconds = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var intervalId;
+
+    var startCountdown = function startCountdown(seconds) {
+      setSeconds(seconds);
+      intervalId = setInterval(function () {
+        setSeconds(function (previous) {
+          var next = previous - 1;
+
+          if (next < 1) {
+            clearInterval(intervalId);
+            return 0;
+          }
+
+          return next;
+        });
+      }, _date.ONE_SECOND_IN_MS);
+    };
+
+    var secondsUntilEnd = (0, _date.secondsUntil)(end);
+
+    if (secondsUntilEnd > 0) {
+      startCountdown(secondsUntilEnd);
+    }
+
+    return function () {
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [end]);
+  return {
+    seconds: seconds
+  };
+};
+
+exports.useCountdown = useCountdown;
+//# sourceMappingURL=useCountdown.js.map

package/lib/module/components/MessageInput/hooks/useCountdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useCountdown.ts"],"names":["useCountdown","end","seconds","setSeconds","intervalId","startCountdown","setInterval","previous","next","clearInterval","ONE_SECOND_IN_MS","secondsUntilEnd"],"mappings":";;;;;;;;;AAAA;;AAEA;;AAOO,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAACC,GAAD,EAAe;AACzC,kBAA8B,qBAAS,CAAT,CAA9B;AAAA;AAAA,MAAOC,OAAP;AAAA,MAAgBC,UAAhB;;AAMA,wBAAU,YAAM;AACd,QAAIC,UAAJ;;AAEA,QAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACH,OAAD,EAAqB;AAC1CC,MAAAA,UAAU,CAACD,OAAD,CAAV;AACAE,MAAAA,UAAU,GAAGE,WAAW,CAAC,YAAM;AAC7BH,QAAAA,UAAU,CAAC,UAACI,QAAD,EAAsB;AAC/B,cAAMC,IAAI,GAAGD,QAAQ,GAAG,CAAxB;;AACA,cAAIC,IAAI,GAAG,CAAX,EAAc;AAEZC,YAAAA,aAAa,CAACL,UAAD,CAAb;AACA,mBAAO,CAAP;AACD;;AACD,iBAAOI,IAAP;AACD,SARS,CAAV;AASD,OAVuB,EAUrBE,sBAVqB,CAAxB;AAWD,KAbD;;AAeA,QAAMC,eAAe,GAAG,wBAAaV,GAAb,CAAxB;;AACA,QAAIU,eAAe,GAAG,CAAtB,EAAyB;AACvBN,MAAAA,cAAc,CAACM,eAAD,CAAd;AACD;;AAED,WAAO,YAAM;AACX,UAAIP,UAAJ,EAAgB;AACdK,QAAAA,aAAa,CAACL,UAAD,CAAb;AACD;AACF,KAJD;AAKD,GA5BD,EA4BG,CAACH,GAAD,CA5BH;AA8BA,SAAO;AAAEC,IAAAA,OAAO,EAAPA;AAAF,GAAP;AACD,CAtCM","sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { ONE_SECOND_IN_MS, secondsUntil } from '../../../utils/date';\n\n/**\n * Start a countdown to a set date, in seconds.\n * The date passed in as an argument to useCountdown\n * will be rounded up to the nearest second.\n **/\nexport const useCountdown = (end: Date) => {\n  const [seconds, setSeconds] = useState(0);\n\n  /**\n   * When a new `end` is set for the countdown, start the counter if\n   * the `end` is in the future.\n   **/\n  useEffect(() => {\n    let intervalId: NodeJS.Timer;\n\n    const startCountdown = (seconds: number) => {\n      setSeconds(seconds);\n      intervalId = setInterval(() => {\n        setSeconds((previous: number) => {\n          const next = previous - 1;\n          if (next < 1) {\n            /* Don't trigger an unnecessary rerender when done */\n            clearInterval(intervalId);\n            return 0;\n          }\n          return next;\n        });\n      }, ONE_SECOND_IN_MS);\n    };\n\n    const secondsUntilEnd = secondsUntil(end);\n    if (secondsUntilEnd > 0) {\n      startCountdown(secondsUntilEnd);\n    }\n\n    return () => {\n      if (intervalId) {\n        clearInterval(intervalId);\n      }\n    };\n  }, [end]);\n\n  return { seconds };\n};\n"]}

package/lib/module/components/MessageList/DateHeader.js

@@ -37,7 +37,7 @@ var DateHeader = function DateHeader(_ref) {
   var _useTheme = (0, _ThemeContext.useTheme)(),
       _useTheme$theme = _useTheme.theme,
       _useTheme$theme$color = _useTheme$theme.colors,
-      overlay_dark = _useTheme$theme$color.overlay_dark,
+      overlay = _useTheme$theme$color.overlay,
       white = _useTheme$theme$color.white,
       _useTheme$theme$dateH = _useTheme$theme.dateHeader,
       container = _useTheme$theme$dateH.container,
@@ -45,7 +45,7 @@ var DateHeader = function DateHeader(_ref) {
 
   return _react["default"].createElement(_reactNative.View, {
     style: [styles.container, {
-      backgroundColor: overlay_dark
+      backgroundColor: overlay
     }, container],
     __self: _this,
     __source: {

package/lib/module/components/MessageList/DateHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DateHeader.tsx"],"names":["styles","StyleSheet","create","container","alignItems","alignSelf","borderRadius","height","justifyContent","marginTop","paddingHorizontal","text","fontSize","textAlign","textAlignVertical","DateHeader","dateString","theme","colors","overlay_dark","white","dateHeader","backgroundColor","color"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;AAEA,IAAMA,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,SAAS,EAAE;AACTC,IAAAA,UAAU,EAAE,QADH;AAETC,IAAAA,SAAS,EAAE,QAFF;AAGTC,IAAAA,YAAY,EAAE,CAHL;AAITC,IAAAA,MAAM,EAAE,EAJC;AAKTC,IAAAA,cAAc,EAAE,QALP;AAMTC,IAAAA,SAAS,EAAE,CANF;AAOTC,IAAAA,iBAAiB,EAAE;AAPV,GADoB;AAU/BC,EAAAA,IAAI,EAAE;AACJC,IAAAA,QAAQ,EAAE,EADN;AAEJC,IAAAA,SAAS,EAAE,QAFP;AAGJC,IAAAA,iBAAiB,EAAE;AAHf;AAVyB,CAAlB,CAAf;;AAqBO,IAAMC,UAAqC,GAAG,SAAxCA,UAAwC,OAAoB;AAAA,MAAjBC,UAAiB,QAAjBA,UAAiB;;AACvE,kBAKI,6BALJ;AAAA,kCACEC,KADF;AAAA,8CAEIC,MAFJ;AAAA,MAEcC,YAFd,yBAEcA,YAFd;AAAA,MAE4BC,KAF5B,yBAE4BA,KAF5B;AAAA,8CAGIC,UAHJ;AAAA,MAGkBlB,SAHlB,yBAGkBA,SAHlB;AAAA,MAG6BQ,IAH7B,yBAG6BA,IAH7B;;AAOA,SACE,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACX,MAAM,CAACG,SAAR,EAAmB;AAAEmB,MAAAA,eAAe,EAAEH;AAAnB,KAAnB,EAAsDhB,SAAtD,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACH,MAAM,CAACW,IAAR,EAAc;AAAEY,MAAAA,KAAK,EAAEH;AAAT,KAAd,EAAgCT,IAAhC,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAqDK,UAArD,CADF,CADF;AAKD,CAbM","sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\n\nconst styles = StyleSheet.create({\n  container: {\n    alignItems: 'center',\n    alignSelf: 'center',\n    borderRadius: 8,\n    height: 16,\n    justifyContent: 'center',\n    marginTop: 8,\n    paddingHorizontal: 8,\n  },\n  text: {\n    fontSize: 12,\n    textAlign: 'center',\n    textAlignVertical: 'center',\n  },\n});\n\nexport type DateHeaderProps = {\n  dateString: string;\n};\n\nexport const DateHeader: React.FC<DateHeaderProps> = ({ dateString }) => {\n  const {\n    theme: {\n      colors: { overlay_dark, white },\n      dateHeader: { container, text },\n    },\n  } = useTheme();\n\n  return (\n    <View style={[styles.container, { backgroundColor: overlay_dark }, container]}>\n      <Text style={[styles.text, { color: white }, text]}>{dateString}</Text>\n    </View>\n  );\n};\n"]}
+{"version":3,"sources":["DateHeader.tsx"],"names":["styles","StyleSheet","create","container","alignItems","alignSelf","borderRadius","height","justifyContent","marginTop","paddingHorizontal","text","fontSize","textAlign","textAlignVertical","DateHeader","dateString","theme","colors","overlay","white","dateHeader","backgroundColor","color"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;AAEA,IAAMA,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,SAAS,EAAE;AACTC,IAAAA,UAAU,EAAE,QADH;AAETC,IAAAA,SAAS,EAAE,QAFF;AAGTC,IAAAA,YAAY,EAAE,CAHL;AAITC,IAAAA,MAAM,EAAE,EAJC;AAKTC,IAAAA,cAAc,EAAE,QALP;AAMTC,IAAAA,SAAS,EAAE,CANF;AAOTC,IAAAA,iBAAiB,EAAE;AAPV,GADoB;AAU/BC,EAAAA,IAAI,EAAE;AACJC,IAAAA,QAAQ,EAAE,EADN;AAEJC,IAAAA,SAAS,EAAE,QAFP;AAGJC,IAAAA,iBAAiB,EAAE;AAHf;AAVyB,CAAlB,CAAf;;AAqBO,IAAMC,UAAqC,GAAG,SAAxCA,UAAwC,OAAoB;AAAA,MAAjBC,UAAiB,QAAjBA,UAAiB;;AACvE,kBAKI,6BALJ;AAAA,kCACEC,KADF;AAAA,8CAEIC,MAFJ;AAAA,MAEcC,OAFd,yBAEcA,OAFd;AAAA,MAEuBC,KAFvB,yBAEuBA,KAFvB;AAAA,8CAGIC,UAHJ;AAAA,MAGkBlB,SAHlB,yBAGkBA,SAHlB;AAAA,MAG6BQ,IAH7B,yBAG6BA,IAH7B;;AAOA,SACE,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACX,MAAM,CAACG,SAAR,EAAmB;AAAEmB,MAAAA,eAAe,EAAEH;AAAnB,KAAnB,EAAiDhB,SAAjD,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACH,MAAM,CAACW,IAAR,EAAc;AAAEY,MAAAA,KAAK,EAAEH;AAAT,KAAd,EAAgCT,IAAhC,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAqDK,UAArD,CADF,CADF;AAKD,CAbM","sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\n\nconst styles = StyleSheet.create({\n  container: {\n    alignItems: 'center',\n    alignSelf: 'center',\n    borderRadius: 8,\n    height: 16,\n    justifyContent: 'center',\n    marginTop: 8,\n    paddingHorizontal: 8,\n  },\n  text: {\n    fontSize: 12,\n    textAlign: 'center',\n    textAlignVertical: 'center',\n  },\n});\n\nexport type DateHeaderProps = {\n  dateString: string;\n};\n\nexport const DateHeader: React.FC<DateHeaderProps> = ({ dateString }) => {\n  const {\n    theme: {\n      colors: { overlay, white },\n      dateHeader: { container, text },\n    },\n  } = useTheme();\n\n  return (\n    <View style={[styles.container, { backgroundColor: overlay }, container]}>\n      <Text style={[styles.text, { color: white }, text]}>{dateString}</Text>\n    </View>\n  );\n};\n"]}

package/lib/module/components/MessageList/InlineDateSeparator.js

@@ -39,7 +39,7 @@ var InlineDateSeparator = function InlineDateSeparator(_ref) {
   var _useTheme = (0, _ThemeContext.useTheme)(),
       _useTheme$theme = _useTheme.theme,
       _useTheme$theme$color = _useTheme$theme.colors,
-      overlay_dark = _useTheme$theme$color.overlay_dark,
+      overlay = _useTheme$theme$color.overlay,
       white = _useTheme$theme$color.white,
       _useTheme$theme$inlin = _useTheme$theme.inlineDateSeparator,
       container = _useTheme$theme$inlin.container,
@@ -57,7 +57,7 @@ var InlineDateSeparator = function InlineDateSeparator(_ref) {
   var dateString = (0, _TranslationContext.isDayOrMoment)(tDate) ? tDate.format(dateFormat) : new Date(tDate).toDateString();
   return _react["default"].createElement(_reactNative.View, {
     style: [styles.container, {
-      backgroundColor: overlay_dark
+      backgroundColor: overlay
     }, container],
     testID: "date-separator",
     __self: _this,

package/lib/module/components/MessageList/InlineDateSeparator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InlineDateSeparator.tsx"],"names":["styles","StyleSheet","create","container","alignItems","alignSelf","borderRadius","height","justifyContent","marginVertical","paddingHorizontal","text","fontSize","textAlign","textAlignVertical","InlineDateSeparator","date","theme","colors","overlay_dark","white","inlineDateSeparator","tDateTimeParser","dateFormat","getFullYear","Date","tDate","dateString","format","toDateString","backgroundColor","color"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;AAKA,IAAMA,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,SAAS,EAAE;AACTC,IAAAA,UAAU,EAAE,QADH;AAETC,IAAAA,SAAS,EAAE,QAFF;AAGTC,IAAAA,YAAY,EAAE,CAHL;AAITC,IAAAA,MAAM,EAAE,EAJC;AAKTC,IAAAA,cAAc,EAAE,QALP;AAMTC,IAAAA,cAAc,EAAE,CANP;AAOTC,IAAAA,iBAAiB,EAAE;AAPV,GADoB;AAU/BC,EAAAA,IAAI,EAAE;AACJC,IAAAA,QAAQ,EAAE,EADN;AAEJC,IAAAA,SAAS,EAAE,QAFP;AAGJC,IAAAA,iBAAiB,EAAE;AAHf;AAVyB,CAAlB,CAAf;;AAqBO,IAAMC,mBAAuD,GAAG,SAA1DA,mBAA0D,OAAc;AAAA,MAAXC,IAAW,QAAXA,IAAW;;AACnF,kBAKI,6BALJ;AAAA,kCACEC,KADF;AAAA,8CAEIC,MAFJ;AAAA,MAEcC,YAFd,yBAEcA,YAFd;AAAA,MAE4BC,KAF5B,yBAE4BA,KAF5B;AAAA,8CAGIC,mBAHJ;AAAA,MAG2BlB,SAH3B,yBAG2BA,SAH3B;AAAA,MAGsCQ,IAHtC,yBAGsCA,IAHtC;;AAMA,8BAA4B,gDAA5B;AAAA,MAAQW,eAAR,yBAAQA,eAAR;;AAEA,MAAI,CAACN,IAAL,EAAW;AACT,WAAO,IAAP;AACD;;AAED,MAAMO,UAAU,GAAGP,IAAI,CAACQ,WAAL,OAAuB,IAAIC,IAAJ,GAAWD,WAAX,EAAvB,GAAkD,OAAlD,GAA4D,aAA/E;AACA,MAAME,KAAK,GAAGJ,eAAe,CAACN,IAAD,CAA7B;AACA,MAAMW,UAAU,GAAG,uCAAcD,KAAd,IACfA,KAAK,CAACE,MAAN,CAAaL,UAAb,CADe,GAEf,IAAIE,IAAJ,CAASC,KAAT,EAAgBG,YAAhB,EAFJ;AAIA,SACE,gCAAC,iBAAD;AACE,IAAA,KAAK,EAAE,CAAC7B,MAAM,CAACG,SAAR,EAAmB;AAAE2B,MAAAA,eAAe,EAAEX;AAAnB,KAAnB,EAAsDhB,SAAtD,CADT;AAEE,IAAA,MAAM,EAAC,gBAFT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAIE,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACH,MAAM,CAACW,IAAR,EAAc;AAAEoB,MAAAA,KAAK,EAAEX;AAAT,KAAd,EAAgCT,IAAhC,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAqDgB,UAArD,CAJF,CADF;AAQD,CA3BM","sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport {\n  isDayOrMoment,\n  useTranslationContext,\n} from '../../contexts/translationContext/TranslationContext';\n\nconst styles = StyleSheet.create({\n  container: {\n    alignItems: 'center',\n    alignSelf: 'center',\n    borderRadius: 8,\n    height: 16,\n    justifyContent: 'center',\n    marginVertical: 4,\n    paddingHorizontal: 8,\n  },\n  text: {\n    fontSize: 12,\n    textAlign: 'center',\n    textAlignVertical: 'center',\n  },\n});\n\nexport type InlineDateSeparatorProps = {\n  date?: Date;\n};\n\nexport const InlineDateSeparator: React.FC<InlineDateSeparatorProps> = ({ date }) => {\n  const {\n    theme: {\n      colors: { overlay_dark, white },\n      inlineDateSeparator: { container, text },\n    },\n  } = useTheme();\n  const { tDateTimeParser } = useTranslationContext();\n\n  if (!date) {\n    return null;\n  }\n\n  const dateFormat = date.getFullYear() === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';\n  const tDate = tDateTimeParser(date);\n  const dateString = isDayOrMoment(tDate)\n    ? tDate.format(dateFormat)\n    : new Date(tDate).toDateString();\n\n  return (\n    <View\n      style={[styles.container, { backgroundColor: overlay_dark }, container]}\n      testID='date-separator'\n    >\n      <Text style={[styles.text, { color: white }, text]}>{dateString}</Text>\n    </View>\n  );\n};\n"]}
+{"version":3,"sources":["InlineDateSeparator.tsx"],"names":["styles","StyleSheet","create","container","alignItems","alignSelf","borderRadius","height","justifyContent","marginVertical","paddingHorizontal","text","fontSize","textAlign","textAlignVertical","InlineDateSeparator","date","theme","colors","overlay","white","inlineDateSeparator","tDateTimeParser","dateFormat","getFullYear","Date","tDate","dateString","format","toDateString","backgroundColor","color"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;AAKA,IAAMA,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,SAAS,EAAE;AACTC,IAAAA,UAAU,EAAE,QADH;AAETC,IAAAA,SAAS,EAAE,QAFF;AAGTC,IAAAA,YAAY,EAAE,CAHL;AAITC,IAAAA,MAAM,EAAE,EAJC;AAKTC,IAAAA,cAAc,EAAE,QALP;AAMTC,IAAAA,cAAc,EAAE,CANP;AAOTC,IAAAA,iBAAiB,EAAE;AAPV,GADoB;AAU/BC,EAAAA,IAAI,EAAE;AACJC,IAAAA,QAAQ,EAAE,EADN;AAEJC,IAAAA,SAAS,EAAE,QAFP;AAGJC,IAAAA,iBAAiB,EAAE;AAHf;AAVyB,CAAlB,CAAf;;AAqBO,IAAMC,mBAAuD,GAAG,SAA1DA,mBAA0D,OAAc;AAAA,MAAXC,IAAW,QAAXA,IAAW;;AACnF,kBAKI,6BALJ;AAAA,kCACEC,KADF;AAAA,8CAEIC,MAFJ;AAAA,MAEcC,OAFd,yBAEcA,OAFd;AAAA,MAEuBC,KAFvB,yBAEuBA,KAFvB;AAAA,8CAGIC,mBAHJ;AAAA,MAG2BlB,SAH3B,yBAG2BA,SAH3B;AAAA,MAGsCQ,IAHtC,yBAGsCA,IAHtC;;AAMA,8BAA4B,gDAA5B;AAAA,MAAQW,eAAR,yBAAQA,eAAR;;AAEA,MAAI,CAACN,IAAL,EAAW;AACT,WAAO,IAAP;AACD;;AAED,MAAMO,UAAU,GAAGP,IAAI,CAACQ,WAAL,OAAuB,IAAIC,IAAJ,GAAWD,WAAX,EAAvB,GAAkD,OAAlD,GAA4D,aAA/E;AACA,MAAME,KAAK,GAAGJ,eAAe,CAACN,IAAD,CAA7B;AACA,MAAMW,UAAU,GAAG,uCAAcD,KAAd,IACfA,KAAK,CAACE,MAAN,CAAaL,UAAb,CADe,GAEf,IAAIE,IAAJ,CAASC,KAAT,EAAgBG,YAAhB,EAFJ;AAIA,SACE,gCAAC,iBAAD;AACE,IAAA,KAAK,EAAE,CAAC7B,MAAM,CAACG,SAAR,EAAmB;AAAE2B,MAAAA,eAAe,EAAEX;AAAnB,KAAnB,EAAiDhB,SAAjD,CADT;AAEE,IAAA,MAAM,EAAC,gBAFT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAIE,gCAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACH,MAAM,CAACW,IAAR,EAAc;AAAEoB,MAAAA,KAAK,EAAEX;AAAT,KAAd,EAAgCT,IAAhC,CAAb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAqDgB,UAArD,CAJF,CADF;AAQD,CA3BM","sourcesContent":["import React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport {\n  isDayOrMoment,\n  useTranslationContext,\n} from '../../contexts/translationContext/TranslationContext';\n\nconst styles = StyleSheet.create({\n  container: {\n    alignItems: 'center',\n    alignSelf: 'center',\n    borderRadius: 8,\n    height: 16,\n    justifyContent: 'center',\n    marginVertical: 4,\n    paddingHorizontal: 8,\n  },\n  text: {\n    fontSize: 12,\n    textAlign: 'center',\n    textAlignVertical: 'center',\n  },\n});\n\nexport type InlineDateSeparatorProps = {\n  date?: Date;\n};\n\nexport const InlineDateSeparator: React.FC<InlineDateSeparatorProps> = ({ date }) => {\n  const {\n    theme: {\n      colors: { overlay, white },\n      inlineDateSeparator: { container, text },\n    },\n  } = useTheme();\n  const { tDateTimeParser } = useTranslationContext();\n\n  if (!date) {\n    return null;\n  }\n\n  const dateFormat = date.getFullYear() === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';\n  const tDate = tDateTimeParser(date);\n  const dateString = isDayOrMoment(tDate)\n    ? tDate.format(dateFormat)\n    : new Date(tDate).toDateString();\n\n  return (\n    <View\n      style={[styles.container, { backgroundColor: overlay }, container]}\n      testID='date-separator'\n    >\n      <Text style={[styles.text, { color: white }, text]}>{dateString}</Text>\n    </View>\n  );\n};\n"]}

package/lib/module/components/MessageList/InlineLoadingMoreIndicator.js

@@ -3,7 +3,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InlineLoadingMoreIndicator = exports.InlineLoadingMoreIndicatorWithContext = void 0;
+exports.InlineLoadingMoreIndicatorWithContext = exports.InlineLoadingMoreIndicator = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/lib/module/components/MessageList/InlineLoadingMoreRecentIndicator.js

@@ -3,7 +3,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InlineLoadingMoreRecentIndicator = exports.InlineLoadingMoreRecentIndicatorWithContext = void 0;
+exports.InlineLoadingMoreRecentIndicatorWithContext = exports.InlineLoadingMoreRecentIndicator = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/lib/module/components/MessageList/InlineLoadingMoreThreadIndicator.js

@@ -3,7 +3,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InlineLoadingMoreThreadIndicator = exports.InlineLoadingMoreThreadIndicatorWithContext = void 0;
+exports.InlineLoadingMoreThreadIndicatorWithContext = exports.InlineLoadingMoreThreadIndicator = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/lib/module/components/MessageList/MessageList.js

@@ -43,10 +43,10 @@ var _OverlayContext = require("../../contexts/overlayContext/OverlayContext");
 
 var _PaginatedMessageListContext = require("../../contexts/paginatedMessageListContext/PaginatedMessageListContext");
 
-var _ThreadContext = require("../../contexts/threadContext/ThreadContext");
-
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
+var _ThreadContext = require("../../contexts/threadContext/ThreadContext");
+
 var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
 
 var _this = this,
@@ -104,6 +104,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       client = props.client,
       closePicker = props.closePicker,
       DateHeader = props.DateHeader,
+      deletedMessagesVisibilityType = props.deletedMessagesVisibilityType,
       disabled = props.disabled,
       disableTypingIndicator = props.disableTypingIndicator,
       EmptyStateIndicator = props.EmptyStateIndicator,
@@ -118,6 +119,8 @@ var MessageListWithContext = function MessageListWithContext(props) {
       InlineUnreadIndicator = props.InlineUnreadIndicator,
       _props$inverted = props.inverted,
       inverted = _props$inverted === void 0 ? true : _props$inverted,
+      _props$isListActive = props.isListActive,
+      isListActive = _props$isListActive === void 0 ? false : _props$isListActive,
       legacyImageViewerSwipeBehaviour = props.legacyImageViewerSwipeBehaviour,
       loadChannelAtMessage = props.loadChannelAtMessage,
       loading = props.loading,
@@ -148,7 +151,6 @@ var MessageListWithContext = function MessageListWithContext(props) {
       thread = props.thread,
       _props$threadList = props.threadList,
       threadList = _props$threadList === void 0 ? false : _props$threadList,
-      typingEventsEnabled = props.typingEventsEnabled,
       TypingIndicator = props.TypingIndicator,
       TypingIndicatorContainer = props.TypingIndicatorContainer;
 
@@ -167,6 +169,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     });
   }, [myMessageTheme, theme]);
   var messageList = (0, _useMessageList.useMessageList)({
+    deletedMessagesVisibilityType: deletedMessagesVisibilityType,
     inverted: inverted,
     noGroupByUser: noGroupByUser,
     threadList: threadList
@@ -245,8 +248,9 @@ var MessageListWithContext = function MessageListWithContext(props) {
       var _lastItem$item, _stickyHeaderDateRef$;
 
       var lastItem = viewableItems.pop();
+      var isMessageTypeDeleted = lastItem.item.type === 'deleted';
 
-      if (lastItem != null && (_lastItem$item = lastItem.item) != null && _lastItem$item.created_at && !lastItem.item.deleted_at && typeof lastItem.item.created_at !== 'string' && lastItem.item.created_at.toDateString() !== ((_stickyHeaderDateRef$ = stickyHeaderDateRef.current) == null ? void 0 : _stickyHeaderDateRef$.toDateString())) {
+      if (lastItem != null && (_lastItem$item = lastItem.item) != null && _lastItem$item.created_at && !isMessageTypeDeleted && typeof lastItem.item.created_at !== 'string' && lastItem.item.created_at.toDateString() !== ((_stickyHeaderDateRef$ = stickyHeaderDateRef.current) == null ? void 0 : _stickyHeaderDateRef$.toDateString())) {
         stickyHeaderDateRef.current = lastItem.item.created_at;
         setStickyHeaderDate(lastItem.item.created_at);
       }
@@ -351,20 +355,28 @@ var MessageListWithContext = function MessageListWithContext(props) {
     var insertInlineUnreadIndicator = showUnreadUnderlay && !isUnreadMessage(lastMessage, lastRead);
 
     if (message.type === 'system') {
-      return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(MessageSystem, {
+      return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNative.View, {
+        testID: "message-list-item-" + index,
+        __self: _this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 569,
+          columnNumber: 11
+        }
+      }, _react["default"].createElement(MessageSystem, {
         message: message,
         style: styles.messagePadding,
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 564,
-          columnNumber: 11
+          lineNumber: 570,
+          columnNumber: 13
         }
-      }), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
+      })), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 565,
+          lineNumber: 572,
           columnNumber: 43
         }
       }));
@@ -376,69 +388,85 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 573,
+        lineNumber: 580,
         columnNumber: 9
       }
+    }, _react["default"].createElement(_reactNative.View, {
+      testID: "message-list-item-" + index,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 581,
+        columnNumber: 11
+      }
     }, _react["default"].createElement(Message, {
       goToMessage: goToMessage,
       groupStyles: (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) ? message.groupStyles : [],
+      isTargetedMessage: targetedMessage === message.id,
       lastReceivedId: lastReceivedId === message.id ? lastReceivedId : undefined,
       message: message,
       onThreadSelect: onThreadSelect,
       showUnreadUnderlay: showUnreadUnderlay,
       style: styles.messagePadding,
-      targetedMessage: targetedMessage === message.id,
       threadList: threadList,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 574,
-        columnNumber: 11
+        lineNumber: 582,
+        columnNumber: 13
       }
-    })), (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
+    }))), (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
       date: message.dateSeparator,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 589,
+        lineNumber: 598,
         columnNumber: 11
       }
     }), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 592,
+        lineNumber: 601,
         columnNumber: 41
       }
-    })) : _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(Message, {
+    })) : _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNative.View, {
+      testID: "message-list-item-" + index,
+      __self: _this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 605,
+        columnNumber: 9
+      }
+    }, _react["default"].createElement(Message, {
       goToMessage: goToMessage,
       groupStyles: (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) ? message.groupStyles : [],
+      isTargetedMessage: targetedMessage === message.id,
       lastReceivedId: lastReceivedId === message.id || message.quoted_message_id ? lastReceivedId : undefined,
       message: message,
       onThreadSelect: onThreadSelect,
       showUnreadUnderlay: showUnreadUnderlay,
       style: styles.messagePadding,
-      targetedMessage: targetedMessage === message.id,
       threadList: threadList,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 596,
-        columnNumber: 9
+        lineNumber: 606,
+        columnNumber: 11
       }
-    }), (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
+    })), (0, _useMessageList.isMessageWithStylesReadByAndDateSeparator)(message) && message.dateSeparator && _react["default"].createElement(InlineDateSeparator, {
       date: message.dateSeparator,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 612,
+        lineNumber: 625,
         columnNumber: 11
       }
     }), insertInlineUnreadIndicator && _react["default"].createElement(InlineUnreadIndicator, {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 615,
+        lineNumber: 628,
         columnNumber: 41
       }
     }));
@@ -610,7 +638,9 @@ var MessageListWithContext = function MessageListWithContext(props) {
     resetPaginationTrackers();
   }, [messageListLengthAfterUpdate]);
   var messagesWithImages = legacyImageViewerSwipeBehaviour && messageList.filter(function (message) {
-    if (!message.deleted_at && message.attachments) {
+    var isMessageTypeDeleted = message.type === 'deleted';
+
+    if (!isMessageTypeDeleted && message.attachments) {
       return message.attachments.some(function (attachment) {
         return attachment.type === 'image' && !attachment.title_link && !attachment.og_scrape_url && (attachment.image_url || attachment.thumb_url);
       });
@@ -628,10 +658,10 @@ var MessageListWithContext = function MessageListWithContext(props) {
   var numberOfMessagesWithImages = legacyImageViewerSwipeBehaviour && messagesWithImages && messagesWithImages.length;
   var threadExists = !!thread;
   (0, _react.useEffect)(function () {
-    if (legacyImageViewerSwipeBehaviour && (threadList && thread || !threadList && !thread)) {
+    if (legacyImageViewerSwipeBehaviour && isListActive && (threadList && thread || !threadList && !thread)) {
       setImages(messagesWithImages);
     }
-  }, [imageString, legacyImageViewerSwipeBehaviour, numberOfMessagesWithImages, threadExists, threadList]);
+  }, [imageString, isListActive, legacyImageViewerSwipeBehaviour, numberOfMessagesWithImages, threadExists, threadList]);
   var stickyHeaderFormatDate = (stickyHeaderDate == null ? void 0 : stickyHeaderDate.getFullYear()) === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';
   var tStickyHeaderDate = stickyHeaderDate && !hideStickyDateHeader ? tDateTimeParser(stickyHeaderDate) : null;
   var stickyHeaderDateToRender = tStickyHeaderDate === null || hideStickyDateHeader ? null : (0, _TranslationContext.isDayOrMoment)(tStickyHeaderDate) ? tStickyHeaderDate.format(stickyHeaderFormatDate) : new Date(tStickyHeaderDate).toDateString();
@@ -666,7 +696,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 885,
+        lineNumber: 904,
         columnNumber: 5
       }
     }, _react["default"].createElement(EmptyStateIndicator, {
@@ -674,7 +704,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 886,
+        lineNumber: 905,
         columnNumber: 7
       }
     }));
@@ -688,7 +718,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 894,
+        lineNumber: 913,
         columnNumber: 7
       }
     }, _react["default"].createElement(LoadingIndicator, {
@@ -696,7 +726,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 895,
+        lineNumber: 914,
         columnNumber: 9
       }
     }));
@@ -706,10 +736,11 @@ var MessageListWithContext = function MessageListWithContext(props) {
     style: [styles.container, {
       backgroundColor: white_snow
     }, container],
+    testID: "message-flat-list-wrapper",
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 901,
+      lineNumber: 920,
       columnNumber: 5
     }
   }, _react["default"].createElement(FlatList, (0, _extends2["default"])({
@@ -741,7 +772,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 902,
+      lineNumber: 924,
       columnNumber: 7
     }
   })), !loading && _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_reactNative.View, {
@@ -749,7 +780,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 932,
+      lineNumber: 954,
       columnNumber: 11
     }
   }, stickyHeaderDateToRender && (StickyHeader ? _react["default"].createElement(StickyHeader, {
@@ -757,7 +788,7 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 935,
+      lineNumber: 957,
       columnNumber: 17
     }
   }) : messageListLengthAfterUpdate ? _react["default"].createElement(DateHeader, {
@@ -765,21 +796,21 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 937,
+      lineNumber: 959,
       columnNumber: 17
     }
-  }) : null)), !disableTypingIndicator && TypingIndicator && typingEventsEnabled !== false && _react["default"].createElement(TypingIndicatorContainer, {
+  }) : null)), !disableTypingIndicator && TypingIndicator && _react["default"].createElement(TypingIndicatorContainer, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 941,
+      lineNumber: 963,
       columnNumber: 13
     }
   }, _react["default"].createElement(TypingIndicator, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 942,
+      lineNumber: 964,
       columnNumber: 15
     }
   })), _react["default"].createElement(ScrollToBottomButton, {
@@ -789,14 +820,14 @@ var MessageListWithContext = function MessageListWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 945,
+      lineNumber: 967,
       columnNumber: 11
     }
   })), _react["default"].createElement(NetworkDownIndicator, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 952,
+      lineNumber: 974,
       columnNumber: 7
     }
   }));
@@ -815,6 +846,7 @@ var MessageList = function MessageList(props) {
       enableMessageGroupingByUser = _useChannelContext.enableMessageGroupingByUser,
       error = _useChannelContext.error,
       hideStickyDateHeader = _useChannelContext.hideStickyDateHeader,
+      isChannelActive = _useChannelContext.isChannelActive,
       loadChannelAtMessage = _useChannelContext.loadChannelAtMessage,
       loading = _useChannelContext.loading,
       LoadingIndicator = _useChannelContext.LoadingIndicator,
@@ -824,8 +856,7 @@ var MessageList = function MessageList(props) {
       scrollToFirstUnreadThreshold = _useChannelContext.scrollToFirstUnreadThreshold,
       setTargetedMessage = _useChannelContext.setTargetedMessage,
       StickyHeader = _useChannelContext.StickyHeader,
-      targetedMessage = _useChannelContext.targetedMessage,
-      typingEventsEnabled = _useChannelContext.typingEventsEnabled;
+      targetedMessage = _useChannelContext.targetedMessage;
 
   var _useChatContext = (0, _ChatContext.useChatContext)(),
       client = _useChatContext.client;
@@ -835,6 +866,7 @@ var MessageList = function MessageList(props) {
 
   var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
       DateHeader = _useMessagesContext.DateHeader,
+      deletedMessagesVisibilityType = _useMessagesContext.deletedMessagesVisibilityType,
       disableTypingIndicator = _useMessagesContext.disableTypingIndicator,
       FlatList = _useMessagesContext.FlatList,
       initialScrollToFirstUnreadMessage = _useMessagesContext.initialScrollToFirstUnreadMessage,
@@ -868,6 +900,7 @@ var MessageList = function MessageList(props) {
     client: client,
     closePicker: closePicker,
     DateHeader: DateHeader,
+    deletedMessagesVisibilityType: deletedMessagesVisibilityType,
     disabled: disabled,
     disableTypingIndicator: disableTypingIndicator,
     EmptyStateIndicator: EmptyStateIndicator,
@@ -878,6 +911,7 @@ var MessageList = function MessageList(props) {
     initialScrollToFirstUnreadMessage: initialScrollToFirstUnreadMessage,
     InlineDateSeparator: InlineDateSeparator,
     InlineUnreadIndicator: InlineUnreadIndicator,
+    isListActive: isChannelActive,
     legacyImageViewerSwipeBehaviour: legacyImageViewerSwipeBehaviour,
     loadChannelAtMessage: loadChannelAtMessage,
     loading: loading,
@@ -903,7 +937,6 @@ var MessageList = function MessageList(props) {
     targetedMessage: targetedMessage,
     tDateTimeParser: tDateTimeParser,
     thread: thread,
-    typingEventsEnabled: typingEventsEnabled,
     TypingIndicator: TypingIndicator,
     TypingIndicatorContainer: TypingIndicatorContainer
   }, props, {
@@ -911,7 +944,7 @@ var MessageList = function MessageList(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 1021,
+      lineNumber: 1044,
       columnNumber: 5
     }
   }));