@sendbird/uikit-react/chunks/bundle-ByqSKxfa.js

Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.

import { _ as __assign, d as __rest } from './bundle-CzBQNSmE.js';
import React__default, { useContext, useCallback, useMemo, useRef, useEffect } from 'react';
import { GroupChannelFilter } from '@sendbird/chat/groupChannel';
import { useGroupChannelList as useGroupChannelList$1, useGroupChannelHandler } from '@sendbird/uikit-tools';
import { U as UserProfileProvider } from './bundle-CS_zfDpT.js';
import { u as useOnlineStatus, a as useMarkAsDeliveredScheduler } from './bundle-ua_cRehb.js';
import { s as shimExports, u as useStore, c as createStore } from './bundle-BRRgVYI5.js';
import { d as deleteNullish, n as noop } from './bundle-DO80aKFO.js';
import { u as useSendbird } from './bundle-DMcf5OHL.js';
import { u as useDeepCompareEffect } from './bundle-CJemq6cX.js';

var useGroupChannelList = function () {
    var store = useContext(GroupChannelListContext);
    if (!store)
        throw new Error('useGroupChannelList must be used within a GroupChannelListProvider');
    var setGroupChannels = useCallback(function (channels) {
        store.setState(function (state) { return (__assign(__assign({}, state), { groupChannels: channels })); }, true);
    }, []);
    var state = shimExports.useSyncExternalStore(store.subscribe, store.getState);
    var actions = useMemo(function () { return ({
        setGroupChannels: setGroupChannels,
    }); }, [setGroupChannels]);
    return { state: state, actions: actions };
};

var GroupChannelListContext = React__default.createContext(null);
var initialState = function () { return ({
    className: '',
    selectedChannelUrl: '',
    disableAutoSelect: false,
    allowProfileEdit: false,
    isTypingIndicatorEnabled: false,
    isMessageReceiptStatusEnabled: false,
    onChannelSelect: function () { },
    onChannelCreated: function () { },
    onThemeChange: noop,
    onCreateChannelClick: noop,
    onBeforeCreateChannel: null,
    onUserProfileUpdated: noop,
    typingChannelUrls: [],
    refreshing: false,
    initialized: false,
    groupChannels: [],
    refresh: null,
    loadMore: null,
    scrollRef: { current: null },
}); };
/**
 * @returns {ReturnType<typeof createStore<GroupChannelListState>>}
 */
var useGroupChannelListStore = function () {
    return useStore(GroupChannelListContext, function (state) { return state; }, initialState());
};
var GroupChannelListManager = function (_a) {
    var _b, _c, _d, _e, _f, _g;
    var _h = _a.className, className = _h === void 0 ? '' : _h, _j = _a.selectedChannelUrl, selectedChannelUrl = _j === void 0 ? '' : _j, _k = _a.disableAutoSelect, disableAutoSelect = _k === void 0 ? false : _k, channelListQueryParams = _a.channelListQueryParams, onThemeChange = _a.onThemeChange, onChannelSelect = _a.onChannelSelect, onChannelCreated = _a.onChannelCreated, onCreateChannelClick = _a.onCreateChannelClick, onBeforeCreateChannel = _a.onBeforeCreateChannel, onUserProfileUpdated = _a.onUserProfileUpdated, props = __rest(_a, ["className", "selectedChannelUrl", "disableAutoSelect", "channelListQueryParams", "onThemeChange", "onChannelSelect", "onChannelCreated", "onCreateChannelClick", "onBeforeCreateChannel", "onUserProfileUpdated"]);
    var sendbirdState = useSendbird().state;
    var config = sendbirdState.config, stores = sendbirdState.stores;
    var _l = useGroupChannelList(), state = _l.state, actions = _l.actions;
    var updateState = useGroupChannelListStore().updateState;
    var sdkStore = stores.sdkStore;
    var sdk = sdkStore.sdk;
    var isConnected = useOnlineStatus(sdk, config.logger);
    var scheduler = useMarkAsDeliveredScheduler({ isConnected: isConnected }, config);
    var scrollRef = useRef(null);
    var channelListDataSource = useGroupChannelList$1(sdk, {
        collectionCreator: getCollectionCreator(sdk, channelListQueryParams),
        markAsDelivered: function (channels) {
            if (!config.disableMarkAsDelivered) {
                channels.forEach(scheduler.push);
            }
        },
        onChannelsDeleted: function (channelUrls) {
            channelUrls.forEach(function (url) {
                if (url === selectedChannelUrl)
                    onChannelSelect(null);
            });
        },
        onChannelsUpdated: function () {
            actions.setGroupChannels(groupChannels);
        },
    });
    var refreshing = channelListDataSource.refreshing, initialized = channelListDataSource.initialized, groupChannels = channelListDataSource.groupChannels, refresh = channelListDataSource.refresh, loadMore = channelListDataSource.loadMore;
    // SideEffect: Auto select channel
    useEffect(function () {
        var _a;
        if (!disableAutoSelect && stores.sdkStore.initialized && initialized) {
            if (!selectedChannelUrl)
                onChannelSelect((_a = groupChannels[0]) !== null && _a !== void 0 ? _a : null);
        }
    }, [disableAutoSelect, stores.sdkStore.initialized, initialized, selectedChannelUrl]);
    // Recreates the GroupChannelCollection when `channelListQueryParams` change
    useEffect(function () {
        refresh === null || refresh === void 0 ? void 0 : refresh();
    }, [
        Object.keys(channelListQueryParams !== null && channelListQueryParams !== void 0 ? channelListQueryParams : {}).sort()
            .map(function (key) { return "".concat(key, "=").concat(encodeURIComponent(JSON.stringify(channelListQueryParams[key]))); })
            .join('&'),
    ]);
    var typingChannelUrls = state.typingChannelUrls;
    useGroupChannelHandler(sdk, {
        onTypingStatusUpdated: function (channel) {
            var _a;
            var channelList = typingChannelUrls.filter(function (channelUrl) { return channelUrl !== channel.url; });
            if (((_a = channel.getTypingUsers()) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                updateState({
                    typingChannelUrls: (channelList.concat(channel.url)),
                });
            }
            else {
                updateState({
                    typingChannelUrls: (channelList),
                });
            }
        },
    });
    var allowProfileEdit = (_c = (_b = props.allowProfileEdit) !== null && _b !== void 0 ? _b : config.allowProfileEdit) !== null && _c !== void 0 ? _c : true;
    var isTypingIndicatorEnabled = (_e = (_d = props.isTypingIndicatorEnabled) !== null && _d !== void 0 ? _d : config.groupChannelList.enableTypingIndicator) !== null && _e !== void 0 ? _e : false;
    var isMessageReceiptStatusEnabled = (_g = (_f = props.isMessageReceiptStatusEnabled) !== null && _f !== void 0 ? _f : config.groupChannelList.enableMessageReceiptStatus) !== null && _g !== void 0 ? _g : false;
    var eventHandlers = useMemo(function () { return ({
        onChannelSelect: onChannelSelect,
        onChannelCreated: onChannelCreated,
        onThemeChange: onThemeChange,
        onCreateChannelClick: onCreateChannelClick,
        onBeforeCreateChannel: onBeforeCreateChannel,
        onUserProfileUpdated: onUserProfileUpdated,
    }); }, [
        onChannelSelect,
        onChannelCreated,
        onThemeChange,
        onCreateChannelClick,
        onBeforeCreateChannel,
        onUserProfileUpdated,
    ]);
    var configurations = useMemo(function () { return ({
        className: className,
        selectedChannelUrl: selectedChannelUrl,
        disableAutoSelect: disableAutoSelect,
        allowProfileEdit: allowProfileEdit,
        isTypingIndicatorEnabled: isTypingIndicatorEnabled,
        isMessageReceiptStatusEnabled: isMessageReceiptStatusEnabled,
        typingChannelUrls: typingChannelUrls,
        refreshing: refreshing,
        initialized: initialized,
        refresh: refresh,
        loadMore: loadMore,
    }); }, [
        className,
        selectedChannelUrl,
        disableAutoSelect,
        allowProfileEdit,
        isTypingIndicatorEnabled,
        isMessageReceiptStatusEnabled,
        typingChannelUrls,
        refreshing,
        initialized,
        scrollRef,
    ]);
    useDeepCompareEffect(function () {
        updateState(__assign(__assign(__assign({}, eventHandlers), configurations), { groupChannels: groupChannels }));
    }, [
        configurations,
        eventHandlers,
        groupChannels.map(function (groupChannel) { return groupChannel.serialize(); }),
    ]);
    return null;
};
var createGroupChannelListStore = function (props) { return createStore(__assign(__assign({}, initialState()), props)); };
var InternalGroupChannelListProvider = function (props) {
    var children = props.children;
    var defaultProps = deleteNullish({
        onChannelSelect: props === null || props === void 0 ? void 0 : props.onChannelSelect,
        onChannelCreated: props === null || props === void 0 ? void 0 : props.onChannelCreated,
        className: props === null || props === void 0 ? void 0 : props.className,
        selectedChannelUrl: props === null || props === void 0 ? void 0 : props.selectedChannelUrl,
        allowProfileEdit: props === null || props === void 0 ? void 0 : props.allowProfileEdit,
        disableAutoSelect: props === null || props === void 0 ? void 0 : props.disableAutoSelect,
        isTypingIndicatorEnabled: props === null || props === void 0 ? void 0 : props.isTypingIndicatorEnabled,
        isMessageReceiptStatusEnabled: props === null || props === void 0 ? void 0 : props.isMessageReceiptStatusEnabled,
        channelListQueryParams: props === null || props === void 0 ? void 0 : props.channelListQueryParams,
        onThemeChange: props === null || props === void 0 ? void 0 : props.onThemeChange,
        onCreateChannelClick: props === null || props === void 0 ? void 0 : props.onCreateChannelClick,
        onBeforeCreateChannel: props === null || props === void 0 ? void 0 : props.onBeforeCreateChannel,
        onUserProfileUpdated: props === null || props === void 0 ? void 0 : props.onUserProfileUpdated,
    });
    var storeRef = useRef(createGroupChannelListStore(defaultProps));
    return (React__default.createElement(GroupChannelListContext.Provider, { value: storeRef.current }, children));
};
var GroupChannelListProvider = function (props) {
    var children = props.children, className = props.className;
    return (React__default.createElement(InternalGroupChannelListProvider, __assign({}, props),
        React__default.createElement(GroupChannelListManager, __assign({}, props)),
        React__default.createElement(UserProfileProvider, __assign({}, props),
            React__default.createElement("div", { className: "sendbird-channel-list ".concat(className) }, children))));
};
// Keep this function for backward compatibility.
var useGroupChannelListContext = function () {
    var _a = useGroupChannelList(), state = _a.state, actions = _a.actions;
    return __assign(__assign({}, state), actions);
};
function getCollectionCreator(sdk, channelListQueryParams) {
    return function (defaultParams) {
        var params = __assign(__assign({}, defaultParams), channelListQueryParams);
        return sdk.groupChannel.createGroupChannelCollection(__assign(__assign({}, params), { filter: new GroupChannelFilter(params) }));
    };
}

export { GroupChannelListContext as G, useGroupChannelListStore as a, GroupChannelListManager as b, GroupChannelListProvider as c, useGroupChannelListContext as d, useGroupChannelList as u };
//# sourceMappingURL=bundle-ByqSKxfa.js.map