@sendbird/uikit-react 3.0.0-beta.4 → 3.0.0-rc.0

package/cjs/Channel/components/ChannelHeader.js

@@ -0,0 +1,127 @@
+'use strict';
+
+var React = require('react');
+var ui_Label = require('../../index-df05e765.js');
+var ui_Icon = require('../../ui/Icon.js');
+var ui_IconButton = require('../../ui/IconButton.js');
+var ui_ChannelAvatar = require('../../ui/ChannelAvatar.js');
+var LocalizationContext = require('../../LocalizationContext-5a6a0f67.js');
+var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
+var Channel_context = require('../../ChannelProvider-a3ec5a56.js');
+require('../../_rollupPluginBabelHelpers-d984e855.js');
+require('prop-types');
+require('../../stringSet-2f3588b5.js');
+require('../../ui/Avatar.js');
+require('../../tslib.es6-d9c7aa8b.js');
+require('../../ui/ImageRenderer.js');
+require('../../uuid-099485ae.js');
+require('../../utils-510b93ac.js');
+require('../../index-72479c2a.js');
+require('../../withSendBird.js');
+require('../../UserProfileContext-17c8f75c.js');
+require('../../index-cdcd27bc.js');
+require('../../topics-582e38dc.js');
+require('../../index-40d245a3.js');
+require('../../compareIds-d8053014.js');
+require('../../const-6aa26f9f.js');
+require('../../groupChannel-e311e26a.js');
+require('../../__bundle-7dfccc8c-c3c55861.js');
+require('../../ui/ContextMenu.js');
+require('react-dom');
+require('../../ui/SortByRow.js');
+require('../../ui/ReactionButton.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var getChannelTitle = function getChannelTitle(channel, currentUserId, stringSet) {
+  var _a;
+
+  var LABEL_STRING_SET = stringSet || ui_Label.LabelStringSet;
+
+  if (!(channel === null || channel === void 0 ? void 0 : channel.name) && !(channel === null || channel === void 0 ? void 0 : channel.members)) {
+    return LABEL_STRING_SET.NO_TITLE;
+  }
+
+  if ((channel === null || channel === void 0 ? void 0 : channel.name) && channel.name !== 'Group Channel') {
+    return channel.name;
+  }
+
+  if (((_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.length) === 1) {
+    return LABEL_STRING_SET.NO_MEMBERS;
+  }
+
+  return channel === null || channel === void 0 ? void 0 : channel.members.filter(function (_a) {
+    var userId = _a.userId;
+    return userId !== currentUserId;
+  }).map(function (_a) {
+    var nickname = _a.nickname;
+    return nickname || LABEL_STRING_SET.NO_NAME;
+  }).join(', ');
+};
+
+var ChatHeader = function ChatHeader() {
+  var _a, _b, _c;
+
+  var globalStore = useSendbirdStateContext();
+  var userId = (_a = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config) === null || _a === void 0 ? void 0 : _a.userId;
+  var theme = (_b = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config) === null || _b === void 0 ? void 0 : _b.theme;
+  var channelStore = Channel_context.useChannelContext();
+  var currentGroupChannel = channelStore.currentGroupChannel,
+      showSearchIcon = channelStore.showSearchIcon,
+      onSearchClick = channelStore.onSearchClick,
+      onChatHeaderActionClick = channelStore.onChatHeaderActionClick;
+  var subTitle = (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.members) && ((_c = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.members) === null || _c === void 0 ? void 0 : _c.length) !== 2;
+  var isMuted = (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.myMutedState) === "muted";
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-chat-header"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-chat-header__left"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_ChannelAvatar, {
+    theme: theme,
+    channel: currentGroupChannel,
+    userId: userId,
+    height: 32,
+    width: 32
+  }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-chat-header__left__title",
+    type: ui_Label.LabelTypography.H_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, getChannelTitle(currentGroupChannel, userId, stringSet)), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-chat-header__left__subtitle",
+    type: ui_Label.LabelTypography.BODY_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, subTitle)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-chat-header__right"
+  }, (typeof isMuted === 'string' && isMuted === 'true' || typeof isMuted === 'boolean' && isMuted) && /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    className: "sendbird-chat-header__right__mute",
+    type: ui_Icon.IconTypes.NOTIFICATIONS_OFF_FILLED,
+    width: "24px",
+    height: "24px"
+  }), showSearchIcon && /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
+    className: "sendbird-chat-header__right__search",
+    width: "32px",
+    height: "32px",
+    onClick: onSearchClick
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.SEARCH,
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  })), /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
+    className: "sendbird-chat-header__right__info",
+    width: "32px",
+    height: "32px",
+    onClick: onChatHeaderActionClick
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.INFO,
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }))));
+};
+
+module.exports = ChatHeader;
+//# sourceMappingURL=ChannelHeader.js.map

package/cjs/Channel/components/ChannelHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelHeader.js","sources":["../../../../src/smart-components/Channel/components/ChannelHeader/utils.ts","../../../../src/smart-components/Channel/components/ChannelHeader/index.tsx"],"sourcesContent":["import type { GroupChannel } from '@sendbird/chat/groupChannel';\nimport { LabelStringSet } from '../../../../ui/Label';\n\nexport const getChannelTitle = (\n  channel: GroupChannel,\n  currentUserId: string,\n  stringSet: { [label: string]: string }\n  ): string => {\n  const LABEL_STRING_SET: { [label: string]: string } = stringSet || LabelStringSet;\n  if (!channel?.name && !channel?.members) {\n    return LABEL_STRING_SET.NO_TITLE;\n  }\n  if (channel?.name && channel.name !== 'Group Channel') {\n    return channel.name;\n  }\n\n  if (channel?.members?.length === 1) {\n    return LABEL_STRING_SET.NO_MEMBERS;\n  }\n\n  return channel?.members\n    .filter(({ userId }) => userId !== currentUserId)\n    .map(({ nickname }) => (nickname || LABEL_STRING_SET.NO_NAME))\n    .join(', ');\n};\n","import './channel-header.scss';\nimport React, { useContext } from 'react';\n\nimport * as utils from './utils';\n\nimport Label, { LabelTypography, LabelColors } from '../../../../ui/Label';\nimport Icon, { IconTypes, IconColors } from '../../../../ui/Icon';\nimport IconButton from '../../../../ui/IconButton';\nimport ChannelAvatar from '../../../../ui/ChannelAvatar/index';\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\nimport { useChannelContext } from '../../context/ChannelProvider';\n\nconst ChatHeader: React.FC = () => {\n  const globalStore = useSendbirdStateContext();\n  const userId = globalStore?.config?.userId;\n  const theme = globalStore?.config?.theme;\n\n  const channelStore = useChannelContext();\n  const {\n    currentGroupChannel,\n    showSearchIcon,\n    onSearchClick,\n    onChatHeaderActionClick,\n  } = channelStore;\n  const subTitle = (currentGroupChannel?.members\n    && currentGroupChannel?.members?.length !== 2);\n  const isMuted = currentGroupChannel?.myMutedState === \"muted\";\n\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div className=\"sendbird-chat-header\">\n      <div className=\"sendbird-chat-header__left\">\n        <ChannelAvatar\n          theme={theme}\n          channel={currentGroupChannel}\n          userId={userId}\n          height={32}\n          width={32}\n        />\n        <Label\n          className=\"sendbird-chat-header__left__title\"\n          type={LabelTypography.H_2}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {utils.getChannelTitle(currentGroupChannel, userId, stringSet)}\n        </Label>\n        <Label\n          className=\"sendbird-chat-header__left__subtitle\"\n          type={LabelTypography.BODY_1}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {subTitle}\n        </Label>\n      </div>\n      <div className=\"sendbird-chat-header__right\">\n        {\n          ((typeof isMuted === 'string' && isMuted === 'true') || (typeof isMuted === 'boolean' && isMuted))\n            && (\n              <Icon\n                className=\"sendbird-chat-header__right__mute\"\n                type={IconTypes.NOTIFICATIONS_OFF_FILLED}\n                width=\"24px\"\n                height=\"24px\"\n              />\n            )\n        }\n        {\n          showSearchIcon && (\n            <IconButton\n              className=\"sendbird-chat-header__right__search\"\n              width=\"32px\"\n              height=\"32px\"\n              onClick={onSearchClick}\n            >\n              <Icon\n                type={IconTypes.SEARCH}\n                fillColor={IconColors.PRIMARY}\n                width=\"24px\"\n                height=\"24px\"\n              />\n            </IconButton>\n          )\n        }\n        <IconButton\n          className=\"sendbird-chat-header__right__info\"\n          width=\"32px\"\n          height=\"32px\"\n          onClick={onChatHeaderActionClick}\n        >\n          <Icon\n            type={IconTypes.INFO}\n            fillColor={IconColors.PRIMARY}\n            width=\"24px\"\n            height=\"24px\"\n          />\n        </IconButton>\n      </div>\n    </div>\n  );\n}\n\nexport default ChatHeader;\n"],"names":["getChannelTitle","channel","currentUserId","stringSet","LABEL_STRING_SET","LabelStringSet","name","members","NO_TITLE","length","NO_MEMBERS","filter","_a","userId","map","nickname","NO_NAME","join","ChatHeader","globalStore","useSendbirdStateContext","config","theme","channelStore","useChannelContext","currentGroupChannel","showSearchIcon","onSearchClick","onChatHeaderActionClick","subTitle","isMuted","myMutedState","useContext","LocalizationContext","React","ChannelAvatar","Label","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","utils","BODY_1","ONBACKGROUND_2","Icon","IconTypes","NOTIFICATIONS_OFF_FILLED","IconButton","SEARCH","IconColors","PRIMARY","INFO"],"mappings":"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"}

package/cjs/Channel/components/ChannelUI.js

@@ -0,0 +1,188 @@
+'use strict';
+
+var React = require('react');
+var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
+var Channel_context = require('../../ChannelProvider-a3ec5a56.js');
+var ui_PlaceHolder = require('../../index-1e14c5b9.js');
+var ui_ConnectionStatus = require('../../ui/ConnectionStatus.js');
+var Channel_components_ChannelHeader = require('./ChannelHeader.js');
+var Channel_components_MessageList = require('./MessageList.js');
+var Channel_components_TypingIndicator = require('./TypingIndicator.js');
+var Channel_components_FrozenNotification = require('./FrozenNotification.js');
+var Channel_components_UnreadCount = require('./UnreadCount.js');
+var Channel_components_MessageInput = require('./MessageInput.js');
+require('../../withSendBird.js');
+require('../../_rollupPluginBabelHelpers-d984e855.js');
+require('../../UserProfileContext-17c8f75c.js');
+require('prop-types');
+require('../../index-cdcd27bc.js');
+require('../../index-72479c2a.js');
+require('../../topics-582e38dc.js');
+require('../../index-40d245a3.js');
+require('../../tslib.es6-d9c7aa8b.js');
+require('../../compareIds-d8053014.js');
+require('../../const-6aa26f9f.js');
+require('../../groupChannel-e311e26a.js');
+require('../../__bundle-7dfccc8c-c3c55861.js');
+require('../../uuid-099485ae.js');
+require('../../ui/ContextMenu.js');
+require('../../index-df05e765.js');
+require('../../stringSet-2f3588b5.js');
+require('react-dom');
+require('../../ui/SortByRow.js');
+require('../../ui/ReactionButton.js');
+require('../../ui/ImageRenderer.js');
+require('../../ui/Icon.js');
+require('../../ui/Loader.js');
+require('../../LocalizationContext-5a6a0f67.js');
+require('../../ui/IconButton.js');
+require('../../ui/ChannelAvatar.js');
+require('../../ui/Avatar.js');
+require('../../utils-510b93ac.js');
+require('../../index-ab5d906d.js');
+require('./Message.js');
+require('./SuggestedMentionList.js');
+require('../../const-2623fae1.js');
+require('../../ui/DateSeparator.js');
+require('../../color-b30f84a2.js');
+require('../../ui/MessageInput.js');
+require('stream');
+require('../../index-f9677913.js');
+require('../../ui/MentionUserLabel.js');
+require('../../ui/MessageContent.js');
+require('../../ui/UserProfile.js');
+require('../../sendbirdSelectors.js');
+require('../../utils-031aba48.js');
+require('../../ui/MessageStatus.js');
+require('../../ui/MessageItemMenu.js');
+require('../../ui/MessageItemReactionMenu.js');
+require('../../ui/EmojiReactions.js');
+require('../../ui/Tooltip.js');
+require('../../ui/TooltipWrapper.js');
+require('../../ui/ReactionBadge.js');
+require('../../ui/AdminMessage.js');
+require('../../ui/TextMessageItemBody.js');
+require('../../ui/Word.js');
+require('../../ui/LinkLabel.js');
+require('../../ui/MentionLabel.js');
+require('../../ui/FileMessageItemBody.js');
+require('../../ui/TextButton.js');
+require('../../ui/ThumbnailMessageItemBody.js');
+require('../../ui/OGMessageItemBody.js');
+require('../../ui/UnknownMessageItemBody.js');
+require('../../ui/QuoteMessage.js');
+require('./FileViewer.js');
+require('../../index-ce679d41.js');
+require('./RemoveMessageModal.js');
+require('../../ui/Modal.js');
+require('../../ui/QuoteMessageInput.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ChannelUI = function ChannelUI(_a) {
+  var _b, _c, _d, _e;
+
+  var renderPlaceholderLoader = _a.renderPlaceholderLoader,
+      renderPlaceholderInvalid = _a.renderPlaceholderInvalid,
+      renderPlaceholderEmpty = _a.renderPlaceholderEmpty,
+      renderChannelHeader = _a.renderChannelHeader,
+      renderMessage = _a.renderMessage,
+      renderMessageInput = _a.renderMessageInput,
+      renderTypingIndicator = _a.renderTypingIndicator,
+      renderCustomSeparator = _a.renderCustomSeparator;
+
+  var _f = Channel_context.useChannelContext(),
+      currentGroupChannel = _f.currentGroupChannel,
+      channelUrl = _f.channelUrl,
+      isInvalid = _f.isInvalid,
+      unreadSince = _f.unreadSince,
+      loading = _f.loading,
+      setInitialTimeStamp = _f.setInitialTimeStamp,
+      setAnimatedMessageId = _f.setAnimatedMessageId,
+      setHighLightedMessageId = _f.setHighLightedMessageId,
+      scrollRef = _f.scrollRef,
+      messagesDispatcher = _f.messagesDispatcher;
+
+  var _g = React.useState(0),
+      unreadCount = _g[0],
+      setUnreadCount = _g[1];
+
+  React.useEffect(function () {
+    setUnreadCount(currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.unreadMessageCount);
+  }, [currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.unreadMessageCount]);
+  var globalStore = useSendbirdStateContext();
+  var sdkError = (_c = (_b = globalStore === null || globalStore === void 0 ? void 0 : globalStore.stores) === null || _b === void 0 ? void 0 : _b.sdkStore) === null || _c === void 0 ? void 0 : _c.error;
+  var logger = (_d = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config) === null || _d === void 0 ? void 0 : _d.logger;
+  var isOnline = (_e = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config) === null || _e === void 0 ? void 0 : _e.isOnline;
+
+  if (!channelUrl) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "sendbird-conversation"
+    }, (renderPlaceholderInvalid === null || renderPlaceholderInvalid === void 0 ? void 0 : renderPlaceholderInvalid()) || /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
+      type: ui_PlaceHolder.PlaceHolderTypes.NO_CHANNELS
+    }));
+  }
+
+  if (isInvalid) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "sendbird-conversation"
+    }, (renderPlaceholderInvalid === null || renderPlaceholderInvalid === void 0 ? void 0 : renderPlaceholderInvalid()) || /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
+      type: ui_PlaceHolder.PlaceHolderTypes.WRONG
+    }));
+  }
+
+  if (sdkError) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "sendbird-conversation"
+    }, (renderPlaceholderInvalid === null || renderPlaceholderInvalid === void 0 ? void 0 : renderPlaceholderInvalid()) || /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
+      type: ui_PlaceHolder.PlaceHolderTypes.WRONG,
+      retryToConnect: function retryToConnect() {
+        logger.info('Channel: reconnecting'); // reconnect();
+      }
+    }));
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-conversation"
+  }, (renderChannelHeader === null || renderChannelHeader === void 0 ? void 0 : renderChannelHeader()) || /*#__PURE__*/React__default["default"].createElement(Channel_components_ChannelHeader, null), (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.isFrozen) && /*#__PURE__*/React__default["default"].createElement(Channel_components_FrozenNotification, null), unreadCount > 0 && /*#__PURE__*/React__default["default"].createElement(Channel_components_UnreadCount, {
+    count: unreadCount,
+    time: unreadSince,
+    onClick: function onClick() {
+      var _a, _b, _c;
+
+      setUnreadCount(0);
+
+      if ((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) {
+        scrollRef.current.scrollTop = ((_b = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) - ((_c = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight);
+      }
+
+      currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.markAsRead();
+      messagesDispatcher({
+        type: Channel_context.MARK_AS_READ,
+        payload: {
+          channel: currentGroupChannel
+        }
+      });
+      setInitialTimeStamp(null);
+      setAnimatedMessageId(null);
+      setHighLightedMessageId(null);
+    }
+  }), loading ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-conversation"
+  }, (renderPlaceholderLoader === null || renderPlaceholderLoader === void 0 ? void 0 : renderPlaceholderLoader()) || /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
+    type: ui_PlaceHolder.PlaceHolderTypes.LOADING
+  })) : /*#__PURE__*/React__default["default"].createElement(Channel_components_MessageList, {
+    renderMessage: renderMessage,
+    renderPlaceholderEmpty: renderPlaceholderEmpty,
+    renderCustomSeparator: renderCustomSeparator
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-conversation__footer"
+  }, (renderMessageInput === null || renderMessageInput === void 0 ? void 0 : renderMessageInput()) || /*#__PURE__*/React__default["default"].createElement(Channel_components_MessageInput, null), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-conversation__footer__typing-indicator"
+  }, (renderTypingIndicator === null || renderTypingIndicator === void 0 ? void 0 : renderTypingIndicator()) || /*#__PURE__*/React__default["default"].createElement(Channel_components_TypingIndicator["default"], null), !isOnline && /*#__PURE__*/React__default["default"].createElement(ui_ConnectionStatus, null))));
+};
+
+module.exports = ChannelUI;
+//# sourceMappingURL=ChannelUI.js.map

package/cjs/Channel/components/ChannelUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChannelUI.js","sources":["../../../../src/smart-components/Channel/components/ChannelUI/index.tsx"],"sourcesContent":["import './channel-ui.scss';\n\nimport React, { useEffect, useState } from 'react';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\n\nimport { useChannelContext } from '../../context/ChannelProvider';\nimport PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';\nimport ConnectionStatus from '../../../../ui/ConnectionStatus';\nimport ChannelHeader from '../ChannelHeader';\nimport MessageList from '../MessageList';\nimport TypingIndicator from '../TypingIndicator';\nimport FrozenNotification from '../FrozenNotification';\nimport UnreadCount from '../UnreadCount';\nimport MessageInputWrapper from '../MessageInput';\nimport { RenderMessageProps } from '../../../../types';\nimport * as messageActionTypes from '../../context/dux/actionTypes';\n\nexport interface ChannelUIProps {\n  renderPlaceholderLoader?: () => React.ReactNode;\n  renderPlaceholderInvalid?: () => React.ReactNode;\n  renderPlaceholderEmpty?: () => React.ReactNode;\n  renderChannelHeader?: () => React.ReactNode;\n  renderMessage?: (props: RenderMessageProps) => React.ReactNode;\n  renderMessageInput?: () => React.ReactNode;\n  renderTypingIndicator?: () => React.ReactNode;\n  renderCustomSeparator?: () => React.ReactNode;\n}\n\nconst ChannelUI: React.FC<ChannelUIProps> = ({\n  renderPlaceholderLoader,\n  renderPlaceholderInvalid,\n  renderPlaceholderEmpty,\n  renderChannelHeader,\n  renderMessage,\n  renderMessageInput,\n  renderTypingIndicator,\n  renderCustomSeparator,\n}: ChannelUIProps) => {\n  const {\n    currentGroupChannel,\n    channelUrl,\n    isInvalid,\n    unreadSince,\n    loading,\n    setInitialTimeStamp,\n    setAnimatedMessageId,\n    setHighLightedMessageId,\n    scrollRef,\n    messagesDispatcher,\n  } = useChannelContext();\n  const [unreadCount, setUnreadCount] = useState(0);\n  useEffect(() => {\n    setUnreadCount(currentGroupChannel?.unreadMessageCount);\n  }, [currentGroupChannel?.unreadMessageCount]);\n\n  const globalStore = useSendbirdStateContext();\n  const sdkError = globalStore?.stores?.sdkStore?.error;\n  const logger = globalStore?.config?.logger;\n  const isOnline = globalStore?.config?.isOnline;\n\n  if (!channelUrl) {\n    return (<div className=\"sendbird-conversation\">\n      {\n        renderPlaceholderInvalid?.() || (\n          <PlaceHolder type={PlaceHolderTypes.NO_CHANNELS} />\n        )\n      }\n    </div>);\n  }\n  if (isInvalid) {\n    return (\n      <div className=\"sendbird-conversation\">\n        {\n          renderPlaceholderInvalid?.() || (\n            <PlaceHolder type={PlaceHolderTypes.WRONG} />\n          )\n        }\n      </div>\n    );\n  }\n  if (sdkError) {\n    return (\n      <div className=\"sendbird-conversation\">\n        {\n          renderPlaceholderInvalid?.() || (\n            <PlaceHolder\n              type={PlaceHolderTypes.WRONG}\n              retryToConnect={() => {\n                logger.info('Channel: reconnecting');\n                // reconnect();\n              }}\n            />\n          )\n        }\n      </div>\n    );\n  }\n  return (\n    <div className='sendbird-conversation'>\n      {\n        renderChannelHeader?.() || (\n          <ChannelHeader />\n        )\n      }\n      {\n        currentGroupChannel?.isFrozen && (\n          <FrozenNotification />\n        )\n      }\n      {\n        unreadCount > 0 && (\n          <UnreadCount\n            count={unreadCount}\n            time={unreadSince}\n            onClick={() => {\n              setUnreadCount(0);\n              if (scrollRef?.current?.scrollTop) {\n                scrollRef.current.scrollTop = scrollRef?.current?.scrollHeight - scrollRef?.current?.offsetHeight;\n              }\n              currentGroupChannel?.markAsRead();\n              messagesDispatcher({\n                type: messageActionTypes.MARK_AS_READ,\n                payload: { channel: currentGroupChannel },\n              });\n              setInitialTimeStamp(null);\n              setAnimatedMessageId(null);\n              setHighLightedMessageId(null);\n            }}\n          />\n        )\n      }\n      {\n        loading\n          ? (\n            <div className=\"sendbird-conversation\">\n              {\n                renderPlaceholderLoader?.() || (\n                  <PlaceHolder type={PlaceHolderTypes.LOADING} />\n                )\n              }\n            </div>\n          ) : (\n            <MessageList\n              renderMessage={renderMessage}\n              renderPlaceholderEmpty={renderPlaceholderEmpty}\n              renderCustomSeparator={renderCustomSeparator}\n            />\n          )\n      }\n      <div className=\"sendbird-conversation__footer\">\n        {\n          renderMessageInput?.() || (\n            <MessageInputWrapper />\n          )\n        }\n        <div className=\"sendbird-conversation__footer__typing-indicator\">\n          {\n            renderTypingIndicator?.() || (\n              <TypingIndicator />\n            )\n          }\n          {\n            !isOnline && (\n              <ConnectionStatus />\n            )\n          }\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default ChannelUI;\n"],"names":["ChannelUI","_a","renderPlaceholderLoader","renderPlaceholderInvalid","renderPlaceholderEmpty","renderChannelHeader","renderMessage","renderMessageInput","renderTypingIndicator","renderCustomSeparator","_f","useChannelContext","currentGroupChannel","channelUrl","isInvalid","unreadSince","loading","setInitialTimeStamp","setAnimatedMessageId","setHighLightedMessageId","scrollRef","messagesDispatcher","_g","useState","unreadCount","setUnreadCount","useEffect","unreadMessageCount","globalStore","useSendbirdStateContext","sdkError","stores","sdkStore","error","logger","config","isOnline","React","PlaceHolder","PlaceHolderTypes","NO_CHANNELS","WRONG","info","ChannelHeader","isFrozen","FrozenNotification","UnreadCount","current","scrollTop","scrollHeight","offsetHeight","markAsRead","type","messageActionTypes","payload","channel","LOADING","MessageList","MessageInputWrapper","TypingIndicator","ConnectionStatus"],"mappings":"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"}

package/cjs/Channel/components/FileViewer.js

@@ -0,0 +1,162 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactDom = require('react-dom');
+var ui_Avatar = require('../../ui/Avatar.js');
+var ui_Label = require('../../index-df05e765.js');
+var ui_Icon = require('../../ui/Icon.js');
+var index$1 = require('../../index-ce679d41.js');
+var index = require('../../index-40d245a3.js');
+var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
+var Channel_context = require('../../ChannelProvider-a3ec5a56.js');
+require('../../tslib.es6-d9c7aa8b.js');
+require('../../ui/ImageRenderer.js');
+require('../../_rollupPluginBabelHelpers-d984e855.js');
+require('prop-types');
+require('../../uuid-099485ae.js');
+require('../../stringSet-2f3588b5.js');
+require('../../withSendBird.js');
+require('../../UserProfileContext-17c8f75c.js');
+require('../../index-cdcd27bc.js');
+require('../../index-72479c2a.js');
+require('../../topics-582e38dc.js');
+require('../../compareIds-d8053014.js');
+require('../../const-6aa26f9f.js');
+require('../../groupChannel-e311e26a.js');
+require('../../__bundle-7dfccc8c-c3c55861.js');
+require('../../ui/ContextMenu.js');
+require('../../ui/SortByRow.js');
+require('../../ui/ReactionButton.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var FileViewerComponent = function FileViewerComponent(_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;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header__left"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header__left__avatar"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+    height: "32px",
+    width: "32px",
+    src: profileUrl
+  })), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-fileviewer__header__left__filename",
+    type: ui_Label.LabelTypography.H_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, name), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-fileviewer__header__left__sender-name",
+    type: ui_Label.LabelTypography.BODY_1,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, nickname)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header__right"
+  }, 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",
+    rel: "noopener noreferrer",
+    href: url,
+    target: "_blank"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.DOWNLOAD,
+    fillColor: ui_Icon.IconColors.ON_BACKGROUND_1,
+    height: "24px",
+    width: "24px"
+  })), onDelete && isByMe && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header__right__actions__delete"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    className: disableDelete ? 'disabled' : '',
+    type: ui_Icon.IconTypes.DELETE,
+    fillColor: disableDelete ? ui_Icon.IconColors.GRAY : ui_Icon.IconColors.ON_BACKGROUND_1,
+    height: "24px",
+    width: "24px",
+    onClick: function onClick() {
+      if (!disableDelete) {
+        onDelete();
+      }
+    }
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__header__right__actions__close"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.CLOSE,
+    fillColor: ui_Icon.IconColors.ON_BACKGROUND_1,
+    height: "24px",
+    width: "24px",
+    onClick: onCancel
+  })))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-fileviewer__content"
+  }, 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.isImage(type) && /*#__PURE__*/React__default["default"].createElement("img", {
+    src: url,
+    alt: name,
+    className: "sendbird-fileviewer__content__img"
+  }), !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
+  }, "Unsupoprted message"))));
+};
+
+var FileViewer = function FileViewer(_a) {
+  var _b, _c, _d;
+
+  var onCancel = _a.onCancel,
+      message = _a.message;
+  var deleteMessage = Channel_context.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;
+  return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(FileViewerComponent, {
+    profileUrl: profileUrl,
+    nickname: nickname,
+    type: type,
+    url: url,
+    name: name,
+    onCancel: onCancel,
+    onDelete: function onDelete() {
+      deleteMessage(message).then(function () {
+        onCancel();
+      });
+    },
+    isByMe: isByMe,
+    disableDelete: disableDelete
+  }), document.getElementById(index$1.MODAL_ROOT));
+};
+
+exports.FileViewerComponent = FileViewerComponent;
+exports["default"] = FileViewer;
+//# sourceMappingURL=FileViewer.js.map

package/cjs/Channel/components/FileViewer.js.map

@@ -0,0 +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","Avatar","Label","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","BODY_1","ONBACKGROUND_2","isSupportedFileView","Icon","IconTypes","DOWNLOAD","IconColors","ON_BACKGROUND_1","DELETE","GRAY","CLOSE","isVideo","isImage","H_1","FileViewer","message","deleteMessage","useChannelContext","sender","_e","threadInfo","user","useSendbirdStateContext","config","userId","replyCount","_f","createPortal","then","document","getElementById","MODAL_ROOT"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6BaA,mBAAmB,GAAgC,SAAnDA,mBAAmD,CAACC,EAAD;;AAE9DC,EAAAA,UAAU;MACVC,QAAQ;;AAERC,EAAAA,IAAI;MACJC,IAAI;MACJC,GAAG;;AAEHC,EAAAA,MAAM;MACNC,QAAQ;MACRC,QAAQ;MACRC,aAAa;AACU,sBACvBC;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,wCAACC,oBAAD;AAAQ,IAAA,MAAM,EAAC,MAAf;AAAsB,IAAA,KAAK,EAAC,MAA5B;AAAmC,IAAA,GAAG,EAAEV;AAAxC,IADF,CADF,eAIES,wCAACE,cAAD;AACE,IAAA,SAAS,EAAC,6CADZ;AAEE,IAAA,IAAI,EAAEC,wBAAe,CAACC,GAFxB;AAGE,IAAA,KAAK,EAAEC,oBAAW,CAACC;AAHrB,KAKGb,IALH,CAJF,eAWEO,wCAACE,cAAD;AACE,IAAA,SAAS,EAAC,gDADZ;AAEE,IAAA,IAAI,EAAEC,wBAAe,CAACI,MAFxB;AAGE,IAAA,KAAK,EAAEF,oBAAW,CAACG;AAHrB,KAKGhB,QALH,CAXF,CADF,eAoBEQ;AAAK,IAAA,SAAS,EAAC;AAAf,KAEIS,yBAAmB,CAACf,IAAD,CAAnB,iBACEM;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA;AACE,IAAA,SAAS,EAAC,uDADZ;AAEE,IAAA,GAAG,EAAC,qBAFN;AAGE,IAAA,IAAI,EAAEL,GAHR;AAIE,IAAA,MAAM,EAAC;AAJT,kBAMEK,wCAACU,kBAAD;AACE,IAAA,IAAI,EAAEC,iBAAS,CAACC,QADlB;AAEE,IAAA,SAAS,EAAEC,kBAAU,CAACC,eAFxB;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,KAAK,EAAC;AAJR,IANF,CADF,EAeIhB,QAAQ,IAAIF,MAAZ,iBACEI;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,wCAACU,kBAAD;AACE,IAAA,SAAS,EAAEX,aAAa,GAAG,UAAH,GAAgB,EAD1C;AAEE,IAAA,IAAI,EAAEY,iBAAS,CAACI,MAFlB;AAGE,IAAA,SAAS,EAAEhB,aAAa,GAAGc,kBAAU,CAACG,IAAd,GAAqBH,kBAAU,CAACC,eAH1D;AAIE,IAAA,MAAM,EAAC,MAJT;AAKE,IAAA,KAAK,EAAC,MALR;AAME,IAAA,OAAO,EAAE;AAAQ,UAAI,CAACf,aAAL,EAAoB;AAAED,QAAAA,QAAQ;AAAK;AAAE;AANxD,IADF,CAhBN,CAHN,eAkCEE;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,wCAACU,kBAAD;AACE,IAAA,IAAI,EAAEC,iBAAS,CAACM,KADlB;AAEE,IAAA,SAAS,EAAEJ,kBAAU,CAACC,eAFxB;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,KAAK,EAAC,MAJR;AAKE,IAAA,OAAO,EAAEjB;AALX,IADF,CAlCF,CApBF,CADF,eAkEEG;AAAK,IAAA,SAAS,EAAC;AAAf,KACGkB,aAAO,CAACxB,IAAD,CAAP,iBACCM;AAAO,IAAA,QAAQ,MAAf;AAAgB,IAAA,SAAS,EAAC;AAA1B,kBACEA;AAAQ,IAAA,GAAG,EAAEL,GAAb;AAAkB,IAAA,IAAI,EAAED;AAAxB,IADF,CAFJ,EAOIyB,aAAO,CAACzB,IAAD,CAAP,iBACEM;AACE,IAAA,GAAG,EAAEL,GADP;AAEE,IAAA,GAAG,EAAEF,IAFP;AAGE,IAAA,SAAS,EAAC;AAHZ,IARN,EAgBI,CAACgB,yBAAmB,CAACf,IAAD,CAApB,iBACEM;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,wCAACE,cAAD;AAAO,IAAA,IAAI,EAAEC,wBAAe,CAACiB,GAA7B;AAAkC,IAAA,KAAK,EAAEf,oBAAW,CAACC;AAArD,2BADF,CAjBN,CAlEF,CADuB;AA6FxB;;IAOKe,UAAU,GAA8B,SAAxCA,UAAwC,CAAC/B,EAAD;;;MAAGO,QAAQ;MAAEyB,OAAO;AACxD,MAAAC,aAAa,GAAKC,iCAAiB,gBAAnC;AAEN,MAAAC,MAAM,GAKJH,OAAO,OALT;AAAA,MACA5B,IAAI,GAIF4B,OAAO,KALT;AAAA,MAEA3B,GAAG,GAGD2B,OAAO,IALT;AAAA,MAGAI,KAEEJ,OAAO,KALT;AAAA,MAGA7B,IAAI,mBAAG,OAHP;AAAA,MAIAkC,UAAU,GACRL,OAAO,WALT;AAMF,MAAMM,IAAI,GAAG,MAAA,MAAAC,uBAAuB,EAAvB,UAAA,iBAAA,SAAA,MAA2BC,MAA3B,UAAA,iBAAA,SAAA,MAAmCC,MAAhD;AACA,MAAMnC,MAAM,GAAGgC,IAAI,MAAK,MAAAN,OAAO,SAAP,IAAAA,OAAO,WAAP,SAAA,GAAAA,OAAO,CAAEG,MAAT,UAAA,iBAAA,SAAA,MAAiBM,MAAtB,CAAnB;AACA,MAAMhC,aAAa,GAAG,CAAA4B,UAAU,SAAV,IAAAA,UAAU,WAAV,SAAA,GAAAA,UAAU,CAAEK,UAAZ,IAAyB,CAA/C;AACQ,MAAAzC,UAAU,GAAoBkC,MAAM,WAApC;AAAA,MAAYQ,KAAkBR,MAAM,SAApC;AAAA,MAAYjC,QAAQ,mBAAG,OAAvB;AACR,sBAAO0C,qBAAY,eAEflC,wCAAC,mBAAD;AACE,IAAA,UAAU,EAAET,UADd;AAEE,IAAA,QAAQ,EAAEC,QAFZ;AAGE,IAAA,IAAI,EAAEE,IAHR;AAIE,IAAA,GAAG,EAAEC,GAJP;AAKE,IAAA,IAAI,EAAEF,IALR;AAME,IAAA,QAAQ,EAAEI,QANZ;AAOE,IAAA,QAAQ,EAAE;AACR0B,MAAAA,aAAa,CAACD,OAAD,CAAb,CAAuCa,IAAvC,CAA4C;AAC1CtC,QAAAA,QAAQ;AACT,OAFD;AAGD,KAXH;AAYE,IAAA,MAAM,EAAED,MAZV;AAaE,IAAA,aAAa,EAAEG;AAbjB,IAFe,EAkBjBqC,QAAQ,CAACC,cAAT,CAAwBC,kBAAxB,CAlBiB,CAAnB;AAoBD;;;;;"}

package/cjs/Channel/components/FrozenNotification.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var React = require('react');
+var LocalizationContext = require('../../LocalizationContext-5a6a0f67.js');
+var ui_Label = require('../../index-df05e765.js');
+require('../../stringSet-2f3588b5.js');
+require('../../index-72479c2a.js');
+require('../../_rollupPluginBabelHelpers-d984e855.js');
+require('prop-types');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var FrozenNotification = function FrozenNotification() {
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-notification sendbird-notification--frozen"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-notification__text",
+    type: ui_Label.LabelTypography.CAPTION_2
+  }, stringSet.CHANNEL_FROZEN));
+};
+
+module.exports = FrozenNotification;
+//# sourceMappingURL=FrozenNotification.js.map

package/cjs/Channel/components/FrozenNotification.js.map

@@ -0,0 +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","Label","LabelTypography","CAPTION_2","CHANNEL_FROZEN"],"mappings":";;;;;;;;;;;;;;IAOMA,kBAAkB,GAAG,SAArBA,kBAAqB;AACjB,MAAAC,SAAS,GAAKC,gBAAU,CAACC,uCAAD,CAAV,UAAd;AACR,sBACEC;AAAK,IAAA,SAAS,EAAC;AAAf,kBACEA,wCAACC,cAAD;AACE,IAAA,SAAS,EAAC,6BADZ;AAEE,IAAA,IAAI,EAAEC,wBAAe,CAACC;AAFxB,KAIGN,SAAS,CAACO,cAJb,CADF,CADF;AAUD;;;;"}