infinity-forge
Version:
60 lines • 3.77 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InfinityList = InfinityList;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var react_query_1 = require("@tanstack/react-query");
var ui_1 = require("../../../ui/index.js");
function InfinityList(props) {
var queryKey = props.queryKey, queryFn = props.queryFn, initialPageParam = props.initialPageParam, Item = props.Item, NotFound = props.NotFound;
var observerRef = (0, react_1.useRef)(null);
var observerInstance = (0, react_1.useRef)(null);
var _a = (0, react_query_1.useInfiniteQuery)({
queryFn: queryFn,
queryKey: queryKey,
initialPageParam: initialPageParam,
getNextPageParam: function (lastPage, pages) { var _a; return (((_a = lastPage === null || lastPage === void 0 ? void 0 : lastPage.pagination) === null || _a === void 0 ? void 0 : _a.hasNextPage) ? pages.length + 1 : undefined); },
}), data = _a.data, isFetching = _a.isFetching, fetchNextPage = _a.fetchNextPage, isFetchingNextPage = _a.isFetchingNextPage, hasNextPage = _a.hasNextPage;
var dataAccumuled = data === null || data === void 0 ? void 0 : data.pages.flatMap(function (page) { return page === null || page === void 0 ? void 0 : page.items; });
var handleObserver = (0, react_1.useCallback)(function (entries) {
var entry = entries[0];
if (entry.isIntersecting && !isFetchingNextPage && hasNextPage) {
fetchNextPage();
}
}, [fetchNextPage, isFetchingNextPage, hasNextPage]);
(0, react_1.useEffect)(function () {
var el = observerRef.current;
if (!el)
return;
if (observerInstance.current) {
observerInstance.current.disconnect();
}
observerInstance.current = new IntersectionObserver(handleObserver, {
root: null,
threshold: 1.0,
rootMargin: '100px',
});
observerInstance.current.observe(el);
return function () {
if (observerInstance.current) {
observerInstance.current.disconnect();
}
};
}, [handleObserver]);
if (isFetching && !dataAccumuled) {
return (0, jsx_runtime_1.jsx)(ui_1.LoaderCircle, { size: 30, color: '#000' });
}
return ((0, jsx_runtime_1.jsx)(ui_1.Error, { name: 'InfinityList', children: (0, jsx_runtime_1.jsxs)("div", { className: 'infinity_list_infinity_forge', children: [((!isFetching && !dataAccumuled) || (dataAccumuled === null || dataAccumuled === void 0 ? void 0 : dataAccumuled.length) === 0) && NotFound && (0, jsx_runtime_1.jsx)(NotFound, {}), Array.isArray(dataAccumuled) && (dataAccumuled === null || dataAccumuled === void 0 ? void 0 : dataAccumuled.length) > 0 && !isFetching && Item && ((0, jsx_runtime_1.jsx)("div", { className: 'list_infinity-forge', style: { marginBottom: isFetchingNextPage ? '20px' : '0' }, children: Item && (dataAccumuled === null || dataAccumuled === void 0 ? void 0 : dataAccumuled.map(function (item, index) { return (0, jsx_runtime_1.jsx)(Item, __assign({}, item), (item === null || item === void 0 ? void 0 : item.id) || index); })) })), (0, jsx_runtime_1.jsx)("div", { ref: observerRef }), isFetchingNextPage && (0, jsx_runtime_1.jsx)(ui_1.LoaderCircle, { size: 30, color: '#000' })] }) }));
}
//# sourceMappingURL=index.js.map