@uimkit/uikit-react/dist/esm/components/UIGroupList/UIGroupList.js

<img style="width:64px" src="https://mgmt.uimkit.chat/media/img/avatar.png"/>

import { __assign } from 'tslib';
import React__default, { useState, useCallback, useMemo, useRef } from 'react';
import { useTranslationContext } from '../../context/TranslationContext.js';
import { useUIKit } from '../../context/UIKitContext.js';
import '../../context/ComponentContext.js';
import '../../context/ChatActionContext.js';
import '../../context/MessageInputContext.js';
import '../../context/UIMessageContext.js';
import '../../context/ChatStateContext.js';
import { useGroupList } from './hooks/useGroupList.js';
import { Virtuoso } from '../../node_modules/.pnpm/react-virtuoso@4.1.0_biqbaboplfbrettd7655fr4n2y/node_modules/react-virtuoso/dist/index.mjs.js';
import '../../types/models.js';
import '../../types/events.js';
import { UIGroupPreview } from '../UIGroupPreview/UIGroupPreview.js';

var UIGroupListWithContext = function (props) {
    var Preview = props.Preview, defaultItemHeight = props.defaultItemHeight, hasMore = props.hasMore, loadMore = props.loadMore, groups = props.groups, activeGroup = props.activeGroup, setActiveGroup = props.setActiveGroup;
    useTranslationContext().t;
    var processedGroups = useMemo(function () {
        if (typeof groups === 'undefined') {
            return [];
        }
        return groups;
    }, [groups]);
    var virtuoso = useRef(null);
    var endReached = function () {
        if (hasMore && loadMore) {
            loadMore();
        }
    };
    var groupRenderer = useCallback(function (group) {
        return (React__default.createElement(UIGroupPreview, { key: group.id, group: group, activeGroup: activeGroup, setActiveGroup: setActiveGroup, Preview: Preview }));
    }, [activeGroup, setActiveGroup, Preview]);
    function fractionalItemSize(element) {
        return element.getBoundingClientRect().height;
    }
    return (React__default.createElement("div", { className: "uim-group-list" },
        "group",
        React__default.createElement(Virtuoso, __assign({ data: processedGroups, atBottomThreshold: 200, className: "uim-group-list-scroll", computeItemKey: function (index) { return processedGroups[index].id; }, endReached: endReached, itemContent: function (i, data) { return groupRenderer(data); }, itemSize: fractionalItemSize, ref: virtuoso, style: { overflowX: 'hidden' }, totalCount: processedGroups.length }, (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {})))));
};
var UIGroupList = function (props) {
    var propActiveProfile = props.activeProfile, propActiveGroup = props.activeGroup, propSetActiveGroup = props.setActiveGroup;
    var contextActiveProfile = useUIKit('UIGroupList').activeProfile;
    var activeProfile = propActiveProfile !== null && propActiveProfile !== void 0 ? propActiveProfile : contextActiveProfile;
    var _a = useState(undefined), _activeGroup = _a[0], _setActiveGroup = _a[1];
    var activeGroup = propActiveGroup !== null && propActiveGroup !== void 0 ? propActiveGroup : _activeGroup;
    var _b = useGroupList(activeProfile === null || activeProfile === void 0 ? void 0 : activeProfile.id), groups = _b.groups, loading = _b.loading, hasMore = _b.hasMore, loadMore = _b.loadMore;
    var setActiveGroup = useCallback(function (group) {
        if (propSetActiveGroup) {
            propSetActiveGroup(group);
        }
        else {
            _setActiveGroup(group);
        }
    }, [propSetActiveGroup]);
    return (React__default.createElement(UIGroupListWithContext, { hasMore: hasMore, loadMore: loadMore, loading: loading, groups: groups, activeGroup: activeGroup, setActiveGroup: setActiveGroup }));
};

export { UIGroupList };
//# sourceMappingURL=UIGroupList.js.map