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

package/dist/cjs/OpenChannel.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var React = require('react');
+var OpenChannel_components_OpenChannelUI = require('./OpenChannel/components/OpenChannelUI.js');
+var OpenChannel_context = require('./OpenChannelProvider-bf43f315.js');
+require('./OpenChannel/components/OpenChannelInput.js');
+require('./LocalizationContext-2fb0be1f.js');
+require('./stringSet-388f679a.js');
+require('./index-1ec959ab.js');
+require('./ui/MessageInput.js');
+require('./_rollupPluginBabelHelpers-e7c78521.js');
+require('react-dom/server');
+require('prop-types');
+require('./const-86e2750e.js');
+require('./const-3c5d5059.js');
+require('./ui/IconButton.js');
+require('./tslib.es6-e8acf1b5.js');
+require('./ui/Button.js');
+require('./index-578f0575.js');
+require('./ui/MentionUserLabel.js');
+require('./ui/Icon.js');
+require('./index-6714492f.js');
+require('./utils/message/getOutgoingMessageState.js');
+require('./OpenChannel/components/FrozenChannelNotification.js');
+require('./OpenChannel/components/OpenChannelHeader.js');
+require('./ui/Avatar.js');
+require('./ui/ImageRenderer.js');
+require('./uuid-a94df44e.js');
+require('./MediaQueryContext-db5159f3.js');
+require('./index-2d7e8e6d.js');
+require('./ui/Loader.js');
+require('./OpenChannel/components/OpenChannelMessageList.js');
+require('./index-4e46a153.js');
+require('./index-f1bd9638.js');
+require('./OpenChannel/components/OpenChannelMessage.js');
+require('./ui/OpenchannelUserMessage.js');
+require('./ui/ContextMenu.js');
+require('react-dom');
+require('./ui/SortByRow.js');
+require('./ui/UserProfile.js');
+require('./UserProfileContext-0549101e.js');
+require('./sendbirdSelectors.js');
+require('./topics-839402ce.js');
+require('./utils-c61c3737.js');
+require('./useSendbirdStateContext.js');
+require('./withSendbird.js');
+require('./utils-6e33484b.js');
+require('./index-a79f62a3.js');
+require('./useLongPress-b75b3860.js');
+require('./ui/OpenChannelAdminMessage.js');
+require('./ui/OpenchannelOGMessage.js');
+require('./ui/LinkLabel.js');
+require('./ui/Word.js');
+require('./ui/MentionLabel.js');
+require('./ui/OpenchannelThumbnailMessage.js');
+require('./ui/OpenchannelFileMessage.js');
+require('./ui/TextButton.js');
+require('./color-84bbbc0b.js');
+require('./ui/DateSeparator.js');
+require('./ui/FileViewer.js');
+require('./index-490839e3.js');
+require('./ui/Modal.js');
+require('./compareIds-19a11ffa.js');
+require('@sendbird/chat');
+require('@sendbird/chat/openChannel');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var OpenChannel = function (props) {
+  return /*#__PURE__*/React__default["default"].createElement(OpenChannel_context.OpenChannelProvider, {
+    channelUrl: props === null || props === void 0 ? void 0 : props.channelUrl,
+    isMessageGroupingEnabled: props === null || props === void 0 ? void 0 : props.isMessageGroupingEnabled,
+    queries: props === null || props === void 0 ? void 0 : props.queries,
+    messageLimit: props === null || props === void 0 ? void 0 : props.messageLimit,
+    onBeforeSendUserMessage: props === null || props === void 0 ? void 0 : props.onBeforeSendUserMessage,
+    onBeforeSendFileMessage: props === null || props === void 0 ? void 0 : props.onBeforeSendFileMessage,
+    onChatHeaderActionClick: props === null || props === void 0 ? void 0 : props.onChatHeaderActionClick,
+    disableUserProfile: props === null || props === void 0 ? void 0 : props.disableUserProfile,
+    renderUserProfile: props === null || props === void 0 ? void 0 : props.renderUserProfile,
+    onBackClick: props === null || props === void 0 ? void 0 : props.onBackClick
+  }, /*#__PURE__*/React__default["default"].createElement(OpenChannel_components_OpenChannelUI, {
+    renderMessage: props === null || props === void 0 ? void 0 : props.renderMessage,
+    renderHeader: props === null || props === void 0 ? void 0 : props.renderHeader,
+    renderInput: props === null || props === void 0 ? void 0 : props.renderInput,
+    renderPlaceHolderEmptyList: props === null || props === void 0 ? void 0 : props.renderPlaceHolderEmptyList,
+    renderPlaceHolderError: props === null || props === void 0 ? void 0 : props.renderPlaceHolderError,
+    renderPlaceHolderLoading: props === null || props === void 0 ? void 0 : props.renderPlaceHolderLoading
+  }));
+};
+
+module.exports = OpenChannel;
+//# sourceMappingURL=OpenChannel.js.map

package/dist/cjs/OpenChannelList/components/OpenChannelListUI.js

@@ -0,0 +1,203 @@
+'use strict';
+
+var React = require('react');
+var OpenChannelList_components_OpenChannelPreview = require('./OpenChannelPreview.js');
+var ui_PlaceHolder = require('../../index-2d7e8e6d.js');
+var ui_IconButton = require('../../ui/IconButton.js');
+var ui_Icon = require('../../ui/Icon.js');
+var ui_Label = require('../../index-578f0575.js');
+var OpenChannelList_context = require('../../OpenChannelListProvider-fee6af21.js');
+var CreateOpenChannel = require('../../CreateOpenChannel.js');
+var LocalizationContext = require('../../LocalizationContext-2fb0be1f.js');
+require('../../ui/Avatar.js');
+require('../../tslib.es6-e8acf1b5.js');
+require('../../ui/ImageRenderer.js');
+require('../../uuid-a94df44e.js');
+require('prop-types');
+require('../../ui/Loader.js');
+require('../../stringSet-388f679a.js');
+require('../../topics-839402ce.js');
+require('../../useSendbirdStateContext.js');
+require('../../withSendbird.js');
+require('../../_rollupPluginBabelHelpers-e7c78521.js');
+require('../../CreateOpenChannel/components/CreateOpenChannelUI.js');
+require('../../ui/Button.js');
+require('../../ui/Modal.js');
+require('react-dom');
+require('../../index-490839e3.js');
+require('../../MediaQueryContext-db5159f3.js');
+require('../../index-1ec959ab.js');
+require('../../ui/Input.js');
+require('../../ui/TextButton.js');
+require('../../color-84bbbc0b.js');
+require('../../CreateOpenChannel/context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function OpenChannelListUI(_a) {
+  var renderHeader = _a.renderHeader,
+      renderChannelPreview = _a.renderChannelPreview,
+      renderPlaceHolderEmpty = _a.renderPlaceHolderEmpty,
+      renderPlaceHolderError = _a.renderPlaceHolderError,
+      renderPlaceHolderLoading = _a.renderPlaceHolderLoading;
+
+  var _b = React.useState(false),
+      showCreateChannelModal = _b[0],
+      setShowCreateChannel = _b[1];
+
+  var scrollRef = React.useRef(null);
+
+  var _c = OpenChannelList_context.useOpenChannelListContext(),
+      logger = _c.logger,
+      currentChannel = _c.currentChannel,
+      allChannels = _c.allChannels,
+      fetchingStatus = _c.fetchingStatus,
+      onChannelSelected = _c.onChannelSelected,
+      fetchNextChannels = _c.fetchNextChannels,
+      refreshOpenChannelList = _c.refreshOpenChannelList,
+      openChannelListDispatcher = _c.openChannelListDispatcher;
+
+  var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+
+  var handleScroll = function (e) {
+    var element = e.target;
+    var scrollTop = element.scrollTop,
+        clientHeight = element.clientHeight,
+        scrollHeight = element.scrollHeight;
+
+    var isAboutSame = function (a, b, px) {
+      return Math.abs(a - b) <= px;
+    };
+
+    if (isAboutSame(clientHeight + scrollTop, scrollHeight, 10)) {
+      fetchNextChannels(function (messages) {
+        if (messages) {
+          try {
+            element.scrollTop = scrollHeight - clientHeight;
+          } catch (error) {//
+          }
+        }
+      });
+    }
+  };
+
+  var handleOnClickCreateChannel = function () {
+    setShowCreateChannel(true);
+  };
+
+  var MemoizedHeader = React.useMemo(function () {
+    return (renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader()) || null;
+  }, [renderHeader]);
+  var MemoizedPlaceHolder = React.useMemo(function () {
+    if (fetchingStatus === OpenChannelList_context.OpenChannelListFetchingStatus.EMPTY) {
+      return (renderPlaceHolderEmpty === null || renderPlaceHolderEmpty === void 0 ? void 0 : renderPlaceHolderEmpty()) || /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
+        className: "sendbird-open-channel-list-ui__channel-list--place-holder--empty",
+        type: ui_PlaceHolder.PlaceHolderTypes.NO_CHANNELS
+      });
+    }
+
+    if (fetchingStatus === OpenChannelList_context.OpenChannelListFetchingStatus.FETCHING) {
+      return (renderPlaceHolderLoading === null || renderPlaceHolderLoading === void 0 ? void 0 : renderPlaceHolderLoading()) || /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "sendbird-open-channel-list-ui__channel-list--place-holder--loading"
+      }, /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
+        iconSize: "24px",
+        type: ui_PlaceHolder.PlaceHolderTypes.LOADING
+      }));
+    }
+
+    if (fetchingStatus === OpenChannelList_context.OpenChannelListFetchingStatus.ERROR) {
+      return (renderPlaceHolderError === null || renderPlaceHolderError === void 0 ? void 0 : renderPlaceHolderError()) || /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
+        className: "sendbird-open-channel-list-ui__channel-list--place-holder--error",
+        type: ui_PlaceHolder.PlaceHolderTypes.WRONG
+      });
+    }
+
+    return null;
+  }, [fetchingStatus, renderPlaceHolderEmpty, renderPlaceHolderLoading, renderPlaceHolderError]);
+  var MemoizedAllChannels = React.useMemo(function () {
+    if (fetchingStatus === OpenChannelList_context.OpenChannelListFetchingStatus.DONE) {
+      return allChannels.map(function (channel) {
+        var isSelected = (channel === null || channel === void 0 ? void 0 : channel.url) === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url);
+
+        var handleClick = function (e) {
+          onChannelSelected === null || onChannelSelected === void 0 ? void 0 : onChannelSelected(channel, e);
+          logger.info('OpenChannelList|ChannelPreview: A channel is selected', channel);
+          openChannelListDispatcher({
+            type: OpenChannelList_context.OpenChannelListActionTypes.SET_CURRENT_OPEN_CHANNEL,
+            payload: channel
+          });
+        };
+
+        return renderChannelPreview ? /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "sendbird-open-channel-list-ui__channel-list__item",
+          onClick: handleClick
+        }, renderChannelPreview({
+          channel: channel,
+          isSelected: isSelected,
+          onChannelSelected: onChannelSelected
+        })) : /*#__PURE__*/React__default["default"].createElement(OpenChannelList_components_OpenChannelPreview, {
+          className: "sendbird-open-channel-list-ui__channel-list__item",
+          channel: channel,
+          isSelected: isSelected,
+          onClick: handleClick,
+          key: channel === null || channel === void 0 ? void 0 : channel.url
+        });
+      });
+    }
+
+    return null;
+  }, [allChannels, allChannels.length, currentChannel]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-open-channel-list-ui"
+  }, showCreateChannelModal && /*#__PURE__*/React__default["default"].createElement(CreateOpenChannel, {
+    closeModal: function () {
+      return setShowCreateChannel(false);
+    },
+    onCreateChannel: function (openChannel) {
+      onChannelSelected === null || onChannelSelected === void 0 ? void 0 : onChannelSelected(openChannel);
+      openChannelListDispatcher({
+        type: OpenChannelList_context.OpenChannelListActionTypes.CREATE_OPEN_CHANNEL,
+        payload: openChannel
+      });
+    }
+  }), MemoizedHeader || /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-open-channel-list-ui__header"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-open-channel-list-ui__header__title",
+    type: ui_Label.LabelTypography.H_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_1
+  }, stringSet.OPEN_CHANNEL_LIST__TITLE), /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
+    className: "sendbird-open-channel-list-ui__header__button-refresh",
+    width: "32px",
+    height: "32px",
+    type: "button",
+    onClick: function () {
+      return refreshOpenChannelList();
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.REFRESH,
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: "22px",
+    height: "22px"
+  })), /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
+    className: "sendbird-open-channel-list-ui__header__button-create-channel",
+    width: "32px",
+    height: "32px",
+    type: "button",
+    onClick: handleOnClickCreateChannel
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    type: ui_Icon.IconTypes.CREATE,
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: "22px",
+    height: "22px"
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-open-channel-list-ui__channel-list",
+    ref: scrollRef,
+    onScroll: handleScroll
+  }, MemoizedPlaceHolder, MemoizedAllChannels));
+}
+
+module.exports = OpenChannelListUI;
+//# sourceMappingURL=OpenChannelListUI.js.map

package/dist/cjs/OpenChannelList/components/OpenChannelPreview.js

@@ -0,0 +1,73 @@
+'use strict';
+
+var React = require('react');
+var ui_Avatar = require('../../ui/Avatar.js');
+var ui_Icon = require('../../ui/Icon.js');
+var ui_Label = require('../../index-578f0575.js');
+require('../../tslib.es6-e8acf1b5.js');
+require('../../ui/ImageRenderer.js');
+require('../../uuid-a94df44e.js');
+require('prop-types');
+require('../../stringSet-388f679a.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function OpenChannelPreview(_a) {
+  var className = _a.className,
+      isSelected = _a.isSelected,
+      channel = _a.channel,
+      onClick = _a.onClick;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-open-channel-preview ".concat(isSelected ? 'selected' : '', " ").concat(className),
+    onClick: onClick
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-open-channel-preview__cover-image"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+    className: "sendbird-open-channel-preview__cover-image__avatar",
+    src: channel === null || channel === void 0 ? void 0 : channel.coverUrl,
+    alt: "cover-image",
+    width: "42px",
+    height: "42px",
+    customDefaultComponent: function () {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "sendbird-open-channel-preview__cover-image__avatar--default"
+      }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+        type: ui_Icon.IconTypes.CHANNELS,
+        fillColor: ui_Icon.IconColors.CONTENT,
+        width: "24px",
+        height: "24px"
+      }));
+    }
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-open-channel-preview__context"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-open-channel-preview__context__title"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-open-channel-preview__context__title__channel-name ".concat((channel === null || channel === void 0 ? void 0 : channel.isFrozen) ? 'frozen' : ''),
+    type: ui_Label.LabelTypography.SUBTITLE_2,
+    color: isSelected ? ui_Label.LabelColors.PRIMARY : ui_Label.LabelColors.ONBACKGROUND_1
+  }, channel === null || channel === void 0 ? void 0 : channel.name), (channel === null || channel === void 0 ? void 0 : channel.isFrozen) ? /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    className: "sendbird-open-channel-preview__context__title__frozen",
+    type: ui_Icon.IconTypes.FREEZE,
+    fillColor: ui_Icon.IconColors.PRIMARY,
+    width: "16px",
+    height: "16px"
+  }) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-open-channel-preview__context__participants"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+    className: "sendbird-open-channel-preview__context__participants__icon",
+    type: ui_Icon.IconTypes.MEMBERS,
+    fillColor: ui_Icon.IconColors.ON_BACKGROUND_2,
+    width: "14px",
+    height: "14px"
+  }), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-open-channel-preview__context__participants__count",
+    type: ui_Label.LabelTypography.CAPTION_3,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, (channel === null || channel === void 0 ? void 0 : channel.participantCount) || '0'))));
+}
+
+module.exports = OpenChannelPreview;
+//# sourceMappingURL=OpenChannelPreview.js.map

package/dist/cjs/OpenChannelList/context.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('../topics-839402ce.js');
+require('../useSendbirdStateContext.js');
+var OpenChannelList_context = require('../OpenChannelListProvider-fee6af21.js');
+require('../withSendbird.js');
+require('../_rollupPluginBabelHelpers-e7c78521.js');
+require('../tslib.es6-e8acf1b5.js');
+
+
+
+exports.OpenChannelListProvider = OpenChannelList_context.OpenChannelListProvider;
+exports["default"] = OpenChannelList_context.OpenChannelListProvider$1;
+exports.useOpenChannelListContext = OpenChannelList_context.useOpenChannelListContext;
+//# sourceMappingURL=context.js.map

package/dist/cjs/OpenChannelList.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var React = require('react');
+var OpenChannelList_components_OpenChannelListUI = require('./OpenChannelList/components/OpenChannelListUI.js');
+var OpenChannelList_context = require('./OpenChannelListProvider-fee6af21.js');
+require('./OpenChannelList/components/OpenChannelPreview.js');
+require('./ui/Avatar.js');
+require('./tslib.es6-e8acf1b5.js');
+require('./ui/ImageRenderer.js');
+require('./ui/Icon.js');
+require('prop-types');
+require('./uuid-a94df44e.js');
+require('./index-578f0575.js');
+require('./stringSet-388f679a.js');
+require('./index-2d7e8e6d.js');
+require('./LocalizationContext-2fb0be1f.js');
+require('./index-1ec959ab.js');
+require('./ui/Loader.js');
+require('./ui/IconButton.js');
+require('./CreateOpenChannel.js');
+require('./CreateOpenChannel/components/CreateOpenChannelUI.js');
+require('./ui/Button.js');
+require('./ui/Modal.js');
+require('react-dom');
+require('./index-490839e3.js');
+require('./MediaQueryContext-db5159f3.js');
+require('./ui/Input.js');
+require('./ui/TextButton.js');
+require('./color-84bbbc0b.js');
+require('./CreateOpenChannel/context.js');
+require('./useSendbirdStateContext.js');
+require('./withSendbird.js');
+require('./_rollupPluginBabelHelpers-e7c78521.js');
+require('./topics-839402ce.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function OpenChannelList(_a) {
+  var // provider
+  className = _a.className,
+      queries = _a.queries,
+      onChannelSelected = _a.onChannelSelected,
+      // ui
+  renderHeader = _a.renderHeader,
+      renderChannelPreview = _a.renderChannelPreview,
+      renderPlaceHolderEmpty = _a.renderPlaceHolderEmpty,
+      renderPlaceHolderError = _a.renderPlaceHolderError,
+      renderPlaceHolderLoading = _a.renderPlaceHolderLoading;
+  return /*#__PURE__*/React__default["default"].createElement(OpenChannelList_context.OpenChannelListProvider, {
+    className: className,
+    queries: queries,
+    onChannelSelected: onChannelSelected
+  }, /*#__PURE__*/React__default["default"].createElement(OpenChannelList_components_OpenChannelListUI, {
+    renderHeader: renderHeader,
+    renderChannelPreview: renderChannelPreview,
+    renderPlaceHolderEmpty: renderPlaceHolderEmpty,
+    renderPlaceHolderError: renderPlaceHolderError,
+    renderPlaceHolderLoading: renderPlaceHolderLoading
+  }));
+}
+
+module.exports = OpenChannelList;
+//# sourceMappingURL=OpenChannelList.js.map