@uimkit/uikit-react
Version:
<img style="width:64px" src="https://mgmt.uimkit.chat/media/img/avatar.png"/>
69 lines (62 loc) • 4.01 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var React = require('react');
var TranslationContext = require('../../context/TranslationContext.js');
var UIKitContext = require('../../context/UIKitContext.js');
require('../../context/ComponentContext.js');
require('../../context/ChatActionContext.js');
require('../../context/MessageInputContext.js');
require('../../context/UIMessageContext.js');
require('../../context/ChatStateContext.js');
var useGroupList = require('./hooks/useGroupList.js');
var index = require('../../node_modules/.pnpm/react-virtuoso@4.1.0_biqbaboplfbrettd7655fr4n2y/node_modules/react-virtuoso/dist/index.mjs.js');
require('../../types/models.js');
require('../../types/events.js');
var UIGroupPreview = require('../UIGroupPreview/UIGroupPreview.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
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;
TranslationContext.useTranslationContext().t;
var processedGroups = React.useMemo(function () {
if (typeof groups === 'undefined') {
return [];
}
return groups;
}, [groups]);
var virtuoso = React.useRef(null);
var endReached = function () {
if (hasMore && loadMore) {
loadMore();
}
};
var groupRenderer = React.useCallback(function (group) {
return (React__default["default"].createElement(UIGroupPreview.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["default"].createElement("div", { className: "uim-group-list" },
"group",
React__default["default"].createElement(index.Virtuoso, tslib.__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 = UIKitContext.useUIKit('UIGroupList').activeProfile;
var activeProfile = propActiveProfile !== null && propActiveProfile !== void 0 ? propActiveProfile : contextActiveProfile;
var _a = React.useState(undefined), _activeGroup = _a[0], _setActiveGroup = _a[1];
var activeGroup = propActiveGroup !== null && propActiveGroup !== void 0 ? propActiveGroup : _activeGroup;
var _b = useGroupList.useGroupList(activeProfile === null || activeProfile === void 0 ? void 0 : activeProfile.id), groups = _b.groups, loading = _b.loading, hasMore = _b.hasMore, loadMore = _b.loadMore;
var setActiveGroup = React.useCallback(function (group) {
if (propSetActiveGroup) {
propSetActiveGroup(group);
}
else {
_setActiveGroup(group);
}
}, [propSetActiveGroup]);
return (React__default["default"].createElement(UIGroupListWithContext, { hasMore: hasMore, loadMore: loadMore, loading: loading, groups: groups, activeGroup: activeGroup, setActiveGroup: setActiveGroup }));
};
exports.UIGroupList = UIGroupList;
//# sourceMappingURL=UIGroupList.js.map