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

package/ui/OpenchannelThumbnailMessage.js

@@ -1,45 +1,47 @@
-import { b as _extends, _ as _objectSpread2 } from '../_rollupPluginBabelHelpers-50c9576f.js';
+import { _ as _extends } from '../_rollupPluginBabelHelpers-07dcbc2b.js';
+import { c as __spreadArray, _ as __assign } from '../tslib.es6-0c779aab.js';
 import React__default, { useContext, useState, useRef, useMemo, useEffect } from 'react';
-import { f as format } from '../index-daa3ae67.js';
-import { u as useLocalization } from '../LocalizationContext-2463058b.js';
+import { f as format } from '../index-c81fd6ec.js';
+import { u as useLocalization } from '../LocalizationContext-d18a86d8.js';
 import Avatar from './Avatar.js';
 import ContextMenu, { MenuItems, MenuItem } from './ContextMenu.js';
 import Icon, { IconColors, IconTypes } from './Icon.js';
 import IconButton from './IconButton.js';
 import ImageRenderer from './ImageRenderer.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-aa520474.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-12103973.js';
 import Loader from './Loader.js';
 import UserProfile from './UserProfile.js';
-import { a as UserProfileContext } from '../UserProfileContext-4ae968eb.js';
-import { g as getSenderFromMessage, b as isFineResend, s as showMenuTrigger, c as isFineDelete, O as OpenChannelMobileMenu, f as checkIsSent, d as checkIsPending, e as checkIsFailed } from '../index-98138798.js';
-import { u as useMediaQueryContext } from '../MediaQueryContext-e3429d12.js';
-import { u as useLongPress } from '../useLongPress-5e1ad951.js';
-import '../index-7700a436.js';
-import '../stringSet-2814bf17.js';
-import '../uuid-16373bba.js';
+import { a as UserProfileContext } from '../UserProfileContext-26e71f9a.js';
+import { g as getSenderFromMessage, b as isFineResend, s as showMenuTrigger, c as isFineDelete, O as OpenChannelMobileMenu, f as checkIsSent, d as checkIsPending, e as checkIsFailed } from '../index-8c72f0bd.js';
+import { u as useMediaQueryContext } from '../MediaQueryContext-3eeeec4f.js';
+import { u as useLongPress } from '../useLongPress-322bb6a3.js';
+import '../index-d3f61405.js';
+import '../stringSet-1106c8ec.js';
+import '../uuid-3c77ef7b.js';
 import 'prop-types';
 import 'react-dom';
 import './SortByRow.js';
-import '../index-5d6a0f12.js';
+import '../index-fc1642cb.js';
 import '../utils/message/getOutgoingMessageState.js';
-import '../index.module-60af77d3.js';
+import '../index-c6095960.js';
 import '../sendbirdSelectors.js';
-import '../topics-5659403d.js';
-import '../utils-407da489.js';
+import '../pubSub/topics.js';
+import '../utils-74c161a0.js';
 import './Button.js';
+import '../types-4ffc52f6.js';
 import '../useSendbirdStateContext.js';
 import '../withSendbird.js';
 
-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;
   }
@@ -49,112 +51,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
-  } = useLocalization();
-  const {
-    disableUserProfile,
-    renderUserProfile
-  } = useContext(UserProfileContext);
-  const [messageWidth, setMessageWidth] = useState(360);
-  const [contextMenu, setContextMenu] = useState(false);
-  const messageRef = useRef(null);
-  const mobileMenuRef = useRef(null);
-  const contextMenuRef = useRef(null);
-  const avatarRef = useRef(null);
-  const onLongPress = 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 = useLocalization(),
+    stringSet = _d.stringSet,
+    dateLocale = _d.dateLocale;
+  var _e = useContext(UserProfileContext),
+    disableUserProfile = _e.disableUserProfile,
+    renderUserProfile = _e.renderUserProfile;
+  var _f = useState(360),
+    messageWidth = _f[0],
+    setMessageWidth = _f[1];
+  var _g = useState(false),
+    contextMenu = _g[0],
+    setContextMenu = _g[1];
+  var messageRef = useRef(null);
+  var mobileMenuRef = useRef(null);
+  var contextMenuRef = useRef(null);
+  var avatarRef = useRef(null);
+  var onLongPress = useLongPress({
+    onLongPress: function () {
       setContextMenu(true);
     },
-    onClick: () => {
+    onClick: function () {
       onClick(true);
     }
   });
-  const {
-    isMobile
-  } = useMediaQueryContext();
-  const memorizedThumbnailPlaceHolder = useMemo(() => type => _ref2 => {
-    let {
-      style
-    } = _ref2;
-    return (
-      /*#__PURE__*/
-      // eslint-disable-line
-      React__default.createElement("div", {
-        style: style
-      }, /*#__PURE__*/React__default.createElement(Icon, {
-        type: type,
-        fillColor: IconColors.ON_BACKGROUND_2,
-        width: "56px",
-        height: "56px"
-      }))
-    );
+  var isMobile = useMediaQueryContext().isMobile;
+  var memorizedThumbnailPlaceHolder = useMemo(function () {
+    return function (type) {
+      return function (_a) {
+        var style = _a.style;
+        return (
+          /*#__PURE__*/
+          // eslint-disable-line
+          React__default.createElement("div", {
+            style: style
+          }, /*#__PURE__*/React__default.createElement(Icon, {
+            type: type,
+            fillColor: IconColors.ON_BACKGROUND_2,
+            width: "56px",
+            height: "56px"
+          }))
+        );
+      };
+    };
   }, []);
-  const isMessageSent = checkIsSent(status);
-  const isPending = checkIsPending(status);
-  const isFailed = checkIsFailed(status);
-  const sender = getSenderFromMessage(message);
-  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 = checkIsSent(status);
+  var isPending = checkIsPending(status);
+  var isFailed = checkIsFailed(status);
+  var sender = getSenderFromMessage(message);
+  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.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-openchannel-thumbnail-message'].join(' '),
+    className: __spreadArray(__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-openchannel-thumbnail-message'], false).join(' '),
     ref: messageRef
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-openchannel-thumbnail-message__left"
   }, !chainTop && /*#__PURE__*/React__default.createElement(ContextMenu, {
-    menuTrigger: toggleDropdown => /*#__PURE__*/React__default.createElement(Avatar, {
-      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.createElement(Avatar, {
+        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.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
-    }))
+      });
+    },
+    menuItems: function (closeDropdown) {
+      return /*#__PURE__*/React__default.createElement(MenuItems, {
+        parentRef: avatarRef,
+        parentContainRef: avatarRef,
+        closeDropdown: closeDropdown,
+        style: {
+          paddingTop: '0px',
+          paddingBottom: '0px'
+        }
+      }, renderUserProfile ? renderUserProfile({
+        user: sender,
+        close: closeDropdown,
+        currentUserId: userId
+      }) : /*#__PURE__*/React__default.createElement(UserProfile, {
+        user: sender,
+        onSuccess: closeDropdown,
+        disableMessaging: true
+      }));
+    }
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-openchannel-thumbnail-message__right"
   }, !chainTop && /*#__PURE__*/React__default.createElement("div", {
@@ -175,69 +182,65 @@ function OpenchannelThumbnailMessage(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", _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 ? _objectSpread2({}, onLongPress) : {}), /*#__PURE__*/React__default.createElement("div", {
+  }, isMobile ? __assign({}, onLongPress) : {}), /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-openchannel-thumbnail-message__right__body__wrap__overlay"
-  }), {
-    [SUPPORTING_TYPES.VIDEO]: url || localUrl ? /*#__PURE__*/React__default.createElement("div", {
-      className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video"
-    }, thumbnailUrl ? /*#__PURE__*/React__default.createElement(ImageRenderer, {
-      className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video",
-      url: thumbnailUrl,
-      width: messageWidth,
-      height: "270px",
-      alt: "image",
-      placeHolder: memorizedThumbnailPlaceHolder(IconTypes.PLAY)
-    }) : /*#__PURE__*/React__default.createElement("video", {
-      className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video__video"
-    }, /*#__PURE__*/React__default.createElement("source", {
-      src: url || localUrl,
-      type: type
-    })), /*#__PURE__*/React__default.createElement(Icon, {
-      className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video__icon",
-      type: IconTypes.PLAY,
-      fillColor: IconColors.ON_BACKGROUND_2,
-      width: "56px",
-      height: "56px"
-    })) : /*#__PURE__*/React__default.createElement(Icon, {
-      className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video--icon",
-      type: IconTypes.PHOTO,
-      fillColor: IconColors.ON_BACKGROUND_2,
-      width: "56px",
-      height: "56px"
-    }),
-    [SUPPORTING_TYPES.IMAGE]: url || localUrl ? /*#__PURE__*/React__default.createElement(ImageRenderer, {
-      className: "sendbird-openchannel-thumbnail-message__right__body__wrap__image",
-      url: thumbnailUrl || url || localUrl,
-      alt: "image",
-      width: messageWidth,
-      height: "270px",
-      placeHolder: memorizedThumbnailPlaceHolder(IconTypes.PHOTO)
-    }) : /*#__PURE__*/React__default.createElement(Icon, {
-      className: "sendbird-openchannel-thumbnail-message__right__body__wrap__image--icon",
-      type: IconTypes.PHOTO,
-      fillColor: IconColors.ON_BACKGROUND_2,
-      width: "56px",
-      height: "56px"
-    }),
-    [SUPPORTING_TYPES.UNSUPPORTED]: /*#__PURE__*/React__default.createElement(Icon, {
-      className: "sendbird-openchannel-thumbnail-message__right__body__wrap__unknown",
-      type: IconTypes.PHOTO,
-      fillColor: IconColors.ON_BACKGROUND_2,
-      width: "56px",
-      height: "56px"
-    })
-  }[getSupportingFileType(type)])), (isPending || isFailed) && /*#__PURE__*/React__default.createElement("div", {
+  }), (_b = {}, _b[SUPPORTING_TYPES.VIDEO] = url || localUrl ? /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video"
+  }, thumbnailUrl ? /*#__PURE__*/React__default.createElement(ImageRenderer, {
+    className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video",
+    url: thumbnailUrl,
+    width: messageWidth,
+    height: "270px",
+    alt: "image",
+    placeHolder: memorizedThumbnailPlaceHolder(IconTypes.PLAY)
+  }) : /*#__PURE__*/React__default.createElement("video", {
+    className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video__video"
+  }, /*#__PURE__*/React__default.createElement("source", {
+    src: url || localUrl,
+    type: type
+  })), /*#__PURE__*/React__default.createElement(Icon, {
+    className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video__icon",
+    type: IconTypes.PLAY,
+    fillColor: IconColors.ON_BACKGROUND_2,
+    width: "56px",
+    height: "56px"
+  })) : /*#__PURE__*/React__default.createElement(Icon, {
+    className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video--icon",
+    type: IconTypes.PHOTO,
+    fillColor: IconColors.ON_BACKGROUND_2,
+    width: "56px",
+    height: "56px"
+  }), _b[SUPPORTING_TYPES.IMAGE] = url || localUrl ? /*#__PURE__*/React__default.createElement(ImageRenderer, {
+    className: "sendbird-openchannel-thumbnail-message__right__body__wrap__image",
+    url: thumbnailUrl || url || localUrl,
+    alt: "image",
+    width: messageWidth,
+    height: "270px",
+    placeHolder: memorizedThumbnailPlaceHolder(IconTypes.PHOTO)
+  }) : /*#__PURE__*/React__default.createElement(Icon, {
+    className: "sendbird-openchannel-thumbnail-message__right__body__wrap__image--icon",
+    type: IconTypes.PHOTO,
+    fillColor: IconColors.ON_BACKGROUND_2,
+    width: "56px",
+    height: "56px"
+  }), _b[SUPPORTING_TYPES.UNSUPPORTED] = /*#__PURE__*/React__default.createElement(Icon, {
+    className: "sendbird-openchannel-thumbnail-message__right__body__wrap__unknown",
+    type: IconTypes.PHOTO,
+    fillColor: IconColors.ON_BACKGROUND_2,
+    width: "56px",
+    height: "56px"
+  }), _b)[getSupportingFileType(type)])), (isPending || isFailed) && /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-openchannel-thumbnail-message__right__tail"
   }, isPending && /*#__PURE__*/React__default.createElement(Loader, {
     width: "16px",
@@ -258,65 +261,69 @@ function OpenchannelThumbnailMessage(_ref) {
     className: "sendbird-openchannel-thumbnail-message__context-menu",
     ref: contextMenuRef
   }, (isFineResend({
-    message,
-    userId,
-    status
+    message: message,
+    userId: userId,
+    status: status
   }) || !isEphemeral) && /*#__PURE__*/React__default.createElement(ContextMenu, {
-    menuTrigger: toggleDropdown => showMenuTrigger({
-      message,
-      userId,
-      status
-    }) && /*#__PURE__*/React__default.createElement(IconButton, {
-      className: "sendbird-openchannel-thumbnail-message__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
-    }, isFineResend({
-      message,
-      userId,
-      status
-    }) && /*#__PURE__*/React__default.createElement(MenuItem, {
-      onClick: () => {
-        resendMessage(message);
-        closeDropdown();
-      },
-      dataSbId: "open_channel_thumbnail_message_menu_resend"
-    }, stringSet.CONTEXT_MENU_DROPDOWN__RESEND), !isEphemeral && isFineDelete({
-      message,
-      userId,
-      status
-    }) && /*#__PURE__*/React__default.createElement(MenuItem, {
-      onClick: () => {
-        if (disabled) {
-          return;
-        }
-        showRemove(true);
-        closeDropdown();
-      },
-      dataSbId: "open_channel_thumbnail_message_menu_delete"
-    }, stringSet.CONTEXT_MENU_DROPDOWN__DELETE))
+    menuTrigger: function (toggleDropdown) {
+      return showMenuTrigger({
+        message: message,
+        userId: userId,
+        status: status
+      }) && /*#__PURE__*/React__default.createElement(IconButton, {
+        className: "sendbird-openchannel-thumbnail-message__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: function (closeDropdown) {
+      return /*#__PURE__*/React__default.createElement(MenuItems, {
+        parentRef: contextMenuRef,
+        parentContainRef: contextMenuRef,
+        closeDropdown: closeDropdown,
+        openLeft: true
+      }, isFineResend({
+        message: message,
+        userId: userId,
+        status: status
+      }) && /*#__PURE__*/React__default.createElement(MenuItem, {
+        onClick: function () {
+          resendMessage(message);
+          closeDropdown();
+        },
+        dataSbId: "open_channel_thumbnail_message_menu_resend"
+      }, stringSet.CONTEXT_MENU_DROPDOWN__RESEND), !isEphemeral && isFineDelete({
+        message: message,
+        userId: userId,
+        status: status
+      }) && /*#__PURE__*/React__default.createElement(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.createElement(OpenChannelMobileMenu, {
     message: message,
     parentRef: mobileMenuRef,
-    hideMenu: () => {
+    hideMenu: function () {
       setContextMenu(false);
     },
-    showRemove: () => {
+    showRemove: function () {
       setContextMenu(false);
       showRemove(true);
     },
-    resendMessage: () => {
+    resendMessage: function () {
       setContextMenu(false);
       resendMessage(message);
     }