@uimkit/uikit-react/dist/cjs/components/UIContactList/UIContactList.js

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

'use strict';

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 useContactList = require('../../hooks/useContactList.js');
var UIContactPreview = require('../UIContactPreview/UIContactPreview.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 EmptyStateIndicator = require('../EmptyStateIndicator/EmptyStateIndicator.js');
require('../Loading/LoadingErrorIndicator.js');
var LoadingIndicator = require('../Loading/LoadingIndicator.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

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;
    TranslationContext.useTranslationContext().t;
    var processedContacts = React.useMemo(function () {
        if (typeof contacts === 'undefined') {
            return [];
        }
        return contacts;
    }, [contacts]);
    var virtuoso = React.useRef(null);
    var endReached = function () {
        if (hasMore && loadMore) {
            loadMore();
        }
    };
    var virtuosoComponents = React.useMemo(function () {
        var EmptyPlaceholder = function () { return (React__default["default"].createElement(React__default["default"].Fragment, null, EmptyStateIndicator.EmptyStateIndicator && (React__default["default"].createElement(EmptyStateIndicator.EmptyStateIndicator, { listType: 'contact' })))); };
        var Header = function () { return head !== null && head !== void 0 ? head : null; };
        var Footer = function () {
            return loading ? (React__default["default"].createElement("div", { className: 'str-chat__virtual-list__loading' },
                React__default["default"].createElement(LoadingIndicator.LoadingIndicator, { size: 20 }))) : (null);
        };
        return {
            EmptyPlaceholder: EmptyPlaceholder,
            Footer: Footer,
            Header: Header,
        };
    }, [loading, head]);
    var contactRenderer = React.useCallback(function (contact, index) {
        return (React__default["default"].createElement(UIContactPreview.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["default"].createElement("div", { className: "uim-contact-list" },
        React__default["default"].createElement(index.Virtuoso, tslib.__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 = UIKitContext.useUIKit('UIContactList').activeProfile;
    var _a = useContactList.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["default"].createElement(UIContactListWithContext, tslib.__assign({ hasMore: hasMore, loadMore: loadMore, loading: loading, contacts: contacts }, props)));
};

exports.UIContactList = UIContactList;
//# sourceMappingURL=UIContactList.js.map