feat: support userInfiniteScroll use forcedLoadMore to keep requestin…

packages/hooks/src/useInfiniteScroll/__tests__/index.test.ts

@@ -18,6 +18,7 @@ export async function mockRequest() {
 }
 
 const targetEl = document.createElement('div');
+const scrollToBottomEl = document.createElement('div');
 
 const setup = <T extends Data>(service: Service<T>, options?: InfiniteScrollOptions<T>) =>
   renderHook(() => useInfiniteScroll(service, options));
@@ -125,6 +126,105 @@ describe('useInfiniteScroll', () => {
     mockAddEventListener.mockRestore();
   });
 
+  it('should not be trriggerd when not scroll to bottom and configured with "forcedLoadMore"', async () => {
+    const events = {};
+    const mockAddEventListener = jest
+      .spyOn(targetEl, 'addEventListener')
+      .mockImplementation((eventName, callback) => {
+        events[eventName] = callback;
+      });
+    const { result } = setup(mockRequest, {
+      target: targetEl,
+      isNoMore: (d) => d?.nextId === undefined,
+      forcedLoadMore: true,
+    });
+    // not work when loading
+    expect(result.current.loading).toBe(true);
+    events['scroll']();
+    await act(async () => {
+      jest.advanceTimersByTime(1000);
+    });
+    expect(result.current.loading).toBe(false);
+
+    // mock scroll
+    Object.defineProperties(targetEl, {
+      clientHeight: {
+        value: 150,
+      },
+      scrollHeight: {
+        value: 300,
+      },
+      scrollTop: {
+        value: 100,
+      },
+    });
+
+    act(() => {
+      events['scroll']();
+    });
+    // should not be trriggerd when not scroll to bottom
+    expect(result.current.loadingMore).toBe(false);
+    mockAddEventListener.mockRestore();
+  });
+
+  it('should always load when configured with "forcedLoadMore"', async () => {
+    const events = {};
+    const mockAddEventListener = jest
+      .spyOn(scrollToBottomEl, 'addEventListener')
+      .mockImplementation((eventName, callback) => {
+        events[eventName] = callback;
+      });
+    const { result } = setup(mockRequest, {
+      target: scrollToBottomEl,
+      isNoMore: (d) => d?.nextId === undefined,
+      forcedLoadMore: true,
+    });
+    // not work when loading
+    expect(result.current.loading).toBe(true);
+    events['scroll']();
+    await act(async () => {
+      jest.advanceTimersByTime(1000);
+    });
+    expect(result.current.loading).toBe(false);
+
+    // mock scroll
+    Object.defineProperties(scrollToBottomEl, {
+      clientHeight: {
+        value: 150,
+      },
+      scrollHeight: {
+        value: 300,
+      },
+      scrollTop: {
+        value: 150,
+      },
+    });
+
+    act(() => {
+      events['scroll']();
+    });
+    expect(result.current.loadingMore).toBe(true);
+    await act(async () => {
+      jest.advanceTimersByTime(1000);
+    });
+    expect(result.current.loadingMore).toBe(false);
+
+    // still work when no more
+    expect(result.current.noMore).toBe(false);
+    expect(result.current.trulyNoMore).toBe(true);
+    act(() => {
+      events['scroll']();
+    });
+
+    expect(result.current.loadingMore).toBe(true);
+    await act(async () => {
+      jest.advanceTimersByTime(1000);
+    });
+    expect(result.current.loadingMore).toBe(false);
+
+    mockAddEventListener.mockRestore();
+  });
+
   it('reload should be work', async () => {
     const fn = jest.fn(() => Promise.resolve({ list: [] }));
     const { result } = setup(fn);

packages/hooks/src/useInfiniteScroll/demo/scrollForcedLoadMore.tsx

@@ -0,0 +1,72 @@
+import React, { useRef } from 'react';
+import { useInfiniteScroll } from 'ahooks';
+
+interface Result {
+  list: string[];
+  nextId: string | undefined;
+  lastId: string | undefined;
+}
+
+const resultData = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13'];
+
+setInterval(() => {
+  resultData.push(resultData.length.toString());
+}, 5000);
+
+function getLoadMoreList(lastId: string | undefined, limit: number): Promise<Result> {
+  let start = -1;
+  if (lastId) {
+    start = resultData.findIndex((i) => i === lastId);
+  }
+  const end = start + limit;
+  const list = resultData.slice(start + 1, end);
+  const nId = resultData.length >= end ? resultData[end] : undefined;
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        list,
+        nextId: nId,
+        lastId: list[list.length - 1] || lastId,
+      });
+    }, 1000);
+  });
+}
+
+export default () => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const { data, loading, loadMore, loadingMore, noMore, trulyNoMore } = useInfiniteScroll(
+    (d) => getLoadMoreList(d?.lastId, 4),
+    {
+      target: ref,
+      isNoMore: (d) => d?.nextId === undefined,
+      forcedLoadMore: true,
+    },
+  );
+
+  return (
+    <div ref={ref} style={{ height: 150, overflow: 'auto', border: '1px solid', padding: 12 }}>
+      {loading ? (
+        <p>loading</p>
+      ) : (
+        <div>
+          {data?.list?.map((item) => (
+            <div key={item} style={{ padding: 12, border: '1px solid #f5f5f5' }}>
+              item-{item}
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div style={{ marginTop: 8 }}>
+        {!noMore && (
+          <button type="button" onClick={loadMore} disabled={loadingMore}>
+            {loadingMore ? 'Loading more...' : 'Click to load more'}
+          </button>
+        )}
+
+        {trulyNoMore && <span>No more data</span>}
+      </div>
+    </div>
+  );
+};

packages/hooks/src/useInfiniteScroll/index.en-US.md

@@ -39,6 +39,14 @@ In the infinite scrolling scenario, the most common case is to automatically loa
 
 <code src="./demo/scroll.tsx" />
 
+## Scroll Forced Infinite Loading
+
+When there is no more data, but the user still wants to try loading potentially updated data, you can configure `options.forcedLoadMore` for forced loading.
+
+- `options.forcedLoadMore` When `options.isNoMore` is `true`, scrolling to the bottom will still trigger forced loading.
+- `options.trulyNoMore` When `options.forcedLoadMore` is set to `true`, `options.isNoMore` will remain `true`, so you need to use `options.trulyNoMore` to determine if there is truly no more data.
+  <code src="./demo/scrollForcedLoadMore.tsx" />
+
 ## Data reset
 
 The data can be reset by `reload`. The following example shows that after the `filter` changes, the data is reset to the first page.

packages/hooks/src/useInfiniteScroll/index.tsx

@@ -21,18 +21,28 @@ const useInfiniteScroll = <TData extends Data>(
     onSuccess,
     onError,
     onFinally,
+    forcedLoadMore = false,
   } = options;
 
   const [finalData, setFinalData] = useState<TData>();
   const [loadingMore, setLoadingMore] = useState(false);
 
-  const noMore = useMemo(() => {
-    if (!isNoMore) return false;
-    return isNoMore(finalData);
+  const { noMore, trulyNoMore } = useMemo(() => {
+    if (!isNoMore)
+      return {
+        noMore: false,
+        trulyNoMore: false,
+      };
+    const dataIsNoMore = isNoMore(finalData);
+
+    return {
+      noMore: !forcedLoadMore && dataIsNoMore,
+      trulyNoMore: dataIsNoMore,
+    };
   }, [finalData]);
 
   const { loading, error, run, runAsync, cancel } = useRequest(
-    async (lastData?: TData) => {
+    async (lastData?: TData, _isNeedForcedLoadMore?: boolean) => {
       const currentData = await service(lastData);
       if (!lastData) {
         setFinalData({
@@ -54,8 +64,12 @@ const useInfiniteScroll = <TData extends Data>(
         onFinally?.(d, e);
       },
       onBefore: () => onBefore?.(),
-      onSuccess: (d) => {
+      onSuccess: (d, isNeedForcedLoadMore) => {
         setTimeout(() => {
+          // if request trrigered by forced load more, is no need to check again
+          if (isNeedForcedLoadMore) {
+            return;
+          }
           // eslint-disable-next-line @typescript-eslint/no-use-before-define
           scrollMethod();
         });
@@ -65,16 +79,22 @@ const useInfiniteScroll = <TData extends Data>(
     },
   );
 
-  const loadMore = useMemoizedFn(() => {
+  const loadMore = useMemoizedFn((isScrollToBottom = false) => {
     if (noMore) return;
+    // when set `forcedLoadMore`, only user scroll to bottom will trrigger load more
+    if (forcedLoadMore && !isScrollToBottom) return;
+
     setLoadingMore(true);
-    run(finalData);
+    run(finalData, forcedLoadMore && isScrollToBottom);
   });
 
-  const loadMoreAsync = useMemoizedFn(() => {
+  const loadMoreAsync = useMemoizedFn((isScrollToBottom = false) => {
     if (noMore) return Promise.reject();
+    // when set `forcedLoadMore`, only user scroll to bottom will trrigger load more
+    if (forcedLoadMore && !isScrollToBottom) return Promise.reject();
+
     setLoadingMore(true);
-    return runAsync(finalData);
+    return runAsync(finalData, forcedLoadMore && isScrollToBottom);
   });
 
   const reload = () => {
@@ -100,6 +120,11 @@ const useInfiniteScroll = <TData extends Data>(
     const clientHeight = getClientHeight(el);
 
     if (scrollHeight - scrollTop <= clientHeight + threshold) {
+      if (scrollHeight - scrollTop <= clientHeight) {
+        loadMore(true);
+        return;
+      }
+
       loadMore();
     }
   };
@@ -125,7 +150,8 @@ const useInfiniteScroll = <TData extends Data>(
     error,
     loadingMore,
     noMore,
-
+    /** when set `forcedLoadMore` true, `noMore` will be always true, use `trulyNoMore` to judge data whther is no more */
+    trulyNoMore,
     loadMore,
     loadMoreAsync,
     reload: useMemoizedFn(reload),

packages/hooks/src/useInfiniteScroll/index.zh-CN.md

@@ -39,6 +39,15 @@ useInfiniteScroll 的第一个参数 `service` 是一个异步函数，对这个
 
 <code src="./demo/scroll.tsx" />
 
+## 滚动强制无限加载
+
+当没有更多数据时，用户依旧想尝试加载可能更新的数据，可以配置`options.forcedLoadMore`来进行强制加载。
+
+- `options.forcedLoadMore` 当 `options.isNoMore`为`true`时滚动到底部依旧强制加载
+- `options.trulyNoMore` 当配置`options.forcedLoadMore`为`true`时， `options.isNoMore`为`true`一直为`true`，需要使用`options.trulyNoMore`来判断是不是没有更多数据了
+
+<code src="./demo/scrollForcedLoadMore.tsx" />
+
 ## 数据重置
 
 通过 `reload` 即可实现数据重置，下面示例我们演示在 `filter` 变化后，重置数据到第一页。

packages/hooks/src/useInfiniteScroll/types.ts

@@ -11,7 +11,8 @@ export interface InfiniteScrollResult<TData extends Data> {
   loadingMore: boolean;
   error?: Error;
   noMore: boolean;
-
+  /** when set `forcedLoadMore` true, `noMore` will be always true, use `trulyNoMore` to judge data whther is no more */
+  trulyNoMore: boolean;
   loadMore: () => void;
   loadMoreAsync: () => Promise<TData>;
   reload: () => void;
@@ -26,6 +27,7 @@ export interface InfiniteScrollOptions<TData extends Data> {
   threshold?: number;
 
   manual?: boolean;
+  forcedLoadMore?: boolean;
   reloadDeps?: DependencyList;
 
   onBefore?: () => void;