@sendbird/uikit-react 3.6.11-beta.2 → 3.7.0-rc.0

package/cjs/ui/OpenchannelThumbnailMessage.js

@@ -1,34 +1,36 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-83d7e84b.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-94c18dc1.js');
+var tslib_es6 = require('../tslib.es6-2f2b0bca.js');
 var React = require('react');
-var index$1 = require('../index-c9b003b3.js');
-var LocalizationContext = require('../LocalizationContext-482c1343.js');
+var index$1 = require('../index-b6d51e74.js');
+var LocalizationContext = require('../LocalizationContext-5009012e.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-18720f0d.js');
+var ui_Label = require('../index-35820a94.js');
 var ui_Loader = require('./Loader.js');
 var ui_UserProfile = require('./UserProfile.js');
-var UserProfileContext = require('../UserProfileContext-fa8d0383.js');
-var index = require('../index-6ab9a40d.js');
-var MediaQueryContext = require('../MediaQueryContext-73aac8cf.js');
-var useLongPress = require('../useLongPress-1c0f4696.js');
-require('../index-d04f312e.js');
-require('../stringSet-d00535a5.js');
-require('../uuid-b2806cf5.js');
+var UserProfileContext = require('../UserProfileContext-922a43ec.js');
+var index = require('../index-80a11b6a.js');
+var MediaQueryContext = require('../MediaQueryContext-d6fdbe43.js');
+var useLongPress = require('../useLongPress-c1da8ba7.js');
+require('../index-fd8a0abb.js');
+require('../stringSet-98b52c49.js');
+require('../uuid-c74bbbb6.js');
 require('prop-types');
 require('react-dom');
 require('./SortByRow.js');
-require('../index-fbe9cc73.js');
+require('../index-b995f638.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index.module-a24e9cd7.js');
+require('../index-609b07a2.js');
 require('../sendbirdSelectors.js');
-require('../topics-adde627b.js');
-require('../utils-c47c68b1.js');
+require('../pubSub/topics.js');
+require('../utils-180c6bc8.js');
 require('./Button.js');
+require('../types-66554668.js');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
 
@@ -36,16 +38,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const SUPPORTING_TYPES = {
+var SUPPORTING_TYPES = {
   IMAGE: 'IMAGE',
   VIDEO: 'VIDEO',
   UNSUPPORTED: 'UNSUPPORTED'
 };
-const SUPPORTED_MIMES = {
+var SUPPORTED_MIMES = {
   IMAGE: ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'],
   VIDEO: ['video/mpeg', 'video/ogg', 'video/webm', 'video/mp4']
 };
-const getSupportingFileType = type => {
+var getSupportingFileType = function (type) {
   if (SUPPORTED_MIMES.IMAGE.indexOf(type) >= 0) {
     return SUPPORTING_TYPES.IMAGE;
   }
@@ -55,112 +57,117 @@ const getSupportingFileType = type => {
   return SUPPORTING_TYPES.UNSUPPORTED;
 };
 
-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: () => {
+function OpenchannelThumbnailMessage(_a) {
+  var _b;
+  var className = _a.className,
+    message = _a.message,
+    isOperator = _a.isOperator,
+    _c = _a.isEphemeral,
+    isEphemeral = _c === void 0 ? false : _c,
+    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 _d = LocalizationContext.useLocalization(),
+    stringSet = _d.stringSet,
+    dateLocale = _d.dateLocale;
+  var _e = React.useContext(UserProfileContext.UserProfileContext),
+    disableUserProfile = _e.disableUserProfile,
+    renderUserProfile = _e.renderUserProfile;
+  var _f = React.useState(360),
+    messageWidth = _f[0],
+    setMessageWidth = _f[1];
+  var _g = React.useState(false),
+    contextMenu = _g[0],
+    setContextMenu = _g[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 () {
       setContextMenu(true);
     },
-    onClick: () => {
+    onClick: function () {
       onClick(true);
     }
   });
-  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 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 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;
+  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, _b;
+    var thumbnailWidth = ((_b = (_a = messageRef === null || messageRef === void 0 ? void 0 : messageRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0) - 80;
     setMessageWidth(thumbnailWidth > 360 ? 360 : thumbnailWidth);
   }, []);
   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(' '),
+    className: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-openchannel-thumbnail-message'], false).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: 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();
+    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();
+          }
         }
-      }
-    }),
-    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
-    }))
+      });
+    },
+    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,
+        currentUserId: userId
+      }) : /*#__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", {
@@ -181,69 +188,65 @@ function OpenchannelThumbnailMessage(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers._extends({
     className: "sendbird-openchannel-thumbnail-message__right__body__wrap",
     role: "button",
-    onClick: () => {
+    onClick: function () {
       if (isMessageSent) {
         onClick(true);
       }
     },
-    onKeyDown: () => {
+    onKeyDown: function () {
       if (isMessageSent) {
         onClick(true);
       }
     },
     tabIndex: 0
-  }, isMobile ? _rollupPluginBabelHelpers._objectSpread2({}, onLongPress) : {}), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, isMobile ? tslib_es6.__assign({}, onLongPress) : {}), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-openchannel-thumbnail-message__right__body__wrap__overlay"
-  }), {
-    [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["default"], {
-      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["default"], {
-      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", {
+  }), (_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["default"], {
+    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["default"], {
+    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", {
     className: "sendbird-openchannel-thumbnail-message__right__tail"
   }, isPending && /*#__PURE__*/React__default["default"].createElement(ui_Loader, {
     width: "16px",
@@ -264,65 +267,69 @@ function OpenchannelThumbnailMessage(_ref) {
     className: "sendbird-openchannel-thumbnail-message__context-menu",
     ref: contextMenuRef
   }, (index.isFineResend({
-    message,
-    userId,
-    status
+    message: message,
+    userId: userId,
+    status: 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;
-        }
-        showRemove(true);
-        closeDropdown();
-      },
-      dataSbId: "open_channel_thumbnail_message_menu_delete"
-    }, stringSet.CONTEXT_MENU_DROPDOWN__DELETE))
+    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();
+        },
+        dataSbId: "open_channel_thumbnail_message_menu_resend"
+      }, stringSet.CONTEXT_MENU_DROPDOWN__RESEND), !isEphemeral && index.isFineDelete({
+        message: message,
+        userId: userId,
+        status: status
+      }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        onClick: function () {
+          if (disabled) {
+            return;
+          }
+          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: () => {
+    hideMenu: function () {
       setContextMenu(false);
     },
-    showRemove: () => {
+    showRemove: function () {
       setContextMenu(false);
       showRemove(true);
     },
-    resendMessage: () => {
+    resendMessage: function () {
       setContextMenu(false);
       resendMessage(message);
     }