@sendbird/uikit-react 3.5.0-rc.1 → 3.5.1

package/cjs/ui/OpenchannelOGMessage.js

@@ -1,154 +1,121 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-fed1e122.js');
-var tslib_es6 = require('../tslib.es6-b8ba50ef.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-53e83515.js');
 var React = require('react');
-var index$1 = require('../index-8de8f28a.js');
+var index$1 = require('../index-a01673e9.js');
 var ui_Avatar = require('./Avatar.js');
 var ui_ContextMenu = require('./ContextMenu.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_LinkLabel = require('./LinkLabel.js');
-var ui_Label = require('../index-5d5497c2.js');
+var ui_Label = require('../index-f6621210.js');
 var ui_Loader = require('./Loader.js');
 var ui_UserProfile = require('./UserProfile.js');
-var ui_Word = require('./Word.js');
-var UserProfileContext = require('../UserProfileContext-8d0dee57.js');
-var uuid = require('../uuid-2475ef6c.js');
-var utils = require('../utils-5f86a394.js');
-var LocalizationContext = require('../LocalizationContext-bddc5c2b.js');
-var index = require('../index-30c97863.js');
-var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var MediaQueryContext = require('../MediaQueryContext-4711a81f.js');
-var useLongPress = require('../useLongPress-99c66f7f.js');
-require('../index-d14a43c4.js');
+var UserProfileContext = require('../UserProfileContext-10e1ac24.js');
+var uuid = require('../uuid-97ce2508.js');
+var utils = require('../utils-8ce3a247.js');
+var LocalizationContext = require('../LocalizationContext-bd54275c.js');
+var index = require('../index-35d641f7.js');
+var MediaQueryContext = require('../MediaQueryContext-ebcb159a.js');
+var useLongPress = require('../useLongPress-50d2028a.js');
+var index$2 = require('../index-d0b4f3c0.js');
+var tokenize = require('../tokenize-b019fb84.js');
+require('../index-745c9ce1.js');
 require('prop-types');
 require('react-dom');
 require('./SortByRow.js');
-require('../index-62c1bdfc.js');
+require('../index-32244c73.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../stringSet-3e6167ef.js');
+require('../stringSet-d212a015.js');
 require('../sendbirdSelectors.js');
-require('../topics-56842e14.js');
-require('../utils-374d57b4.js');
+require('../topics-77576a9c.js');
+require('../utils-85ff9137.js');
 require('./Button.js');
-require('./MentionLabel.js');
+require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
+require('../index.module-02ae6df9.js');
+require('../Message/context.js');
+require('./MentionLabel.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var checkOGIsEnalbed = function (message) {
-  var ogMetaData = message.ogMetaData;
-
+const checkOGIsEnalbed = message => {
+  const {
+    ogMetaData
+  } = message;
   if (!ogMetaData) {
     return false;
   }
-
-  var url = ogMetaData.url;
-
+  const {
+    url
+  } = ogMetaData;
   if (!url) {
     return false;
   }
-
   return true;
 };
 
-function OpenchannelOGMessage(_a) {
-  var _b, _c, _d;
-
-  var message = _a.message,
-      isOperator = _a.isOperator,
-      className = _a.className,
-      disabled = _a.disabled,
-      showEdit = _a.showEdit,
-      showRemove = _a.showRemove,
-      resendMessage = _a.resendMessage,
-      chainTop = _a.chainTop,
-      userId = _a.userId;
-
-  if (!message || message.messageType !== 'user') {
-    return null;
-  }
-
-  var openLink = function () {
-    if (checkOGIsEnalbed(message)) {
-      var url = ogMetaData.url;
-      window.open(url);
+function OpenchannelOGMessage(_ref) {
+  var _message$ogMetaData, _message$updatedAt;
+  let {
+    message,
+    isOperator,
+    isEphemeral = false,
+    className,
+    disabled,
+    showEdit,
+    showRemove,
+    resendMessage,
+    chainTop,
+    userId
+  } = _ref;
+  const status = message === null || message === void 0 ? void 0 : message.sendingStatus;
+  const ogMetaData = (_message$ogMetaData = message.ogMetaData) !== null && _message$ogMetaData !== void 0 ? _message$ogMetaData : null;
+  const defaultImage = ogMetaData === null || ogMetaData === void 0 ? void 0 : ogMetaData.defaultImage;
+  const {
+    stringSet,
+    dateLocale
+  } = LocalizationContext.useLocalization();
+  const {
+    isMobile
+  } = MediaQueryContext.useMediaQueryContext();
+  const {
+    disableUserProfile,
+    renderUserProfile
+  } = React.useContext(UserProfileContext.UserProfileContext);
+  const [contextStyle, setContextStyle] = React.useState({});
+  const [showContextMenu, setShowContextMenu] = React.useState(false);
+  const openLink = () => {
+    if (checkOGIsEnalbed(message) && ogMetaData !== null && ogMetaData !== void 0 && ogMetaData.url) {
+      window.open(ogMetaData.url, '_blank', 'noopener,noreferrer');
     }
   };
-
-  var status = message === null || message === void 0 ? void 0 : message.sendingStatus;
-  var ogMetaData = message.ogMetaData;
-  var defaultImage = ogMetaData.defaultImage;
-  var sdk = (_d = (_c = (_b = useSendbirdStateContext === null || useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext()) === null || _b === void 0 ? void 0 : _b.stores) === null || _c === void 0 ? void 0 : _c.sdkStore) === null || _d === void 0 ? void 0 : _d.sdk;
-
-  var _e = LocalizationContext.useLocalization(),
-      stringSet = _e.stringSet,
-      dateLocale = _e.dateLocale;
-
-  var _f = React.useContext(UserProfileContext.UserProfileContext),
-      disableUserProfile = _f.disableUserProfile,
-      renderUserProfile = _f.renderUserProfile;
-
-  var _g = React.useState({}),
-      contextStyle = _g[0],
-      setContextStyle = _g[1];
-
-  var _h = React.useState(false),
-      contextMenu = _h[0],
-      setContextMenu = _h[1];
-
-  var onLongPress = useLongPress.useLongPress({
-    onLongPress: function () {
-      return setContextMenu(true);
-    },
+  const onLongPress = useLongPress.useLongPress({
+    onLongPress: () => setShowContextMenu(true),
     onClick: openLink
   }, {
     delay: 300
   });
-  var messageComponentRef = React.useRef(null);
-  var contextMenuRef = React.useRef(null);
-  var mobileMenuRef = React.useRef(null);
-  var avatarRef = React.useRef(null);
-  var isPending = index.checkIsPending(status);
-  var isFailed = index.checkIsFailed(status);
-  var sender = index.getSenderFromMessage(message);
-  var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
-  var MemoizedMessageText = React.useMemo(function () {
-    return function () {
-      var wordClassName = 'sendbird-openchannel-og-message--word';
-      var splitMessage = message.message.split(' ');
-      var matchedMessage = splitMessage.map(function (word) {
-        var _a, _b;
-
-        return /*#__PURE__*/React__default["default"].createElement(ui_Word, {
-          key: uuid.uuidv4(),
-          word: word,
-          message: message,
-          isByMe: ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId) === ((_b = sdk === null || sdk === void 0 ? void 0 : sdk.currentUser) === null || _b === void 0 ? void 0 : _b.userId)
-        });
-      });
-
-      if (message.updatedAt > 0) {
-        matchedMessage.push( /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
-          key: uuid.uuidv4(),
-          className: wordClassName,
-          type: ui_Label.LabelTypography.BODY_1,
-          color: ui_Label.LabelColors.ONBACKGROUND_2
-        }, stringSet.MESSAGE_EDITED));
-      }
-
-      return matchedMessage;
-    };
-  }, [message, message.updatedAt]); // place conxt menu top depending clientHeight of message component
-
-  React.useEffect(function () {
-    var _a;
+  const messageComponentRef = React.useRef(null);
+  const contextMenuRef = React.useRef(null);
+  const mobileMenuRef = React.useRef(null);
+  const avatarRef = React.useRef(null);
+  const isPending = index.checkIsPending(status);
+  const isFailed = index.checkIsFailed(status);
+  const sender = index.getSenderFromMessage(message);
+  const tokens = React.useMemo(() => {
+    return tokenize.tokenizeMessage({
+      messageText: message.message
+    });
+  }, [message === null || message === void 0 ? void 0 : message.updatedAt]);
 
-    if (((_a = messageComponentRef === null || messageComponentRef === void 0 ? void 0 : messageComponentRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) > 36) {
+  // place conxt menu top depending clientHeight of message component
+  React.useEffect(() => {
+    var _messageComponentRef$;
+    if ((messageComponentRef === null || messageComponentRef === void 0 ? void 0 : (_messageComponentRef$ = messageComponentRef.current) === null || _messageComponentRef$ === void 0 ? void 0 : _messageComponentRef$.clientHeight) > 36) {
       setContextStyle({
         top: '8px '
       });
@@ -158,46 +125,45 @@ function OpenchannelOGMessage(_a) {
       });
     }
   }, [window.innerWidth]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-openchannel-og-message'], false).join(' '),
+  if (!message || message.messageType !== 'user') {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
+  }
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-openchannel-og-message'].join(' '),
     ref: messageComponentRef
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, isMobile ? _rollupPluginBabelHelpers._objectSpread2({}, onLongPress) : {}), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-openchannel-og-message__top"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-openchannel-og-message__top__left"
   }, !chainTop && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
-    menuTrigger: function (toggleDropdown) {
-      return /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
-        className: "sendbird-openchannel-og-message__top__left__avatar",
-        src: sender.profileUrl || '',
-        ref: avatarRef,
-        width: "28px",
-        height: "28px",
-        onClick: function () {
-          if (!disableUserProfile) {
-            toggleDropdown();
-          }
-        }
-      });
-    },
-    menuItems: function (closeDropdown) {
-      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
-        parentRef: avatarRef,
-        parentContainRef: avatarRef,
-        closeDropdown: closeDropdown,
-        style: {
-          paddingTop: '0px',
-          paddingBottom: '0px'
+    menuTrigger: toggleDropdown => /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+      className: "sendbird-openchannel-og-message__top__left__avatar",
+      src: sender.profileUrl || '',
+      ref: avatarRef,
+      width: "28px",
+      height: "28px",
+      onClick: () => {
+        if (!disableUserProfile) {
+          toggleDropdown();
         }
-      }, renderUserProfile ? renderUserProfile({
-        user: sender,
-        close: closeDropdown
-      }) : /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
-        user: sender,
-        onSuccess: closeDropdown,
-        disableMessaging: true
-      }));
-    }
+      }
+    }),
+    menuItems: closeDropdown => /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
+      parentRef: avatarRef,
+      parentContainRef: avatarRef,
+      closeDropdown: closeDropdown,
+      style: {
+        paddingTop: '0px',
+        paddingBottom: '0px'
+      }
+    }, renderUserProfile ? renderUserProfile({
+      user: sender,
+      close: closeDropdown
+    }) : /*#__PURE__*/React__default["default"].createElement(ui_UserProfile, {
+      user: sender,
+      onSuccess: closeDropdown,
+      disableMessaging: true
+    }))
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-openchannel-og-message__top__right"
   }, !chainTop && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -218,86 +184,91 @@ function OpenchannelOGMessage(_a) {
     className: "sendbird-openchannel-og-message__top__right__description__message",
     type: ui_Label.LabelTypography.BODY_1,
     color: ui_Label.LabelColors.ONBACKGROUND_1
-  }, MemoizedMessageText()))), !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(index$2.TextFragment, {
+    tokens: tokens
+  }), ((_message$updatedAt = message === null || message === void 0 ? void 0 : message.updatedAt) !== null && _message$updatedAt !== void 0 ? _message$updatedAt : 0) > 0 && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    key: uuid.uuidv4(),
+    className: "sendbird-openchannel-og-message--word",
+    type: ui_Label.LabelTypography.BODY_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, stringSet.MESSAGE_EDITED)))), !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-openchannel-og-message__top__context-menu",
     ref: contextMenuRef,
     style: contextStyle
   }, /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
-    menuTrigger: function (toggleDropdown) {
-      return index.showMenuTrigger({
-        message: message,
-        userId: userId,
-        status: status
-      }) && /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
-        className: "sendbird-openchannel-og-message__top__context-menu--icon",
-        width: "32px",
-        height: "32px",
-        onClick: function () {
-          toggleDropdown();
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-        type: ui_Icon.IconTypes.MORE,
-        fillColor: ui_Icon.IconColors.CONTENT_INVERSE,
-        width: "24px",
-        height: "24px"
-      }));
-    },
-    menuItems: function (closeDropdown) {
-      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
-        parentRef: contextMenuRef,
-        parentContainRef: contextMenuRef,
-        closeDropdown: closeDropdown,
-        openLeft: true
-      }, index.isFineCopy({
-        message: message,
-        userId: userId,
-        status: status
-      }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
-        className: "sendbird-openchannel-og-message__top__context-menu__copy",
-        onClick: function () {
-          utils.copyToClipboard(message.message);
-          closeDropdown();
-        }
-      }, stringSet.CONTEXT_MENU_DROPDOWN__COPY), index.isFineEdit({
-        message: message,
-        userId: userId,
-        status: status
-      }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
-        className: "sendbird-openchannel-og-message__top__context-menu__edit",
-        onClick: function () {
-          if (disabled) {
-            return;
-          }
-
-          showEdit(true);
-          closeDropdown();
+    menuTrigger: toggleDropdown => index.showMenuTrigger({
+      message: message,
+      userId: userId,
+      status: status
+    }) && /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
+      className: "sendbird-openchannel-og-message__top__context-menu--icon",
+      width: "32px",
+      height: "32px",
+      onClick: () => {
+        toggleDropdown();
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+      type: ui_Icon.IconTypes.MORE,
+      fillColor: ui_Icon.IconColors.CONTENT_INVERSE,
+      width: "24px",
+      height: "24px"
+    })),
+    menuItems: closeDropdown => /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
+      parentRef: contextMenuRef,
+      parentContainRef: contextMenuRef,
+      closeDropdown: closeDropdown,
+      openLeft: true
+    }, index.isFineCopy({
+      message,
+      userId,
+      status
+    }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+      className: "sendbird-openchannel-og-message__top__context-menu__copy",
+      onClick: () => {
+        utils.copyToClipboard(message.message);
+        closeDropdown();
+      },
+      dataSbId: "open_channel_og_message_menu_copy"
+    }, stringSet.CONTEXT_MENU_DROPDOWN__COPY), !isEphemeral && index.isFineEdit({
+      message,
+      userId,
+      status
+    }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+      className: "sendbird-openchannel-og-message__top__context-menu__edit",
+      onClick: () => {
+        if (disabled) {
+          return;
         }
-      }, stringSet.CONTEXT_MENU_DROPDOWN__EDIT), index.isFineResend({
-        message: message,
-        userId: userId,
-        status: status
-      }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
-        className: "sendbird-openchannel-og-message__top__context-menu__resend",
-        onClick: function () {
-          resendMessage(message);
-          closeDropdown();
+        showEdit(true);
+        closeDropdown();
+      },
+      dataSbId: "open_channel_og_message_menu_edit"
+    }, stringSet.CONTEXT_MENU_DROPDOWN__EDIT), index.isFineResend({
+      message,
+      userId,
+      status
+    }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+      className: "sendbird-openchannel-og-message__top__context-menu__resend",
+      onClick: () => {
+        resendMessage(message);
+        closeDropdown();
+      },
+      dataSbId: "open_channel_og_message_menu_resend"
+    }, stringSet.CONTEXT_MENU_DROPDOWN__RESEND), !isEphemeral && index.isFineDelete({
+      message,
+      userId,
+      status
+    }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+      className: "sendbird-openchannel-og-message__top__context-menu__delete",
+      onClick: () => {
+        if (disabled) {
+          return;
         }
-      }, stringSet.CONTEXT_MENU_DROPDOWN__RESEND), index.isFineDelete({
-        message: message,
-        userId: userId,
-        status: status
-      }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
-        className: "sendbird-openchannel-og-message__top__context-menu__delete",
-        onClick: function () {
-          if (disabled) {
-            return;
-          }
-
-          showRemove(true);
-          closeDropdown();
-        }
-      }, stringSet.CONTEXT_MENU_DROPDOWN__DELETE));
-    }
+        showRemove(true);
+        closeDropdown();
+      },
+      dataSbId: "open_channel_og_message_menu_delete"
+    }, stringSet.CONTEXT_MENU_DROPDOWN__DELETE))
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-openchannel-og-message__bottom"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -316,13 +287,13 @@ function OpenchannelOGMessage(_a) {
     className: "sendbird-openchannel-og-message__bottom__og-tag__description",
     type: ui_Label.LabelTypography.BODY_2,
     color: ui_Label.LabelColors.ONBACKGROUND_1
-  }, ogMetaData.description), ogMetaData.url && /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
+  }, ogMetaData.description), ogMetaData.url && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-openchannel-og-message__bottom__og-tag__thumbnail",
     role: "button",
     onClick: openLink,
     onKeyDown: openLink,
     tabIndex: 0
-  }, isMobile ? tslib_es6.__assign({}, onLongPress) : {}), defaultImage && /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
+  }, defaultImage && /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
     className: "sendbird-openchannel-og-message__bottom__og-tag__thumbnail__image",
     url: defaultImage.url || '',
     alt: defaultImage.alt || '',
@@ -351,26 +322,26 @@ function OpenchannelOGMessage(_a) {
     fillColor: ui_Icon.IconColors.ERROR,
     width: "16px",
     height: "16px"
-  }))), contextMenu && /*#__PURE__*/React__default["default"].createElement(index.OpenChannelMobileMenu, {
+  })))), showContextMenu && /*#__PURE__*/React__default["default"].createElement(index.OpenChannelMobileMenu, {
     message: message,
     parentRef: mobileMenuRef,
-    hideMenu: function () {
-      setContextMenu(false);
+    hideMenu: () => {
+      setShowContextMenu(false);
     },
-    showRemove: function () {
-      setContextMenu(false);
+    showRemove: () => {
+      setShowContextMenu(false);
       showRemove(true);
     },
-    showEdit: function () {
-      setContextMenu(false);
+    showEdit: () => {
+      setShowContextMenu(false);
       showEdit(true);
     },
-    copyToClipboard: function () {
-      setContextMenu(false);
+    copyToClipboard: () => {
+      setShowContextMenu(false);
       utils.copyToClipboard(message === null || message === void 0 ? void 0 : message.message);
     },
-    resendMessage: function () {
-      setContextMenu(false);
+    resendMessage: () => {
+      setShowContextMenu(false);
       resendMessage(message);
     }
   }));