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

package/cjs/{index-857630c5.js → index-7b0c6630.js}

@@ -1,60 +1,58 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-83d7e84b.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-94c18dc1.js');
 var React = require('react');
 var reactDom = require('react-dom');
-var LocalizationContext = require('./LocalizationContext-482c1343.js');
-require('./index.module-a24e9cd7.js');
-var utils = require('./utils-c47c68b1.js');
-var ui_Label = require('./index-18720f0d.js');
+var LocalizationContext = require('./LocalizationContext-5009012e.js');
+var tslib_es6 = require('./tslib.es6-2f2b0bca.js');
+require('./index-609b07a2.js');
+var utils = require('./utils-180c6bc8.js');
+var ui_Label = require('./index-35820a94.js');
+require('./types-66554668.js');
 var ui_Icon = require('./ui/Icon.js');
-var index = require('./index-cbcacbee.js');
-var index$1 = require('./index-fbe9cc73.js');
+var index$1 = require('./index-daf80c58.js');
+var index = require('./index-b995f638.js');
 var ui_Avatar = require('./ui/Avatar.js');
-var consts = require('./consts-fb07c671.js');
+var consts = require('./consts-95462b21.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
-
-// TODO: refactor this to -> as const pattern
-
-const SUPPORTED_MIMES = {
+var SUPPORTED_MIMES = {
   IMAGE: ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/svg+xml', 'image/webp'],
   VIDEO: ['video/mpeg', 'video/ogg', 'video/webm', 'video/mp4']
 };
-const isImage = type => SUPPORTED_MIMES.IMAGE.indexOf(type) >= 0;
-const isVideo = type => SUPPORTED_MIMES.VIDEO.indexOf(type) >= 0;
-_rollupPluginBabelHelpers._objectSpread2({}, SUPPORTED_MIMES);
-const ViewerTypes = {
+var isImage = function (type) {
+  return SUPPORTED_MIMES.IMAGE.indexOf(type) >= 0;
+};
+var isVideo = function (type) {
+  return SUPPORTED_MIMES.VIDEO.indexOf(type) >= 0;
+};
+tslib_es6.__assign({}, SUPPORTED_MIMES);
+var ViewerTypes = {
   SINGLE: 'SINGLE',
   MULTI: 'MULTI'
 };
 
-function useKeyDown(_ref) {
-  let {
-    props,
-    ref
-  } = _ref;
-  const {
-    onClose
-  } = props;
-  let onClickLeft = utils.noop;
-  let onClickRight = utils.noop;
+function useKeyDown(_a) {
+  var props = _a.props,
+    ref = _a.ref;
+  var onClose = props.onClose;
+  var onClickLeft = utils.noop;
+  var onClickRight = utils.noop;
   if (props.viewerType === ViewerTypes.MULTI) {
     onClickLeft = props.onClickLeft;
     onClickRight = props.onClickRight;
   }
-  React.useLayoutEffect(() => {
-    var _ref$current;
-    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+  React.useLayoutEffect(function () {
+    var _a;
+    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
   }, [ref.current]);
-
   // this usecallback is not super necessary
   // discuss with others and remove it if it's not needed
-  const onKeyDown = React.useCallback(event => {
+  var onKeyDown = React.useCallback(function (event) {
     switch (event.key) {
       case 'Escape':
         // @ts-ignore
@@ -70,22 +68,19 @@ function useKeyDown(_ref) {
     event.stopPropagation();
   }, [onClose, onClickLeft, onClickRight]);
   return {
-    onKeyDown
+    onKeyDown: onKeyDown
   };
 }
 
-function mapFileViewerComponentProps(_ref) {
-  let {
-    props
-  } = _ref;
+function mapFileViewerComponentProps(_a) {
+  var props = _a.props;
   if (props.viewerType === ViewerTypes.MULTI) {
-    const {
-      fileInfoList,
-      currentIndex
-    } = props;
+    var _b = props,
+      fileInfoList = _b.fileInfoList,
+      currentIndex = _b.currentIndex;
     return fileInfoList[currentIndex];
   }
-  const fileInfo = props;
+  var fileInfo = props;
   return {
     name: fileInfo.name,
     type: fileInfo.type,
@@ -95,23 +90,21 @@ function mapFileViewerComponentProps(_ref) {
 
 function DeleteButton(props) {
   if (props.viewerType !== ViewerTypes.MULTI) {
-    const {
-      onDelete,
-      isByMe,
-      disableDelete,
-      className
-    } = props;
+    var onDelete_1 = props.onDelete,
+      isByMe = props.isByMe,
+      disableDelete_1 = props.disableDelete,
+      className = props.className;
     return isByMe ? /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `sendbird-fileviewer__header__right__actions__delete ${className}`
+      className: "sendbird-fileviewer__header__right__actions__delete ".concat(className)
     }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-      className: disableDelete ? 'disabled' : '',
+      className: disableDelete_1 ? 'disabled' : '',
       type: ui_Icon.IconTypes.DELETE,
-      fillColor: disableDelete ? ui_Icon.IconColors.GRAY : ui_Icon.IconColors.ON_BACKGROUND_1,
+      fillColor: disableDelete_1 ? ui_Icon.IconColors.GRAY : ui_Icon.IconColors.ON_BACKGROUND_1,
       height: "24px",
       width: "24px",
-      onClick: e => {
-        if (!disableDelete) {
-          onDelete === null || onDelete === void 0 ? void 0 : onDelete(e);
+      onClick: function (e) {
+        if (!disableDelete_1) {
+          onDelete_1 === null || onDelete_1 === void 0 ? void 0 : onDelete_1(e);
         }
       }
     })) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
@@ -122,10 +115,8 @@ function DeleteButton(props) {
 // this is a slider component that is used to navigate between images
 function Slider(props) {
   if (props.viewerType === ViewerTypes.MULTI) {
-    const {
-      onClickLeft,
-      onClickRight
-    } = props;
+    var onClickLeft_1 = props.onClickLeft,
+      onClickRight_1 = props.onClickRight;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "sendbird-file-viewer-slider"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -135,8 +126,8 @@ function Slider(props) {
       fillColor: ui_Icon.IconColors.ON_BACKGROUND_1,
       height: consts.SLIDER_BUTTON_ICON_SIDE_LENGTH,
       width: consts.SLIDER_BUTTON_ICON_SIDE_LENGTH,
-      onClick: e => {
-        onClickLeft === null || onClickLeft === void 0 ? void 0 : onClickLeft();
+      onClick: function (e) {
+        onClickLeft_1 === null || onClickLeft_1 === void 0 ? void 0 : onClickLeft_1();
         e.stopPropagation();
       }
     })), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -146,9 +137,9 @@ function Slider(props) {
       fillColor: ui_Icon.IconColors.ON_BACKGROUND_1,
       height: consts.SLIDER_BUTTON_ICON_SIDE_LENGTH,
       width: consts.SLIDER_BUTTON_ICON_SIDE_LENGTH,
-      onClick: e => {
+      onClick: function (e) {
         e.stopPropagation();
-        onClickRight === null || onClickRight === void 0 ? void 0 : onClickRight();
+        onClickRight_1 === null || onClickRight_1 === void 0 ? void 0 : onClickRight_1();
       }
     })));
   }
@@ -156,29 +147,22 @@ function Slider(props) {
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
 }
 
-const FileViewerComponent = props => {
-  const ref = React.useRef(null);
-  const {
-    profileUrl,
-    nickname,
-    onClose
-  } = props;
-  const {
-    onKeyDown
-  } = useKeyDown({
-    props,
-    ref
-  });
-  const {
-    name,
-    type,
-    url
-  } = mapFileViewerComponentProps({
-    props
-  });
-  const {
-    stringSet
-  } = React.useContext(LocalizationContext.LocalizationContext);
+var FileViewerComponent = function (props) {
+  var ref = React.useRef(null);
+  var profileUrl = props.profileUrl,
+    nickname = props.nickname,
+    onClose = props.onClose;
+  var onKeyDown = useKeyDown({
+    props: props,
+    ref: ref
+  }).onKeyDown;
+  var _a = mapFileViewerComponentProps({
+      props: props
+    }),
+    name = _a.name,
+    type = _a.type,
+    url = _a.url;
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-fileviewer",
     onKeyDown: onKeyDown
@@ -206,7 +190,7 @@ const FileViewerComponent = props => {
     color: ui_Label.LabelColors.ONBACKGROUND_2
   }, nickname)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-fileviewer__header__right"
-  }, index$1.isSupportedFileView(type) && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, index.isSupportedFileView(type) && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-fileviewer__header__right__actions"
   }, /*#__PURE__*/React__default["default"].createElement("a", {
     className: "sendbird-fileviewer__header__right__actions__download",
@@ -227,43 +211,49 @@ const FileViewerComponent = props => {
     fillColor: ui_Icon.IconColors.ON_BACKGROUND_1,
     height: "24px",
     width: "24px",
-    onClick: e => onClose === null || onClose === void 0 ? void 0 : onClose(e)
+    onClick: function (e) {
+      return onClose === null || onClose === void 0 ? void 0 : onClose(e);
+    }
   })))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-fileviewer__content"
-  }, index$1.isVideo(type) && /*#__PURE__*/React__default["default"].createElement("video", {
+  }, index.isVideo(type) && /*#__PURE__*/React__default["default"].createElement("video", {
     controls: true,
     className: "sendbird-fileviewer__content__video"
   }, /*#__PURE__*/React__default["default"].createElement("source", {
     src: url,
     type: type
-  })), index$1.isImage(type) && /*#__PURE__*/React__default["default"].createElement("img", {
+  })), index.isImage(type) && /*#__PURE__*/React__default["default"].createElement("img", {
     src: url,
     alt: name,
     className: props.viewerType === ViewerTypes.MULTI ? 'sendbird-fileviewer__content__img__multi' : 'sendbird-fileviewer__content__img'
-  }), !index$1.isSupportedFileView(type) && /*#__PURE__*/React__default["default"].createElement("div", {
+  }), !index.isSupportedFileView(type) && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-fileviewer__content__unsupported"
   }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     type: ui_Label.LabelTypography.H_1,
     color: ui_Label.LabelColors.ONBACKGROUND_1
   }, (stringSet === null || stringSet === void 0 ? void 0 : stringSet.UI__FILE_VIEWER__UNSUPPORT) || 'Unsupported message')), /*#__PURE__*/React__default["default"].createElement(Slider, props)));
 };
-function FileViewer(_ref) {
-  let {
-    message,
-    onClose,
-    isByMe = false,
-    onDelete,
-    currentIndex,
-    onClickLeft,
-    onClickRight
-  } = _ref;
-  if (message.isMultipleFilesMessage()) {
-    var _message$sender, _message$sender2;
+function FileViewer(_a) {
+  var _b, _c, _d;
+  var message = _a.message,
+    _e = _a.statefulFileInfoList,
+    statefulFileInfoList = _e === void 0 ? [] : _e,
+    onClose = _a.onClose,
+    _f = _a.isByMe,
+    isByMe = _f === void 0 ? false : _f,
+    onDelete = _a.onDelete,
+    currentIndex = _a.currentIndex,
+    onClickLeft = _a.onClickLeft,
+    onClickRight = _a.onClickRight;
+  if (index.isMultipleFilesMessage(message)) {
+    var castedMessage = message;
     return /*#__PURE__*/React__default["default"].createElement(FileViewerComponent, {
-      profileUrl: (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.profileUrl,
-      nickname: (_message$sender2 = message.sender) === null || _message$sender2 === void 0 ? void 0 : _message$sender2.nickname,
+      profileUrl: castedMessage.sender.profileUrl,
+      nickname: castedMessage.sender.nickname,
       viewerType: ViewerTypes.MULTI,
-      fileInfoList: message.fileInfoList.map(fileInfo => {
+      fileInfoList: statefulFileInfoList.filter(function (fileInfo) {
+        return fileInfo.url; // Caution: This assumes that defined url means file upload has completed.
+      }).map(function (fileInfo) {
         return {
           name: fileInfo.fileName || '',
           type: fileInfo.mimeType || '',
@@ -275,19 +265,19 @@ function FileViewer(_ref) {
       onClickRight: onClickRight || utils.noop,
       onClose: onClose
     });
-  } else if (message.isFileMessage()) {
-    var _message$sender3, _message$sender4, _message$threadInfo;
+  } else if (index.isFileMessage(message)) {
+    var castedMessage = message;
     return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(FileViewerComponent, {
-      profileUrl: (_message$sender3 = message.sender) === null || _message$sender3 === void 0 ? void 0 : _message$sender3.profileUrl,
-      nickname: (_message$sender4 = message.sender) === null || _message$sender4 === void 0 ? void 0 : _message$sender4.nickname,
-      name: message.name,
-      type: message.type,
-      url: message === null || message === void 0 ? void 0 : message.url,
+      profileUrl: (_b = castedMessage.sender) === null || _b === void 0 ? void 0 : _b.profileUrl,
+      nickname: (_c = castedMessage.sender) === null || _c === void 0 ? void 0 : _c.nickname,
+      name: castedMessage.name,
+      type: castedMessage.type,
+      url: castedMessage === null || castedMessage === void 0 ? void 0 : castedMessage.url,
       isByMe: isByMe,
-      disableDelete: ((message === null || message === void 0 ? void 0 : (_message$threadInfo = message.threadInfo) === null || _message$threadInfo === void 0 ? void 0 : _message$threadInfo.replyCount) || 0) > 0,
+      disableDelete: (((_d = castedMessage.threadInfo) === null || _d === void 0 ? void 0 : _d.replyCount) || 0) > 0,
       onClose: onClose,
       onDelete: onDelete || utils.noop
-    }), document.getElementById(index.MODAL_ROOT));
+    }), document.getElementById(index$1.MODAL_ROOT));
   }
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
 }
@@ -296,4 +286,4 @@ exports.FileViewer = FileViewer;
 exports.FileViewerComponent = FileViewerComponent;
 exports.isImage = isImage;
 exports.isVideo = isVideo;
-//# sourceMappingURL=index-857630c5.js.map
+//# sourceMappingURL=index-7b0c6630.js.map

package/cjs/index-7b0c6630.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-7b0c6630.js","sources":["../../src/ui/FileViewer/types.ts","../../src/ui/FileViewer/hooks/useKeyDown.ts","../../src/ui/FileViewer/utils.ts","../../src/ui/FileViewer/DeleteButton.tsx","../../src/ui/FileViewer/Slider.tsx","../../src/ui/FileViewer/index.tsx"],"sourcesContent":["// https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types\n\n// TODO: refactor this to -> as const pattern\nexport type SupportedImageMimesType = 'image/jpeg' | 'image/jpg' | 'image/png' | 'image/gif' | 'image/svg+xml' | 'image/webp';\nexport type SupportedVideoMimesType = 'video/mpeg' | 'video/ogg' | 'video/webm' | 'video/mp4';\nexport type SupportedMimesType = SupportedImageMimesType | SupportedVideoMimesType;\n\nconst SUPPORTED_MIMES = {\n  IMAGE: [\n    'image/jpeg',\n    'image/jpg',\n    'image/png',\n    'image/gif',\n    'image/svg+xml',\n    'image/webp',\n  ],\n  VIDEO: [\n    'video/mpeg',\n    'video/ogg',\n    'video/webm',\n    'video/mp4',\n  ],\n};\n\nexport const isImage = (type: SupportedImageMimesType): boolean => SUPPORTED_MIMES.IMAGE.indexOf(type) >= 0;\nexport const isVideo = (type: SupportedVideoMimesType): boolean => SUPPORTED_MIMES.VIDEO.indexOf(type) >= 0;\nexport const isGif = (type: SupportedMimesType): boolean => type === 'image/gif';\nexport const unSupported = (type: SupportedMimesType): boolean => (\n  !(\n    isImage(type as SupportedImageMimesType)\n    || isVideo(type as SupportedVideoMimesType)\n  )\n);\n\nexport default { ...SUPPORTED_MIMES };\n\nexport const ViewerTypes = {\n  SINGLE: 'SINGLE',\n  MULTI: 'MULTI',\n} as const;\n\nexport type ViewerType = keyof typeof ViewerTypes;\n\nexport interface SenderInfo {\n  profileUrl: string;\n  nickname: string;\n}\nexport interface FileInfo {\n  name: string;\n  type: string;\n  url: string;\n}\n\nexport interface BaseViewer {\n  onClose: (e: React.MouseEvent) => void;\n}\n\nexport interface SingleFileViewer extends SenderInfo, FileInfo, BaseViewer {\n  viewerType?: typeof ViewerTypes.SINGLE;\n  isByMe?: boolean;\n  disableDelete?: boolean;\n  onDelete: (e: React.MouseEvent) => void;\n}\n\nexport interface MultiFilesViewer extends SenderInfo, BaseViewer {\n  viewerType: typeof ViewerTypes.MULTI;\n  fileInfoList: FileInfo[];\n  currentIndex: number;\n  onClickLeft: () => void;\n  onClickRight: () => void;\n}\n\nexport type FileViewerComponentProps = SingleFileViewer | MultiFilesViewer;\n","import { useCallback, useLayoutEffect } from 'react';\nimport { noop } from '../../../utils/utils';\nimport { FileViewerComponentProps, ViewerTypes } from '../types';\n\nexport function useKeyDown({ props, ref }: {\n  props: FileViewerComponentProps,\n  ref: React.RefObject<HTMLDivElement>;\n}): {\n  onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;\n} {\n  const { onClose } = props;\n  let onClickLeft = noop;\n  let onClickRight = noop;\n  if (props.viewerType === ViewerTypes.MULTI) {\n    onClickLeft = props.onClickLeft;\n    onClickRight = props.onClickRight;\n  }\n\n  useLayoutEffect(() => {\n    ref.current?.focus();\n  }, [ref.current]);\n\n  // this usecallback is not super necessary\n  // discuss with others and remove it if it's not needed\n  const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = useCallback((event) => {\n    switch (event.key) {\n      case 'Escape':\n        // @ts-ignore\n        onClose(event);\n        break;\n      case 'ArrowLeft':\n        onClickLeft();\n        break;\n      case 'ArrowRight':\n        onClickRight();\n        break;\n      default:\n        break;\n    }\n    event.stopPropagation();\n  }, [onClose, onClickLeft, onClickRight]);\n\n  return {\n    onKeyDown,\n  };\n}\n","import { FileInfo, FileViewerComponentProps, MultiFilesViewer, SingleFileViewer, ViewerTypes } from './types';\n\nexport function mapFileViewerComponentProps({ props }: {\n  props: FileViewerComponentProps;\n}): FileInfo {\n  if (props.viewerType === ViewerTypes.MULTI) {\n    const { fileInfoList, currentIndex } = props as MultiFilesViewer;\n    return fileInfoList[currentIndex];\n  }\n  const fileInfo: FileInfo = props as SingleFileViewer;\n  return {\n    name: fileInfo.name,\n    type: fileInfo.type,\n    url: fileInfo.url,\n  };\n}\n","import React from 'react';\nimport { FileViewerComponentProps, ViewerTypes } from './types';\nimport Icon, { IconColors, IconTypes } from '../Icon';\n\nexport function DeleteButton(props: FileViewerComponentProps & { className?: string }): React.ReactElement {\n  if (props.viewerType !== ViewerTypes.MULTI) {\n    const { onDelete, isByMe, disableDelete, className } = props;\n    return (isByMe)\n      ? (\n        <div className={`sendbird-fileviewer__header__right__actions__delete ${className}`}>\n          <Icon\n            className={disableDelete ? 'disabled' : ''}\n            type={IconTypes.DELETE}\n            fillColor={disableDelete ? IconColors.GRAY : IconColors.ON_BACKGROUND_1}\n            height=\"24px\"\n            width=\"24px\"\n            onClick={(e) => { if (!disableDelete) { onDelete?.(e); } }}\n          />\n        </div>\n      )\n      : <></>;\n  }\n  return <></>;\n}\n","import React from 'react';\nimport { FileViewerComponentProps, ViewerTypes } from './types';\nimport Icon, { IconColors, IconTypes } from '../Icon';\nimport { SLIDER_BUTTON_ICON_SIDE_LENGTH } from '../../utils/consts';\n\n// this is a slider component that is used to navigate between images\nexport function Slider(props: FileViewerComponentProps): React.ReactElement {\n  if (props.viewerType === ViewerTypes.MULTI) {\n    const { onClickLeft, onClickRight } = props;\n    return (\n      <div className=\"sendbird-file-viewer-slider\">\n        <div className=\"sendbird-file-viewer-arrow--left\">\n          <Icon\n            type={IconTypes.SLIDE_LEFT}\n            fillColor={IconColors.ON_BACKGROUND_1}\n            height={SLIDER_BUTTON_ICON_SIDE_LENGTH}\n            width={SLIDER_BUTTON_ICON_SIDE_LENGTH}\n            onClick={(e) => {\n              onClickLeft?.();\n              e.stopPropagation();\n            }}\n          />\n        </div>\n        <div className=\"sendbird-file-viewer-arrow--right\">\n          <Icon\n            type={IconTypes.SLIDE_LEFT}\n            fillColor={IconColors.ON_BACKGROUND_1}\n            height={SLIDER_BUTTON_ICON_SIDE_LENGTH}\n            width={SLIDER_BUTTON_ICON_SIDE_LENGTH}\n            onClick={(e) => {\n              e.stopPropagation();\n              onClickRight?.();\n            }}\n          />\n        </div>\n      </div>\n    );\n  }\n  // return empty fragment if viewerType is not ViewerTypes.MULTI\n  return <></>;\n}\n","import './index.scss';\n\nimport React, { MouseEvent, ReactElement, useContext, useRef } from 'react';\nimport { FileMessage, MultipleFilesMessage } from '@sendbird/chat/message';\nimport { createPortal } from 'react-dom';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport { MODAL_ROOT } from '../../hooks/useModal';\nimport { isFileMessage, isImage, isMultipleFilesMessage, isSupportedFileView, isVideo } from '../../utils';\nimport { noop } from '../../utils/utils';\nimport Avatar from '../Avatar/index';\nimport Label, { LabelColors, LabelTypography } from '../Label';\nimport Icon, { IconColors, IconTypes } from '../Icon';\nimport { FileInfo, FileViewerComponentProps, ViewerTypes } from './types';\nimport { useKeyDown } from './hooks/useKeyDown';\nimport { mapFileViewerComponentProps } from './utils';\nimport { DeleteButton } from './DeleteButton';\nimport { Slider } from './Slider';\nimport { StatefulFileInfo } from '../../utils/createStatefulFileInfoList';\n\nexport const FileViewerComponent = (props: FileViewerComponentProps): ReactElement => {\n  const ref = useRef<HTMLDivElement>(null);\n  const { profileUrl, nickname, onClose } = props;\n  const { onKeyDown } = useKeyDown({ props, ref });\n  const { name, type, url } = mapFileViewerComponentProps({ props });\n  const { stringSet } = useContext(LocalizationContext);\n\n  return (\n    <div\n      className=\"sendbird-fileviewer\"\n      onKeyDown={onKeyDown}\n      // to focus\n      tabIndex={1}\n      ref={ref}\n    >\n      <div className=\"sendbird-fileviewer__header\">\n        <div className=\"sendbird-fileviewer__header__left\">\n          <div className=\"sendbird-fileviewer__header__left__avatar\">\n            <Avatar height=\"32px\" width=\"32px\" src={profileUrl} />\n          </div>\n          <Label\n            className=\"sendbird-fileviewer__header__left__filename\"\n            type={LabelTypography.H_2}\n            color={LabelColors.ONBACKGROUND_1}\n          >\n            {name}\n          </Label>\n          <Label\n            className=\"sendbird-fileviewer__header__left__sender-name\"\n            type={LabelTypography.BODY_1}\n            color={LabelColors.ONBACKGROUND_2}\n          >\n            {nickname}\n          </Label>\n        </div>\n        <div\n          className=\"sendbird-fileviewer__header__right\"\n        >\n          {\n            isSupportedFileView(type) && (\n              <div className=\"sendbird-fileviewer__header__right__actions\" >\n                <a\n                  className=\"sendbird-fileviewer__header__right__actions__download\"\n                  rel=\"noopener noreferrer\"\n                  href={url}\n                  target=\"_blank\"\n                >\n                  <Icon\n                    type={IconTypes.DOWNLOAD}\n                    fillColor={IconColors.ON_BACKGROUND_1}\n                    height=\"24px\"\n                    width=\"24px\"\n                  />\n                </a>\n                <DeleteButton\n                  className='sendbird-fileviewer__header__right__actions__delete'\n                  {...props}\n                />\n              </div>\n            )\n          }\n          <div className=\"sendbird-fileviewer__header__right__actions__close\">\n            <Icon\n              type={IconTypes.CLOSE}\n              fillColor={IconColors.ON_BACKGROUND_1}\n              height=\"24px\"\n              width=\"24px\"\n              onClick={(e) => onClose?.(e)}\n            />\n          </div>\n        </div>\n      </div>\n      <div className=\"sendbird-fileviewer__content\">\n        {isVideo(type) && (\n          <video\n            controls\n            className=\"sendbird-fileviewer__content__video\"\n          >\n            <source src={url} type={type} />\n          </video>\n        )}\n        {\n          isImage(type) && (\n            <img\n              src={url}\n              alt={name}\n              className={\n                props.viewerType === ViewerTypes.MULTI\n                  ? 'sendbird-fileviewer__content__img__multi'\n                  : 'sendbird-fileviewer__content__img'\n              }\n            />\n          )\n        }\n        {\n          !isSupportedFileView(type) && (\n            <div className=\"sendbird-fileviewer__content__unsupported\">\n              <Label type={LabelTypography.H_1} color={LabelColors.ONBACKGROUND_1}>\n                {stringSet?.UI__FILE_VIEWER__UNSUPPORT || 'Unsupported message'}\n              </Label>\n            </div>\n          )\n        }\n        <Slider {...props} />\n      </div>\n    </div>\n  );\n};\n\nexport interface FileViewerProps {\n  message?: FileMessage | MultipleFilesMessage;\n  statefulFileInfoList?: StatefulFileInfo[]\n  isByMe?: boolean;\n  currentIndex?: number;\n  onClose: (e: MouseEvent) => void;\n  onDelete?: (e: MouseEvent) => void;\n  onClickLeft?: () => void;\n  onClickRight?: () => void;\n}\n\nexport default function FileViewer({\n  message,\n  statefulFileInfoList = [],\n  onClose,\n  isByMe = false,\n  onDelete,\n  currentIndex,\n  onClickLeft,\n  onClickRight,\n}: FileViewerProps): ReactElement {\n  if (isMultipleFilesMessage(message)) {\n    const castedMessage = message as MultipleFilesMessage;\n    return (\n      <FileViewerComponent\n        profileUrl={castedMessage.sender.profileUrl}\n        nickname={castedMessage.sender.nickname}\n        viewerType={ViewerTypes.MULTI}\n        fileInfoList={\n          statefulFileInfoList.filter((fileInfo: StatefulFileInfo) => {\n            return fileInfo.url; // Caution: This assumes that defined url means file upload has completed.\n          }).map((fileInfo: StatefulFileInfo): FileInfo => {\n            return {\n              name: fileInfo.fileName || '',\n              type: fileInfo.mimeType || '',\n              url: fileInfo.url,\n            };\n          })\n        }\n        currentIndex={currentIndex || 0}\n        onClickLeft={onClickLeft || noop}\n        onClickRight={onClickRight || noop}\n        onClose={onClose}\n      />\n    );\n  } else if (isFileMessage(message)) {\n    const castedMessage = message as FileMessage;\n    return createPortal(\n      (\n        <FileViewerComponent\n          profileUrl={castedMessage.sender?.profileUrl}\n          nickname={castedMessage.sender?.nickname}\n          name={castedMessage.name}\n          type={castedMessage.type}\n          url={castedMessage?.url}\n          isByMe={isByMe}\n          disableDelete={(castedMessage.threadInfo?.replyCount || 0) > 0}\n          onClose={onClose}\n          onDelete={onDelete || noop}\n        />\n      ),\n      (document.getElementById(MODAL_ROOT) as HTMLElement),\n    );\n  }\n  return <></>;\n}\n"],"names":["SUPPORTED_MIMES","IMAGE","VIDEO","isImage","type","indexOf","isVideo","__assign","ViewerTypes","SINGLE","MULTI","useKeyDown","_a","props","ref","onClose","onClickLeft","noop","onClickRight","viewerType","useLayoutEffect","current","focus","onKeyDown","useCallback","event","key","stopPropagation","mapFileViewerComponentProps","_b","fileInfoList","currentIndex","fileInfo","name","url","DeleteButton","onDelete_1","isByMe","disableDelete_1","disableDelete","className","React","createElement","concat","Icon","IconTypes","DELETE","fillColor","IconColors","GRAY","ON_BACKGROUND_1","height","width","onClick","e","Fragment","Slider","onClickLeft_1","onClickRight_1","SLIDE_LEFT","SLIDER_BUTTON_ICON_SIDE_LENGTH","FileViewerComponent","useRef","profileUrl","nickname","stringSet","useContext","LocalizationContext","tabIndex","Avatar","src","Label","LabelTypography","H_2","color","LabelColors","ONBACKGROUND_1","BODY_1","ONBACKGROUND_2","isSupportedFileView","rel","href","target","DOWNLOAD","_extends","CLOSE","controls","alt","H_1","UI__FILE_VIEWER__UNSUPPORT","FileViewer","message","_e","statefulFileInfoList","_f","onDelete","isMultipleFilesMessage","castedMessage","sender","filter","map","fileName","mimeType","isFileMessage","createPortal","_c","_d","threadInfo","replyCount","document","getElementById","MODAL_ROOT"],"mappings":"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"}

package/cjs/index-80a11b6a.js

@@ -0,0 +1,197 @@
+'use strict';
+
+var React = require('react');
+var ui_ContextMenu = require('./ui/ContextMenu.js');
+var useSendbirdStateContext = require('./useSendbirdStateContext.js');
+var LocalizationContext = require('./LocalizationContext-5009012e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var OpenChannelMessageStatusTypes = {
+  NONE: 'none',
+  PENDING: 'pending',
+  FAILED: 'failed',
+  CANCELED: 'canceled',
+  SUCCEEDED: 'succeeded'
+};
+var getSenderFromMessage = function (message) {
+  // @ts-ignore
+  return message.sender || message._sender;
+};
+var checkIsSent = function (status) {
+  return status === OpenChannelMessageStatusTypes.SUCCEEDED;
+};
+var checkIsPending = function (status) {
+  return status === OpenChannelMessageStatusTypes.PENDING;
+};
+var checkIsFailed = function (status) {
+  return status === OpenChannelMessageStatusTypes.FAILED;
+};
+var checkIsByMe = function (message, userId) {
+  return getSenderFromMessage(message).userId === userId;
+};
+var isFineCopy = function (_a) {
+  var _b;
+  var message = _a.message;
+  return (message === null || message === void 0 ? void 0 : message.messageType) === 'user' && ((_b = message === null || message === void 0 ? void 0 : message.message) === null || _b === void 0 ? void 0 : _b.length) > 0;
+};
+var isFineResend = function (_a) {
+  var message = _a.message,
+    status = _a.status,
+    userId = _a.userId;
+  return checkIsByMe(message, userId) && checkIsFailed(status)
+  // @ts-ignore
+  && (message === null || message === void 0 ? void 0 : message.isResendable());
+};
+var isFineEdit = function (_a) {
+  var _b;
+  var message = _a.message,
+    status = _a.status,
+    userId = _a.userId;
+  return checkIsByMe(message, userId) && checkIsSent(status) && ((_b = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _b === void 0 ? void 0 : _b.call(message));
+};
+var isFineDelete = function (_a) {
+  var message = _a.message,
+    userId = _a.userId;
+  return checkIsByMe(message, userId);
+};
+var isFineDownload = function (_a) {
+  var _b;
+  var message = _a.message,
+    status = _a.status;
+  if (((_b = message === null || message === void 0 ? void 0 : message.isFileMessage) === null || _b === void 0 ? void 0 : _b.call(message)) && checkIsSent(status)) {
+    return true;
+  }
+  return false;
+};
+var showMenuTrigger = function (props) {
+  var message = props.message,
+    status = props.status,
+    userId = props.userId;
+  // @ts-ignore
+  if (message.messageType === 'user') {
+    return isFineDelete({
+      message: message,
+      status: status,
+      userId: userId
+    }) || isFineEdit({
+      message: message,
+      status: status,
+      userId: userId
+    })
+    // @ts-ignore
+    || isFineCopy({
+      message: message,
+      status: status,
+      userId: userId
+    }) || isFineResend({
+      message: message,
+      status: status,
+      userId: userId
+    });
+  } else {
+    return isFineDelete({
+      message: message,
+      status: status,
+      userId: userId
+    }) || isFineResend({
+      message: message,
+      status: status,
+      userId: userId
+    });
+  }
+};
+
+var OpenChannelMobileMenu = function (props) {
+  var _a, _b;
+  var message = props.message,
+    parentRef = props.parentRef,
+    resendMessage = props.resendMessage,
+    showEdit = props.showEdit,
+    showRemove = props.showRemove,
+    copyToClipboard = props.copyToClipboard,
+    hideMenu = props.hideMenu,
+    _c = props.isEphemeral,
+    isEphemeral = _c === void 0 ? false : _c;
+  var userMessage = message;
+  var status = message === null || message === void 0 ? void 0 : message.sendingStatus;
+  var stringSet = LocalizationContext.useLocalization().stringSet;
+  var userId = (_b = (_a = useSendbirdStateContext.useSendbirdStateContext()) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.userId;
+  var fileMessage = message;
+  return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
+    isOpen: true,
+    menuItems: function () {
+      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
+        className: "sendbird-openchannel__mobile-menu",
+        parentRef: parentRef,
+        parentContainRef: parentRef,
+        closeDropdown: hideMenu
+      }, isFineCopy({
+        message: userMessage,
+        userId: userId,
+        status: status
+      }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        className: "sendbird-openchannel-og-message__top__context-menu__copy",
+        onClick: function () {
+          copyToClipboard();
+        },
+        dataSbId: "open_channel_mobile_context_menu_copy"
+      }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, stringSet.CONTEXT_MENU_DROPDOWN__COPY)), !isEphemeral && isFineEdit({
+        message: message,
+        userId: userId,
+        status: status
+      }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        className: "sendbird-openchannel-og-message__top__context-menu__edit",
+        onClick: function () {
+          showEdit();
+        },
+        dataSbId: "open_channel_mobile_context_menu_edit"
+      }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, stringSet.CONTEXT_MENU_DROPDOWN__EDIT)), isFineResend({
+        message: message,
+        userId: userId,
+        status: status
+      }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        onClick: function () {
+          resendMessage();
+        },
+        dataSbId: "open_channel_mobile_context_menu_resend"
+      }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, stringSet.CONTEXT_MENU_DROPDOWN__RESEND)), !isEphemeral && isFineDelete({
+        message: message,
+        userId: userId,
+        status: status
+      }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        onClick: function () {
+          showRemove();
+        },
+        dataSbId: "open_channel_mobile_context_menu_delete"
+      }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, stringSet.CONTEXT_MENU_DROPDOWN__DELETE)), isFineDownload({
+        message: message,
+        status: status
+      }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+        onClick: function () {
+          hideMenu();
+        },
+        dataSbId: "open_channel_mobile_context_menu_download_file"
+      }, /*#__PURE__*/React__default["default"].createElement("a", {
+        className: "sendbird-openchannel__mobile-menu-hyperlink",
+        rel: "noopener noreferrer",
+        href: fileMessage === null || fileMessage === void 0 ? void 0 : fileMessage.url,
+        target: "_blank"
+      }, stringSet.CONTEXT_MENU_DROPDOWN__SAVE)));
+    }
+  });
+};
+
+exports.OpenChannelMobileMenu = OpenChannelMobileMenu;
+exports.checkIsFailed = checkIsFailed;
+exports.checkIsPending = checkIsPending;
+exports.checkIsSent = checkIsSent;
+exports.getSenderFromMessage = getSenderFromMessage;
+exports.isFineCopy = isFineCopy;
+exports.isFineDelete = isFineDelete;
+exports.isFineEdit = isFineEdit;
+exports.isFineResend = isFineResend;
+exports.showMenuTrigger = showMenuTrigger;
+//# sourceMappingURL=index-80a11b6a.js.map