@uimkit/uikit-react
Version:
<img style="width:64px" src="https://mgmt.uimkit.chat/media/img/avatar.png"/>
77 lines (70 loc) • 3.95 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var React = require('react');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
/**
* Prevents Chrome hangups
* See: https://stackoverflow.com/questions/47524205/random-high-content-download-time-in-chrome/47684257#47684257
*/
var mousewheelListener = function (event) {
if (event instanceof WheelEvent && event.deltaY === 1) {
event.preventDefault();
}
};
function InfiniteScroll(props) {
var children = props.children, _a = props.element, element = _a === void 0 ? 'div' : _a, _b = props.hasMore, hasMore = _b === void 0 ? false : _b, _c = props.hasMoreNewer, hasMoreNewer = _c === void 0 ? false : _c, _d = props.initialLoad, initialLoad = _d === void 0 ? true : _d, _e = props.isLoading, isLoading = _e === void 0 ? false : _e, listenToScroll = props.listenToScroll, loader = props.loader, loadMore = props.loadMore, loadMoreNewer = props.loadMoreNewer, _f = props.threshold, threshold = _f === void 0 ? 150 : _f, _g = props.useCapture, useCapture = _g === void 0 ? false : _g, elementProps = tslib.__rest(props, ["children", "element", "hasMore", "hasMoreNewer", "initialLoad", "isLoading", "listenToScroll", "loader", "loadMore", "loadMoreNewer", "threshold", "useCapture"]);
var scrollComponent = React.useRef();
var scrollListener = React.useCallback(function () {
var ele = scrollComponent.current;
if (!ele || ele.offsetParent === null) {
return;
}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var parentElement = ele.parentElement;
var offset = ele.scrollHeight - parentElement.scrollTop - parentElement.clientHeight;
var reverseOffset = parentElement.scrollTop;
if (listenToScroll) {
listenToScroll(offset, reverseOffset, threshold);
}
if (reverseOffset < Number(threshold) && typeof loadMore === 'function' && hasMore) {
loadMore();
}
if (offset < Number(threshold) && typeof loadMoreNewer === 'function' && hasMoreNewer) {
loadMoreNewer();
}
}, [hasMore, hasMoreNewer, threshold, listenToScroll, loadMore, loadMoreNewer]);
React.useEffect(function () {
var _a;
var scrollElement = (_a = scrollComponent.current) === null || _a === void 0 ? void 0 : _a.parentNode;
if (isLoading || !scrollElement) {
return function () { return undefined; };
}
scrollElement.addEventListener('scroll', scrollListener, useCapture);
scrollElement.addEventListener('resize', scrollListener, useCapture);
return function () {
scrollElement.removeEventListener('scroll', scrollListener, useCapture);
scrollElement.removeEventListener('resize', scrollListener, useCapture);
};
}, [initialLoad, isLoading, scrollListener, useCapture]);
React.useEffect(function () {
var _a;
var scrollElement = (_a = scrollComponent.current) === null || _a === void 0 ? void 0 : _a.parentNode;
if (scrollElement) {
scrollElement.addEventListener('wheel', mousewheelListener, { passive: false });
}
return function () {
if (scrollElement) {
scrollElement.removeEventListener('wheel', mousewheelListener, useCapture);
}
};
}, [useCapture]);
var attributes = tslib.__assign(tslib.__assign({}, elementProps), { ref: function (ele) {
scrollComponent.current = ele;
} });
var childrenArray = [loader, children];
return React__default["default"].createElement(element, attributes, childrenArray);
}
exports.InfiniteScroll = InfiniteScroll;
//# sourceMappingURL=InfiniteScroll.js.map