@sendbird/uikit-react 3.5.0-beta.0 → 3.5.0-mobile-web-0

package/Channel/components/FileViewer.js

@@ -1,45 +1,44 @@
 import React__default from 'react';
 import { createPortal } from 'react-dom';
 import Avatar from '../../ui/Avatar.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-44470dab.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-e1cd2fcf.js';
 import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
-import { M as MODAL_ROOT } from '../../index-e5b78039.js';
-import { D as isSupportedFileView, E as isVideo, F as isImage } from '../../index-5f08f486.js';
+import { M as MODAL_ROOT } from '../../index-3165e396.js';
+import { y as isSupportedFileView, z as isVideo, A as isImage } from '../../index-fd51c7d1.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { u as useChannelContext } from '../../ChannelProvider-554e7116.js';
-import '../../tslib.es6-bcead7e6.js';
+import { u as useChannelContext } from '../../ChannelProvider-42ea1a96.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-286ed926.js';
+import '../../uuid-720c99c0.js';
 import 'prop-types';
-import '../../stringSet-d555d877.js';
+import '../../stringSet-d368e289.js';
+import '../../_rollupPluginBabelHelpers-ce69e916.js';
 import '../../utils/message/getOutgoingMessageState.js';
 import '../../withSendbird.js';
-import '../../_rollupPluginBabelHelpers-498add61.js';
-import '../../UserProfileContext-c58a7b86.js';
-import '../../index-3f26a31c.js';
-import '../../index-07e060cd.js';
-import '../../topics-351ea731.js';
-import '../../compareIds-9430f9d8.js';
-import '../../const-9d11f204.js';
+import '../../UserProfileContext-7e645551.js';
+import '../../index-06f34585.js';
+import '../../index-d9c12cf4.js';
+import '../../topics-f9628f1f.js';
+import '../../compareIds-08858dd3.js';
+import '../../const-a77c08c9.js';
 import '@sendbird/chat/groupChannel';
 import '@sendbird/chat/message';
-import '../../ui/ContextMenu.js';
-import '../../ui/SortByRow.js';
-import '../../ui/ReactionButton.js';
+import '../../consts-9393e7c8.js';
 
-var FileViewerComponent = function (_a) {
-  var // sender
-  profileUrl = _a.profileUrl,
-      nickname = _a.nickname,
-      // file
-  name = _a.name,
-      type = _a.type,
-      url = _a.url,
-      // others
-  isByMe = _a.isByMe,
-      onCancel = _a.onCancel,
-      onDelete = _a.onDelete,
-      disableDelete = _a.disableDelete;
+const FileViewerComponent = _ref => {
+  let {
+    // sender
+    profileUrl,
+    nickname,
+    // file
+    name,
+    type,
+    url,
+    // others
+    isByMe,
+    onCancel,
+    onDelete,
+    disableDelete
+  } = _ref;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-fileviewer"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -82,7 +81,7 @@ var FileViewerComponent = function (_a) {
     fillColor: disableDelete ? IconColors.GRAY : IconColors.ON_BACKGROUND_1,
     height: "24px",
     width: "24px",
-    onClick: function () {
+    onClick: () => {
       if (!disableDelete) {
         onDelete();
       }
@@ -114,25 +113,29 @@ var FileViewerComponent = function (_a) {
     color: LabelColors.ONBACKGROUND_1
   }, "Unsupoprted message"))));
 };
-
-var FileViewer = function (_a) {
-  var _b, _c, _d;
-
-  var onCancel = _a.onCancel,
-      message = _a.message;
-  var deleteMessage = useChannelContext().deleteMessage;
-  var sender = message.sender,
-      type = message.type,
-      url = message.url,
-      _e = message.name,
-      name = _e === void 0 ? '' : _e,
-      threadInfo = message.threadInfo;
-  var user = (_c = (_b = useSendbirdStateContext()) === null || _b === void 0 ? void 0 : _b.config) === null || _c === void 0 ? void 0 : _c.userId;
-  var isByMe = user === ((_d = message === null || message === void 0 ? void 0 : message.sender) === null || _d === void 0 ? void 0 : _d.userId);
-  var disableDelete = (threadInfo === null || threadInfo === void 0 ? void 0 : threadInfo.replyCount) > 0;
-  var profileUrl = sender.profileUrl,
-      _f = sender.nickname,
-      nickname = _f === void 0 ? '' : _f;
+const FileViewer = _ref2 => {
+  var _useSendbirdStateCont, _useSendbirdStateCont2, _message$sender;
+  let {
+    onCancel,
+    message
+  } = _ref2;
+  const {
+    deleteMessage
+  } = useChannelContext();
+  const {
+    sender,
+    type,
+    url,
+    name = '',
+    threadInfo
+  } = message;
+  const user = (_useSendbirdStateCont = useSendbirdStateContext()) === null || _useSendbirdStateCont === void 0 ? void 0 : (_useSendbirdStateCont2 = _useSendbirdStateCont.config) === null || _useSendbirdStateCont2 === void 0 ? void 0 : _useSendbirdStateCont2.userId;
+  const isByMe = user === (message === null || message === void 0 ? void 0 : (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.userId);
+  const disableDelete = (threadInfo === null || threadInfo === void 0 ? void 0 : threadInfo.replyCount) > 0;
+  const {
+    profileUrl,
+    nickname = ''
+  } = sender;
   return /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(FileViewerComponent, {
     profileUrl: profileUrl,
     nickname: nickname,
@@ -140,8 +143,8 @@ var FileViewer = function (_a) {
     url: url,
     name: name,
     onCancel: onCancel,
-    onDelete: function () {
-      deleteMessage(message).then(function () {
+    onDelete: () => {
+      deleteMessage(message).then(() => {
         onCancel();
       });
     },

package/Channel/components/FileViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileViewer.js","sources":["../../../src/smart-components/Channel/components/FileViewer/index.tsx"],"sourcesContent":["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport type { FileMessage } from '@sendbird/chat/message';\n\nimport './file-viewer.scss';\nimport Avatar from '../../../../ui/Avatar';\nimport Label, { LabelTypography, LabelColors } from '../../../../ui/Label';\nimport Icon, { IconColors, IconTypes } from '../../../../ui/Icon';\nimport { MODAL_ROOT } from '../../../../hooks/useModal/ModalRoot';\n\nimport { isImage, isVideo, isSupportedFileView } from '../../../../utils';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\nimport { useChannelContext } from '../../context/ChannelProvider';\nimport { EveryMessage } from '../../../../types';\n\ntype FileViewerUIProps = {\n  profileUrl: string;\n  nickname: string;\n  // file\n  name: string;\n  type: string;\n  url: string;\n  // others\n  isByMe: boolean;\n  onCancel: () => void;\n  onDelete: () => void;\n  disableDelete: boolean;\n};\n\nexport const FileViewerComponent: React.FC<FileViewerUIProps> = ({\n  // sender\n  profileUrl,\n  nickname,\n  // file\n  name,\n  type,\n  url,\n  // others\n  isByMe,\n  onCancel,\n  onDelete,\n  disableDelete,\n}: FileViewerUIProps) => (\n  <div className=\"sendbird-fileviewer\">\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 className=\"sendbird-fileviewer__header__right\">\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              {\n                onDelete && isByMe && (\n                  <div className=\"sendbird-fileviewer__header__right__actions__delete\">\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={() => { if (!disableDelete) { onDelete(); } }}\n                    />\n                  </div>\n                )\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={onCancel}\n          />\n        </div>\n      </div>\n    </div>\n    <div className=\"sendbird-fileviewer__content\">\n      {isVideo(type) && (\n        <video controls className=\"sendbird-fileviewer__content__video\">\n          <source src={url} type={type} />\n        </video>\n      )}\n      {\n        isImage(type) && (\n          <img\n            src={url}\n            alt={name}\n            className=\"sendbird-fileviewer__content__img\"\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              Unsupoprted message\n            </Label>\n          </div>\n        )\n      }\n    </div>\n  </div>\n);\n\ntype FileViewerProps = {\n  onCancel:() => void;\n  message: FileMessage;\n};\n\nconst FileViewer: React.FC<FileViewerProps> = ({ onCancel, message }: FileViewerProps) => {\n  const { deleteMessage } = useChannelContext();\n  const {\n    sender,\n    type,\n    url,\n    name = '',\n    threadInfo,\n  } = message;\n  const user = useSendbirdStateContext()?.config?.userId;\n  const isByMe = user === message?.sender?.userId;\n  const disableDelete = threadInfo?.replyCount > 0;\n  const { profileUrl, nickname = '' } = sender;\n  return createPortal(\n    (\n      <FileViewerComponent\n        profileUrl={profileUrl}\n        nickname={nickname}\n        type={type}\n        url={url}\n        name={name}\n        onCancel={onCancel}\n        onDelete={() => {\n          deleteMessage(message as EveryMessage).then(() => {\n            onCancel();\n          });\n        }}\n        isByMe={isByMe}\n        disableDelete={disableDelete}\n      />\n    ),\n    document.getElementById(MODAL_ROOT),\n  );\n}\n\nexport default FileViewer;\n"],"names":["FileViewerComponent","_a","profileUrl","nickname","name","type","url","isByMe","onCancel","onDelete","disableDelete","React","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","BODY_1","ONBACKGROUND_2","isSupportedFileView","IconTypes","DOWNLOAD","IconColors","ON_BACKGROUND_1","DELETE","GRAY","CLOSE","isVideo","isImage","H_1","FileViewer","message","deleteMessage","useChannelContext","sender","_e","threadInfo","user","_c","_b","useSendbirdStateContext","config","userId","_d","replyCount","_f","createPortal","then","document","getElementById","MODAL_ROOT"],"mappings":"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"}
+{"version":3,"file":"FileViewer.js","sources":["../../../src/modules/Channel/components/FileViewer/index.tsx"],"sourcesContent":["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport type { FileMessage } from '@sendbird/chat/message';\n\nimport './file-viewer.scss';\nimport Avatar from '../../../../ui/Avatar';\nimport Label, { LabelTypography, LabelColors } from '../../../../ui/Label';\nimport Icon, { IconColors, IconTypes } from '../../../../ui/Icon';\nimport { MODAL_ROOT } from '../../../../hooks/useModal/ModalRoot';\n\nimport { isImage, isVideo, isSupportedFileView } from '../../../../utils';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\nimport { useChannelContext } from '../../context/ChannelProvider';\nimport { EveryMessage } from '../../../../types';\n\ntype FileViewerUIProps = {\n  profileUrl: string;\n  nickname: string;\n  // file\n  name: string;\n  type: string;\n  url: string;\n  // others\n  isByMe: boolean;\n  onCancel: () => void;\n  onDelete: () => void;\n  disableDelete: boolean;\n};\n\nexport const FileViewerComponent: React.FC<FileViewerUIProps> = ({\n  // sender\n  profileUrl,\n  nickname,\n  // file\n  name,\n  type,\n  url,\n  // others\n  isByMe,\n  onCancel,\n  onDelete,\n  disableDelete,\n}: FileViewerUIProps) => (\n  <div className=\"sendbird-fileviewer\">\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 className=\"sendbird-fileviewer__header__right\">\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              {\n                onDelete && isByMe && (\n                  <div className=\"sendbird-fileviewer__header__right__actions__delete\">\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={() => { if (!disableDelete) { onDelete(); } }}\n                    />\n                  </div>\n                )\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={onCancel}\n          />\n        </div>\n      </div>\n    </div>\n    <div className=\"sendbird-fileviewer__content\">\n      {isVideo(type) && (\n        <video controls className=\"sendbird-fileviewer__content__video\">\n          <source src={url} type={type} />\n        </video>\n      )}\n      {\n        isImage(type) && (\n          <img\n            src={url}\n            alt={name}\n            className=\"sendbird-fileviewer__content__img\"\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              Unsupoprted message\n            </Label>\n          </div>\n        )\n      }\n    </div>\n  </div>\n);\n\ntype FileViewerProps = {\n  onCancel:() => void;\n  message: FileMessage;\n};\n\nconst FileViewer: React.FC<FileViewerProps> = ({ onCancel, message }: FileViewerProps) => {\n  const { deleteMessage } = useChannelContext();\n  const {\n    sender,\n    type,\n    url,\n    name = '',\n    threadInfo,\n  } = message;\n  const user = useSendbirdStateContext()?.config?.userId;\n  const isByMe = user === message?.sender?.userId;\n  const disableDelete = threadInfo?.replyCount > 0;\n  const { profileUrl, nickname = '' } = sender;\n  return createPortal(\n    (\n      <FileViewerComponent\n        profileUrl={profileUrl}\n        nickname={nickname}\n        type={type}\n        url={url}\n        name={name}\n        onCancel={onCancel}\n        onDelete={() => {\n          deleteMessage(message as EveryMessage).then(() => {\n            onCancel();\n          });\n        }}\n        isByMe={isByMe}\n        disableDelete={disableDelete}\n      />\n    ),\n    document.getElementById(MODAL_ROOT),\n  );\n};\n\nexport default FileViewer;\n"],"names":["FileViewerComponent","_ref","profileUrl","nickname","name","type","url","isByMe","onCancel","onDelete","disableDelete","React","createElement","className","Avatar","height","width","src","Label","LabelTypography","H_2","color","LabelColors","ONBACKGROUND_1","BODY_1","ONBACKGROUND_2","isSupportedFileView","rel","href","target","Icon","IconTypes","DOWNLOAD","fillColor","IconColors","ON_BACKGROUND_1","DELETE","GRAY","onClick","CLOSE","isVideo","controls","isImage","alt","H_1","FileViewer","_ref2","_useSendbirdStateCont","_useSendbirdStateCont2","_message$sender","message","deleteMessage","useChannelContext","sender","threadInfo","user","useSendbirdStateContext","config","userId","replyCount","createPortal","then","document","getElementById","MODAL_ROOT"],"mappings":"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"}

package/Channel/components/FrozenNotification.js

@@ -1,14 +1,19 @@
 import React__default, { useContext } from 'react';
-import { a as LocalizationContext } from '../../LocalizationContext-4df0cc32.js';
-import { L as Label, a as LabelTypography } from '../../index-44470dab.js';
-import '../../stringSet-d555d877.js';
-import '../../index-07e060cd.js';
+import { a as LocalizationContext } from '../../LocalizationContext-1839d2db.js';
+import { L as Label, a as LabelTypography } from '../../index-e1cd2fcf.js';
+import '../../stringSet-d368e289.js';
+import '../../index-d9c12cf4.js';
 import 'prop-types';
 
-var FrozenNotification = function () {
-  var stringSet = useContext(LocalizationContext).stringSet;
+const FrozenNotification = _ref => {
+  let {
+    className = ''
+  } = _ref;
+  const {
+    stringSet
+  } = useContext(LocalizationContext);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-notification sendbird-notification--frozen"
+    className: `sendbird-notification sendbird-notification--frozen ${className}`
   }, /*#__PURE__*/React__default.createElement(Label, {
     className: "sendbird-notification__text",
     type: LabelTypography.CAPTION_2

package/Channel/components/FrozenNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"FrozenNotification.js","sources":["../../../src/smart-components/Channel/components/FrozenNotification/index.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport './frozen-notification.scss';\n\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport Label, { LabelTypography } from '../../../../ui/Label';\n\nconst FrozenNotification = (): JSX.Element => {\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className=\"sendbird-notification sendbird-notification--frozen\">\n      <Label\n        className=\"sendbird-notification__text\"\n        type={LabelTypography.CAPTION_2}\n      >\n        {stringSet.CHANNEL_FROZEN}\n      </Label>\n    </div>\n  );\n}\n\nexport default FrozenNotification;\n"],"names":["FrozenNotification","stringSet","useContext","LocalizationContext","React","LabelTypography","CAPTION_2","CHANNEL_FROZEN"],"mappings":";;;;;;;AAOMA,IAAAA,kBAAkB,GAAG,YAAA;AACjB,EAAA,IAAAC,SAAS,GAAKC,UAAU,CAACC,mBAAD,CAAV,UAAd,CAAA;EACR,oBACEC,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,SAAS,EAAC,qDAAA;AAAf,GAAA,eACEA,6BAAC,KAAD,EAAA;AACE,IAAA,SAAS,EAAC,6BADZ;IAEE,IAAI,EAAEC,eAAe,CAACC,SAAAA;AAFxB,GAAA,EAIGL,SAAS,CAACM,cAJb,CADF,CADF,CAAA;AAUD;;;;"}
+{"version":3,"file":"FrozenNotification.js","sources":["../../../src/modules/Channel/components/FrozenNotification/index.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport './frozen-notification.scss';\n\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport Label, { LabelTypography } from '../../../../ui/Label';\n\ninterface FrozenNotificationProps {\n  className?: string;\n}\n\nconst FrozenNotification = ({\n  className = '',\n}: FrozenNotificationProps): React.ReactElement => {\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className={`sendbird-notification sendbird-notification--frozen ${className}`}>\n      <Label\n        className=\"sendbird-notification__text\"\n        type={LabelTypography.CAPTION_2}\n      >\n        {stringSet.CHANNEL_FROZEN}\n      </Label>\n    </div>\n  );\n};\n\nexport default FrozenNotification;\n"],"names":["FrozenNotification","_ref","className","stringSet","useContext","LocalizationContext","React","createElement","Label","type","LabelTypography","CAPTION_2","CHANNEL_FROZEN"],"mappings":";;;;;;;AAWMA,MAAAA,kBAAkB,GAAGC,IAAA,IAEwB;EAAA,IAFvB;AAC1BC,IAAAA,SAAS,GAAG,EAAA;AACW,GAAC,GAAAD,IAAA,CAAA;EACxB,MAAM;AAAEE,IAAAA,SAAAA;AAAU,GAAC,GAAGC,UAAU,CAACC,mBAAmB,CAAC,CAAA;EACrD,oBACEC,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKL,SAAS,EAAG,uDAAsDA,SAAU,CAAA,CAAA;AAAE,GAAA,eACjFI,cAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;AACJN,IAAAA,SAAS,EAAC,6BAA6B;IACvCO,IAAI,EAAEC,eAAe,CAACC,SAAAA;AAAU,GAAA,EAE/BR,SAAS,CAACS,cAAc,CACnB,CACJ,CAAA;AAEV;;;;"}