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

package/cjs/ui/OpenchannelThumbnailMessage.js

@@ -1,33 +1,32 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-bd6baf0a.js');
-var tslib_es6 = require('../tslib.es6-5a7eb30d.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-c89f311a.js');
 var React = require('react');
-var index$1 = require('../index-5ea12b7a.js');
-var LocalizationContext = require('../LocalizationContext-8780a64e.js');
+var index$1 = require('../index-869e9a94.js');
+var LocalizationContext = require('../LocalizationContext-0e429c3d.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_Label = require('../index-bdd889a2.js');
+var ui_Label = require('../index-6cb0d040.js');
 var ui_Loader = require('./Loader.js');
 var ui_UserProfile = require('./UserProfile.js');
-var UserProfileContext = require('../UserProfileContext-0808e413.js');
-var index = require('../index-8c350889.js');
-var MediaQueryContext = require('../MediaQueryContext-e455934a.js');
-var useLongPress = require('../useLongPress-e7140087.js');
-require('../index-48d85d8f.js');
-require('../stringSet-60660a99.js');
-require('../uuid-a9006ea2.js');
+var UserProfileContext = require('../UserProfileContext-87580795.js');
+var index = require('../index-99f16473.js');
+var MediaQueryContext = require('../MediaQueryContext-33fc3b17.js');
+var useLongPress = require('../useLongPress-8037894e.js');
+require('../index-016f7106.js');
+require('../stringSet-106da549.js');
+require('../uuid-12b01f73.js');
 require('prop-types');
 require('react-dom');
 require('./SortByRow.js');
-require('../index-b3371ef2.js');
+require('../index-5231fde8.js');
 require('../utils/message/getOutgoingMessageState.js');
 require('../sendbirdSelectors.js');
-require('../topics-f3f74edc.js');
-require('../utils-708aa730.js');
+require('../topics-b384e6b3.js');
+require('../utils-ad7b5b82.js');
 require('./Button.js');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
@@ -36,142 +35,131 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var SUPPORTING_TYPES = {
+const SUPPORTING_TYPES = {
   IMAGE: 'IMAGE',
   VIDEO: 'VIDEO',
   UNSUPPORTED: 'UNSUPPORTED'
 };
-var SUPPORTED_MIMES = {
+const SUPPORTED_MIMES = {
   IMAGE: ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'],
   VIDEO: ['video/mpeg', 'video/ogg', 'video/webm', 'video/mp4']
 };
-var getSupportingFileType = function (type) {
+const getSupportingFileType = type => {
   if (SUPPORTED_MIMES.IMAGE.indexOf(type) >= 0) {
     return SUPPORTING_TYPES.IMAGE;
   }
-
   if (SUPPORTED_MIMES.VIDEO.indexOf(type) >= 0) {
     return SUPPORTING_TYPES.VIDEO;
   }
-
   return SUPPORTING_TYPES.UNSUPPORTED;
 };
 
-function OpenchannelThumbnailMessage(_a) {
-  var _b;
-
-  var className = _a.className,
-      message = _a.message,
-      isOperator = _a.isOperator,
-      disabled = _a.disabled,
-      userId = _a.userId,
-      chainTop = _a.chainTop,
-      onClick = _a.onClick,
-      showRemove = _a.showRemove,
-      resendMessage = _a.resendMessage;
-  var type = message.type,
-      url = message.url,
-      thumbnails = message.thumbnails,
-      localUrl = message.localUrl;
-  var status = message === null || message === void 0 ? void 0 : message.sendingStatus;
-  var thumbnailUrl = thumbnails && thumbnails.length > 0 && thumbnails[0].url || null;
-
-  var _c = LocalizationContext.useLocalization(),
-      stringSet = _c.stringSet,
-      dateLocale = _c.dateLocale;
-
-  var _d = React.useContext(UserProfileContext.UserProfileContext),
-      disableUserProfile = _d.disableUserProfile,
-      renderUserProfile = _d.renderUserProfile;
-
-  var _e = React.useState(360),
-      messageWidth = _e[0],
-      setMessageWidth = _e[1];
-
-  var _f = React.useState(false),
-      contextMenu = _f[0],
-      setContextMenu = _f[1];
-
-  var messageRef = React.useRef(null);
-  var mobileMenuRef = React.useRef(null);
-  var contextMenuRef = React.useRef(null);
-  var avatarRef = React.useRef(null);
-  var onLongPress = useLongPress.useLongPress({
-    onLongPress: function () {
+function OpenchannelThumbnailMessage(_ref) {
+  let {
+    className,
+    message,
+    isOperator,
+    isEphemeral = false,
+    disabled,
+    userId,
+    chainTop,
+    onClick,
+    showRemove,
+    resendMessage
+  } = _ref;
+  const {
+    type,
+    url,
+    thumbnails,
+    localUrl
+  } = message;
+  const status = message === null || message === void 0 ? void 0 : message.sendingStatus;
+  const thumbnailUrl = thumbnails && thumbnails.length > 0 && thumbnails[0].url || null;
+  const {
+    stringSet,
+    dateLocale
+  } = LocalizationContext.useLocalization();
+  const {
+    disableUserProfile,
+    renderUserProfile
+  } = React.useContext(UserProfileContext.UserProfileContext);
+  const [messageWidth, setMessageWidth] = React.useState(360);
+  const [contextMenu, setContextMenu] = React.useState(false);
+  const messageRef = React.useRef(null);
+  const mobileMenuRef = React.useRef(null);
+  const contextMenuRef = React.useRef(null);
+  const avatarRef = React.useRef(null);
+  const onLongPress = useLongPress.useLongPress({
+    onLongPress: () => {
       setContextMenu(true);
     },
-    onClick: function () {
+    onClick: () => {
       onClick(true);
     }
   });
-  var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
-  var memorizedThumbnailPlaceHolder = React.useMemo(function () {
-    return function (type) {
-      return function (_a) {
-        var style = _a.style;
-        return (
-          /*#__PURE__*/
-          // eslint-disable-line
-          React__default["default"].createElement("div", {
-            style: style
-          }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-            type: type,
-            fillColor: ui_Icon.IconColors.ON_BACKGROUND_2,
-            width: "56px",
-            height: "56px"
-          }))
-        );
-      };
-    };
+  const {
+    isMobile
+  } = MediaQueryContext.useMediaQueryContext();
+  const memorizedThumbnailPlaceHolder = React.useMemo(() => type => _ref2 => {
+    let {
+      style
+    } = _ref2;
+    return (
+      /*#__PURE__*/
+      // eslint-disable-line
+      React__default["default"].createElement("div", {
+        style: style
+      }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+        type: type,
+        fillColor: ui_Icon.IconColors.ON_BACKGROUND_2,
+        width: "56px",
+        height: "56px"
+      }))
+    );
   }, []);
-  var isMessageSent = index.checkIsSent(status);
-  var isPending = index.checkIsPending(status);
-  var isFailed = index.checkIsFailed(status);
-  var sender = index.getSenderFromMessage(message);
-  React.useEffect(function () {
-    var _a;
-
-    var thumbnailWidth = ((_a = messageRef === null || messageRef === void 0 ? void 0 : messageRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) - 80;
+  const isMessageSent = index.checkIsSent(status);
+  const isPending = index.checkIsPending(status);
+  const isFailed = index.checkIsFailed(status);
+  const sender = index.getSenderFromMessage(message);
+  React.useEffect(() => {
+    var _messageRef$current$c, _messageRef$current;
+    const thumbnailWidth = ((_messageRef$current$c = messageRef === null || messageRef === void 0 ? void 0 : (_messageRef$current = messageRef.current) === null || _messageRef$current === void 0 ? void 0 : _messageRef$current.clientWidth) !== null && _messageRef$current$c !== void 0 ? _messageRef$current$c : 0) - 80;
     setMessageWidth(thumbnailWidth > 360 ? 360 : thumbnailWidth);
   }, []);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-openchannel-thumbnail-message'], false).join(' '),
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-openchannel-thumbnail-message'].join(' '),
     ref: messageRef
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-openchannel-thumbnail-message__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-thumbnail-message__left__avatar",
-        src: sender.profileUrl || '',
-        ref: avatarRef,
-        width: "28px",
-        height: "28px",
-        onClick: function () {
-          if (!disableUserProfile) {
-            toggleDropdown();
-          }
+    menuTrigger: toggleDropdown => /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+      className: "sendbird-openchannel-thumbnail-message__left__avatar",
+      src: sender.profileUrl || '',
+      ref: avatarRef,
+      width: "28px",
+      height: "28px",
+      onClick: () => {
+        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'
-        }
-      }, 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-thumbnail-message__right"
   }, !chainTop && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -192,65 +180,69 @@ function OpenchannelThumbnailMessage(_a) {
   }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
     className: "sendbird-openchannel-thumbnail-message__right__body__wrap",
     role: "button",
-    onClick: function () {
+    onClick: () => {
       if (isMessageSent) {
         onClick(true);
       }
     },
-    onKeyDown: function () {
+    onKeyDown: () => {
       if (isMessageSent) {
         onClick(true);
       }
     },
     tabIndex: 0
-  }, isMobile ? tslib_es6.__assign({}, onLongPress) : {}), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, isMobile ? _rollupPluginBabelHelpers._objectSpread2({}, onLongPress) : {}), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-openchannel-thumbnail-message__right__body__wrap__overlay"
-  }), (_b = {}, _b[SUPPORTING_TYPES.VIDEO] = url || localUrl ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video"
-  }, thumbnailUrl ? /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
-    className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video",
-    url: thumbnailUrl,
-    width: messageWidth,
-    height: "270px",
-    alt: "image",
-    placeHolder: memorizedThumbnailPlaceHolder(ui_Icon.IconTypes.PLAY)
-  }) : /*#__PURE__*/React__default["default"].createElement("video", {
-    className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video__video"
-  }, /*#__PURE__*/React__default["default"].createElement("source", {
-    src: url || localUrl,
-    type: type
-  })), /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-    className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video__icon",
-    type: ui_Icon.IconTypes.PLAY,
-    fillColor: ui_Icon.IconColors.ON_BACKGROUND_2,
-    width: "56px",
-    height: "56px"
-  })) : /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-    className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video--icon",
-    type: ui_Icon.IconTypes.PHOTO,
-    fillColor: ui_Icon.IconColors.ON_BACKGROUND_2,
-    width: "56px",
-    height: "56px"
-  }), _b[SUPPORTING_TYPES.IMAGE] = url || localUrl ? /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
-    className: "sendbird-openchannel-thumbnail-message__right__body__wrap__image",
-    url: thumbnailUrl || url || localUrl,
-    alt: "image",
-    width: messageWidth,
-    height: "270px",
-    placeHolder: memorizedThumbnailPlaceHolder(ui_Icon.IconTypes.PHOTO)
-  }) : /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-    className: "sendbird-openchannel-thumbnail-message__right__body__wrap__image--icon",
-    type: ui_Icon.IconTypes.PHOTO,
-    fillColor: ui_Icon.IconColors.ON_BACKGROUND_2,
-    width: "56px",
-    height: "56px"
-  }), _b[SUPPORTING_TYPES.UNSUPPORTED] = /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-    className: "sendbird-openchannel-thumbnail-message__right__body__wrap__unknown",
-    type: ui_Icon.IconTypes.PHOTO,
-    fillColor: ui_Icon.IconColors.ON_BACKGROUND_2,
-    width: "56px",
-    height: "56px"
-  }), _b)[getSupportingFileType(type)])), (isPending || isFailed) && /*#__PURE__*/React__default["default"].createElement("div", {
+  }), {
+    [SUPPORTING_TYPES.VIDEO]: url || localUrl ? /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video"
+    }, thumbnailUrl ? /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
+      className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video",
+      url: thumbnailUrl,
+      width: messageWidth,
+      height: "270px",
+      alt: "image",
+      placeHolder: memorizedThumbnailPlaceHolder(ui_Icon.IconTypes.PLAY)
+    }) : /*#__PURE__*/React__default["default"].createElement("video", {
+      className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video__video"
+    }, /*#__PURE__*/React__default["default"].createElement("source", {
+      src: url || localUrl,
+      type: type
+    })), /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+      className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video__icon",
+      type: ui_Icon.IconTypes.PLAY,
+      fillColor: ui_Icon.IconColors.ON_BACKGROUND_2,
+      width: "56px",
+      height: "56px"
+    })) : /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+      className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video--icon",
+      type: ui_Icon.IconTypes.PHOTO,
+      fillColor: ui_Icon.IconColors.ON_BACKGROUND_2,
+      width: "56px",
+      height: "56px"
+    }),
+    [SUPPORTING_TYPES.IMAGE]: url || localUrl ? /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
+      className: "sendbird-openchannel-thumbnail-message__right__body__wrap__image",
+      url: thumbnailUrl || url || localUrl,
+      alt: "image",
+      width: messageWidth,
+      height: "270px",
+      placeHolder: memorizedThumbnailPlaceHolder(ui_Icon.IconTypes.PHOTO)
+    }) : /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+      className: "sendbird-openchannel-thumbnail-message__right__body__wrap__image--icon",
+      type: ui_Icon.IconTypes.PHOTO,
+      fillColor: ui_Icon.IconColors.ON_BACKGROUND_2,
+      width: "56px",
+      height: "56px"
+    }),
+    [SUPPORTING_TYPES.UNSUPPORTED]: /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+      className: "sendbird-openchannel-thumbnail-message__right__body__wrap__unknown",
+      type: ui_Icon.IconTypes.PHOTO,
+      fillColor: ui_Icon.IconColors.ON_BACKGROUND_2,
+      width: "56px",
+      height: "56px"
+    })
+  }[getSupportingFileType(type)])), (isPending || isFailed) && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-openchannel-thumbnail-message__right__tail"
   }, isPending && /*#__PURE__*/React__default["default"].createElement(ui_Loader, {
     width: "16px",
@@ -270,65 +262,66 @@ function OpenchannelThumbnailMessage(_a) {
   }))), !isMobile && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-openchannel-thumbnail-message__context-menu",
     ref: contextMenuRef
-  }, /*#__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-thumbnail-message__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: function (closeDropdown) {
-      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
-        parentRef: contextMenuRef,
-        parentContainRef: contextMenuRef,
-        closeDropdown: closeDropdown,
-        openLeft: true
-      }, index.isFineResend({
-        message: message,
-        userId: userId,
-        status: status
-      }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
-        onClick: function () {
-          resendMessage(message);
-          closeDropdown();
+  }, (index.isFineResend({
+    message,
+    userId,
+    status
+  }) || !isEphemeral) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
+    menuTrigger: toggleDropdown => index.showMenuTrigger({
+      message,
+      userId,
+      status
+    }) && /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
+      className: "sendbird-openchannel-thumbnail-message__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.isFineResend({
+      message,
+      userId,
+      status
+    }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+      onClick: () => {
+        resendMessage(message);
+        closeDropdown();
+      },
+      dataSbId: "open_channel_thumbnail_message_menu_resend"
+    }, stringSet.CONTEXT_MENU_DROPDOWN__RESEND), !isEphemeral && index.isFineDelete({
+      message,
+      userId,
+      status
+    }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+      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, {
-        onClick: function () {
-          if (disabled) {
-            return;
-          }
-
-          showRemove(true);
-          closeDropdown();
-        }
-      }, stringSet.CONTEXT_MENU_DROPDOWN__DELETE));
-    }
-  })), contextMenu && /*#__PURE__*/React__default["default"].createElement(index.OpenChannelMobileMenu, {
+        showRemove(true);
+        closeDropdown();
+      },
+      dataSbId: "open_channel_thumbnail_message_menu_delete"
+    }, stringSet.CONTEXT_MENU_DROPDOWN__DELETE))
+  }))), contextMenu && /*#__PURE__*/React__default["default"].createElement(index.OpenChannelMobileMenu, {
     message: message,
     parentRef: mobileMenuRef,
-    hideMenu: function () {
+    hideMenu: () => {
       setContextMenu(false);
     },
-    showRemove: function () {
+    showRemove: () => {
       setContextMenu(false);
       showRemove(true);
     },
-    resendMessage: function () {
+    resendMessage: () => {
       setContextMenu(false);
       resendMessage(message);
     }