@botonic/react
Version:
Build Chatbots using React
140 lines • 5.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useScrollbarController = void 0;
const react_1 = require("react");
const context_1 = require("../../webchat/context");
const devices_1 = require("../devices");
// TODO: Investigate why when we have some messages, scroll actions are not disabled properly
const debounced = (delay, fn) => {
let timerId;
return function (...args) {
if (timerId) {
clearTimeout(timerId);
}
timerId = setTimeout(() => {
fn(...args);
timerId = null;
}, delay);
};
};
const stopAtScrollLimit = element => {
if (element.scrollTop === 0)
element.scrollTop = 1;
if (element.scrollHeight - element.scrollTop === element.clientHeight)
element.scrollTop -= 1;
};
const useScrollbarController = (currentDevice, host) => {
const { webchatContainerRef, chatAreaRef, repliesRef, scrollableMessagesListRef, } = (0, react_1.useContext)(context_1.WebchatContext);
const hasScrollbar = () => {
var _a, _b, _c, _d, _e;
if (chatAreaRef.current && scrollableMessagesListRef.current) {
if (!(repliesRef === null || repliesRef === void 0 ? void 0 : repliesRef.current)) {
return (((_a = scrollableMessagesListRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) >
((_b = chatAreaRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight));
}
if (repliesRef.current) {
return (((_c = scrollableMessagesListRef.current) === null || _c === void 0 ? void 0 : _c.scrollHeight) >
((_d = chatAreaRef.current) === null || _d === void 0 ? void 0 : _d.clientHeight) - ((_e = repliesRef.current) === null || _e === void 0 ? void 0 : _e.clientHeight));
}
}
return false;
};
const toggleOnMouseWheelEvents = () => {
if (scrollableMessagesListRef.current) {
if (hasScrollbar()) {
// @ts-ignore
scrollableMessagesListRef.current.onmousewheel = {};
return;
}
// @ts-ignore
scrollableMessagesListRef.current.onmousewheel = e => {
e.preventDefault();
};
}
};
const handleOnMouseOverEvents = e => {
let target = e.currentTarget;
while (target) {
toggleOnMouseWheelEvents();
target = target.parentNode;
}
};
const toggleOnTouchMoveEvents = () => {
if (webchatContainerRef.current && scrollableMessagesListRef.current) {
if (hasScrollbar()) {
scrollableMessagesListRef.current.style.touchAction = 'auto';
webchatContainerRef.current.style.touchAction = 'auto';
webchatContainerRef.current.ontouchmove = null;
webchatContainerRef.current.ontouchstart = null;
return;
}
scrollableMessagesListRef.current.style.touchAction = 'none';
webchatContainerRef.current.style.touchAction = 'none';
}
if (webchatContainerRef.current) {
webchatContainerRef.current.ontouchstart = e => {
if (e.target === e.currentTarget) {
e.preventDefault();
}
};
webchatContainerRef.current.ontouchmove = e => {
if (e.target === e.currentTarget) {
e.preventDefault();
}
};
}
};
const handleOnTouchMoveEvents = () => {
toggleOnTouchMoveEvents();
};
const limitScrollBoundaries = () => {
if (currentDevice !== devices_1.DEVICES.MOBILE.IPHONE)
return;
const chatArea = chatAreaRef.current;
const dStopAtScrollLimit = debounced(100, stopAtScrollLimit);
if (chatArea) {
// @ts-ignore
if (window.addEventListener) {
chatArea.addEventListener('scroll', () => dStopAtScrollLimit(chatArea), true);
// @ts-ignore
}
else if (window.attachEvent) {
// @ts-ignore
chatAreaRef.attachEvent('scroll', () => dStopAtScrollLimit(chatArea));
}
}
};
const handleScrollEvents = () => {
if (webchatContainerRef.current) {
if ((0, devices_1.isMobileDevice)()) {
if (currentDevice !== devices_1.DEVICES.MOBILE.IPHONE)
return;
limitScrollBoundaries();
webchatContainerRef.current.ontouchstart = handleOnTouchMoveEvents;
webchatContainerRef.current.ontouchmove = handleOnTouchMoveEvents;
}
else {
webchatContainerRef.current.onmouseover = e => handleOnMouseOverEvents(e);
}
}
};
(0, react_1.useEffect)(() => {
const webchat = webchatContainerRef.current;
handleScrollEvents();
return () => {
if (webchat) {
webchat.onmouseover = null;
webchat.ontouchstart = null;
webchat.ontouchmove = null;
}
};
}, [currentDevice, host]);
return {
handleScrollEvents,
handleOnTouchMoveEvents,
handleOnMouseOverEvents,
hasScrollbar,
};
};
exports.useScrollbarController = useScrollbarController;
//# sourceMappingURL=use-scrollbar-controller.js.map