@sendbird/uikit-react
Version:
Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.
296 lines (287 loc) • 17.1 kB
JavaScript
'use strict';
var React = require('react');
var LocalizationContext = require('../../chunks/bundle-ClT0IexP.js');
var utils = require('../../chunks/bundle-CoU1-PYo.js');
var Thread_components_ParentMessageInfo = require('./ParentMessageInfo.js');
var Thread_components_ThreadHeader = require('./ThreadHeader.js');
var Thread_components_ThreadList = require('./ThreadList.js');
var Thread_components_ThreadMessageInput = require('./ThreadMessageInput.js');
var Thread_context_types = require('../context/types.js');
var ui_PlaceHolder = require('../../ui/PlaceHolder.js');
var ui_Label = require('../../chunks/bundle-DxZzcGya.js');
var useSendMultipleFilesMessage = require('../../chunks/bundle-4vdcmQiE.js');
var Message_context = require('../../Message/context.js');
var index = require('../../chunks/bundle-CskFALvU.js');
var utils$1 = require('../../chunks/bundle-1F9guuKw.js');
var ThreadProvider = require('../../chunks/bundle-BVmEHs1Z.js');
var useSendbird = require('../../chunks/bundle-on0zTbLT.js');
require('../../chunks/bundle-jAsAzWpU.js');
require('../../chunks/bundle-D-_6Kk3L.js');
require('../../chunks/bundle-BXuNw6bR.js');
require('../../chunks/bundle-BjZvm-U5.js');
require('../../chunks/bundle--ZBrECLK.js');
require('../../chunks/bundle-DS7dko_G.js');
require('../../chunks/bundle-C8s_p9Hf.js');
require('../../chunks/bundle-BFmC2V1o.js');
require('react-dom');
require('../../chunks/bundle-DDUAkmTu.js');
require('../../ui/IconButton.js');
require('../../ui/Button.js');
require('../../ui/Icon.js');
require('../../chunks/bundle-BNgfU9I_.js');
require('../../chunks/bundle-BPfnvsLX.js');
require('../../chunks/bundle-DvHjgbFi.js');
require('./ParentMessageInfoItem.js');
require('../../ui/ImageRenderer.js');
require('../../ui/TextButton.js');
require('../../chunks/bundle-mNJHRgJ3.js');
require('../../ui/EmojiReactions.js');
require('../../ui/ReactionBadge.js');
require('../../ui/ReactionButton.js');
require('../../chunks/bundle-IobNGCyV.js');
require('../../chunks/bundle-BTzm82Jl.js');
require('@sendbird/chat');
require('@sendbird/chat/openChannel');
require('../../ui/SortByRow.js');
require('../../chunks/bundle-Buar9ys-.js');
require('../../chunks/bundle-DZN-28o5.js');
require('@sendbird/chat/groupChannel');
require('../../ui/BottomSheet.js');
require('../../hooks/useModal.js');
require('../../ui/UserListItem.js');
require('../../chunks/bundle-iF1pW7_s.js');
require('../../chunks/bundle-Czc5a05Q.js');
require('../../chunks/bundle-CZmT_dIf.js');
require('../../ui/MutedAvatarOverlay.js');
require('../../ui/Checkbox.js');
require('../../ui/UserProfile.js');
require('../../sendbirdSelectors.js');
require('../../chunks/bundle-B14gP5iL.js');
require('../../utils/message/getOutgoingMessageState.js');
require('../../chunks/bundle-BVn2UMtk.js');
require('../../ui/Tooltip.js');
require('../../ui/TooltipWrapper.js');
require('../../chunks/bundle-CArwk_DH.js');
require('../../ui/VoiceMessageItemBody.js');
require('../../ui/ProgressBar.js');
require('../../VoicePlayer/useVoicePlayer.js');
require('../../chunks/bundle-iWa9rWFV.js');
require('../../VoiceRecorder/context.js');
require('../../ui/PlaybackTime.js');
require('../../ui/Loader.js');
require('../../chunks/bundle-76A2Zzye.js');
require('../../chunks/bundle-iwIElqGP.js');
require('../../ui/MentionLabel.js');
require('../../ui/LinkLabel.js');
require('../../chunks/bundle-btgMGRIX.js');
require('@sendbird/chat/message');
require('../../ui/FileViewer.js');
require('../../chunks/bundle-DnOJJX7f.js');
require('@sendbird/uikit-tools');
require('../../chunks/bundle-9izlRrTd.js');
require('../../chunks/bundle-BSCZWP_l.js');
require('../../chunks/bundle-D4QmbyQp.js');
require('../../chunks/bundle-CdalwlxE.js');
require('../../chunks/bundle-Iy7lVhfX.js');
require('../../chunks/bundle-CeCg868O.js');
require('../../chunks/bundle-BSEj3ItE.js');
require('../../ui/MessageItemReactionMenu.js');
require('../../chunks/bundle-CzhNQgac.js');
require('../../chunks/bundle-DHOzCMYH.js');
require('dompurify');
require('../../chunks/bundle-DEaaC1ah.js');
require('../../chunks/bundle-Dqt-Moft.js');
require('../../chunks/bundle-B4v0Agxd.js');
require('../../chunks/bundle-D5X7fpcq.js');
require('../../ui/MobileMenu.js');
require('../../Message/hooks/useDirtyGetMentions.js');
require('../../chunks/bundle-mOGMtPz8.js');
require('../../chunks/bundle-FVds7Nnw.js');
require('../../chunks/bundle-DUmpUM6Z.js');
require('../../ui/Header.js');
require('./ThreadListItem.js');
require('../../ui/DateSeparator.js');
require('../../chunks/bundle-BNu-mNlA.js');
require('../../chunks/bundle-AjkDYnfX.js');
require('../../chunks/bundle-CBQxHnhS.js');
require('../../chunks/bundle-FGb-8cIo.js');
require('../../ui/OGMessageItemBody.js');
require('../../ui/TextMessageItemBody.js');
require('../../ui/FileMessageItemBody.js');
require('../../ui/ThumbnailMessageItemBody.js');
require('../../chunks/bundle-BSfAJlO9.js');
require('../../ui/UnknownMessageItemBody.js');
require('../../ui/TemplateMessageItemBody.js');
require('../../chunks/bundle-BKn9ow_B.js');
require('../../ui/FallbackTemplateMessageItemBody.tsx.js');
require('../../ui/LoadingTemplateMessageItemBody.tsx.js');
require('../../ui/MessageFeedbackFailedModal.js');
require('../../chunks/bundle-DwLWArJq.js');
require('../../Channel/utils/compareMessagesForGrouping.js');
require('date-fns');
require('../../chunks/bundle-gKWdBSmm.js');
require('../../chunks/bundle-Hqqb920S.js');
require('../../chunks/bundle-CsVrpeSa.js');
require('../../GroupChannel/components/SuggestedMentionList.js');
require('../../ui/QuoteMessageInput.js');
require('../../VoiceRecorder/useVoiceRecorder.js');
require('../../chunks/bundle-bmGcb273.js');
require('../../chunks/bundle-2FCFe95u.js');
require('../../chunks/bundle-DogWmRlf.js');
require('../../chunks/bundle-Bcw-YfFm.js');
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
var useMemorizedHeader = function (_a) {
var renderHeader = _a.renderHeader;
return React.useMemo(function () {
if (typeof renderHeader === 'function') {
return renderHeader();
}
return null;
}, [renderHeader]);
};
var useMemorizedParentMessageInfo = function (_a) {
var parentMessage = _a.parentMessage, parentMessageState = _a.parentMessageState, renderParentMessageInfo = _a.renderParentMessageInfo, renderParentMessageInfoPlaceholder = _a.renderParentMessageInfoPlaceholder;
return React.useMemo(function () {
if (parentMessageState === Thread_context_types.ParentMessageStateTypes.NIL
|| parentMessageState === Thread_context_types.ParentMessageStateTypes.LOADING
|| parentMessageState === Thread_context_types.ParentMessageStateTypes.INVALID) {
if (typeof renderParentMessageInfoPlaceholder === 'function') {
return renderParentMessageInfoPlaceholder(parentMessageState);
}
switch (parentMessageState) {
case Thread_context_types.ParentMessageStateTypes.NIL: {
return (React__default.default.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__parent-message-info placeholder-nil", type: ui_PlaceHolder.PlaceHolderTypes.NO_RESULTS, iconSize: "64px" }));
}
case Thread_context_types.ParentMessageStateTypes.LOADING: {
return (React__default.default.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__parent-message-info placeholder-loading", type: ui_PlaceHolder.PlaceHolderTypes.LOADING, iconSize: "64px" }));
}
case Thread_context_types.ParentMessageStateTypes.INVALID: {
return (React__default.default.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__parent-message-info placeholder-invalid", type: ui_PlaceHolder.PlaceHolderTypes.WRONG, iconSize: "64px" }));
}
default: {
return null;
}
}
}
else if (parentMessageState === Thread_context_types.ParentMessageStateTypes.INITIALIZED) {
if (typeof renderParentMessageInfo === 'function') {
return renderParentMessageInfo();
}
}
return null;
}, [
parentMessage,
parentMessageState,
renderParentMessageInfo,
renderParentMessageInfoPlaceholder,
]);
};
var useMemorizedThreadList = function (_a) {
var threadListState = _a.threadListState, renderThreadListPlaceHolder = _a.renderThreadListPlaceHolder;
return React.useMemo(function () {
if (threadListState === Thread_context_types.ThreadListStateTypes.NIL
|| threadListState === Thread_context_types.ThreadListStateTypes.LOADING
|| threadListState === Thread_context_types.ThreadListStateTypes.INVALID) {
if (typeof renderThreadListPlaceHolder === 'function') {
return renderThreadListPlaceHolder(threadListState);
}
switch (threadListState) {
case Thread_context_types.ThreadListStateTypes.LOADING: {
return (React__default.default.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__thread-list placeholder-loading", type: ui_PlaceHolder.PlaceHolderTypes.LOADING, iconSize: "64px" }));
}
case Thread_context_types.ThreadListStateTypes.INVALID: {
return (React__default.default.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__thread-list placeholder-invalid", type: ui_PlaceHolder.PlaceHolderTypes.WRONG, iconSize: "64px" }));
}
case Thread_context_types.ThreadListStateTypes.NIL: {
return React__default.default.createElement(React__default.default.Fragment, null);
}
default: {
return null;
}
}
}
return null;
}, [
threadListState,
renderThreadListPlaceHolder,
]);
};
var ThreadUI = function (_a) {
var _b, _c, _d, _e;
var renderHeader = _a.renderHeader, _f = _a.renderParentMessageInfo, renderParentMessageInfo = _f === void 0 ? function () { return React__default.default.createElement(Thread_components_ParentMessageInfo, { className: "sendbird-thread-ui__parent-message-info" }); } : _f, renderMessage = _a.renderMessage, renderMessageInput = _a.renderMessageInput, renderCustomSeparator = _a.renderCustomSeparator, renderParentMessageInfoPlaceholder = _a.renderParentMessageInfoPlaceholder, renderThreadListPlaceHolder = _a.renderThreadListPlaceHolder, renderFileUploadIcon = _a.renderFileUploadIcon, renderVoiceMessageIcon = _a.renderVoiceMessageIcon, renderSendMessageIcon = _a.renderSendMessageIcon;
var _g = useSendbird.useSendbird().state, stores = _g.stores, config = _g.config;
var currentUserId = (_d = (_c = (_b = stores === null || stores === void 0 ? void 0 : stores.sdkStore) === null || _b === void 0 ? void 0 : _b.sdk) === null || _c === void 0 ? void 0 : _c.currentUser) === null || _d === void 0 ? void 0 : _d.userId;
var stringSet = LocalizationContext.useLocalization().stringSet;
var _h = ThreadProvider.useThread(), _j = _h.state, currentChannel = _j.currentChannel, allThreadMessages = _j.allThreadMessages, parentMessage = _j.parentMessage, parentMessageState = _j.parentMessageState, threadListState = _j.threadListState, hasMorePrev = _j.hasMorePrev, hasMoreNext = _j.hasMoreNext, onHeaderActionClick = _j.onHeaderActionClick, onMoveToParentMessage = _j.onMoveToParentMessage, _k = _h.actions, fetchPrevThreads = _k.fetchPrevThreads, fetchNextThreads = _k.fetchNextThreads;
var replyCount = allThreadMessages.length;
var isByMe = currentUserId === ((_e = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender) === null || _e === void 0 ? void 0 : _e.userId);
// Memoized custom components
var MemorizedHeader = useMemorizedHeader({ renderHeader: renderHeader });
var MemorizedParentMessageInfo = useMemorizedParentMessageInfo({
parentMessage: parentMessage,
parentMessageState: parentMessageState,
renderParentMessageInfo: renderParentMessageInfo,
renderParentMessageInfoPlaceholder: renderParentMessageInfoPlaceholder,
});
var MemorizedThreadList = useMemorizedThreadList({
threadListState: threadListState,
renderThreadListPlaceHolder: renderThreadListPlaceHolder,
});
// scroll
var _l = React.useState(0), scrollBottom = _l[0], setScrollBottom = _l[1];
var scrollRef = React.useRef(null);
var onScroll = function (e) {
var _a;
var element = e.target;
var scrollTop = element.scrollTop, clientHeight = element.clientHeight, scrollHeight = element.scrollHeight;
var threadItemNodes = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.sendbird-thread-list-item');
var firstNode = threadItemNodes === null || threadItemNodes === void 0 ? void 0 : threadItemNodes[0];
if (useSendMultipleFilesMessage.isAboutSame(scrollTop, 0, 10) && hasMorePrev) {
fetchPrevThreads(function (messages) {
var _a;
if (messages) {
try {
(_a = firstNode === null || firstNode === void 0 ? void 0 : firstNode.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(firstNode, { block: 'start', inline: 'nearest' });
}
catch (error) {
//
}
}
});
}
if (useSendMultipleFilesMessage.isAboutSame(clientHeight + scrollTop, scrollHeight, 10) && hasMoreNext) {
var scrollTop_1 = scrollTop;
fetchNextThreads(function (messages) {
if (messages) {
try {
element.scrollTop = scrollTop_1;
if (scrollRef.current) {
scrollRef.current.scrollTop = scrollTop_1;
}
}
catch (error) {
//
}
}
});
}
// save the lastest scroll bottom value
if (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) {
var current = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
setScrollBottom(current.scrollHeight - current.scrollTop - current.offsetHeight);
}
};
return (React__default.default.createElement("div", { className: 'sendbird-thread-ui' },
MemorizedHeader || (React__default.default.createElement(Thread_components_ThreadHeader, { className: "sendbird-thread-ui__header", channelName: utils.getChannelTitle(currentChannel, currentUserId !== null && currentUserId !== void 0 ? currentUserId : '', stringSet), onActionIconClick: onHeaderActionClick, onChannelNameClick: function () {
onMoveToParentMessage === null || onMoveToParentMessage === void 0 ? void 0 : onMoveToParentMessage({ message: parentMessage, channel: currentChannel });
} })),
React__default.default.createElement("div", { className: utils$1.classnames('sendbird-thread-ui--scroll', 'sendbird-conversation__messages'), ref: scrollRef, onScroll: onScroll, dir: index.getHTMLTextDirection(config === null || config === void 0 ? void 0 : config.htmlTextDirection, config === null || config === void 0 ? void 0 : config.forceLeftToRightMessageLayout) },
React__default.default.createElement(Message_context.MessageProvider, { message: parentMessage, isByMe: isByMe }, MemorizedParentMessageInfo),
replyCount > 0 && (React__default.default.createElement("div", { className: "sendbird-thread-ui__reply-counts" },
React__default.default.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_3 }, "".concat(replyCount, " ").concat(replyCount > 1 ? stringSet.THREAD__THREAD_REPLIES : stringSet.THREAD__THREAD_REPLY)))),
MemorizedThreadList || (React__default.default.createElement(Thread_components_ThreadList, { className: "sendbird-thread-ui__thread-list", renderMessage: renderMessage, renderCustomSeparator: renderCustomSeparator, scrollRef: scrollRef, scrollBottom: scrollBottom }))),
(renderMessageInput === null || renderMessageInput === void 0 ? void 0 : renderMessageInput()) || (React__default.default.createElement(Thread_components_ThreadMessageInput, { className: "sendbird-thread-ui__message-input", renderFileUploadIcon: renderFileUploadIcon, renderVoiceMessageIcon: renderVoiceMessageIcon, renderSendMessageIcon: renderSendMessageIcon }))));
};
module.exports = ThreadUI;
//# sourceMappingURL=ThreadUI.js.map