@sendbird/uikit-react 3.4.6-rc.1 → 3.4.7-0

package/ui/OpenchannelThumbnailMessage.js

@@ -1,45 +1,44 @@
-import { a as _extends } from '../_rollupPluginBabelHelpers-48b56150.js';
-import { a as __spreadArray, _ as __assign } from '../tslib.es6-85bcd95d.js';
+import { b as _extends, _ as _objectSpread2 } from '../_rollupPluginBabelHelpers-b2d9bfc5.js';
 import React__default, { useContext, useState, useRef, useMemo, useEffect } from 'react';
-import { f as format } from '../index-5cfaecc9.js';
-import { u as useLocalization } from '../LocalizationContext-62966630.js';
+import { f as format } from '../index-f48cfdf7.js';
+import { u as useLocalization } from '../LocalizationContext-9c54e783.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-538fa479.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-4111594a.js';
 import Loader from './Loader.js';
 import UserProfile from './UserProfile.js';
-import { a as UserProfileContext } from '../UserProfileContext-7083bd82.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-df6b2fc4.js';
-import { u as useMediaQueryContext } from '../MediaQueryContext-17146a37.js';
-import { u as useLongPress } from '../useLongPress-08d9369b.js';
-import '../index-6574e8fd.js';
-import '../stringSet-e0fd81b2.js';
-import '../uuid-39d923b9.js';
+import { a as UserProfileContext } from '../UserProfileContext-a8aa4c0f.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-c7cc73db.js';
+import { u as useMediaQueryContext } from '../MediaQueryContext-1988a4bc.js';
+import { u as useLongPress } from '../useLongPress-8acf717c.js';
+import '../index-a9ddd0f5.js';
+import '../stringSet-1f18348a.js';
+import '../uuid-48baadaf.js';
 import 'prop-types';
 import 'react-dom';
 import './SortByRow.js';
-import '../index-1db30515.js';
+import '../index-dbe0e004.js';
 import '../utils/message/getOutgoingMessageState.js';
 import '../sendbirdSelectors.js';
-import '../topics-bc5fee43.js';
-import '../utils-7dc80efd.js';
+import '../topics-d8d10f83.js';
+import '../utils-0c09801e.js';
 import './Button.js';
 import '../useSendbirdStateContext.js';
 import '../withSendbird.js';
 
-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;
   }
@@ -49,116 +48,112 @@ var getSupportingFileType = function (type) {
   return SUPPORTING_TYPES.UNSUPPORTED;
 };
 
-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 () {
+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: () => {
       setContextMenu(true);
     },
-    onClick: function () {
+    onClick: () => {
       onClick(true);
     }
   });
-  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 {
+    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 isMessageSent = checkIsSent(status);
-  var isPending = checkIsPending(status);
-  var isFailed = checkIsFailed(status);
-  var sender = getSenderFromMessage(message);
-  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 = checkIsSent(status);
+  const isPending = checkIsPending(status);
+  const isFailed = checkIsFailed(status);
+  const sender = getSenderFromMessage(message);
+  useEffect(() => {
+    var _messageRef$current;
+    const thumbnailWidth = (messageRef === null || messageRef === void 0 ? void 0 : (_messageRef$current = messageRef.current) === null || _messageRef$current === void 0 ? void 0 : _messageRef$current.clientWidth) - 80;
     setMessageWidth(thumbnailWidth > 360 ? 360 : thumbnailWidth);
   }, []);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: __spreadArray(__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-openchannel-thumbnail-message'], false).join(' '),
+    className: [...(Array.isArray(className) ? className : [className]), 'sendbird-openchannel-thumbnail-message'].join(' '),
     ref: messageRef
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-openchannel-thumbnail-message__left"
   }, !chainTop && /*#__PURE__*/React__default.createElement(ContextMenu, {
-    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: 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-thumbnail-message__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-thumbnail-message__right"
   }, !chainTop && /*#__PURE__*/React__default.createElement("div", {
@@ -179,65 +174,69 @@ function OpenchannelThumbnailMessage(_a) {
   }, /*#__PURE__*/React__default.createElement("div", _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 ? __assign({}, onLongPress) : {}), /*#__PURE__*/React__default.createElement("div", {
+  }, isMobile ? _objectSpread2({}, onLongPress) : {}), /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-openchannel-thumbnail-message__right__body__wrap__overlay"
-  }), (_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", {
+  }), {
+    [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", {
     className: "sendbird-openchannel-thumbnail-message__right__tail"
   }, isPending && /*#__PURE__*/React__default.createElement(Loader, {
     width: "16px",
@@ -258,67 +257,63 @@ function OpenchannelThumbnailMessage(_a) {
     className: "sendbird-openchannel-thumbnail-message__context-menu",
     ref: contextMenuRef
   }, (isFineResend({
-    message: message,
-    userId: userId,
-    status: status
+    message,
+    userId,
+    status
   }) || !isEphemeral) && /*#__PURE__*/React__default.createElement(ContextMenu, {
-    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();
-        }
-      }, 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();
+    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();
+      }
+    }, stringSet.CONTEXT_MENU_DROPDOWN__RESEND), !isEphemeral && isFineDelete({
+      message,
+      userId,
+      status
+    }) && /*#__PURE__*/React__default.createElement(MenuItem, {
+      onClick: () => {
+        if (disabled) {
+          return;
         }
-      }, stringSet.CONTEXT_MENU_DROPDOWN__DELETE));
-    }
+        showRemove(true);
+        closeDropdown();
+      }
+    }, stringSet.CONTEXT_MENU_DROPDOWN__DELETE))
   })), contextMenu && /*#__PURE__*/React__default.createElement(OpenChannelMobileMenu, {
     message: message,
     parentRef: mobileMenuRef,
-    hideMenu: function () {
+    hideMenu: () => {
       setContextMenu(false);
     },
-    showRemove: function () {
+    showRemove: () => {
       setContextMenu(false);
       showRemove(true);
     },
-    resendMessage: function () {
+    resendMessage: () => {
       setContextMenu(false);
       resendMessage(message);
     }