@sendbird/uikit-react-native 1.0.0-rc.1

package/lib/commonjs/components/MessageRenderer/MessageContainer.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const MessageContainer = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, children);
+};
+
+const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
+  container: {
+    flexDirection: 'column',
+    paddingHorizontal: 16
+  }
+});
+var _default = MessageContainer;
+exports.default = _default;
+//# sourceMappingURL=MessageContainer.js.map

package/lib/commonjs/components/MessageRenderer/MessageContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MessageContainer","children","styles","container","createStyleSheet","flexDirection","paddingHorizontal"],"sources":["MessageContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { createStyleSheet } from '@sendbird/uikit-react-native-foundation';\n\nconst MessageContainer: React.FC = ({ children }) => {\n  return <View style={styles.container}>{children}</View>;\n};\n\nconst styles = createStyleSheet({\n  container: {\n    flexDirection: 'column',\n    paddingHorizontal: 16,\n  },\n});\n\nexport default MessageContainer;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAEA,MAAMA,gBAA0B,GAAG,QAAkB;EAAA,IAAjB;IAAEC;EAAF,CAAiB;EACnD,oBAAO,6BAAC,iBAAD;IAAM,KAAK,EAAEC,MAAM,CAACC;EAApB,GAAgCF,QAAhC,CAAP;AACD,CAFD;;AAIA,MAAMC,MAAM,GAAG,IAAAE,4CAAA,EAAiB;EAC9BD,SAAS,EAAE;IACTE,aAAa,EAAE,QADN;IAETC,iBAAiB,EAAE;EAFV;AADmB,CAAjB,CAAf;eAOeN,gB"}

package/lib/commonjs/components/MessageRenderer/MessageDateSeparator.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _isSameDay = _interopRequireDefault(require("date-fns/isSameDay"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
+
+var _useContext = require("../../hooks/useContext");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const MessageDateSeparator = _ref => {
+  let {
+    message,
+    prevMessage
+  } = _ref;
+  const {
+    STRINGS
+  } = (0, _useContext.useLocalization)();
+  const {
+    colors
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  const sameDay = (0, _isSameDay.default)(message.createdAt, (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.createdAt) ?? 0);
+  if (sameDay) return null;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.container
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.view, {
+      backgroundColor: colors.ui.dateSeparator.default.none.background
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
+    caption1: true,
+    color: colors.ui.dateSeparator.default.none.text
+  }, STRINGS.GROUP_CHANNEL.LIST_DATE_SEPARATOR(new Date(message.createdAt)))));
+};
+
+const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
+  container: {
+    alignItems: 'center',
+    marginVertical: 16
+  },
+  view: {
+    borderRadius: 10,
+    paddingVertical: 4,
+    paddingHorizontal: 10
+  }
+});
+var _default = MessageDateSeparator;
+exports.default = _default;
+//# sourceMappingURL=MessageDateSeparator.js.map

package/lib/commonjs/components/MessageRenderer/MessageDateSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MessageDateSeparator","message","prevMessage","STRINGS","useLocalization","colors","useUIKitTheme","sameDay","isSameDay","createdAt","styles","container","view","backgroundColor","ui","dateSeparator","default","none","background","text","GROUP_CHANNEL","LIST_DATE_SEPARATOR","Date","createStyleSheet","alignItems","marginVertical","borderRadius","paddingVertical","paddingHorizontal"],"sources":["MessageDateSeparator.tsx"],"sourcesContent":["import isSameDay from 'date-fns/isSameDay';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../hooks/useContext';\n\ntype Props = {\n  message: SendbirdMessage;\n  prevMessage?: SendbirdMessage;\n};\n\nconst MessageDateSeparator: React.FC<Props> = ({ message, prevMessage }) => {\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n  const sameDay = isSameDay(message.createdAt, prevMessage?.createdAt ?? 0);\n  if (sameDay) return null;\n  return (\n    <View style={styles.container}>\n      <View style={[styles.view, { backgroundColor: colors.ui.dateSeparator.default.none.background }]}>\n        <Text caption1 color={colors.ui.dateSeparator.default.none.text}>\n          {STRINGS.GROUP_CHANNEL.LIST_DATE_SEPARATOR(new Date(message.createdAt))}\n        </Text>\n      </View>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    alignItems: 'center',\n    marginVertical: 16,\n  },\n  view: {\n    borderRadius: 10,\n    paddingVertical: 4,\n    paddingHorizontal: 10,\n  },\n});\n\nexport default MessageDateSeparator;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAGA;;;;AAOA,MAAMA,oBAAqC,GAAG,QAA8B;EAAA,IAA7B;IAAEC,OAAF;IAAWC;EAAX,CAA6B;EAC1E,MAAM;IAAEC;EAAF,IAAc,IAAAC,2BAAA,GAApB;EACA,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB;EACA,MAAMC,OAAO,GAAG,IAAAC,kBAAA,EAAUP,OAAO,CAACQ,SAAlB,EAA6B,CAAAP,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAEO,SAAb,KAA0B,CAAvD,CAAhB;EACA,IAAIF,OAAJ,EAAa,OAAO,IAAP;EACb,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAEG,MAAM,CAACC;EAApB,gBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACD,MAAM,CAACE,IAAR,EAAc;MAAEC,eAAe,EAAER,MAAM,CAACS,EAAP,CAAUC,aAAV,CAAwBC,OAAxB,CAAgCC,IAAhC,CAAqCC;IAAxD,CAAd;EAAb,gBACE,6BAAC,gCAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEb,MAAM,CAACS,EAAP,CAAUC,aAAV,CAAwBC,OAAxB,CAAgCC,IAAhC,CAAqCE;EAA3D,GACGhB,OAAO,CAACiB,aAAR,CAAsBC,mBAAtB,CAA0C,IAAIC,IAAJ,CAASrB,OAAO,CAACQ,SAAjB,CAA1C,CADH,CADF,CADF,CADF;AASD,CAdD;;AAgBA,MAAMC,MAAM,GAAG,IAAAa,4CAAA,EAAiB;EAC9BZ,SAAS,EAAE;IACTa,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP,CADmB;EAK9Bb,IAAI,EAAE;IACJc,YAAY,EAAE,EADV;IAEJC,eAAe,EAAE,CAFb;IAGJC,iBAAiB,EAAE;EAHf;AALwB,CAAjB,CAAf;eAYe5B,oB"}

package/lib/commonjs/components/MessageRenderer/MessageIncomingAvatar.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const MessageIncomingAvatar = _ref => {
+  var _message$sender;
+
+  let {
+    message,
+    grouping
+  } = _ref;
+  if (grouping) return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.avatar
+  });
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.avatar
+  }, (message.isFileMessage() || message.isUserMessage()) && /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Avatar, {
+    size: 26,
+    uri: (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.profileUrl
+  }));
+};
+
+const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
+  avatar: {
+    width: 26,
+    marginRight: 12
+  }
+});
+var _default = MessageIncomingAvatar;
+exports.default = _default;
+//# sourceMappingURL=MessageIncomingAvatar.js.map

package/lib/commonjs/components/MessageRenderer/MessageIncomingAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MessageIncomingAvatar","message","grouping","styles","avatar","isFileMessage","isUserMessage","sender","profileUrl","createStyleSheet","width","marginRight"],"sources":["MessageIncomingAvatar.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Avatar, createStyleSheet } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\ntype Props = { message: SendbirdMessage; grouping: boolean };\nconst MessageIncomingAvatar: React.FC<Props> = ({ message, grouping }) => {\n  if (grouping) return <View style={styles.avatar} />;\n  return (\n    <View style={styles.avatar}>\n      {(message.isFileMessage() || message.isUserMessage()) && <Avatar size={26} uri={message.sender?.profileUrl} />}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  avatar: {\n    width: 26,\n    marginRight: 12,\n  },\n});\n\nexport default MessageIncomingAvatar;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAIA,MAAMA,qBAAsC,GAAG,QAA2B;EAAA;;EAAA,IAA1B;IAAEC,OAAF;IAAWC;EAAX,CAA0B;EACxE,IAAIA,QAAJ,EAAc,oBAAO,6BAAC,iBAAD;IAAM,KAAK,EAAEC,MAAM,CAACC;EAApB,EAAP;EACd,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAED,MAAM,CAACC;EAApB,GACG,CAACH,OAAO,CAACI,aAAR,MAA2BJ,OAAO,CAACK,aAAR,EAA5B,kBAAwD,6BAAC,kCAAD;IAAQ,IAAI,EAAE,EAAd;IAAkB,GAAG,qBAAEL,OAAO,CAACM,MAAV,oDAAE,gBAAgBC;EAAvC,EAD3D,CADF;AAKD,CAPD;;AASA,MAAML,MAAM,GAAG,IAAAM,4CAAA,EAAiB;EAC9BL,MAAM,EAAE;IACNM,KAAK,EAAE,EADD;IAENC,WAAW,EAAE;EAFP;AADsB,CAAjB,CAAf;eAOeX,qB"}

package/lib/commonjs/components/MessageRenderer/MessageIncomingSenderName.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
+
+var _useContext = require("../../hooks/useContext");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const MessageIncomingSenderName = _ref => {
+  var _message$sender;
+
+  let {
+    message,
+    grouping
+  } = _ref;
+  const {
+    colors
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  const {
+    STRINGS
+  } = (0, _useContext.useLocalization)();
+  if (grouping) return null;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.sender
+  }, (message.isFileMessage() || message.isUserMessage()) && /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
+    caption1: true,
+    color: colors.ui.message.incoming.enabled.textSenderName
+  }, ((_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.nickname) || STRINGS.LABELS.USER_NO_NAME));
+};
+
+const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
+  sender: {
+    marginLeft: 12,
+    marginBottom: 4
+  }
+});
+var _default = MessageIncomingSenderName;
+exports.default = _default;
+//# sourceMappingURL=MessageIncomingSenderName.js.map

package/lib/commonjs/components/MessageRenderer/MessageIncomingSenderName.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MessageIncomingSenderName","message","grouping","colors","useUIKitTheme","STRINGS","useLocalization","styles","sender","isFileMessage","isUserMessage","ui","incoming","enabled","textSenderName","nickname","LABELS","USER_NO_NAME","createStyleSheet","marginLeft","marginBottom"],"sources":["MessageIncomingSenderName.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../hooks/useContext';\n\ntype Props = { message: SendbirdMessage; grouping: boolean };\nconst MessageIncomingSenderName: React.FC<Props> = ({ message, grouping }) => {\n  const { colors } = useUIKitTheme();\n  const { STRINGS } = useLocalization();\n  if (grouping) return null;\n\n  return (\n    <View style={styles.sender}>\n      {(message.isFileMessage() || message.isUserMessage()) && (\n        <Text caption1 color={colors.ui.message.incoming.enabled.textSenderName}>\n          {message.sender?.nickname || STRINGS.LABELS.USER_NO_NAME}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  sender: {\n    marginLeft: 12,\n    marginBottom: 4,\n  },\n});\n\nexport default MessageIncomingSenderName;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAGA;;;;AAGA,MAAMA,yBAA0C,GAAG,QAA2B;EAAA;;EAAA,IAA1B;IAAEC,OAAF;IAAWC;EAAX,CAA0B;EAC5E,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB;EACA,MAAM;IAAEC;EAAF,IAAc,IAAAC,2BAAA,GAApB;EACA,IAAIJ,QAAJ,EAAc,OAAO,IAAP;EAEd,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAEK,MAAM,CAACC;EAApB,GACG,CAACP,OAAO,CAACQ,aAAR,MAA2BR,OAAO,CAACS,aAAR,EAA5B,kBACC,6BAAC,gCAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEP,MAAM,CAACQ,EAAP,CAAUV,OAAV,CAAkBW,QAAlB,CAA2BC,OAA3B,CAAmCC;EAAzD,GACG,oBAAAb,OAAO,CAACO,MAAR,oEAAgBO,QAAhB,KAA4BV,OAAO,CAACW,MAAR,CAAeC,YAD9C,CAFJ,CADF;AASD,CAdD;;AAgBA,MAAMV,MAAM,GAAG,IAAAW,4CAAA,EAAiB;EAC9BV,MAAM,EAAE;IACNW,UAAU,EAAE,EADN;IAENC,YAAY,EAAE;EAFR;AADsB,CAAjB,CAAf;eAOepB,yB"}

package/lib/commonjs/components/MessageRenderer/MessageOutgoingStatus.js

@@ -0,0 +1,134 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
+
+var _uikitUtils = require("@sendbird/uikit-utils");
+
+var _useContext = require("../../hooks/useContext");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const SIZE = 16;
+
+const MessageOutgoingStatus = _ref => {
+  let {
+    channel,
+    message
+  } = _ref;
+  if (!message.isUserMessage() && !message.isFileMessage()) return null;
+  const handlerId = (0, _uikitUtils.useUniqId)('MessageOutgoingStatus');
+  const {
+    sdk,
+    features
+  } = (0, _useContext.useSendbirdChat)();
+  const {
+    colors
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  const [state, setState] = (0, _react.useState)(() => ({
+    unreadCount: channel.getUnreadMemberCount(message),
+    undeliveredCount: channel.getUndeliveredMemberCount(message)
+  }));
+
+  const getCounts = (channel, message) => {
+    return {
+      unreadCount: channel.getUnreadMemberCount(message),
+      undeliveredCount: channel.getUndeliveredMemberCount(message)
+    };
+  };
+
+  (0, _react.useEffect)(() => {
+    const id = String(handlerId);
+
+    if (message.sendingStatus === 'succeeded' && state.unreadCount === 0 && state.undeliveredCount === 0) {
+      sdk.removeChannelHandler(id);
+    } else {
+      const handler = new sdk.ChannelHandler();
+
+      handler.onReadReceiptUpdated = channel => {
+        if (channel.url === message.channelUrl) setState(getCounts(channel, message));
+      };
+
+      if (features.deliveryReceiptEnabled) {
+        handler.onDeliveryReceiptUpdated = channel => {
+          if (channel.url === message.channelUrl && channel.isGroupChannel()) setState(getCounts(channel, message));
+        };
+      }
+
+      sdk.addChannelHandler(id, handler);
+    }
+
+    return () => {
+      sdk.removeChannelHandler(id);
+    };
+  }, [message.sendingStatus]);
+
+  if (message.sendingStatus === 'pending') {
+    return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.LoadingSpinner, {
+      size: SIZE,
+      style: styles.container
+    });
+  }
+
+  if (message.sendingStatus === 'failed') {
+    return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
+      icon: 'error',
+      size: SIZE,
+      color: colors.error,
+      style: styles.container
+    });
+  }
+
+  if (state.unreadCount === 0) {
+    return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
+      icon: 'done-all',
+      size: SIZE,
+      color: colors.secondary,
+      style: styles.container
+    });
+  }
+
+  if (features.deliveryReceiptEnabled) {
+    if (state.undeliveredCount === 0) {
+      return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
+        icon: 'done-all',
+        size: SIZE,
+        color: colors.onBackground03,
+        style: styles.container
+      });
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
+      icon: 'done',
+      size: SIZE,
+      color: colors.onBackground03,
+      style: styles.container
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
+    icon: 'done-all',
+    size: SIZE,
+    color: colors.onBackground03,
+    style: styles.container
+  });
+};
+
+const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
+  container: {
+    marginRight: 4
+  }
+});
+
+var _default = /*#__PURE__*/_react.default.memo(MessageOutgoingStatus);
+
+exports.default = _default;
+//# sourceMappingURL=MessageOutgoingStatus.js.map

package/lib/commonjs/components/MessageRenderer/MessageOutgoingStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SIZE","MessageOutgoingStatus","channel","message","isUserMessage","isFileMessage","handlerId","useUniqId","sdk","features","useSendbirdChat","colors","useUIKitTheme","state","setState","useState","unreadCount","getUnreadMemberCount","undeliveredCount","getUndeliveredMemberCount","getCounts","useEffect","id","String","sendingStatus","removeChannelHandler","handler","ChannelHandler","onReadReceiptUpdated","url","channelUrl","deliveryReceiptEnabled","onDeliveryReceiptUpdated","isGroupChannel","addChannelHandler","styles","container","error","secondary","onBackground03","createStyleSheet","marginRight","React","memo"],"sources":["MessageOutgoingStatus.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Icon, LoadingSpinner, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type {\n  SendbirdFileMessage,\n  SendbirdGroupChannel,\n  SendbirdMessage,\n  SendbirdUserMessage,\n} from '@sendbird/uikit-utils';\nimport { useUniqId } from '@sendbird/uikit-utils';\n\nimport { useSendbirdChat } from '../../hooks/useContext';\n\nconst SIZE = 16;\n\ntype Props = { channel: SendbirdGroupChannel; message: SendbirdMessage };\nconst MessageOutgoingStatus: React.FC<Props> = ({ channel, message }) => {\n  if (!message.isUserMessage() && !message.isFileMessage()) return null;\n\n  const handlerId = useUniqId('MessageOutgoingStatus');\n\n  const { sdk, features } = useSendbirdChat();\n  const { colors } = useUIKitTheme();\n\n  const [state, setState] = useState(() => ({\n    unreadCount: channel.getUnreadMemberCount(message),\n    undeliveredCount: channel.getUndeliveredMemberCount(message),\n  }));\n\n  const getCounts = (channel: SendbirdGroupChannel, message: SendbirdUserMessage | SendbirdFileMessage) => {\n    return {\n      unreadCount: channel.getUnreadMemberCount(message),\n      undeliveredCount: channel.getUndeliveredMemberCount(message),\n    };\n  };\n\n  useEffect(() => {\n    const id = String(handlerId);\n    if (message.sendingStatus === 'succeeded' && state.unreadCount === 0 && state.undeliveredCount === 0) {\n      sdk.removeChannelHandler(id);\n    } else {\n      const handler = new sdk.ChannelHandler();\n      handler.onReadReceiptUpdated = (channel) => {\n        if (channel.url === message.channelUrl) setState(getCounts(channel, message));\n      };\n\n      if (features.deliveryReceiptEnabled) {\n        handler.onDeliveryReceiptUpdated = (channel) => {\n          if (channel.url === message.channelUrl && channel.isGroupChannel()) setState(getCounts(channel, message));\n        };\n      }\n      sdk.addChannelHandler(id, handler);\n    }\n\n    return () => {\n      sdk.removeChannelHandler(id);\n    };\n  }, [message.sendingStatus]);\n\n  if (message.sendingStatus === 'pending') {\n    return <LoadingSpinner size={SIZE} style={styles.container} />;\n  }\n\n  if (message.sendingStatus === 'failed') {\n    return <Icon icon={'error'} size={SIZE} color={colors.error} style={styles.container} />;\n  }\n\n  if (state.unreadCount === 0) {\n    return <Icon icon={'done-all'} size={SIZE} color={colors.secondary} style={styles.container} />;\n  }\n\n  if (features.deliveryReceiptEnabled) {\n    if (state.undeliveredCount === 0) {\n      return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;\n    }\n    return <Icon icon={'done'} size={SIZE} color={colors.onBackground03} style={styles.container} />;\n  }\n\n  return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;\n};\n\nconst styles = createStyleSheet({\n  container: {\n    marginRight: 4,\n  },\n});\n\nexport default React.memo(MessageOutgoingStatus);\n"],"mappings":"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"}

package/lib/commonjs/components/MessageRenderer/MessageTime.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
+
+var _useContext = require("../../hooks/useContext");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const MessageTime = _ref => {
+  let {
+    message,
+    grouping,
+    style
+  } = _ref;
+  const {
+    STRINGS
+  } = (0, _useContext.useLocalization)();
+  const {
+    colors
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  if (grouping) return null;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
+    caption4: true,
+    color: colors.ui.message.incoming.enabled.textTime
+  }, STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_TIME(message)));
+};
+
+var _default = MessageTime;
+exports.default = _default;
+//# sourceMappingURL=MessageTime.js.map

package/lib/commonjs/components/MessageRenderer/MessageTime.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MessageTime","message","grouping","style","STRINGS","useLocalization","colors","useUIKitTheme","ui","incoming","enabled","textTime","GROUP_CHANNEL","MESSAGE_BUBBLE_TIME"],"sources":["MessageTime.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport { Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../hooks/useContext';\n\ntype Props = { message: SendbirdMessage; grouping: boolean; style?: StyleProp<ViewStyle> };\nconst MessageTime: React.FC<Props> = ({ message, grouping, style }) => {\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n  if (grouping) return null;\n\n  return (\n    <View style={style}>\n      <Text caption4 color={colors.ui.message.incoming.enabled.textTime}>\n        {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_TIME(message)}\n      </Text>\n    </View>\n  );\n};\n\nexport default MessageTime;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAGA;;;;AAGA,MAAMA,WAA4B,GAAG,QAAkC;EAAA,IAAjC;IAAEC,OAAF;IAAWC,QAAX;IAAqBC;EAArB,CAAiC;EACrE,MAAM;IAAEC;EAAF,IAAc,IAAAC,2BAAA,GAApB;EACA,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB;EACA,IAAIL,QAAJ,EAAc,OAAO,IAAP;EAEd,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAEC;EAAb,gBACE,6BAAC,gCAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEG,MAAM,CAACE,EAAP,CAAUP,OAAV,CAAkBQ,QAAlB,CAA2BC,OAA3B,CAAmCC;EAAzD,GACGP,OAAO,CAACQ,aAAR,CAAsBC,mBAAtB,CAA0CZ,OAA1C,CADH,CADF,CADF;AAOD,CAZD;;eAceD,W"}

package/lib/commonjs/components/MessageRenderer/UnknownMessage/index.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
+
+var _useContext = require("../../../hooks/useContext");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const UnknownMessage = _ref => {
+  let {
+    message,
+    variant,
+    pressed
+  } = _ref;
+  const {
+    STRINGS
+  } = (0, _useContext.useLocalization)();
+  const {
+    colors
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: color.background
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
+    body3: true,
+    color: colors.onBackground01
+  }, STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_TITLE(message)), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
+    body3: true,
+    color: colors.onBackground02
+  }, STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_DESC(message)));
+};
+
+const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
+  container: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16
+  }
+});
+var _default = UnknownMessage;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/MessageRenderer/UnknownMessage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["UnknownMessage","message","variant","pressed","STRINGS","useLocalization","colors","useUIKitTheme","color","ui","styles","container","backgroundColor","background","onBackground01","GROUP_CHANNEL","MESSAGE_BUBBLE_UNKNOWN_TITLE","onBackground02","MESSAGE_BUBBLE_UNKNOWN_DESC","createStyleSheet","paddingHorizontal","paddingVertical","borderRadius"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\nimport { useLocalization } from '../../../hooks/useContext';\nimport type { MessageRendererInterface } from '../index';\n\nexport type UnknownMessageProps = MessageRendererInterface;\nconst UnknownMessage: React.FC<UnknownMessageProps> = ({ message, variant, pressed }) => {\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];\n  return (\n    <View style={[styles.container, { backgroundColor: color.background }]}>\n      <Text body3 color={colors.onBackground01}>\n        {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_TITLE(message)}\n      </Text>\n      <Text body3 color={colors.onBackground02}>\n        {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_DESC(message)}\n      </Text>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n    borderRadius: 16,\n  },\n});\n\nexport default UnknownMessage;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAEA;;;;AAIA,MAAMA,cAA6C,GAAG,QAAmC;EAAA,IAAlC;IAAEC,OAAF;IAAWC,OAAX;IAAoBC;EAApB,CAAkC;EACvF,MAAM;IAAEC;EAAF,IAAc,IAAAC,2BAAA,GAApB;EACA,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB;EACA,MAAMC,KAAK,GAAGF,MAAM,CAACG,EAAP,CAAUR,OAAV,CAAkBC,OAAlB,EAA2BC,OAAO,GAAG,SAAH,GAAe,SAAjD,CAAd;EACA,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACO,MAAM,CAACC,SAAR,EAAmB;MAAEC,eAAe,EAAEJ,KAAK,CAACK;IAAzB,CAAnB;EAAb,gBACE,6BAAC,gCAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAEP,MAAM,CAACQ;EAA1B,GACGV,OAAO,CAACW,aAAR,CAAsBC,4BAAtB,CAAmDf,OAAnD,CADH,CADF,eAIE,6BAAC,gCAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAEK,MAAM,CAACW;EAA1B,GACGb,OAAO,CAACW,aAAR,CAAsBG,2BAAtB,CAAkDjB,OAAlD,CADH,CAJF,CADF;AAUD,CAdD;;AAgBA,MAAMS,MAAM,GAAG,IAAAS,4CAAA,EAAiB;EAC9BR,SAAS,EAAE;IACTS,iBAAiB,EAAE,EADV;IAETC,eAAe,EAAE,CAFR;IAGTC,YAAY,EAAE;EAHL;AADmB,CAAjB,CAAf;eAQetB,c"}

package/lib/commonjs/components/MessageRenderer/UserMessage/BaseUserMessage.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
+
+var _useContext = require("../../../hooks/useContext");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const BaseUserMessage = _ref => {
+  let {
+    message,
+    variant,
+    pressed
+  } = _ref;
+  const {
+    colors
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const {
+    STRINGS
+  } = (0, _useContext.useLocalization)();
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: color.background
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.URLParsedText, {
+    body3: true,
+    strict: true,
+    color: color.textMsg
+  }, message.message, Boolean(message.updatedAt) && /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
+    body3: true,
+    color: color.textEdited
+  }, STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX)));
+};
+
+const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
+  container: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16
+  }
+});
+var _default = BaseUserMessage;
+exports.default = _default;
+//# sourceMappingURL=BaseUserMessage.js.map

package/lib/commonjs/components/MessageRenderer/UserMessage/BaseUserMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BaseUserMessage","message","variant","pressed","colors","useUIKitTheme","color","ui","STRINGS","useLocalization","styles","container","backgroundColor","background","textMsg","Boolean","updatedAt","textEdited","GROUP_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","createStyleSheet","paddingHorizontal","paddingVertical","borderRadius"],"sources":["BaseUserMessage.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, URLParsedText, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\nimport { useLocalization } from '../../../hooks/useContext';\nimport type { UserMessageProps } from './index';\n\nconst BaseUserMessage: React.FC<UserMessageProps> = ({ message, variant, pressed }) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];\n  const { STRINGS } = useLocalization();\n  return (\n    <View style={[styles.container, { backgroundColor: color.background }]}>\n      <URLParsedText body3 strict color={color.textMsg}>\n        {message.message}\n        {Boolean(message.updatedAt) && (\n          <Text body3 color={color.textEdited}>\n            {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}\n          </Text>\n        )}\n      </URLParsedText>\n    </View>\n  );\n};\nconst styles = createStyleSheet({\n  container: {\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n    borderRadius: 16,\n  },\n});\n\nexport default BaseUserMessage;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAEA;;;;AAGA,MAAMA,eAA2C,GAAG,QAAmC;EAAA,IAAlC;IAAEC,OAAF;IAAWC,OAAX;IAAoBC;EAApB,CAAkC;EACrF,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB;EACA,MAAMC,KAAK,GAAGF,MAAM,CAACG,EAAP,CAAUN,OAAV,CAAkBC,OAAlB,EAA2BC,OAAO,GAAG,SAAH,GAAe,SAAjD,CAAd;EACA,MAAM;IAAEK;EAAF,IAAc,IAAAC,2BAAA,GAApB;EACA,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACC,MAAM,CAACC,SAAR,EAAmB;MAAEC,eAAe,EAAEN,KAAK,CAACO;IAAzB,CAAnB;EAAb,gBACE,6BAAC,yCAAD;IAAe,KAAK,MAApB;IAAqB,MAAM,MAA3B;IAA4B,KAAK,EAAEP,KAAK,CAACQ;EAAzC,GACGb,OAAO,CAACA,OADX,EAEGc,OAAO,CAACd,OAAO,CAACe,SAAT,CAAP,iBACC,6BAAC,gCAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAEV,KAAK,CAACW;EAAzB,GACGT,OAAO,CAACU,aAAR,CAAsBC,6BADzB,CAHJ,CADF,CADF;AAYD,CAhBD;;AAiBA,MAAMT,MAAM,GAAG,IAAAU,4CAAA,EAAiB;EAC9BT,SAAS,EAAE;IACTU,iBAAiB,EAAE,EADV;IAETC,eAAe,EAAE,CAFR;IAGTC,YAAY,EAAE;EAHL;AADmB,CAAjB,CAAf;eAQevB,e"}

package/lib/commonjs/components/MessageRenderer/UserMessage/OpenGraphUserMessage.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
+
+var _uikitUtils = require("@sendbird/uikit-utils");
+
+var _useContext = require("../../../hooks/useContext");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const OpenGraphUserMessage = _ref => {
+  var _ogMetaData$defaultIm;
+
+  let {
+    message,
+    variant,
+    pressed,
+    ogMetaData
+  } = _ref;
+  const {
+    STRINGS
+  } = (0, _useContext.useLocalization)();
+  const {
+    colors,
+    select,
+    palette
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const [imageNotFound, setImageNotFound] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: color.background
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.messageContainer
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.URLParsedText, {
+    body3: true,
+    color: color.textMsg
+  }, message.message, Boolean(message.updatedAt) && /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
+    body3: true,
+    color: color.textEdited
+  }, STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX))), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    activeOpacity: 0.7,
+    onPress: () => _reactNative.Linking.openURL(ogMetaData.url).catch()
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.ogImageContainer, {
+      backgroundColor: select({
+        dark: palette.background500,
+        light: palette.background200
+      })
+    }]
+  }, (0, _uikitUtils.conditionChaining)([imageNotFound], [/*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
+    containerStyle: styles.ogImage,
+    icon: 'thumbnail-none',
+    size: 48,
+    color: colors.onBackground02
+  }), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Image, {
+    source: {
+      uri: (_ogMetaData$defaultIm = ogMetaData.defaultImage) === null || _ogMetaData$defaultIm === void 0 ? void 0 : _ogMetaData$defaultIm.url
+    },
+    style: styles.ogImage,
+    resizeMode: 'cover',
+    onError: () => setImageNotFound(true)
+  })])), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.ogContainer, {
+      backgroundColor: select({
+        dark: palette.background400,
+        light: palette.background100
+      })
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
+    numberOfLines: 3,
+    body2: true,
+    color: colors.onBackground01,
+    style: styles.ogTitle
+  }, ogMetaData.title), Boolean(ogMetaData.description) && /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
+    numberOfLines: 1,
+    caption2: true,
+    color: colors.onBackground01,
+    style: styles.ogDesc
+  }, ogMetaData.description), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
+    numberOfLines: 1,
+    caption2: true,
+    color: colors.onBackground02
+  }, ogMetaData.url))));
+};
+
+const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden'
+  },
+  messageContainer: {
+    paddingVertical: 6,
+    paddingHorizontal: 12
+  },
+  ogContainer: {
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 12
+  },
+  ogImageContainer: {
+    width: 240,
+    height: 136
+  },
+  ogImage: {
+    width: '100%',
+    height: '100%'
+  },
+  ogTitle: {
+    marginBottom: 4
+  },
+  ogDesc: {
+    lineHeight: 14,
+    marginBottom: 8
+  }
+});
+var _default = OpenGraphUserMessage;
+exports.default = _default;
+//# sourceMappingURL=OpenGraphUserMessage.js.map