@servicetitan/assist-ui
Version:
ServiceTitan Atlas UI Components
52 lines (51 loc) • 2.49 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment, useRef } from 'react';
import classNames from 'classnames';
import { Flex } from '@servicetitan/anvil2';
import { Spinner } from '../spinner';
import { useInfiniteScroll } from './hooks/use-infinite-scroll';
import { useScrollCallback } from './hooks/use-scroll-callback';
import * as styles from './infinite-content.module.less';
export const InfiniteContent = ({ children, loading = false, className, hasMore = false, onLoadMore = ()=>{}, loadingMore = false, rootMargin = '200px', threshold = 0.1, renderLoadingMore, renderEndMessage, onScrollDown, onScrollTop, scrollThreshold = 50, scrollContainerRef })=>{
const containerRef = useRef(null);
const { sentinelRef } = useInfiniteScroll({
hasMore,
isLoading: loadingMore,
onLoadMore: ()=>{
onLoadMore();
},
rootMargin,
threshold
});
var _scrollContainerRef_current;
useScrollCallback({
onScrollDown,
onScrollTop,
threshold: scrollThreshold,
element: (_scrollContainerRef_current = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current) !== null && _scrollContainerRef_current !== void 0 ? _scrollContainerRef_current : containerRef.current
});
// Show initial loading state only when there are no messages yet
const showInitialLoading = loading && (!children || Array.isArray(children) && children.length === 0);
return /*#__PURE__*/ _jsx(Flex, {
ref: containerRef,
className: classNames(styles.infiniteContent, className),
children: showInitialLoading ? /*#__PURE__*/ _jsx(Spinner, {}) : /*#__PURE__*/ _jsxs(Fragment, {
children: [
children,
loadingMore && hasMore && /*#__PURE__*/ _jsx("div", {
className: styles.loadingMore,
children: renderLoadingMore ? renderLoadingMore() : /*#__PURE__*/ _jsx(Spinner, {})
}),
hasMore && /*#__PURE__*/ _jsx("div", {
ref: sentinelRef,
className: styles.sentinel,
"aria-hidden": "true"
}),
!hasMore && children && /*#__PURE__*/ _jsx("div", {
children: renderEndMessage ? renderEndMessage() : null
})
]
})
});
};
//# sourceMappingURL=infinite-content.js.map