perf: my models

client/src/hooks/usePagination.tsx

@@ -1,21 +1,27 @@
-import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useRef, useState, useCallback, useLayoutEffect, useMemo, useEffect } from 'react';
 import type { PagingData } from '../types/index';
 import { IconButton, Flex, Box, Input } from '@chakra-ui/react';
 import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
 import { useMutation } from '@tanstack/react-query';
 import { useToast } from './useToast';
+import { throttle } from 'lodash';
+
+const thresholdVal = 100;
 
 export const usePagination = <T = any,>({
   api,
   pageSize = 10,
   params = {},
-  defaultRequest = true
+  defaultRequest = true,
+  type = 'button'
 }: {
   api: (data: any) => any;
   pageSize?: number;
   params?: Record<string, any>;
   defaultRequest?: boolean;
+  type?: 'button' | 'scroll';
 }) => {
+  const elementRef = useRef<HTMLDivElement>(null);
   const { toast } = useToast();
   const [pageNum, setPageNum] = useState(1);
   const [total, setTotal] = useState(0);
@@ -108,6 +114,60 @@ export const usePagination = <T = any,>({
     );
   }, [isLoading, maxPage, mutate, pageNum]);
 
+  const ScrollData = useCallback(
+    ({ children, ...props }: { children: React.ReactNode }) => {
+      const loadText = useMemo(() => {
+        if (isLoading) return '请求中……';
+        if (total <= data.length) return '已加载全部';
+        return '点击加载更多';
+      }, []);
+
+      return (
+        <Box {...props} ref={elementRef} overflow={'overlay'}>
+          {children}
+          <Box
+            mt={2}
+            fontSize={'xs'}
+            color={'blackAlpha.500'}
+            textAlign={'center'}
+            cursor={loadText === '点击加载更多' ? 'pointer' : 'default'}
+            onClick={() => {
+              if (loadText !== '点击加载更多') return;
+              mutate(pageNum + 1);
+            }}
+          >
+            {loadText}
+          </Box>
+        </Box>
+      );
+    },
+    [data.length, isLoading, mutate, pageNum, total]
+  );
+
+  useLayoutEffect(() => {
+    if (!elementRef.current || type !== 'scroll') return;
+
+    const scrolling = throttle((e: Event) => {
+      const element = e.target as HTMLDivElement;
+      if (!element) return;
+      // 当前滚动位置
+      const scrollTop = element.scrollTop;
+      // 可视高度
+      const clientHeight = element.clientHeight;
+      // 内容总高度
+      const scrollHeight = element.scrollHeight;
+      // 判断是否滚动到底部
+      if (scrollTop + clientHeight + thresholdVal >= scrollHeight) {
+        mutate(pageNum + 1);
+      }
+    }, 100);
+    elementRef.current.addEventListener('scroll', scrolling);
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      elementRef.current?.removeEventListener('scroll', scrolling);
+    };
+  }, [elementRef, mutate, pageNum, type]);
+
   useEffect(() => {
     defaultRequest && mutate(1);
   }, []);
@@ -119,6 +179,7 @@ export const usePagination = <T = any,>({
     data,
     isLoading,
     Pagination,
+    ScrollData,
     getData: mutate
   };
 };