@uimkit/uikit-react
Version:
<img style="width:64px" src="https://mgmt.uimkit.chat/media/img/avatar.png"/>
90 lines (87 loc) • 4.26 kB
JavaScript
import { useState, useRef, useCallback, useLayoutEffect } from 'react';
import { useMessageListScrollManager } from './useMessageListScrollManager.js';
import '../../../types/models.js';
import '../../../types/events.js';
var useScrollLocationLogic = function (params) {
var _a = params.messages, messages = _a === void 0 ? [] : _a, _b = params.scrolledUpThreshold, scrolledUpThreshold = _b === void 0 ? 200 : _b, hasMoreNewer = params.hasMoreNewer, suppressAutoscroll = params.suppressAutoscroll, messageListRef = params.messageListRef;
console.log('useScrollLocationLogic');
var _c = useState(false), hasNewMessages = _c[0], setHasNewMessages = _c[1];
var _d = useState(), wrapperRect = _d[0], setWrapperRect = _d[1];
var _e = useState(true), isMessageListScrolledToBottom = _e[0], setIsMessageListScrolledToBottom = _e[1];
var closeToBottom = useRef(false);
var closeToTop = useRef(false);
var scrollCounter = useRef({ autoScroll: 0, scroll: 0 });
var scrollToBottom = useCallback(function () {
var _a;
if (!((_a = messageListRef === null || messageListRef === void 0 ? void 0 : messageListRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo) || hasMoreNewer || suppressAutoscroll) {
return;
}
scrollCounter.current.autoScroll += 1;
messageListRef.current.scrollTo({
top: messageListRef.current.scrollHeight,
});
setHasNewMessages(false);
}, [messageListRef, hasMoreNewer, suppressAutoscroll]);
useLayoutEffect(function () {
if (messageListRef.current) {
console.log('useLayoutEffect');
setWrapperRect(messageListRef.current.getBoundingClientRect());
scrollToBottom();
}
}, [messageListRef, hasMoreNewer]);
var updateScrollTop = useMessageListScrollManager({
messages: messages,
onScrollBy: function (scrollBy) {
var _a;
(_a = messageListRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({ top: scrollBy });
},
scrollContainerMeasures: function () {
var _a, _b;
return ({
offsetHeight: ((_a = messageListRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0,
scrollHeight: ((_b = messageListRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) || 0,
});
},
scrolledUpThreshold: scrolledUpThreshold,
scrollToBottom: scrollToBottom,
showNewMessages: function () { return setHasNewMessages(true); },
});
var onScroll = useCallback(function (event) {
var element = event.target;
var scrollTop = element.scrollTop;
updateScrollTop(scrollTop);
var offsetHeight = element.offsetHeight;
var scrollHeight = element.scrollHeight;
var prevCloseToBottom = closeToBottom.current;
closeToBottom.current = scrollHeight - (scrollTop + offsetHeight) < scrolledUpThreshold;
closeToTop.current = scrollTop < scrolledUpThreshold;
if (closeToBottom.current) {
setHasNewMessages(false);
}
if (prevCloseToBottom && !closeToBottom.current) {
setIsMessageListScrolledToBottom(false);
}
else if (!prevCloseToBottom && closeToBottom.current) {
setIsMessageListScrolledToBottom(true);
}
}, [updateScrollTop, closeToTop, closeToBottom, scrolledUpThreshold]);
var onMessageLoadCaptured = useCallback(function () {
/**
* A load event (emitted by e.g. an <img>) was captured on a message.
* In some cases, the loaded asset is larger than the placeholder, which means we have to scroll down.
*/
if (closeToBottom.current) {
scrollToBottom();
}
}, [closeToTop, closeToBottom, scrollToBottom]);
return {
hasNewMessages: hasNewMessages,
isMessageListScrolledToBottom: isMessageListScrolledToBottom,
onMessageLoadCaptured: onMessageLoadCaptured,
onScroll: onScroll,
scrollToBottom: scrollToBottom,
wrapperRect: wrapperRect,
};
};
export { useScrollLocationLogic };
//# sourceMappingURL=useScrollLocationLogic.js.map