@sendbird/uikit-react 3.5.0-rc.0 → 3.5.0

package/ui/OpenchannelOGMessage.js

@@ -1,148 +1,115 @@
-import { a as _extends } from '../_rollupPluginBabelHelpers-ed44209e.js';
-import { a as __spreadArray, _ as __assign } from '../tslib.es6-d9fa3716.js';
+import { b as _extends, _ as _objectSpread2 } from '../_rollupPluginBabelHelpers-fb0e05a4.js';
 import React__default, { useContext, useState, useRef, useMemo, useEffect } from 'react';
-import { f as format } from '../index-eadca08d.js';
+import { f as format } from '../index-4455855e.js';
 import Avatar from './Avatar.js';
 import ContextMenu, { MenuItems, MenuItem } from './ContextMenu.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import IconButton from './IconButton.js';
 import ImageRenderer from './ImageRenderer.js';
 import LinkLabel from './LinkLabel.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-95ac9232.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-e33f7f55.js';
 import Loader from './Loader.js';
 import UserProfile from './UserProfile.js';
-import Word from './Word.js';
-import { a as UserProfileContext } from '../UserProfileContext-33a26cc4.js';
-import { u as uuidv4 } from '../uuid-968941a0.js';
-import { c as copyToClipboard } from '../utils-ded73fa5.js';
-import { u as useLocalization } from '../LocalizationContext-60894e38.js';
-import { g as getSenderFromMessage, s as showMenuTrigger, i as isFineCopy, a as isFineEdit, b as isFineResend, c as isFineDelete, O as OpenChannelMobileMenu, d as checkIsPending, e as checkIsFailed } from '../index-2561104e.js';
-import useSendbirdStateContext from '../useSendbirdStateContext.js';
-import { u as useMediaQueryContext } from '../MediaQueryContext-bcf72e28.js';
-import { u as useLongPress } from '../useLongPress-7d9a5f67.js';
-import '../index-5e776774.js';
+import { a as UserProfileContext } from '../UserProfileContext-c776d522.js';
+import { u as uuidv4 } from '../uuid-92d22300.js';
+import { c as copyToClipboard } from '../utils-7f3d0d8c.js';
+import { u as useLocalization } from '../LocalizationContext-04c0c9dc.js';
+import { g as getSenderFromMessage, s as showMenuTrigger, i as isFineCopy, a as isFineEdit, b as isFineResend, c as isFineDelete, O as OpenChannelMobileMenu, d as checkIsPending, e as checkIsFailed } from '../index-c149ea48.js';
+import { u as useMediaQueryContext } from '../MediaQueryContext-ff9dca2b.js';
+import { u as useLongPress } from '../useLongPress-1ab49410.js';
+import { T as TextFragment } from '../index-ebb62af1.js';
+import { t as tokenizeMessage } from '../tokenize-1b053c86.js';
+import '../index-319984d0.js';
 import 'prop-types';
 import 'react-dom';
 import './SortByRow.js';
-import '../index-58e5d82d.js';
+import '../index-cf859f03.js';
 import '../utils/message/getOutgoingMessageState.js';
-import '../stringSet-7ace5726.js';
+import '../stringSet-e0ee1265.js';
 import '../sendbirdSelectors.js';
-import '../topics-d390daf6.js';
-import '../utils-30c326f7.js';
+import '../topics-70f569e9.js';
+import '../utils-56cb7de5.js';
 import './Button.js';
-import './MentionLabel.js';
+import '../useSendbirdStateContext.js';
 import '../withSendbird.js';
+import '../index.module-6b7ed635.js';
+import '../Message/context.js';
+import './MentionLabel.js';
 
-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
+  } = useLocalization();
+  const {
+    isMobile
+  } = useMediaQueryContext();
+  const {
+    disableUserProfile,
+    renderUserProfile
+  } = useContext(UserProfileContext);
+  const [contextStyle, setContextStyle] = useState({});
+  const [showContextMenu, setShowContextMenu] = 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 = useLocalization(),
-      stringSet = _e.stringSet,
-      dateLocale = _e.dateLocale;
-
-  var _f = useContext(UserProfileContext),
-      disableUserProfile = _f.disableUserProfile,
-      renderUserProfile = _f.renderUserProfile;
-
-  var _g = useState({}),
-      contextStyle = _g[0],
-      setContextStyle = _g[1];
-
-  var _h = useState(false),
-      contextMenu = _h[0],
-      setContextMenu = _h[1];
-
-  var onLongPress = useLongPress({
-    onLongPress: function () {
-      return setContextMenu(true);
-    },
+  const onLongPress = useLongPress({
+    onLongPress: () => setShowContextMenu(true),
     onClick: openLink
   }, {
     delay: 300
   });
-  var messageComponentRef = useRef(null);
-  var contextMenuRef = useRef(null);
-  var mobileMenuRef = useRef(null);
-  var avatarRef = useRef(null);
-  var isPending = checkIsPending(status);
-  var isFailed = checkIsFailed(status);
-  var sender = getSenderFromMessage(message);
-  var isMobile = useMediaQueryContext().isMobile;
-  var MemoizedMessageText = 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.createElement(Word, {
-          key: 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.createElement(Label, {
-          key: uuidv4(),
-          className: wordClassName,
-          type: LabelTypography.BODY_1,
-          color: LabelColors.ONBACKGROUND_2
-        }, stringSet.MESSAGE_EDITED));
-      }
-
-      return matchedMessage;
-    };
-  }, [message, message.updatedAt]); // place conxt menu top depending clientHeight of message component
-
-  useEffect(function () {
-    var _a;
+  const messageComponentRef = useRef(null);
+  const contextMenuRef = useRef(null);
+  const mobileMenuRef = useRef(null);
+  const avatarRef = useRef(null);
+  const isPending = checkIsPending(status);
+  const isFailed = checkIsFailed(status);
+  const sender = getSenderFromMessage(message);
+  const tokens = useMemo(() => {
+    return 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
+  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 '
       });
@@ -152,46 +119,45 @@ function OpenchannelOGMessage(_a) {
       });
     }
   }, [window.innerWidth]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: __spreadArray(__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-openchannel-og-message'], false).join(' '),
+  if (!message || message.messageType !== 'user') {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+  }
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", _extends({
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-openchannel-og-message'].join(' '),
     ref: messageComponentRef
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, isMobile ? _objectSpread2({}, onLongPress) : {}), /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-openchannel-og-message__top"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-openchannel-og-message__top__left"
   }, !chainTop && /*#__PURE__*/React__default.createElement(ContextMenu, {
-    menuTrigger: function (toggleDropdown) {
-      return /*#__PURE__*/React__default.createElement(Avatar, {
-        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.createElement(MenuItems, {
-        parentRef: avatarRef,
-        parentContainRef: avatarRef,
-        closeDropdown: closeDropdown,
-        style: {
-          paddingTop: '0px',
-          paddingBottom: '0px'
+    menuTrigger: toggleDropdown => /*#__PURE__*/React__default.createElement(Avatar, {
+      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.createElement(UserProfile, {
-        user: sender,
-        onSuccess: closeDropdown,
-        disableMessaging: true
-      }));
-    }
+      }
+    }),
+    menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(MenuItems, {
+      parentRef: avatarRef,
+      parentContainRef: avatarRef,
+      closeDropdown: closeDropdown,
+      style: {
+        paddingTop: '0px',
+        paddingBottom: '0px'
+      }
+    }, renderUserProfile ? renderUserProfile({
+      user: sender,
+      close: closeDropdown
+    }) : /*#__PURE__*/React__default.createElement(UserProfile, {
+      user: sender,
+      onSuccess: closeDropdown,
+      disableMessaging: true
+    }))
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-openchannel-og-message__top__right"
   }, !chainTop && /*#__PURE__*/React__default.createElement("div", {
@@ -212,86 +178,91 @@ function OpenchannelOGMessage(_a) {
     className: "sendbird-openchannel-og-message__top__right__description__message",
     type: LabelTypography.BODY_1,
     color: LabelColors.ONBACKGROUND_1
-  }, MemoizedMessageText()))), !isMobile && /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(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.createElement(Label, {
+    key: uuidv4(),
+    className: "sendbird-openchannel-og-message--word",
+    type: LabelTypography.BODY_1,
+    color: LabelColors.ONBACKGROUND_2
+  }, stringSet.MESSAGE_EDITED)))), !isMobile && /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-openchannel-og-message__top__context-menu",
     ref: contextMenuRef,
     style: contextStyle
   }, /*#__PURE__*/React__default.createElement(ContextMenu, {
-    menuTrigger: function (toggleDropdown) {
-      return showMenuTrigger({
-        message: message,
-        userId: userId,
-        status: status
-      }) && /*#__PURE__*/React__default.createElement(IconButton, {
-        className: "sendbird-openchannel-og-message__top__context-menu--icon",
-        width: "32px",
-        height: "32px",
-        onClick: function () {
-          toggleDropdown();
-        }
-      }, /*#__PURE__*/React__default.createElement(Icon, {
-        type: IconTypes.MORE,
-        fillColor: IconColors.CONTENT_INVERSE,
-        width: "24px",
-        height: "24px"
-      }));
-    },
-    menuItems: function (closeDropdown) {
-      return /*#__PURE__*/React__default.createElement(MenuItems, {
-        parentRef: contextMenuRef,
-        parentContainRef: contextMenuRef,
-        closeDropdown: closeDropdown,
-        openLeft: true
-      }, isFineCopy({
-        message: message,
-        userId: userId,
-        status: status
-      }) && /*#__PURE__*/React__default.createElement(MenuItem, {
-        className: "sendbird-openchannel-og-message__top__context-menu__copy",
-        onClick: function () {
-          copyToClipboard(message.message);
-          closeDropdown();
-        }
-      }, stringSet.CONTEXT_MENU_DROPDOWN__COPY), isFineEdit({
-        message: message,
-        userId: userId,
-        status: status
-      }) && /*#__PURE__*/React__default.createElement(MenuItem, {
-        className: "sendbird-openchannel-og-message__top__context-menu__edit",
-        onClick: function () {
-          if (disabled) {
-            return;
-          }
-
-          showEdit(true);
-          closeDropdown();
+    menuTrigger: toggleDropdown => showMenuTrigger({
+      message: message,
+      userId: userId,
+      status: status
+    }) && /*#__PURE__*/React__default.createElement(IconButton, {
+      className: "sendbird-openchannel-og-message__top__context-menu--icon",
+      width: "32px",
+      height: "32px",
+      onClick: () => {
+        toggleDropdown();
+      }
+    }, /*#__PURE__*/React__default.createElement(Icon, {
+      type: IconTypes.MORE,
+      fillColor: IconColors.CONTENT_INVERSE,
+      width: "24px",
+      height: "24px"
+    })),
+    menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(MenuItems, {
+      parentRef: contextMenuRef,
+      parentContainRef: contextMenuRef,
+      closeDropdown: closeDropdown,
+      openLeft: true
+    }, isFineCopy({
+      message,
+      userId,
+      status
+    }) && /*#__PURE__*/React__default.createElement(MenuItem, {
+      className: "sendbird-openchannel-og-message__top__context-menu__copy",
+      onClick: () => {
+        copyToClipboard(message.message);
+        closeDropdown();
+      },
+      dataSbId: "open_channel_og_message_menu_copy"
+    }, stringSet.CONTEXT_MENU_DROPDOWN__COPY), !isEphemeral && isFineEdit({
+      message,
+      userId,
+      status
+    }) && /*#__PURE__*/React__default.createElement(MenuItem, {
+      className: "sendbird-openchannel-og-message__top__context-menu__edit",
+      onClick: () => {
+        if (disabled) {
+          return;
         }
-      }, stringSet.CONTEXT_MENU_DROPDOWN__EDIT), isFineResend({
-        message: message,
-        userId: userId,
-        status: status
-      }) && /*#__PURE__*/React__default.createElement(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), isFineResend({
+      message,
+      userId,
+      status
+    }) && /*#__PURE__*/React__default.createElement(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 && isFineDelete({
+      message,
+      userId,
+      status
+    }) && /*#__PURE__*/React__default.createElement(MenuItem, {
+      className: "sendbird-openchannel-og-message__top__context-menu__delete",
+      onClick: () => {
+        if (disabled) {
+          return;
         }
-      }, stringSet.CONTEXT_MENU_DROPDOWN__RESEND), isFineDelete({
-        message: message,
-        userId: userId,
-        status: status
-      }) && /*#__PURE__*/React__default.createElement(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.createElement("div", {
     className: "sendbird-openchannel-og-message__bottom"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -310,13 +281,13 @@ function OpenchannelOGMessage(_a) {
     className: "sendbird-openchannel-og-message__bottom__og-tag__description",
     type: LabelTypography.BODY_2,
     color: LabelColors.ONBACKGROUND_1
-  }, ogMetaData.description), ogMetaData.url && /*#__PURE__*/React__default.createElement("div", _extends({
+  }, ogMetaData.description), ogMetaData.url && /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-openchannel-og-message__bottom__og-tag__thumbnail",
     role: "button",
     onClick: openLink,
     onKeyDown: openLink,
     tabIndex: 0
-  }, isMobile ? __assign({}, onLongPress) : {}), defaultImage && /*#__PURE__*/React__default.createElement(ImageRenderer, {
+  }, defaultImage && /*#__PURE__*/React__default.createElement(ImageRenderer, {
     className: "sendbird-openchannel-og-message__bottom__og-tag__thumbnail__image",
     url: defaultImage.url || '',
     alt: defaultImage.alt || '',
@@ -345,26 +316,26 @@ function OpenchannelOGMessage(_a) {
     fillColor: IconColors.ERROR,
     width: "16px",
     height: "16px"
-  }))), contextMenu && /*#__PURE__*/React__default.createElement(OpenChannelMobileMenu, {
+  })))), showContextMenu && /*#__PURE__*/React__default.createElement(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);
       copyToClipboard(message === null || message === void 0 ? void 0 : message.message);
     },
-    resendMessage: function () {
-      setContextMenu(false);
+    resendMessage: () => {
+      setShowContextMenu(false);
       resendMessage(message);
     }
   }));