@sendbird/uikit-react
Version:
Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.
780 lines (757 loc) • 49.3 kB
JavaScript
;
var _tslib = require('./bundle-Conb-pOy.js');
var React = require('react');
var groupChannel = require('@sendbird/chat/groupChannel');
var GroupChannel = require('../GroupChannel.js');
var GroupChannelListProvider = require('./bundle-BzCZ_Let.js');
var GroupChannelList_components_GroupChannelListHeader = require('../GroupChannelList/components/GroupChannelListHeader.js');
var EditUserProfile = require('../EditUserProfile.js');
var ui_PlaceHolder = require('../ui/PlaceHolder.js');
var index = require('./bundle-B9fRtMCR.js');
var useSendbird = require('./bundle-Bq15P9qk.js');
var GroupChannelList_components_GroupChannelPreviewAction = require('../GroupChannelList/components/GroupChannelPreviewAction.js');
var GroupChannelList_components_GroupChannelListItem = require('../GroupChannelList/components/GroupChannelListItem.js');
var ui_IconButton = require('../ui/IconButton.js');
var ui_Icon = require('../ui/Icon.js');
var LocalizationContext = require('./bundle-DPDyqKIJ.js');
var MediaQueryContext = require('./bundle-Fv6PNPGZ.js');
var ui_Modal = require('./bundle-DZlJeh0V.js');
var ui_Label = require('./bundle-zgmRG2KL.js');
var ui_Button = require('../ui/Button.js');
var ui_UserListItem = require('../ui/UserListItem.js');
var utils = require('./bundle-CkQrhwR6.js');
var SendbirdContext = require('./bundle-B19RHFpR.js');
var sendbirdSelectors = require('../sendbirdSelectors.js');
require('@sendbird/uikit-tools');
var VoicePlayer_context = require('./bundle-BHp3N9Mz.js');
require('../VoiceRecorder/context.js');
require('../hooks/useModal.js');
require('./bundle-djxmZVvC.js');
require('css-vars-ponyfill');
require('@sendbird/chat');
var ui_ContextMenu = require('./bundle-DGV1BX0m.js');
require('@sendbird/chat/openChannel');
require('react-dom');
require('./bundle-fYxs1lss.js');
require('./bundle-C0RMVFg8.js');
require('./bundle-BS4GiQtn.js');
require('./bundle-B7KG10z2.js');
require('../ui/Header.js');
require('./bundle-BLz2EOZ5.js');
require('./bundle-DurllD3r.js');
require('../ui/MessageInput.js');
require('./bundle-DO5FgbkI.js');
require('../ui/ReactionButton.js');
require('../ui/ReactionBadge.js');
require('./bundle-Bnb8seJF.js');
require('../Message/context.js');
require('./bundle-Dobj18FB.js');
require('@sendbird/chat/message');
require('../ui/ThreadReplies.js');
require('./bundle-Bt1qvip8.js');
require('../ui/TemplateMessageItemBody.js');
require('../ui/FeedbackIconButton.js');
require('../ui/Input.js');
require('../ui/MessageContent.js');
require('./bundle-dUH189qO.js');
require('../GroupChannel/components/MessageList.js');
require('./bundle-BC4SHck9.js');
require('../EditUserProfile/context.js');
require('../Channel/context.js');
var ChannelList_context = require('./bundle-DX8YvrpL.js');
require('./bundle-B4ZDxwge.js');
require('../ChannelSettings/hooks/useMenuList.js');
require('./bundle-Bslx22kt.js');
require('./bundle-BG0LKEPR.js');
require('./bundle-DXySM280.js');
require('../Thread/context/types.js');
require('../utils/message/getOutgoingMessageState.js');
require('date-fns');
require('../Thread/components/ThreadMessageInput.js');
var Channel = require('../Channel.js');
var ChannelList_components_ChannelPreview = require('../ChannelList/components/ChannelPreview.js');
var ChannelSettings = require('../ChannelSettings.js');
var MessageSearch = require('../MessageSearch.js');
var Thread = require('../Thread.js');
var uuid = require('./bundle-t8BQsgL5.js');
require('./bundle-xIRA27JP.js');
require('../OpenChannel/components/OpenChannelInput.js');
require('../OpenChannel/components/OpenChannelMessageList.js');
require('../OpenChannelSettings/context.js');
require('../ui/AccordionGroup.js');
var useSendbirdStateContext = require('../useSendbirdStateContext.js');
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
var GroupChannelListUIView = function (_a) {
var renderHeader = _a.renderHeader, renderPlaceHolderError = _a.renderPlaceHolderError, renderPlaceHolderLoading = _a.renderPlaceHolderLoading, renderPlaceHolderEmptyList = _a.renderPlaceHolderEmptyList, onChangeTheme = _a.onChangeTheme, onUserProfileUpdated = _a.onUserProfileUpdated, allowProfileEdit = _a.allowProfileEdit, channels = _a.channels, onLoadMore = _a.onLoadMore, initialized = _a.initialized, renderChannel = _a.renderChannel, renderAddChannel = _a.renderAddChannel, scrollRef = _a.scrollRef;
var _b = React.useState(false), showProfileEdit = _b[0], setShowProfileEdit = _b[1];
var stores = useSendbird.useSendbird().state.stores;
var renderer = {
addChannel: renderAddChannel,
channel: renderChannel,
placeholder: {
loading: function () {
if (initialized)
return null;
if (renderPlaceHolderLoading)
return renderPlaceHolderLoading();
return React__default.default.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.LOADING });
},
empty: function () {
if (!initialized)
return null;
if (renderPlaceHolderEmptyList)
return renderPlaceHolderEmptyList();
return React__default.default.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.NO_CHANNELS });
},
error: function () {
if (!initialized || !stores.sdkStore.error)
return null;
if (renderPlaceHolderError)
return renderPlaceHolderError();
return React__default.default.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.WRONG });
},
},
};
return (React__default.default.createElement(React__default.default.Fragment, null,
React__default.default.createElement("div", { className: "sendbird-channel-list__header" }, (renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader()) || (React__default.default.createElement(GroupChannelList_components_GroupChannelListHeader.GroupChannelListHeader, { onEdit: function () { return allowProfileEdit && setShowProfileEdit(true); }, allowProfileEdit: allowProfileEdit, renderIconButton: function () { return renderer.addChannel(); } }))),
showProfileEdit && (React__default.default.createElement(EditUserProfile, { onThemeChange: onChangeTheme, onCancel: function () { return setShowProfileEdit(false); }, onEditProfile: function (user) {
setShowProfileEdit(false);
onUserProfileUpdated(user);
} })),
React__default.default.createElement(ChannelListComponent, { data: channels, renderItem: renderer.channel, onLoadMore: onLoadMore, placeholderLoading: renderer.placeholder.loading(), placeholderEmpty: renderer.placeholder.empty(), placeholderError: renderer.placeholder.error(), scrollRef: scrollRef })));
};
/**
* To do: Implement windowing
* Implement windowing if you are dealing with large number of messages/channels
* https://github.com/bvaughn/react-window -> recommendation
* We hesitate to bring one more dependency to our library,
* we are planning to implement it inside the library
* */
var ChannelListComponent = function (props) {
var data = props.data, renderItem = props.renderItem, onLoadMore = props.onLoadMore, placeholderLoading = props.placeholderLoading, placeholderError = props.placeholderError, placeholderEmpty = props.placeholderEmpty, scrollRef = props.scrollRef;
var onScroll = index.useOnScrollPositionChangeDetector({
onReachedBottom: function () { return onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore(); },
});
return (React__default.default.createElement("div", { className: 'sendbird-channel-list__body', onScroll: onScroll, ref: scrollRef },
placeholderError,
React__default.default.createElement("div", null, data.map(function (item, index) { return renderItem({ item: item, index: index }); })),
placeholderLoading,
data.length === 0 && placeholderEmpty));
};
var filterUser = function (idsToFilter) { return function (currentId) { return idsToFilter === null || idsToFilter === void 0 ? void 0 : idsToFilter.includes(currentId); }; };
var setChannelType = function (params, type) {
if (type === 'broadcast') {
// eslint-disable-next-line no-param-reassign
params.isBroadcast = true;
}
if (type === 'supergroup') {
// eslint-disable-next-line no-param-reassign
params.isSuper = true;
}
return params;
};
var createDefaultUserListQuery = function (_a) {
var sdk = _a.sdk, userFilledApplicationUserListQuery = _a.userFilledApplicationUserListQuery;
var params = sdk.createApplicationUserListQuery();
if (userFilledApplicationUserListQuery) {
Object.keys(userFilledApplicationUserListQuery).forEach(function (key) {
// @ts-ignore
params[key] = userFilledApplicationUserListQuery[key];
});
}
return params;
};
var CHANNEL_TYPE;
(function (CHANNEL_TYPE) {
CHANNEL_TYPE["GROUP"] = "group";
CHANNEL_TYPE["SUPERGROUP"] = "supergroup";
CHANNEL_TYPE["BROADCAST"] = "broadcast";
})(CHANNEL_TYPE || (CHANNEL_TYPE = {}));
var CreateChannelContext = React__default.default.createContext(null);
var initialState = {
sdk: undefined,
userListQuery: undefined,
onCreateChannelClick: undefined,
onChannelCreated: undefined,
onBeforeCreateChannel: undefined,
pageStep: 0,
type: CHANNEL_TYPE.GROUP,
onCreateChannel: undefined,
overrideInviteUser: undefined,
};
var CreateChannelManager = function (props) {
var onCreateChannelClick = props.onCreateChannelClick, onBeforeCreateChannel = props.onBeforeCreateChannel, onChannelCreated = props.onChannelCreated, userListQuery = props.userListQuery, onCreateChannel = props.onCreateChannel, overrideInviteUser = props.overrideInviteUser;
var updateState = useCreateChannelStore().updateState;
var config = useSendbird.useSendbird().state.config;
var _userListQuery = userListQuery !== null && userListQuery !== void 0 ? userListQuery : config === null || config === void 0 ? void 0 : config.userListQuery;
React.useEffect(function () {
updateState({
onCreateChannelClick: onCreateChannelClick,
onBeforeCreateChannel: onBeforeCreateChannel,
onChannelCreated: onChannelCreated,
userListQuery: _userListQuery,
onCreateChannel: onCreateChannel,
overrideInviteUser: overrideInviteUser,
});
}, [
onCreateChannelClick,
onBeforeCreateChannel,
onChannelCreated,
userListQuery,
onCreateChannel,
overrideInviteUser,
_userListQuery,
]);
return null;
};
var CreateChannelProvider = function (props) {
var children = props.children;
return (React__default.default.createElement(InternalCreateChannelProvider, _tslib.__assign({}, props),
React__default.default.createElement(CreateChannelManager, _tslib.__assign({}, props)),
children));
};
var createCreateChannelStore = function (props) { return SendbirdContext.createStore(_tslib.__assign(_tslib.__assign({}, initialState), props)); };
var InternalCreateChannelProvider = function (props) {
var children = props.children;
var defaultProps = utils.deleteNullish({
userListQuery: props === null || props === void 0 ? void 0 : props.userListQuery,
onCreateChannelClick: props === null || props === void 0 ? void 0 : props.onCreateChannelClick,
onChannelCreated: props === null || props === void 0 ? void 0 : props.onChannelCreated,
onBeforeCreateChannel: props === null || props === void 0 ? void 0 : props.onBeforeCreateChannel,
onCreateChannel: props === null || props === void 0 ? void 0 : props.onCreateChannel,
overrideInviteUser: props === null || props === void 0 ? void 0 : props.overrideInviteUser,
});
var storeRef = React.useRef(createCreateChannelStore(defaultProps));
return (React__default.default.createElement(CreateChannelContext.Provider, { value: storeRef.current }, children));
};
var useCreateChannelStore = function () {
return SendbirdContext.useStore(CreateChannelContext, function (state) { return state; }, initialState);
};
var useCreateChannelContext = function () {
var _a = useCreateChannel(), state = _a.state, actions = _a.actions;
return _tslib.__assign(_tslib.__assign({}, state), actions);
};
var useCreateChannel = function () {
var store = React.useContext(CreateChannelContext);
var sendbirdStore = useSendbirdStateContext.useSendbirdStateContext();
if (!store)
throw new Error('useCreateChannel must be used within a CreateChannelProvider');
var setPageStep = React.useCallback(function (pageStep) {
store.setState(function (state) { return (_tslib.__assign(_tslib.__assign({}, state), { pageStep: pageStep })); });
}, [store]);
var setType = React.useCallback(function (type) {
store.setState(function (state) { return (_tslib.__assign(_tslib.__assign({}, state), { type: type })); });
}, [store]);
var createChannel = React.useCallback(function () {
var params = [];
for (var _i = 0; _i < arguments.length; _i++) {
params[_i] = arguments[_i];
}
var createChannel = sendbirdSelectors.getCreateGroupChannel(sendbirdStore);
return createChannel.apply(void 0, params);
}, [sendbirdStore]);
var state = SendbirdContext.shimExports.useSyncExternalStore(store.subscribe, store.getState);
var actions = React.useMemo(function () { return ({
setPageStep: setPageStep,
setType: setType,
createChannel: createChannel,
}); }, [
setPageStep,
setType,
createChannel,
]);
return { state: state, actions: actions };
};
var BUFFER = 50;
var InviteUsers = function (_a) {
var onCancel = _a.onCancel, userListQuery = _a.userListQuery;
var _b = useCreateChannel(), _c = _b.state, onCreateChannelClick = _c.onCreateChannelClick, onBeforeCreateChannel = _c.onBeforeCreateChannel, onChannelCreated = _c.onChannelCreated, onCreateChannel = _c.onCreateChannel, overrideInviteUser = _c.overrideInviteUser, type = _c.type, createChannel = _b.actions.createChannel;
var _d = useSendbird.useSendbird().state, userId = _d.config.userId, sdk = _d.stores.sdkStore.sdk;
var idsToFilter = [userId];
var _e = React.useState([]), users = _e[0], setUsers = _e[1];
var _f = React.useState({}), selectedUsers = _f[0], setSelectedUsers = _f[1];
var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
var _g = React.useState(null), usersDataSource = _g[0], setUsersDataSource = _g[1];
var selectedCount = Object.keys(selectedUsers).length;
var titleText = stringSet.MODAL__CREATE_CHANNEL__TITLE;
var submitText = stringSet.BUTTON__CREATE;
var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
var _h = React.useState(window.innerHeight), scrollableAreaHeight = _h[0], setScrollableAreaHeight = _h[1];
React.useEffect(function () {
var applicationUserListQuery = userListQuery ? userListQuery() : createDefaultUserListQuery({ sdk: sdk });
setUsersDataSource(applicationUserListQuery);
if (!(applicationUserListQuery === null || applicationUserListQuery === void 0 ? void 0 : applicationUserListQuery.isLoading)) {
applicationUserListQuery.next().then(function (it) {
setUsers(it);
});
}
}, []);
// To fix navbar break in mobile we set dynamic height to the scrollable area
React.useEffect(function () {
var scrollableAreaHeight = function () {
setScrollableAreaHeight(window.innerHeight);
};
window.addEventListener('resize', scrollableAreaHeight);
return function () {
window.removeEventListener('resize', scrollableAreaHeight);
};
}, []);
return (React__default.default.createElement(ui_Modal.Modal, { isFullScreenOnMobile: true, titleText: titleText, submitText: submitText, type: ui_Button.ButtonTypes.PRIMARY,
// Disable the create button if no users are selected,
// but if there's only the logged-in user in the user list,
// then the create button should be enabled
disabled: users.length > 1 && Object.keys(selectedUsers).length === 0, onCancel: onCancel, onSubmit: function () {
var selectedUserList = Object.keys(selectedUsers).length > 0
? Object.keys(selectedUsers)
: [userId];
var _onChannelCreated = onChannelCreated !== null && onChannelCreated !== void 0 ? onChannelCreated : onCreateChannel;
var _onCreateChannelClick = onCreateChannelClick !== null && onCreateChannelClick !== void 0 ? onCreateChannelClick : overrideInviteUser;
if (typeof _onCreateChannelClick === 'function') {
_onCreateChannelClick({
users: selectedUserList,
onClose: onCancel !== null && onCancel !== void 0 ? onCancel : utils.noop,
channelType: type,
});
return;
}
if (onBeforeCreateChannel) {
var params = onBeforeCreateChannel(selectedUserList);
setChannelType(params, type);
createChannel(params).then(function (channel) { return _onChannelCreated === null || _onChannelCreated === void 0 ? void 0 : _onChannelCreated(channel); });
}
else {
var params = {};
params.invitedUserIds = selectedUserList;
params.isDistinct = false;
if (userId) {
params.operatorUserIds = [userId];
}
setChannelType(params, type);
// do not have custom params
createChannel(params).then(function (channel) { return _onChannelCreated === null || _onChannelCreated === void 0 ? void 0 : _onChannelCreated(channel); });
}
onCancel === null || onCancel === void 0 ? void 0 : onCancel();
} },
React__default.default.createElement("div", null,
React__default.default.createElement(ui_Label.Label, { color: (selectedCount > 0) ? ui_Label.LabelColors.PRIMARY : ui_Label.LabelColors.ONBACKGROUND_3, type: ui_Label.LabelTypography.CAPTION_1 }, "".concat(selectedCount, " ").concat(stringSet.MODAL__INVITE_MEMBER__SELECTED)),
React__default.default.createElement("div", { className: "sendbird-create-channel--scroll", style: isMobile ? { height: "calc(".concat(scrollableAreaHeight, "px - 200px)") } : {}, onScroll: function (e) {
if (!usersDataSource)
return;
var eventTarget = e.target;
var hasNext = usersDataSource.hasNext, isLoading = usersDataSource.isLoading;
var fetchMore = ((eventTarget.clientHeight + eventTarget.scrollTop + BUFFER) > eventTarget.scrollHeight);
if (hasNext && fetchMore && !isLoading) {
usersDataSource.next().then(function (usersBatch) {
setUsers(_tslib.__spreadArray(_tslib.__spreadArray([], users, true), usersBatch, true));
});
}
} }, users.map(function (user) { return (!filterUser(idsToFilter)(user.userId)) && (React__default.default.createElement(ui_UserListItem.UserListItem, { key: user.userId, user: user, checkBox: true, checked: selectedUsers[user.userId], onChange: function (event) {
var _a;
var modifiedSelectedUsers = _tslib.__assign(_tslib.__assign({}, selectedUsers), (_a = {}, _a[event.target.id] = event.target.checked, _a));
if (!event.target.checked) {
delete modifiedSelectedUsers[event.target.id];
}
setSelectedUsers(modifiedSelectedUsers);
} })); })))));
};
var isBroadcastChannelEnabled = function (sdk) {
var _a;
var ALLOW_BROADCAST_CHANNEL = 'allow_broadcast_channel';
var applicationAttributes = (_a = sdk === null || sdk === void 0 ? void 0 : sdk.appInfo) === null || _a === void 0 ? void 0 : _a.applicationAttributes;
if (Array.isArray(applicationAttributes)) {
return applicationAttributes.includes(ALLOW_BROADCAST_CHANNEL);
}
return false;
};
var isSuperGroupChannelEnabled = function (sdk) {
var _a;
var ALLOW_SUPER_GROUP_CHANNEL = 'allow_super_group_channel';
var applicationAttributes = (_a = sdk === null || sdk === void 0 ? void 0 : sdk.appInfo) === null || _a === void 0 ? void 0 : _a.applicationAttributes;
if (Array.isArray(applicationAttributes)) {
return applicationAttributes.includes(ALLOW_SUPER_GROUP_CHANNEL);
}
return false;
};
var SelectChannelType = function (props) {
var onCancel = props.onCancel;
var state = useSendbird.useSendbird().state;
var sdk = sendbirdSelectors.getSdk(state);
var _a = useCreateChannel().actions, setPageStep = _a.setPageStep, setType = _a.setType;
var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
var isBroadcastAvailable = isBroadcastChannelEnabled(sdk);
var isSupergroupAvailable = isSuperGroupChannelEnabled(sdk);
return (React__default.default.createElement(ui_Modal.Modal, { titleText: stringSet === null || stringSet === void 0 ? void 0 : stringSet.MODAL__CREATE_CHANNEL__TITLE, hideFooter: true, onCancel: function () { onCancel === null || onCancel === void 0 ? void 0 : onCancel(); }, className: "sendbird-add-channel__modal" },
React__default.default.createElement("div", { className: "sendbird-add-channel__rectangle-wrap" },
React__default.default.createElement("div", { className: "sendbird-add-channel__rectangle", onClick: function () {
setType(CHANNEL_TYPE.GROUP);
setPageStep(1);
}, role: "button", tabIndex: 0, onKeyDown: function () {
setType(CHANNEL_TYPE.GROUP);
setPageStep(1);
} },
React__default.default.createElement(ui_Icon.default, { className: "sendbird-add-channel__rectangle__chat-icon", type: ui_Icon.IconTypes.CHAT, fillColor: ui_Icon.IconColors.PRIMARY, width: "28px", height: "28px" }),
React__default.default.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.SUBTITLE_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.MODAL__CREATE_CHANNEL__GROUP)),
isSupergroupAvailable && (React__default.default.createElement("div", { className: "sendbird-add-channel__rectangle", onClick: function () {
setType(CHANNEL_TYPE.SUPERGROUP);
setPageStep(1);
}, role: "button", tabIndex: 0, onKeyDown: function () {
setType(CHANNEL_TYPE.SUPERGROUP);
setPageStep(1);
} },
React__default.default.createElement(ui_Icon.default, { className: "sendbird-add-channel__rectangle__supergroup-icon", type: ui_Icon.IconTypes.SUPERGROUP, fillColor: ui_Icon.IconColors.PRIMARY, width: "28px", height: "28px" }),
React__default.default.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.SUBTITLE_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.MODAL__CREATE_CHANNEL__SUPER))),
isBroadcastAvailable && (React__default.default.createElement("div", { className: "sendbird-add-channel__rectangle", onClick: function () {
setType(CHANNEL_TYPE.BROADCAST);
setPageStep(1);
}, role: "button", tabIndex: 0, onKeyDown: function () {
setType(CHANNEL_TYPE.BROADCAST);
setPageStep(1);
} },
React__default.default.createElement(ui_Icon.default, { className: "sendbird-add-channel__rectangle__broadcast-icon", type: ui_Icon.IconTypes.BROADCAST, fillColor: ui_Icon.IconColors.PRIMARY, width: "28px", height: "28px" }),
React__default.default.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.SUBTITLE_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.MODAL__CREATE_CHANNEL__BROADCAST))))));
};
var CreateChannel$1 = function (props) {
var onCancel = props.onCancel, renderStepOne = props.renderStepOne;
var _a = useCreateChannel(), _b = _a.state, pageStep = _b.pageStep, userListQuery = _b.userListQuery, setPageStep = _a.actions.setPageStep;
return (React__default.default.createElement(React__default.default.Fragment, null,
pageStep === 0 && ((renderStepOne === null || renderStepOne === void 0 ? void 0 : renderStepOne()) || (React__default.default.createElement(SelectChannelType, { onCancel: onCancel }))),
pageStep === 1 && (React__default.default.createElement(InviteUsers, { userListQuery: userListQuery, onCancel: function () {
setPageStep(0);
onCancel === null || onCancel === void 0 ? void 0 : onCancel();
} }))));
};
var CreateChannel = function (props) {
return (React__default.default.createElement(CreateChannelProvider, _tslib.__assign({}, props),
React__default.default.createElement(CreateChannel$1, _tslib.__assign({}, props))));
};
var AddGroupChannelView = function (_a) {
var createChannelVisible = _a.createChannelVisible, onChangeCreateChannelVisible = _a.onChangeCreateChannelVisible, onBeforeCreateChannel = _a.onBeforeCreateChannel, onCreateChannelClick = _a.onCreateChannelClick, onChannelCreated = _a.onChannelCreated;
var config = useSendbird.useSendbird().state.config;
return (React__default.default.createElement(React__default.default.Fragment, null,
React__default.default.createElement(ui_IconButton, { height: '32px', width: '32px', disabled: !config.isOnline, onClick: function () { return onChangeCreateChannelVisible(true); } },
React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CREATE, fillColor: ui_Icon.IconColors.PRIMARY, width: '24px', height: '24px' })),
createChannelVisible && (React__default.default.createElement(CreateChannel, { onCancel: function () { return onChangeCreateChannelVisible(false); }, onChannelCreated: function (channel) {
onChannelCreated === null || onChannelCreated === void 0 ? void 0 : onChannelCreated(channel);
onChangeCreateChannelVisible(false);
}, onBeforeCreateChannel: onBeforeCreateChannel, onCreateChannelClick: onCreateChannelClick }))));
};
var AddGroupChannel = function () {
var _a = React.useState(false), createChannelVisible = _a[0], setCreateChannelVisible = _a[1];
var _b = GroupChannelListProvider.useGroupChannelList().state, onChannelCreated = _b.onChannelCreated, onBeforeCreateChannel = _b.onBeforeCreateChannel, onCreateChannelClick = _b.onCreateChannelClick;
return (React__default.default.createElement(AddGroupChannelView, { createChannelVisible: createChannelVisible, onChangeCreateChannelVisible: setCreateChannelVisible, onCreateChannelClick: onCreateChannelClick, onBeforeCreateChannel: onBeforeCreateChannel, onChannelCreated: onChannelCreated }));
};
var GroupChannelListUI = function (props) {
var renderHeader = props.renderHeader, renderChannelPreview = props.renderChannelPreview, renderPlaceHolderError = props.renderPlaceHolderError, renderPlaceHolderLoading = props.renderPlaceHolderLoading, renderPlaceHolderEmptyList = props.renderPlaceHolderEmptyList;
var _a = GroupChannelListProvider.useGroupChannelList().state, onChannelSelect = _a.onChannelSelect, onThemeChange = _a.onThemeChange, allowProfileEdit = _a.allowProfileEdit, typingChannelUrls = _a.typingChannelUrls, groupChannels = _a.groupChannels, initialized = _a.initialized, selectedChannelUrl = _a.selectedChannelUrl, loadMore = _a.loadMore, onUserProfileUpdated = _a.onUserProfileUpdated, scrollRef = _a.scrollRef;
var _b = useSendbird.useSendbird().state, stores = _b.stores, _c = _b.config, logger = _c.logger, isOnline = _c.isOnline;
var sdk = stores.sdkStore.sdk;
var renderListItem = function (renderProps) {
var channel = renderProps.item, index = renderProps.index;
var itemProps = {
channel: channel,
tabIndex: index,
isSelected: channel.url === selectedChannelUrl,
isTyping: typingChannelUrls.includes(channel.url),
renderChannelAction: function (props) { return React__default.default.createElement(GroupChannelList_components_GroupChannelPreviewAction.GroupChannelPreviewAction, _tslib.__assign({}, props)); },
onClick: function () {
if (isOnline || (sdk === null || sdk === void 0 ? void 0 : sdk.isCacheEnabled)) {
logger.info('ChannelList: Clicked on channel:', channel);
onChannelSelect(channel);
}
else {
logger.warning('ChannelList: Inactivated clicking channel item during offline.');
}
},
onLeaveChannel: function () {
return _tslib.__awaiter(this, void 0, void 0, function () {
return _tslib.__generator(this, function (_a) {
switch (_a.label) {
case 0:
logger.info('ChannelList: Leaving channel', channel);
return [4 /*yield*/, channel.leave()];
case 1:
_a.sent();
logger.info('ChannelList: Leaving channel success');
return [2 /*return*/];
}
});
});
},
};
if (renderChannelPreview) {
return (React__default.default.createElement("div", { key: channel.url, onClick: itemProps.onClick }, renderChannelPreview(itemProps)));
}
return React__default.default.createElement(GroupChannelList_components_GroupChannelListItem.GroupChannelListItem, _tslib.__assign({ key: channel.url }, itemProps));
};
return (React__default.default.createElement(GroupChannelListUIView, { renderHeader: renderHeader, renderChannel: renderListItem, renderPlaceHolderError: renderPlaceHolderError, renderPlaceHolderLoading: renderPlaceHolderLoading, renderPlaceHolderEmptyList: renderPlaceHolderEmptyList, onChangeTheme: onThemeChange !== null && onThemeChange !== void 0 ? onThemeChange : utils.noop, allowProfileEdit: allowProfileEdit, onUserProfileUpdated: onUserProfileUpdated !== null && onUserProfileUpdated !== void 0 ? onUserProfileUpdated : utils.noop, channels: groupChannels, onLoadMore: loadMore, initialized: initialized, renderAddChannel: function () { return React__default.default.createElement(AddGroupChannel, null); }, scrollRef: scrollRef }));
};
var GroupChannelList = function (props) {
return (React__default.default.createElement(GroupChannelListProvider.GroupChannelListProvider, _tslib.__assign({}, props),
React__default.default.createElement(GroupChannelListUI, _tslib.__assign({}, props))));
};
var AddChannel = function () {
var _a = React.useState(false), showModal = _a[0], setShowModal = _a[1];
var _b = ChannelList_context.useChannelListContext(), overrideInviteUser = _b.overrideInviteUser, onBeforeCreateChannel = _b.onBeforeCreateChannel, onChannelSelect = _b.onChannelSelect;
return (React__default.default.createElement(AddGroupChannelView, { createChannelVisible: showModal, onChangeCreateChannelVisible: setShowModal, onCreateChannelClick: overrideInviteUser, onBeforeCreateChannel: onBeforeCreateChannel, onChannelCreated: function (it) { return onChannelSelect === null || onChannelSelect === void 0 ? void 0 : onChannelSelect(it); } }));
};
/**
* @deprecated This component is deprecated and will be removed in the next major update.
* Please use the `GroupChannel` component from '@sendbird/uikit-react/GroupChannel' instead.
* For more information, please refer to the migration guide:
* https://docs.sendbird.com/docs/chat/uikit/v3/react/introduction/group-channel-migration-guide
*/
var ChannelListUI = function (props) {
var renderHeader = props.renderHeader, renderChannelPreview = props.renderChannelPreview, renderPlaceHolderError = props.renderPlaceHolderError, renderPlaceHolderLoading = props.renderPlaceHolderLoading, renderPlaceHolderEmptyList = props.renderPlaceHolderEmptyList;
var _a = ChannelList_context.useChannelListContext(), onThemeChange = _a.onThemeChange, allowProfileEdit = _a.allowProfileEdit, allChannels = _a.allChannels, currentChannel = _a.currentChannel, channelListDispatcher = _a.channelListDispatcher, typingChannels = _a.typingChannels, initialized = _a.initialized, fetchChannelList = _a.fetchChannelList, onProfileEditSuccess = _a.onProfileEditSuccess;
var state = useSendbird.useSendbird().state;
var stores = state.stores, config = state.config;
var logger = config.logger, _b = config.isOnline, isOnline = _b === void 0 ? false : _b;
var sdk = stores.sdkStore.sdk;
var renderListItem = function (props) {
var channel = props.item, index = props.index;
var previewProps = {
channel: channel,
tabIndex: index,
isSelected: (channel === null || channel === void 0 ? void 0 : channel.url) === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url),
isTyping: typingChannels === null || typingChannels === void 0 ? void 0 : typingChannels.some(function (_a) {
var url = _a.url;
return url === (channel === null || channel === void 0 ? void 0 : channel.url);
}),
renderChannelAction: function (props) { return React__default.default.createElement(GroupChannelList_components_GroupChannelPreviewAction.GroupChannelPreviewAction, _tslib.__assign({}, props)); },
onClick: function () {
if (!isOnline && !(sdk === null || sdk === void 0 ? void 0 : sdk.isCacheEnabled)) {
logger.warning('ChannelList: Inactivated clicking channel item during offline.');
return;
}
logger.info('ChannelList: Clicked on channel:', channel);
channelListDispatcher({
type: ChannelList_context.SET_CURRENT_CHANNEL,
payload: channel,
});
},
onLeaveChannel: function (channel, cb) {
return _tslib.__awaiter(this, void 0, void 0, function () {
var response, err_1;
return _tslib.__generator(this, function (_a) {
switch (_a.label) {
case 0:
logger.info('ChannelList: Leaving channel', channel);
if (!channel) return [3 /*break*/, 4];
_a.label = 1;
case 1:
_a.trys.push([1, 3, , 4]);
return [4 /*yield*/, channel.leave()];
case 2:
response = _a.sent();
logger.info('ChannelList: Leaving channel success', response);
if (cb && typeof cb === 'function')
cb(channel, null);
channelListDispatcher({
type: ChannelList_context.LEAVE_CHANNEL_SUCCESS,
payload: channel.url,
});
return [3 /*break*/, 4];
case 3:
err_1 = _a.sent();
logger.error('ChannelList: Leaving channel failed', err_1);
if (cb && typeof cb === 'function')
cb(channel, err_1);
return [3 /*break*/, 4];
case 4: return [2 /*return*/];
}
});
});
},
};
if (renderChannelPreview) {
return (React__default.default.createElement("div", { key: channel === null || channel === void 0 ? void 0 : channel.url, onClick: previewProps.onClick }, renderChannelPreview(previewProps)));
}
return React__default.default.createElement(ChannelList_components_ChannelPreview, _tslib.__assign({ key: channel === null || channel === void 0 ? void 0 : channel.url }, previewProps));
};
return (React__default.default.createElement(GroupChannelListUIView, { renderHeader: renderHeader, renderChannel: renderListItem, renderPlaceHolderError: renderPlaceHolderError, renderPlaceHolderLoading: renderPlaceHolderLoading, renderPlaceHolderEmptyList: renderPlaceHolderEmptyList, onChangeTheme: onThemeChange !== null && onThemeChange !== void 0 ? onThemeChange : utils.noop, allowProfileEdit: allowProfileEdit, onUserProfileUpdated: onProfileEditSuccess !== null && onProfileEditSuccess !== void 0 ? onProfileEditSuccess : utils.noop, channels: allChannels, onLoadMore: fetchChannelList, initialized: initialized, renderAddChannel: function () { return React__default.default.createElement(AddChannel, null); } }));
};
/**
* @deprecated This component is deprecated and will be removed in the next major update.
* Please use the `GroupChannelList` component from '@sendbird/uikit-react/GroupChannelList' instead.
* For more information, please refer to the migration guide:
* https://docs.sendbird.com/docs/chat/uikit/v3/react/introduction/group-channel-migration-guide
*/
var ChannelList = function (props) {
return (React__default.default.createElement(ChannelList_context.ChannelListProvider, _tslib.__assign({}, props),
React__default.default.createElement(ChannelListUI, _tslib.__assign({}, props))));
};
var PANELS;
(function (PANELS) {
PANELS["CHANNEL_LIST"] = "CHANNEL_LIST";
PANELS["CHANNEL"] = "CHANNEL";
PANELS["CHANNEL_SETTINGS"] = "CHANNEL_SETTINGS";
PANELS["MESSAGE_SEARCH"] = "MESSAGE_SEARCH";
PANELS["THREAD"] = "THREAD";
})(PANELS || (PANELS = {}));
var MobileLayout = function (props) {
var _a, _b, _c;
var replyType = props.replyType, isMessageGroupingEnabled = props.isMessageGroupingEnabled, isMultipleFilesMessageEnabled = props.isMultipleFilesMessageEnabled, allowProfileEdit = props.allowProfileEdit, isReactionEnabled = props.isReactionEnabled, showSearchIcon = props.showSearchIcon, onProfileEditSuccess = props.onProfileEditSuccess, currentChannel = props.currentChannel, setCurrentChannel = props.setCurrentChannel, startingPoint = props.startingPoint, setStartingPoint = props.setStartingPoint, threadTargetMessage = props.threadTargetMessage, setThreadTargetMessage = props.setThreadTargetMessage, highlightedMessage = props.highlightedMessage, setHighlightedMessage = props.setHighlightedMessage, enableLegacyChannelModules = props.enableLegacyChannelModules;
var _d = React.useState(PANELS.CHANNEL_LIST), panel = _d[0], setPanel = _d[1];
var store = useSendbird.useSendbird().state;
var sdk = (_b = (_a = store === null || store === void 0 ? void 0 : store.stores) === null || _a === void 0 ? void 0 : _a.sdkStore) === null || _b === void 0 ? void 0 : _b.sdk;
var userId = (_c = store === null || store === void 0 ? void 0 : store.config) === null || _c === void 0 ? void 0 : _c.userId;
var pause = VoicePlayer_context.useVoicePlayerContext().pause;
var goToMessage = function (message, timeoutCb) {
setStartingPoint === null || setStartingPoint === void 0 ? void 0 : setStartingPoint((message === null || message === void 0 ? void 0 : message.createdAt) || null);
setTimeout(function () {
timeoutCb === null || timeoutCb === void 0 ? void 0 : timeoutCb((message === null || message === void 0 ? void 0 : message.messageId) || null);
}, 500);
};
React.useEffect(function () {
if (panel !== PANELS.CHANNEL) {
goToMessage(null, function () { return setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null); });
}
}, [panel]);
React.useEffect(function () {
var _a, _b;
var handlerId = uuid.uuidv4();
if ((_a = sdk === null || sdk === void 0 ? void 0 : sdk.groupChannel) === null || _a === void 0 ? void 0 : _a.addGroupChannelHandler) {
var handler = new groupChannel.GroupChannelHandler({
onUserBanned: function (groupChannel, user) {
if (groupChannel.url === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) && (user === null || user === void 0 ? void 0 : user.userId) === userId) {
setPanel(PANELS.CHANNEL_LIST);
}
},
onChannelDeleted: function (channelUrl) {
if (channelUrl === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url)) {
setPanel(PANELS.CHANNEL_LIST);
}
},
onUserLeft: function (groupChannel, user) {
if (groupChannel.url === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) && (user === null || user === void 0 ? void 0 : user.userId) === userId) {
setPanel(PANELS.CHANNEL_LIST);
}
},
});
(_b = sdk === null || sdk === void 0 ? void 0 : sdk.groupChannel) === null || _b === void 0 ? void 0 : _b.addGroupChannelHandler(handlerId, handler);
}
return function () {
var _a, _b;
(_b = (_a = sdk === null || sdk === void 0 ? void 0 : sdk.groupChannel) === null || _a === void 0 ? void 0 : _a.removeGroupChannelHandler) === null || _b === void 0 ? void 0 : _b.call(_a, handlerId);
};
}, [sdk, currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
// if currentChannel is changed while on Thread
// then change panel type to CHANNEL
React.useEffect(function () {
if (panel === PANELS.THREAD) {
setPanel(PANELS.CHANNEL);
}
}, [currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
var channelListProps = {
allowProfileEdit: allowProfileEdit,
onProfileEditSuccess: onProfileEditSuccess,
disableAutoSelect: true,
onChannelSelect: function (channel) {
setCurrentChannel(channel !== null && channel !== void 0 ? channel : undefined);
if (channel) {
setPanel(PANELS.CHANNEL);
}
else {
setPanel(PANELS.CHANNEL_LIST);
}
},
// for GroupChannelList
onChannelCreated: function (channel) {
setCurrentChannel(channel);
setPanel(PANELS.CHANNEL);
},
onUserProfileUpdated: onProfileEditSuccess,
};
var channelProps = {
channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '',
onChatHeaderActionClick: function () {
setPanel(PANELS.CHANNEL_SETTINGS);
},
onBackClick: function () {
setPanel(PANELS.CHANNEL_LIST);
pause(VoicePlayer_context.ALL);
},
onSearchClick: function () {
setPanel(PANELS.MESSAGE_SEARCH);
},
onReplyInThread: function (_a) {
var message = _a.message;
if (replyType === 'THREAD') {
setPanel(PANELS.THREAD);
setThreadTargetMessage(message);
}
},
onQuoteMessageClick: function (_a) {
var message = _a.message;
// thread message
if (replyType === 'THREAD') {
setThreadTargetMessage(message);
setPanel(PANELS.THREAD);
}
},
animatedMessage: highlightedMessage,
onMessageAnimated: function () { return setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(null); },
showSearchIcon: showSearchIcon,
startingPoint: startingPoint !== null && startingPoint !== void 0 ? startingPoint : undefined,
isReactionEnabled: isReactionEnabled,
replyType: replyType,
isMessageGroupingEnabled: isMessageGroupingEnabled,
isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled,
// for GroupChannel
animatedMessageId: highlightedMessage,
onReplyInThreadClick: function (_a) {
var message = _a.message;
if (replyType === 'THREAD') {
setPanel(PANELS.THREAD);
setThreadTargetMessage(message);
}
},
};
return (React__default.default.createElement("div", { className: "sb_mobile", id: ui_ContextMenu.APP_LAYOUT_ROOT },
panel === PANELS.CHANNEL_LIST && (React__default.default.createElement("div", { className: "sb_mobile__panelwrap" }, enableLegacyChannelModules ? React__default.default.createElement(ChannelList, _tslib.__assign({}, channelListProps)) : React__default.default.createElement(GroupChannelList, _tslib.__assign({}, channelListProps)))),
panel === PANELS.CHANNEL && (React__default.default.createElement("div", { className: "sb_mobile__panelwrap" }, enableLegacyChannelModules ? React__default.default.createElement(Channel, _tslib.__assign({}, channelProps)) : React__default.default.createElement(GroupChannel.GroupChannel, _tslib.__assign({}, channelProps)))),
panel === PANELS.CHANNEL_SETTINGS && (React__default.default.createElement("div", { className: "sb_mobile__panelwrap" },
React__default.default.createElement(ChannelSettings, { channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', onCloseClick: function () {
setPanel(PANELS.CHANNEL);
}, onLeaveChannel: function () {
setPanel(PANELS.CHANNEL_LIST);
} }))),
panel === PANELS.MESSAGE_SEARCH && (React__default.default.createElement("div", { className: "sb_mobile__panelwrap" },
React__default.default.createElement(MessageSearch, { channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', onCloseClick: function () {
setPanel(PANELS.CHANNEL);
}, onResultClick: function (message) {
setPanel(PANELS.CHANNEL);
goToMessage(message, function (messageId) {
setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(messageId);
});
} }))),
panel === PANELS.THREAD && (React__default.default.createElement("div", { className: "sb_mobile__panelwrap" },
React__default.default.createElement(Thread, { channelUrl: (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url) || '', message: threadTargetMessage, onHeaderActionClick: function () {
setPanel(PANELS.CHANNEL);
pause(VoicePlayer_context.ALL);
}, onMoveToParentMessage: function (_a) {
var message = _a.message, channel = _a.channel;
setCurrentChannel(channel);
goToMessage(message, function (messageId) {
setPanel(PANELS.CHANNEL);
setHighlightedMessage === null || setHighlightedMessage === void 0 ? void 0 : setHighlightedMessage(messageId);
});
} })))));
};
exports.AddChannel = AddChannel;
exports.AddGroupChannel = AddGroupChannel;
exports.ChannelList = ChannelList;
exports.ChannelListUI = ChannelListUI;
exports.CreateChannel = CreateChannel$1;
exports.CreateChannel$1 = CreateChannel;
exports.CreateChannelContext = CreateChannelContext;
exports.CreateChannelProvider = CreateChannelProvider;
exports.GroupChannelList = GroupChannelList;
exports.GroupChannelListUI = GroupChannelListUI;
exports.InviteUsers = InviteUsers;
exports.MobileLayout = MobileLayout;
exports.SelectChannelType = SelectChannelType;
exports.useCreateChannel = useCreateChannel;
exports.useCreateChannelContext = useCreateChannelContext;
//# sourceMappingURL=bundle-DUH3w6Kc.js.map