@uimkit/uikit-react
Version:
<img style="width:64px" src="https://mgmt.uimkit.chat/media/img/avatar.png"/>
88 lines (85 loc) • 4.9 kB
JavaScript
import { __assign } from 'tslib';
import React__default, { useMemo, useRef, useCallback } 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 { useContactList } from '../../hooks/useContactList.js';
import { UIContactPreview } from '../UIContactPreview/UIContactPreview.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 { EmptyStateIndicator } from '../EmptyStateIndicator/EmptyStateIndicator.js';
import '../Loading/LoadingErrorIndicator.js';
import { LoadingIndicator } from '../Loading/LoadingIndicator.js';
var UIContactListWithContext = function (props) {
var Preview = props.Preview, head = props.head, defaultItemHeight = props.defaultItemHeight, hasMore = props.hasMore, loadMore = props.loadMore, loading = props.loading, contacts = props.contacts, activeContact = props.activeContact, setActiveContact = props.setActiveContact, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder;
useTranslationContext().t;
var processedContacts = useMemo(function () {
if (typeof contacts === 'undefined') {
return [];
}
return contacts;
}, [contacts]);
var virtuoso = useRef(null);
var endReached = function () {
if (hasMore && loadMore) {
loadMore();
}
};
var virtuosoComponents = useMemo(function () {
var EmptyPlaceholder = function () { return (React__default.createElement(React__default.Fragment, null, EmptyStateIndicator && (React__default.createElement(EmptyStateIndicator, { listType: 'contact' })))); };
var Header = function () { return head !== null && head !== void 0 ? head : null; };
var Footer = function () {
return loading ? (React__default.createElement("div", { className: 'str-chat__virtual-list__loading' },
React__default.createElement(LoadingIndicator, { size: 20 }))) : (null);
};
return {
EmptyPlaceholder: EmptyPlaceholder,
Footer: Footer,
Header: Header,
};
}, [loading, head]);
var contactRenderer = useCallback(function (contact, index) {
return (React__default.createElement(UIContactPreview, { key: contact.id, contact: contact, activeContact: activeContact, setActiveContact: setActiveContact, Preview: Preview }));
}, [activeContact, setActiveContact, Preview]);
function fractionalItemSize(element) {
return element.getBoundingClientRect().height;
}
return (React__default.createElement("div", { className: "uim-contact-list" },
React__default.createElement(Virtuoso, __assign({ data: processedContacts, atBottomThreshold: 200, className: "uim-contact-list-scroll", components: virtuosoComponents, computeItemKey: function (index) {
console.log('computeItemKey index: ', index);
return processedContacts[index].id;
}, endReached: endReached, itemContent: function (i, data) { return contactRenderer(data, i); }, itemSize: fractionalItemSize, ref: virtuoso, style: { overflowX: 'hidden' }, totalCount: processedContacts.length }, (scrollSeekPlaceHolder ? { scrollSeek: scrollSeekPlaceHolder } : {}), (defaultItemHeight ? { defaultItemHeight: defaultItemHeight } : {})))));
/*
return (
<div className="uim-contact-list">
<InfiniteScroll
className="contact-list-infinite-scroll"
hasMoreNewer={hasMore}
loadMoreNewer={loadMore}
threshold={150}
>
<ul>
{
contacts?.length > 0 ? (
<>{contacts.map(contact => contactRenderer(contact))}</>
) : <EmptyStateIndicator listType="contact" />
}
</ul>
</InfiniteScroll>
{loading && <p className="loading">{t('loading...')}</p>}
{!hasMore && <p className="no-more">{t('No more')}</p>}
</div>
);*/
};
var UIContactList = function (props) {
var activeProfile = useUIKit('UIContactList').activeProfile;
var _a = useContactList(activeProfile === null || activeProfile === void 0 ? void 0 : activeProfile.id), contacts = _a.contacts, loading = _a.loading, hasMore = _a.hasMore, loadMore = _a.loadMore;
return (React__default.createElement(UIContactListWithContext, __assign({ hasMore: hasMore, loadMore: loadMore, loading: loading, contacts: contacts }, props)));
};
export { UIContactList };
//# sourceMappingURL=UIContactList.js.map