feat: 滚动加载组件

src/components/ScrollData/index.tsx

@@ -1,16 +1,63 @@
-import React from 'react';
+import React, { useRef, useEffect, useMemo } from 'react';
 import type { BoxProps } from '@chakra-ui/react';
 import { Box } from '@chakra-ui/react';
+import { throttle } from 'lodash';
 
 interface Props extends BoxProps {
   nextPage: () => void;
+  isLoadAll: boolean;
+  requesting: boolean;
   children: React.ReactNode;
 }
 
-const ScrollData = ({ children, nextPage, ...props }: Props) => {
+const ScrollData = ({ children, nextPage, isLoadAll, requesting, ...props }: Props) => {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const loadText = useMemo(() => {
+    if (requesting) return '请求中……';
+    if (isLoadAll) return '已加载全部';
+    return '点击加载更多';
+  }, [isLoadAll, requesting]);
+
+  useEffect(() => {
+    if (!elementRef.current) 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 + 100 >= scrollHeight) {
+        nextPage();
+      }
+    }, 100);
+    elementRef.current.addEventListener('scroll', scrolling);
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      elementRef.current?.removeEventListener('scroll', scrolling);
+    };
+  }, [elementRef, nextPage]);
+
   return (
-    <Box {...props} overflow={'auto'}>
+    <Box {...props} ref={elementRef} overflow={'auto'}>
       {children}
+      <Box
+        mt={2}
+        fontSize={'xs'}
+        color={'blackAlpha.500'}
+        textAlign={'center'}
+        cursor={loadText === '点击加载更多' ? 'pointer' : 'default'}
+        onClick={() => {
+          if (loadText !== '点击加载更多') return;
+          nextPage();
+        }}
+      >
+        {loadText}
+      </Box>
     </Box>
   );
 };