|
| 1 | +/* |
| 2 | + * Copyright 2024 Adobe. All rights reserved. |
| 3 | + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); |
| 4 | + * you may not use this file except in compliance with the License. You may obtain a copy |
| 5 | + * of the License at http://www.apache.org/licenses/LICENSE-2.0 |
| 6 | + * |
| 7 | + * Unless required by applicable law or agreed to in writing, software distributed under |
| 8 | + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS |
| 9 | + * OF ANY KIND, either express or implied. See the License for the specific language |
| 10 | + * governing permissions and limitations under the License. |
| 11 | + */ |
| 12 | + |
| 13 | +import type {AsyncLoadable, Collection, Node} from '@react-types/shared'; |
| 14 | +import {getScrollParent} from './getScrollParent'; |
| 15 | +import {RefObject, useRef} from 'react'; |
| 16 | +import {useEffectEvent} from './useEffectEvent'; |
| 17 | +import {useLayoutEffect} from './useLayoutEffect'; |
| 18 | + |
| 19 | +export interface LoadMoreSentinelProps extends Omit<AsyncLoadable, 'isLoading'> { |
| 20 | + collection: Collection<Node<unknown>>, |
| 21 | + /** |
| 22 | + * The amount of offset from the bottom of your scrollable region that should trigger load more. |
| 23 | + * Uses a percentage value relative to the scroll body's client height. Load more is then triggered |
| 24 | + * when your current scroll position's distance from the bottom of the currently loaded list of items is less than |
| 25 | + * or equal to the provided value. (e.g. 1 = 100% of the scroll region's height). |
| 26 | + * @default 1 |
| 27 | + */ |
| 28 | + scrollOffset?: number |
| 29 | +} |
| 30 | + |
| 31 | +export function UNSTABLE_useLoadMoreSentinel(props: LoadMoreSentinelProps, ref: RefObject<HTMLElement | null>): void { |
| 32 | + let {collection, onLoadMore, scrollOffset = 1} = props; |
| 33 | + |
| 34 | + let sentinelObserver = useRef<IntersectionObserver>(null); |
| 35 | + |
| 36 | + let triggerLoadMore = useEffectEvent((entries: IntersectionObserverEntry[]) => { |
| 37 | + // Use "isIntersecting" over an equality check of 0 since it seems like there is cases where |
| 38 | + // a intersection ratio of 0 can be reported when isIntersecting is actually true |
| 39 | + for (let entry of entries) { |
| 40 | + // Note that this will be called if the collection changes, even if onLoadMore was already called and is being processed. |
| 41 | + // Up to user discretion as to how to handle these multiple onLoadMore calls |
| 42 | + if (entry.isIntersecting && onLoadMore) { |
| 43 | + onLoadMore(); |
| 44 | + } |
| 45 | + } |
| 46 | + }); |
| 47 | + |
| 48 | + useLayoutEffect(() => { |
| 49 | + if (ref.current) { |
| 50 | + // Tear down and set up a new IntersectionObserver when the collection changes so that we can properly trigger additional loadMores if there is room for more items |
| 51 | + // Need to do this tear down and set up since using a large rootMargin will mean the observer's callback isn't called even when scrolling the item into view beause its visibility hasn't actually changed |
| 52 | + // https://codesandbox.io/p/sandbox/magical-swanson-dhgp89?file=%2Fsrc%2FApp.js%3A21%2C21 |
| 53 | + sentinelObserver.current = new IntersectionObserver(triggerLoadMore, {root: getScrollParent(ref?.current) as HTMLElement, rootMargin: `0px ${100 * scrollOffset}% ${100 * scrollOffset}% ${100 * scrollOffset}%`}); |
| 54 | + sentinelObserver.current.observe(ref.current); |
| 55 | + } |
| 56 | + |
| 57 | + return () => { |
| 58 | + if (sentinelObserver.current) { |
| 59 | + sentinelObserver.current.disconnect(); |
| 60 | + } |
| 61 | + }; |
| 62 | + }, [collection, triggerLoadMore, ref, scrollOffset]); |
| 63 | +} |
0 commit comments