@sendbird/uikit-react 3.3.7 → 3.4.0-rc.1

package/dist/MessageSearch.js

@@ -0,0 +1,148 @@
+import React__default, { useState, useContext, useEffect } from 'react';
+import { MessageSearchUI } from './MessageSearch/components/MessageSearchUI.js';
+import { a as LocalizationContext } from './LocalizationContext-948efac4.js';
+import Icon, { IconTypes, IconColors } from './ui/Icon.js';
+import IconButton from './ui/IconButton.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from './index-8ff79952.js';
+import Loader from './ui/Loader.js';
+import { MessageSearchProvider } from './MessageSearch/context.js';
+import './ui/MessageSearchItem.js';
+import './tslib.es6-96c33448.js';
+import './index-6b63d598.js';
+import './index-5c8b0523.js';
+import './index-a983f435.js';
+import './index-a3d3d77a.js';
+import './ui/Avatar.js';
+import './ui/ImageRenderer.js';
+import './uuid-d8fc0ef1.js';
+import './index-8a78af9f.js';
+import './ui/MessageSearchFileItem.js';
+import './index-4217213f.js';
+import './utils/message/getOutgoingMessageState.js';
+import './stringSet-fbd7c37c.js';
+import 'prop-types';
+import './useSendbirdStateContext.js';
+import './withSendbird.js';
+import './_rollupPluginBabelHelpers-e4ed87a8.js';
+
+var COMPONENT_CLASS_NAME = 'sendbird-message-search-pannel';
+
+function MessageSearchPannel(props) {
+  var channelUrl = props.channelUrl,
+      onResultClick = props.onResultClick,
+      onCloseClick = props.onCloseClick,
+      messageSearchQuery = props.messageSearchQuery,
+      renderPlaceHolderError = props.renderPlaceHolderError,
+      renderPlaceHolderLoading = props.renderPlaceHolderLoading,
+      renderPlaceHolderNoString = props.renderPlaceHolderNoString,
+      renderPlaceHolderEmptyList = props.renderPlaceHolderEmptyList,
+      renderSearchItem = props.renderSearchItem;
+
+  var _a = useState(''),
+      searchString = _a[0],
+      setSearchString = _a[1];
+
+  var _b = useState(''),
+      inputString = _b[0],
+      setInputString = _b[1];
+
+  var _c = useState(false),
+      loading = _c[0],
+      setLoading = _c[1];
+
+  var stringSet = useContext(LocalizationContext).stringSet;
+  var timeout = null;
+  useEffect(function () {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+
+    timeout = setTimeout(function () {
+      setSearchString(inputString);
+      setLoading(true);
+      timeout = null;
+    }, 500);
+  }, [inputString]);
+
+  var handleOnChangeInputString = function (e) {
+    setInputString(e.target.value);
+  };
+
+  var handleOnResultLoaded = function () {
+    setLoading(false);
+  };
+
+  var handleOnClickResetStringButton = function (e) {
+    e.stopPropagation();
+    setInputString('');
+    setSearchString('');
+  };
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: COMPONENT_CLASS_NAME
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(COMPONENT_CLASS_NAME, "__header")
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    className: "".concat(COMPONENT_CLASS_NAME, "__header__title"),
+    type: LabelTypography.H_2,
+    color: LabelColors.ONBACKGROUND_1
+  }, stringSet.SEARCH_IN_CHANNEL), /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "".concat(COMPONENT_CLASS_NAME, "__header__close-button"),
+    width: "32px",
+    height: "32px",
+    onClick: onCloseClick
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.CLOSE,
+    fillColor: IconColors.ON_BACKGROUND_1,
+    width: "22px",
+    height: "22px"
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(COMPONENT_CLASS_NAME, "__input")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(COMPONENT_CLASS_NAME, "__input__container")
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    className: "".concat(COMPONENT_CLASS_NAME, "__input__container__search-icon"),
+    type: IconTypes.SEARCH,
+    fillColor: IconColors.ON_BACKGROUND_3,
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default.createElement("input", {
+    className: "".concat(COMPONENT_CLASS_NAME, "__input__container__input-area"),
+    placeholder: stringSet.SEARCH,
+    value: inputString,
+    onChange: handleOnChangeInputString
+  }), inputString && loading && /*#__PURE__*/React__default.createElement(Loader, {
+    className: "".concat(COMPONENT_CLASS_NAME, "__input__container__spinner"),
+    width: "20px",
+    height: "20px"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.SPINNER,
+    fillColor: IconColors.PRIMARY,
+    width: "20px",
+    height: "20px"
+  })), !loading && inputString && /*#__PURE__*/React__default.createElement(Icon, {
+    className: "".concat(COMPONENT_CLASS_NAME, "__input__container__reset-input-button"),
+    type: IconTypes.REMOVE,
+    fillColor: IconColors.ON_BACKGROUND_3,
+    width: "20px",
+    height: "20px",
+    onClick: handleOnClickResetStringButton
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(COMPONENT_CLASS_NAME, "__message-search")
+  }, /*#__PURE__*/React__default.createElement(MessageSearchProvider, {
+    channelUrl: channelUrl,
+    searchString: searchString,
+    onResultClick: onResultClick,
+    onResultLoaded: handleOnResultLoaded,
+    messageSearchQuery: messageSearchQuery
+  }, /*#__PURE__*/React__default.createElement(MessageSearchUI, {
+    renderPlaceHolderError: renderPlaceHolderError,
+    renderPlaceHolderLoading: renderPlaceHolderLoading,
+    renderPlaceHolderNoString: renderPlaceHolderNoString,
+    renderPlaceHolderEmptyList: renderPlaceHolderEmptyList,
+    renderSearchItem: renderSearchItem
+  }))));
+}
+
+export { MessageSearchPannel as default };
+//# sourceMappingURL=MessageSearch.js.map

package/dist/MessageSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageSearch.js","sources":["../src/smart-components/MessageSearch/index.tsx"],"sourcesContent":["import React, { useState, useContext, useEffect } from 'react';\nimport './index.scss';\n\nimport MessageSearch, { MessageSearchUIProps } from './components/MessageSearchUI';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport Icon, { IconTypes, IconColors } from '../../ui/Icon';\nimport IconButton from '../../ui/IconButton';\nimport Label, { LabelTypography, LabelColors } from '../../ui/Label';\nimport Loader from '../../ui/Loader';\nimport { MessageSearchProvider, MessageSearchProviderProps } from './context/MessageSearchProvider';\n\nexport interface MessageSearchPannelProps extends\n  MessageSearchUIProps, MessageSearchProviderProps {\n  onResultClick?: (message) => void;\n  onCloseClick?: () => void;\n}\n\nconst COMPONENT_CLASS_NAME = 'sendbird-message-search-pannel';\n\nfunction MessageSearchPannel(props: MessageSearchPannelProps): JSX.Element {\n  const {\n    channelUrl,\n    onResultClick,\n    onCloseClick,\n    messageSearchQuery,\n    renderPlaceHolderError,\n    renderPlaceHolderLoading,\n    renderPlaceHolderNoString,\n    renderPlaceHolderEmptyList,\n    renderSearchItem,\n  } = props;\n\n  const [searchString, setSearchString] = useState('');\n  const [inputString, setInputString] = useState('');\n  const [loading, setLoading] = useState(false);\n  const { stringSet } = useContext(LocalizationContext);\n\n  let timeout = null;\n  useEffect(() => {\n    if (timeout) {\n      clearTimeout(timeout);\n    }\n    timeout = setTimeout(() => {\n      setSearchString(inputString);\n      setLoading(true);\n      timeout = null;\n    }, 500);\n  }, [inputString]);\n\n  const handleOnChangeInputString = (e) => {\n    setInputString(e.target.value);\n  };\n\n  const handleOnResultLoaded = () => {\n    setLoading(false);\n  };\n\n  const handleOnClickResetStringButton = (e) => {\n    e.stopPropagation();\n    setInputString('');\n    setSearchString('');\n  };\n\n  return (\n    <div className={COMPONENT_CLASS_NAME}>\n      <div className={`${COMPONENT_CLASS_NAME}__header`}>\n        <Label\n          className={`${COMPONENT_CLASS_NAME}__header__title`}\n          type={LabelTypography.H_2}\n          color={LabelColors.ONBACKGROUND_1}\n        >\n          {stringSet.SEARCH_IN_CHANNEL}\n        </Label>\n        <IconButton\n          className={`${COMPONENT_CLASS_NAME}__header__close-button`}\n          width=\"32px\"\n          height=\"32px\"\n          onClick={onCloseClick}\n        >\n          <Icon\n            type={IconTypes.CLOSE}\n            fillColor={IconColors.ON_BACKGROUND_1}\n            width=\"22px\"\n            height=\"22px\"\n          />\n        </IconButton>\n      </div>\n      <div className={`${COMPONENT_CLASS_NAME}__input`}>\n        <div className={`${COMPONENT_CLASS_NAME}__input__container`}>\n            <Icon\n              className={`${COMPONENT_CLASS_NAME}__input__container__search-icon`}\n              type={IconTypes.SEARCH}\n              fillColor={IconColors.ON_BACKGROUND_3}\n              width=\"24px\"\n              height=\"24px\"\n            />\n            <input\n              className={`${COMPONENT_CLASS_NAME}__input__container__input-area`}\n              placeholder={stringSet.SEARCH}\n              value={inputString}\n              onChange={handleOnChangeInputString}\n            />\n            {\n              inputString && loading && (\n                <Loader\n                  className={`${COMPONENT_CLASS_NAME}__input__container__spinner`}\n                  width=\"20px\"\n                  height=\"20px\"\n                >\n                  <Icon\n                    type={IconTypes.SPINNER}\n                    fillColor={IconColors.PRIMARY}\n                    width=\"20px\"\n                    height=\"20px\"\n                  />\n                </Loader>\n              )\n            }\n            {\n              !loading && inputString && (\n                <Icon\n                  className={`${COMPONENT_CLASS_NAME}__input__container__reset-input-button`}\n                  type={IconTypes.REMOVE}\n                  fillColor={IconColors.ON_BACKGROUND_3}\n                  width=\"20px\"\n                  height=\"20px\"\n                  onClick={handleOnClickResetStringButton}\n                />\n              )\n            }\n        </div>\n      </div>\n      <div className={`${COMPONENT_CLASS_NAME}__message-search`}>\n        <MessageSearchProvider\n          channelUrl={channelUrl}\n          searchString={searchString}\n          onResultClick={onResultClick}\n          onResultLoaded={handleOnResultLoaded}\n          messageSearchQuery={messageSearchQuery}\n        >\n          <MessageSearch\n            renderPlaceHolderError={renderPlaceHolderError}\n            renderPlaceHolderLoading={renderPlaceHolderLoading}\n            renderPlaceHolderNoString={renderPlaceHolderNoString}\n            renderPlaceHolderEmptyList={renderPlaceHolderEmptyList}\n            renderSearchItem={renderSearchItem}\n          />\n        </MessageSearchProvider>\n      </div>\n    </div>\n  );\n}\n\nexport default MessageSearchPannel;\n"],"names":["COMPONENT_CLASS_NAME","MessageSearchPannel","props","channelUrl","onResultClick","onCloseClick","messageSearchQuery","renderPlaceHolderError","renderPlaceHolderLoading","renderPlaceHolderNoString","renderPlaceHolderEmptyList","renderSearchItem","_a","useState","searchString","setSearchString","_b","inputString","setInputString","_c","loading","setLoading","stringSet","useContext","LocalizationContext","timeout","useEffect","clearTimeout","setTimeout","handleOnChangeInputString","e","target","value","handleOnResultLoaded","handleOnClickResetStringButton","stopPropagation","React","concat","LabelTypography","H_2","LabelColors","ONBACKGROUND_1","SEARCH_IN_CHANNEL","IconTypes","CLOSE","IconColors","ON_BACKGROUND_1","SEARCH","ON_BACKGROUND_3","SPINNER","PRIMARY","REMOVE","MessageSearch"],"mappings":"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"}

package/dist/OpenChannel/components/FrozenChannelNotification.js

@@ -0,0 +1,19 @@
+import React__default, { useContext } from 'react';
+import { a as LocalizationContext } from '../../LocalizationContext-948efac4.js';
+import { L as Label, a as LabelTypography } from '../../index-8ff79952.js';
+import '../../stringSet-fbd7c37c.js';
+import '../../index-5c8b0523.js';
+import 'prop-types';
+
+var FrozenNotification = function () {
+  var stringSet = useContext(LocalizationContext).stringSet;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-frozen-channel-notification"
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-frozen-channel-notification__text",
+    type: LabelTypography.CAPTION_2
+  }, stringSet.CHANNEL_FROZEN));
+};
+
+export { FrozenNotification as default };
+//# sourceMappingURL=FrozenChannelNotification.js.map

package/dist/OpenChannel/components/OpenChannelHeader.js

@@ -0,0 +1,90 @@
+import React__default, { useContext } from 'react';
+import Avatar from '../../ui/Avatar.js';
+import Icon, { IconColors, IconTypes } from '../../ui/Icon.js';
+import IconButton from '../../ui/IconButton.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-8ff79952.js';
+import { a as LocalizationContext } from '../../LocalizationContext-948efac4.js';
+import { u as useOpenChannelContext, k as kFormatter } from '../../OpenChannelProvider-180d3e3a.js';
+import { u as useMediaQueryContext } from '../../MediaQueryContext-b04e7ffd.js';
+import '../../tslib.es6-96c33448.js';
+import '../../ui/ImageRenderer.js';
+import '../../uuid-d8fc0ef1.js';
+import 'prop-types';
+import '../../stringSet-fbd7c37c.js';
+import '../../index-5c8b0523.js';
+import '../../index-6b63d598.js';
+import '../../UserProfileContext-74d60d34.js';
+import '../../compareIds-3442d021.js';
+import '../../topics-d6268256.js';
+import '@sendbird/chat';
+import '@sendbird/chat/openChannel';
+import '../../useSendbirdStateContext.js';
+import '../../withSendbird.js';
+import '../../_rollupPluginBabelHelpers-e4ed87a8.js';
+
+function OpenchannelConversationHeader() {
+  var stringSet = useContext(LocalizationContext).stringSet;
+
+  var _a = useOpenChannelContext(),
+      currentOpenChannel = _a.currentOpenChannel,
+      onChatHeaderActionClick = _a.onChatHeaderActionClick,
+      amIOperator = _a.amIOperator,
+      onBackClick = _a.onBackClick;
+
+  var title = currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.name;
+  var subTitle = "".concat(kFormatter(currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.participantCount), " ").concat(stringSet.OPEN_CHANNEL_CONVERSATION__TITLE_PARTICIPANTS);
+  var coverImage = currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.coverUrl;
+  var isMobile = useMediaQueryContext().isMobile;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-openchannel-conversation-header"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-openchannel-conversation-header__left"
+  }, isMobile && /*#__PURE__*/React__default.createElement(Icon, {
+    className: "sendbird-oepnchannel-header__icon_back",
+    onClick: onBackClick,
+    fillColor: IconColors.PRIMARY,
+    width: "24px",
+    height: "24px",
+    type: IconTypes.ARROW_LEFT
+  }), coverImage ? /*#__PURE__*/React__default.createElement(Avatar, {
+    className: "sendbird-openchannel-conversation-header__left__cover-image",
+    src: coverImage,
+    alt: "channel cover image",
+    width: "32px",
+    height: "32px"
+  }) : /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-openchannel-conversation-header__left__cover-image--icon",
+    style: {
+      width: 32,
+      height: 32
+    }
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.CHANNELS,
+    fillColor: IconColors.CONTENT,
+    width: "18px",
+    height: "18px"
+  })), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-openchannel-conversation-header__left__title",
+    type: LabelTypography.H_2,
+    color: LabelColors.ONBACKGROUND_1
+  }, title || stringSet.NO_TITLE), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-openchannel-conversation-header__left__sub-title",
+    type: LabelTypography.BODY_2,
+    color: LabelColors.ONBACKGROUND_2
+  }, subTitle || stringSet.NO_TITLE)), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-openchannel-conversation-header__right"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "sendbird-openchannel-conversation-header__right__trigger",
+    width: "32px",
+    height: "32px",
+    onClick: onChatHeaderActionClick
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: amIOperator ? IconTypes.INFO : IconTypes.MEMBERS,
+    fillColor: IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }))));
+}
+
+export { OpenchannelConversationHeader as default };
+//# sourceMappingURL=OpenChannelHeader.js.map

package/dist/OpenChannel/components/OpenChannelInput.js

@@ -0,0 +1,62 @@
+import React__default, { useContext } from 'react';
+import { a as LocalizationContext } from '../../LocalizationContext-948efac4.js';
+import MessageInput from '../../ui/MessageInput.js';
+import { u as useOpenChannelContext } from '../../OpenChannelProvider-180d3e3a.js';
+import '../../stringSet-fbd7c37c.js';
+import '../../index-5c8b0523.js';
+import '../../_rollupPluginBabelHelpers-e4ed87a8.js';
+import 'react-dom/server';
+import 'prop-types';
+import '../../const-78033061.js';
+import '../../const-8f606c40.js';
+import '../../ui/IconButton.js';
+import '../../tslib.es6-96c33448.js';
+import '../../ui/Button.js';
+import '../../index-8ff79952.js';
+import '../../ui/MentionUserLabel.js';
+import '../../ui/Icon.js';
+import '../../index-4217213f.js';
+import '../../utils/message/getOutgoingMessageState.js';
+import '../../index-6b63d598.js';
+import '../../UserProfileContext-74d60d34.js';
+import '../../compareIds-3442d021.js';
+import '../../topics-d6268256.js';
+import '@sendbird/chat';
+import '@sendbird/chat/openChannel';
+import '../../uuid-d8fc0ef1.js';
+import '../../useSendbirdStateContext.js';
+import '../../withSendbird.js';
+
+var MessageInputWrapper = function (props, ref) {
+  var _a = useOpenChannelContext(),
+      currentOpenChannel = _a.currentOpenChannel,
+      disabled = _a.disabled,
+      handleSendMessage = _a.handleSendMessage,
+      handleFileUpload = _a.handleFileUpload;
+
+  var channel = currentOpenChannel;
+
+  if (!channel) {
+    return;
+  }
+
+  var stringSet = useContext(LocalizationContext).stringSet;
+  var value = props.value;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-openchannel-footer"
+  }, /*#__PURE__*/React__default.createElement(MessageInput, {
+    ref: ref,
+    value: value,
+    disabled: disabled,
+    isVoiceMessageEnabled: false,
+    onSendMessage: handleSendMessage,
+    onFileUpload: handleFileUpload,
+    placeholder: disabled && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED // add disabled because of muted state
+
+  }));
+};
+
+var OpenChannelInput = /*#__PURE__*/React__default.forwardRef(MessageInputWrapper);
+
+export { OpenChannelInput as default };
+//# sourceMappingURL=OpenChannelInput.js.map

package/dist/OpenChannel/components/OpenChannelInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpenChannelInput.js","sources":["../../../src/smart-components/OpenChannel/components/OpenChannelInput/index.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport MessageInput from '../../../../ui/MessageInput';\nimport { useOpenChannelContext } from '../../context/OpenChannelProvider';\n\nexport type MessageInputWrapperProps = {\n  value?: string;\n};\n\nconst MessageInputWrapper = (props: MessageInputWrapperProps, ref: React.RefObject<HTMLInputElement>): JSX.Element => {\n  const {\n    currentOpenChannel,\n    disabled,\n    handleSendMessage,\n    handleFileUpload,\n  } = useOpenChannelContext();\n\n  const channel = currentOpenChannel;\n  if (!channel) {\n    return;\n  }\n\n  const { stringSet } = useContext(LocalizationContext);\n  const { value } = props;\n\n  return (\n    <div className=\"sendbird-openchannel-footer\">\n      <MessageInput\n        ref={ref}\n        value={value}\n        disabled={disabled}\n        isVoiceMessageEnabled={false}\n        onSendMessage={handleSendMessage}\n        onFileUpload={handleFileUpload}\n        placeholder={(\n          disabled\n          && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED\n          // add disabled because of muted state\n        )}\n      />\n    </div>\n  );\n};\n\nexport default React.forwardRef(MessageInputWrapper);\n"],"names":["MessageInputWrapper","props","ref","_a","useOpenChannelContext","currentOpenChannel","disabled","handleSendMessage","handleFileUpload","channel","stringSet","useContext","LocalizationContext","value","React","MESSAGE_INPUT__PLACE_HOLDER__DISABLED","forwardRef"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,IAAMA,mBAAmB,GAAG,UAACC,KAAD,EAAkCC,GAAlC,EAAwE;EAC5F,IAAAC,EAKF,GAAAC,qBAAqB,EALnB;AAAA,MACJC,kBAAkB,GAAAF,EAAA,CAAAE,kBADd;AAAA,MAEJC,QAAQ,GAAAH,EAAA,CAAAG,QAFJ;AAAA,MAGJC,iBAAiB,GAAAJ,EAAA,CAAAI,iBAHb;AAAA,MAIJC,gBAAgB,sBAJZ,CAAA;;EAON,IAAMC,OAAO,GAAGJ,kBAAhB,CAAA;;EACA,IAAI,CAACI,OAAL,EAAc;AACZ,IAAA,OAAA;AACD,GAAA;;AAEO,EAAA,IAAAC,SAAS,GAAKC,UAAU,CAACC,mBAAD,CAAV,UAAd,CAAA;AACA,EAAA,IAAAC,KAAK,GAAKZ,KAAK,CAAAY,KAAf,CAAA;EAER,oBACEC,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,SAAS,EAAC,6BAAA;AAAf,GAAA,eACEA,6BAAC,YAAD,EAAA;AACE,IAAA,GAAG,EAAEZ,GADP;AAEE,IAAA,KAAK,EAAEW,KAFT;AAGE,IAAA,QAAQ,EAAEP,QAHZ;AAIE,IAAA,qBAAqB,EAAE,KAJzB;AAKE,IAAA,aAAa,EAAEC,iBALjB;AAME,IAAA,YAAY,EAAEC,gBANhB;AAOE,IAAA,WAAW,EACTF,QAAQ,IACLI,SAAS,CAACK,qCAFJ;;AAPb,GAAA,CADF,CADF,CAAA;AAiBD,CAjCD,CAAA;;AAmCA,uBAAA,aAAeD,cAAK,CAACE,UAAN,CAAiBhB,mBAAjB,CAAf;;;;"}

package/dist/OpenChannel/components/OpenChannelMessage.js

@@ -0,0 +1,306 @@
+import React__default, { useContext, useMemo, useState, useRef } from 'react';
+import { f as format } from '../../index-6b63d598.js';
+import OpenchannelUserMessage from '../../ui/OpenchannelUserMessage.js';
+import OpenChannelAdminMessage from '../../ui/OpenChannelAdminMessage.js';
+import OpenchannelOGMessage from '../../ui/OpenchannelOGMessage.js';
+import OpenchannelThumbnailMessage from '../../ui/OpenchannelThumbnailMessage.js';
+import OpenchannelFileMessage from '../../ui/OpenchannelFileMessage.js';
+import DateSeparator from '../../ui/DateSeparator.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-8ff79952.js';
+import MessageInput from '../../ui/MessageInput.js';
+import FileViewer from '../../ui/FileViewer.js';
+import Modal from '../../ui/Modal.js';
+import { a as LocalizationContext, u as useLocalization } from '../../LocalizationContext-948efac4.js';
+import { _ as __assign } from '../../tslib.es6-96c33448.js';
+import { u as useOpenChannelContext } from '../../OpenChannelProvider-180d3e3a.js';
+import useSendbirdStateContext from '../../useSendbirdStateContext.js';
+import '../../index-5c8b0523.js';
+import '../../_rollupPluginBabelHelpers-e4ed87a8.js';
+import '../../ui/Avatar.js';
+import '../../ui/ImageRenderer.js';
+import '../../ui/Icon.js';
+import 'prop-types';
+import '../../uuid-d8fc0ef1.js';
+import '../../ui/ContextMenu.js';
+import 'react-dom';
+import '../../ui/SortByRow.js';
+import '../../index-4217213f.js';
+import '../../utils/message/getOutgoingMessageState.js';
+import '../../stringSet-fbd7c37c.js';
+import '../../ui/IconButton.js';
+import '../../ui/Loader.js';
+import '../../ui/UserProfile.js';
+import '../../UserProfileContext-74d60d34.js';
+import '../../sendbirdSelectors.js';
+import '../../topics-d6268256.js';
+import '../../utils-273068f6.js';
+import '../../ui/Button.js';
+import '../../utils-aa379202.js';
+import '../../index-cb271040.js';
+import '../../MediaQueryContext-b04e7ffd.js';
+import '../../useLongPress-96570844.js';
+import '../../ui/LinkLabel.js';
+import '../../ui/Word.js';
+import '../../ui/MentionLabel.js';
+import '../../ui/TextButton.js';
+import '../../color-206fa031.js';
+import 'react-dom/server';
+import '../../const-78033061.js';
+import '../../const-8f606c40.js';
+import '../../ui/MentionUserLabel.js';
+import '../../index-39098053.js';
+import '../../compareIds-3442d021.js';
+import '@sendbird/chat';
+import '@sendbird/chat/openChannel';
+import '../../withSendbird.js';
+
+function RemoveMessageModal(_a) {
+  var onCloseModal = _a.onCloseModal,
+      onDeleteMessage = _a.onDeleteMessage;
+  var stringSet = useContext(LocalizationContext).stringSet;
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    onCancel: onCloseModal,
+    onSubmit: onDeleteMessage,
+    submitText: stringSet.MESSAGE_MENU__DELETE,
+    titleText: stringSet.MODAL__DELETE_MESSAGE__TITLE
+  });
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
+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']
+};
+var isImage = function (type) {
+  return SUPPORTED_MIMES.IMAGE.indexOf(type) >= 0;
+};
+var isVideo = function (type) {
+  return SUPPORTED_MIMES.VIDEO.indexOf(type) >= 0;
+};
+__assign({}, SUPPORTED_MIMES);
+
+var MessageTypes = {
+  ADMIN: 'ADMIN',
+  USER: 'USER',
+  FILE: 'FILE',
+  THUMBNAIL: 'THUMBNAIL',
+  OG: 'OG',
+  UNKNOWN: 'UNKNOWN'
+};
+var SendingMessageStatus = {
+  NONE: 'none',
+  SUCCEEDED: 'succeeded',
+  FAILED: 'failed',
+  PENDING: 'pending'
+};
+var getMessageType = function (message) {
+  var _a, _b;
+
+  if (((_a = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _a === void 0 ? void 0 : _a.call(message)) || (message === null || message === void 0 ? void 0 : message.messageType) === 'user') {
+    return (message === null || message === void 0 ? void 0 : message.ogMetaData) ? MessageTypes.OG : MessageTypes.USER;
+  }
+
+  if ((_b = message === null || message === void 0 ? void 0 : message.isAdminMessage) === null || _b === void 0 ? void 0 : _b.call(message)) {
+    return MessageTypes.ADMIN;
+  }
+
+  if ((message === null || message === void 0 ? void 0 : message.messageType) === 'file') {
+    return isImage(message.type) || isVideo(message.type) ? MessageTypes.THUMBNAIL : MessageTypes.FILE;
+  }
+
+  return MessageTypes.UNKNOWN;
+};
+
+function MessagOpenChannelMessageeHoc(props) {
+  var _a;
+
+  var _b;
+
+  var message = props.message,
+      chainTop = props.chainTop,
+      chainBottom = props.chainBottom,
+      hasSeparator = props.hasSeparator,
+      renderMessage = props.renderMessage;
+
+  var _c = useOpenChannelContext(),
+      currentOpenChannel = _c.currentOpenChannel,
+      deleteMessage = _c.deleteMessage,
+      updateMessage = _c.updateMessage,
+      resendMessage = _c.resendMessage;
+
+  var dateLocale = useLocalization().dateLocale;
+  var editDisabled = currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isFrozen;
+  var globalState = useSendbirdStateContext();
+  var userId = (_b = globalState === null || globalState === void 0 ? void 0 : globalState.config) === null || _b === void 0 ? void 0 : _b.userId;
+  var sender = null;
+
+  if ((message === null || message === void 0 ? void 0 : message.messageType) !== 'admin') {
+    sender = message === null || message === void 0 ? void 0 : message.sender;
+  }
+
+  var RenderedMessage = useMemo(function () {
+    return function (props) {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderMessage ? renderMessage(props) : null);
+    };
+  }, [message, renderMessage]);
+
+  var _d = useState(false),
+      showEdit = _d[0],
+      setShowEdit = _d[1];
+
+  var _e = useState(false),
+      showRemove = _e[0],
+      setShowRemove = _e[1];
+
+  var _f = useState(false),
+      showFileViewer = _f[0],
+      setShowFileViewer = _f[1];
+
+  var editMessageInputRef = useRef(null);
+  var isByMe = false;
+
+  if (sender && (message === null || message === void 0 ? void 0 : message.messageType) !== 'admin') {
+    // pending and failed messages are by me
+    isByMe = userId === sender.userId || (message === null || message === void 0 ? void 0 : message.sendingStatus) === SendingMessageStatus.PENDING || (message === null || message === void 0 ? void 0 : message.sendingStatus) === SendingMessageStatus.FAILED;
+  }
+
+  if (renderMessage && RenderedMessage) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "sendbird-msg-hoc sendbird-msg--scroll-ref"
+    }, /*#__PURE__*/React__default.createElement(RenderedMessage, {
+      message: message,
+      chainTop: chainTop,
+      chainBottom: chainBottom
+    }));
+  }
+
+  if ((message === null || message === void 0 ? void 0 : message.messageType) === 'user' && showEdit) {
+    return /*#__PURE__*/React__default.createElement(MessageInput, {
+      isEdit: true,
+      disabled: editDisabled,
+      ref: editMessageInputRef,
+      message: message,
+      name: message === null || message === void 0 ? void 0 : message.messageId,
+      onUpdateMessage: function (_a) {
+        var messageId = _a.messageId,
+            message = _a.message;
+        updateMessage(messageId, message);
+        setShowEdit(false);
+      },
+      onCancelEdit: function () {
+        setShowEdit(false);
+      }
+    });
+  }
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-msg-hoc sendbird-msg--scroll-ref"
+  }, hasSeparator && (message === null || message === void 0 ? void 0 : message.createdAt) && /*#__PURE__*/React__default.createElement(DateSeparator, null, /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.CAPTION_2,
+    color: LabelColors.ONBACKGROUND_2
+  }, format(message === null || message === void 0 ? void 0 : message.createdAt, 'MMMM dd, yyyy', {
+    locale: dateLocale
+  }))), (_a = {}, _a[MessageTypes.ADMIN] = function () {
+    if ((message === null || message === void 0 ? void 0 : message.messageType) === 'admin') {
+      return /*#__PURE__*/React__default.createElement(OpenChannelAdminMessage, {
+        message: message
+      });
+    }
+  }(), _a[MessageTypes.FILE] = function () {
+    var _a;
+
+    if ((message === null || message === void 0 ? void 0 : message.messageType) === 'file') {
+      return /*#__PURE__*/React__default.createElement(OpenchannelFileMessage, {
+        message: message,
+        isOperator: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isOperator((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId),
+        disabled: editDisabled,
+        userId: userId,
+        showRemove: setShowRemove,
+        resendMessage: resendMessage,
+        chainTop: chainTop,
+        chainBottom: chainBottom
+      });
+    }
+
+    return;
+  }(), _a[MessageTypes.OG] = function () {
+    var _a;
+
+    if ((message === null || message === void 0 ? void 0 : message.messageType) === 'user') {
+      return /*#__PURE__*/React__default.createElement(OpenchannelOGMessage, {
+        message: message,
+        isOperator: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isOperator((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId),
+        userId: userId,
+        showEdit: setShowEdit,
+        disabled: editDisabled,
+        showRemove: setShowRemove,
+        resendMessage: resendMessage,
+        chainTop: chainTop,
+        chainBottom: chainBottom
+      });
+    }
+
+    return;
+  }(), _a[MessageTypes.THUMBNAIL] = function () {
+    var _a;
+
+    if ((message === null || message === void 0 ? void 0 : message.messageType) === 'file') {
+      return /*#__PURE__*/React__default.createElement(OpenchannelThumbnailMessage, {
+        message: message,
+        isOperator: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isOperator((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId),
+        disabled: editDisabled,
+        userId: userId,
+        showRemove: setShowRemove,
+        resendMessage: resendMessage,
+        onClick: setShowFileViewer,
+        chainTop: chainTop,
+        chainBottom: chainBottom
+      });
+    }
+
+    return;
+  }(), _a[MessageTypes.USER] = function () {
+    var _a;
+
+    if ((message === null || message === void 0 ? void 0 : message.messageType) === 'user') {
+      return /*#__PURE__*/React__default.createElement(OpenchannelUserMessage, {
+        message: message,
+        isOperator: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isOperator((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId),
+        userId: userId,
+        disabled: editDisabled,
+        showEdit: setShowEdit,
+        showRemove: setShowRemove,
+        resendMessage: resendMessage,
+        chainTop: chainTop,
+        chainBottom: chainBottom
+      });
+    }
+
+    return;
+  }(), _a[MessageTypes.UNKNOWN] = function () {
+    return; // return (
+    //   <OpenChannelUnknownMessage message={message} />
+    // );
+  }(), _a)[getMessageType(message)], showRemove && /*#__PURE__*/React__default.createElement(RemoveMessageModal, {
+    onCloseModal: function () {
+      return setShowRemove(false);
+    },
+    onDeleteMessage: function () {
+      if ((message === null || message === void 0 ? void 0 : message.messageType) !== 'admin') {
+        deleteMessage(message);
+      }
+    }
+  }), showFileViewer && (message === null || message === void 0 ? void 0 : message.messageType) === 'file' && /*#__PURE__*/React__default.createElement(FileViewer, {
+    onClose: function () {
+      return setShowFileViewer(false);
+    },
+    message: message,
+    onDelete: function () {
+      return deleteMessage(message);
+    },
+    isByMe: isByMe
+  }));
+}
+
+export { MessagOpenChannelMessageeHoc as default };
+//# sourceMappingURL=OpenChannelMessage.js.map