@sendbird/uikit-react
Version:
Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.
294 lines (285 loc) • 17 kB
JavaScript
'use strict';
var React = require('react');
var LocalizationContext = require('../../chunks/bundle-REYf6P50.js');
var utils = require('../../chunks/bundle-D6n8A6Zc.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-D66YmzI6.js');
var useSendMultipleFilesMessage = require('../../chunks/bundle-BH5CILPf.js');
var Message_context = require('../../Message/context.js');
var index = require('../../chunks/bundle-BUPw_lsA.js');
var utils$1 = require('../../chunks/bundle-kfqOElgK.js');
var ThreadProvider = require('../../chunks/bundle-BL6JVo1H.js');
var useSendbird = require('../../chunks/bundle-D6mmpicY.js');
require('../../chunks/bundle-DdEJUQ3V.js');
require('../../chunks/bundle-BE-eUbjS.js');
require('../../chunks/bundle-C7WnFc5I.js');
require('../../chunks/bundle-CyQuENXQ.js');
require('../../chunks/bundle-BAy4Z2n_.js');
require('../../chunks/bundle-CjgU3l0w.js');
require('../../chunks/bundle-OV9QvRP8.js');
require('react-dom');
require('../../chunks/bundle-BmtTyZzB.js');
require('../../ui/IconButton.js');
require('../../ui/Button.js');
require('../../ui/Icon.js');
require('../../chunks/bundle-BeuUz2c0.js');
require('../../chunks/bundle-Bj7CL3aP.js');
require('../../chunks/bundle-CEY5QNl7.js');
require('./ParentMessageInfoItem.js');
require('../../ui/ImageRenderer.js');
require('../../ui/TextButton.js');
require('../../chunks/bundle-qNUnRJ-F.js');
require('../../ui/EmojiReactions.js');
require('../../ui/ReactionBadge.js');
require('../../ui/ReactionButton.js');
require('../../chunks/bundle-y6-ks46c.js');
require('../../chunks/bundle-BWLRRAFI.js');
require('@sendbird/chat');
require('@sendbird/chat/openChannel');
require('../../ui/SortByRow.js');
require('../../chunks/bundle-HERYYUXZ.js');
require('../../chunks/bundle-DWBI0JnU.js');
require('@sendbird/chat/groupChannel');
require('../../ui/BottomSheet.js');
require('../../hooks/useModal.js');
require('../../ui/UserListItem.js');
require('../../chunks/bundle-H44hyvFN.js');
require('../../chunks/bundle-B4Oz6Uwy.js');
require('../../chunks/bundle-CHvo3SHq.js');
require('../../ui/MutedAvatarOverlay.js');
require('../../ui/Checkbox.js');
require('../../ui/UserProfile.js');
require('../../sendbirdSelectors.js');
require('../../chunks/bundle-CyJimqL9.js');
require('../../utils/message/getOutgoingMessageState.js');
require('../../chunks/bundle-DFNM8KjC.js');
require('../../ui/Tooltip.js');
require('../../ui/TooltipWrapper.js');
require('../../chunks/bundle-DFpSNLcN.js');
require('../../ui/VoiceMessageItemBody.js');
require('../../ui/ProgressBar.js');
require('../../VoicePlayer/useVoicePlayer.js');
require('../../chunks/bundle-CWVSskOQ.js');
require('../../VoiceRecorder/context.js');
require('../../ui/PlaybackTime.js');
require('../../ui/Loader.js');
require('../../chunks/bundle-D1jvTvhG.js');
require('../../chunks/bundle-WPa3lxwD.js');
require('../../ui/MentionLabel.js');
require('../../ui/LinkLabel.js');
require('../../chunks/bundle-BOXZxrtw.js');
require('@sendbird/chat/message');
require('../../ui/FileViewer.js');
require('../../chunks/bundle-C8vJRfhx.js');
require('@sendbird/uikit-tools');
require('../../chunks/bundle-C9bb3iWF.js');
require('../../chunks/bundle-HkyQ0DjT.js');
require('../../chunks/bundle-DwuvGkzI.js');
require('../../chunks/bundle-D0cv-92J.js');
require('../../chunks/bundle-rpradL3a.js');
require('../../chunks/bundle-JR9-1BeM.js');
require('../../chunks/bundle-Dc6k4jof.js');
require('../../ui/MessageItemReactionMenu.js');
require('../../ui/MessageInput.js');
require('../../chunks/bundle-CTz3qwYY.js');
require('dompurify');
require('../../chunks/bundle-fVfMBori.js');
require('../../chunks/bundle-n_eAVYbo.js');
require('../../chunks/bundle-L5zC6xWM.js');
require('../../chunks/bundle-C73YyNPC.js');
require('../../ui/MobileMenu.js');
require('../../Message/hooks/useDirtyGetMentions.js');
require('../../chunks/bundle-kYn7Bizj.js');
require('../../chunks/bundle-v95Xmjt9.js');
require('../../chunks/bundle-DYiDFr98.js');
require('../../ui/Header.js');
require('./ThreadListItem.js');
require('../../ui/DateSeparator.js');
require('../../chunks/bundle-Bv2i41gB.js');
require('../../chunks/bundle-NjC1jT1F.js');
require('../../chunks/bundle-oo08qJuT.js');
require('../../chunks/bundle-CejczCsL.js');
require('../../ui/OGMessageItemBody.js');
require('../../ui/TextMessageItemBody.js');
require('../../ui/FileMessageItemBody.js');
require('../../ui/ThumbnailMessageItemBody.js');
require('../../chunks/bundle-Ca4uPUG4.js');
require('../../ui/UnknownMessageItemBody.js');
require('../../ui/TemplateMessageItemBody.js');
require('../../chunks/bundle-BrzJTkCk.js');
require('../../ui/FallbackTemplateMessageItemBody.tsx.js');
require('../../ui/LoadingTemplateMessageItemBody.tsx.js');
require('../../ui/MessageFeedbackFailedModal.js');
require('../../chunks/bundle-Dlhvq6qJ.js');
require('../../Channel/utils/compareMessagesForGrouping.js');
require('date-fns');
require('../../chunks/bundle-Buhp9vb2.js');
require('../../GroupChannel/components/SuggestedMentionList.js');
require('../../ui/QuoteMessageInput.js');
require('../../VoiceRecorder/useVoiceRecorder.js');
require('../../chunks/bundle-Cch-IjCG.js');
require('../../chunks/bundle-o7bJmsVG.js');
require('../../chunks/bundle-DowCzqdD.js');
require('../../chunks/bundle-u5TfAXpt.js');
require('../../Channel/hooks/useHandleUploadFiles.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