@mi-avalon/libs 0.0.23 → 0.0.25

package/dist/hooks/useVirtualList.js

@@ -0,0 +1,121 @@
+// 虚拟列表加载
+import { useCallback, useEffect, useRef, useState, } from 'react';
+import { PAGE_SIZE } from '../constants';
+import { debounce } from '../utils';
+export const useVirtualList = (server, deps, // 依赖条件 数据更新默认执行server
+option) => {
+    const { isReady = true, dataSource: propDataSource = [], current: propCurrent = 1, pageSize: propPageSize = PAGE_SIZE, } = option || {};
+    // 是否完成了一次请求
+    const [isFirstComplete, setIsFirstComplete] = useState(false);
+    // 分页
+    const [current, setCurrent] = useState(propCurrent);
+    const [pageSize, setPageSize] = useState(propPageSize);
+    const [total, setTotal] = useState(0);
+    // 表格
+    const [isLoading, setIsLoading] = useState(false);
+    const [dataSource, setDataSource] = useState(propDataSource);
+    const currentRef = useRef(current);
+    const pageSizeRef = useRef(pageSize);
+    // 在状态更新时同步更新ref
+    const setCurrentAndRef = (val) => {
+        setCurrent(val);
+        currentRef.current = val;
+    };
+    const setPageSizeAndRef = (val) => {
+        setPageSize(val);
+        pageSizeRef.current = val;
+    };
+    // 计数器
+    const seq = useRef(0);
+    const doSearch = async (reset) => {
+        if (!isReady) {
+            return;
+        }
+        let _current = currentRef.current;
+        let _pageSize = pageSizeRef.current;
+        setIsLoading(true);
+        seq.current += 1;
+        const _seq = seq.current;
+        try {
+            // 发送请求
+            let offset = Math.round((_current - 1) * _pageSize);
+            if (offset < 0) {
+                offset = 0;
+            }
+            if (_pageSize < 1) {
+                _pageSize = 1;
+            }
+            let { dataSource: data0, total: total0 } = await server({
+                limit: _pageSize,
+                offset,
+                current: _current,
+            });
+            if (_seq !== seq.current)
+                return;
+            if (pageSize * (_current - 1) >= total0 && _current !== 1) {
+                const totalPage = Math.ceil(total0 / pageSize);
+                ({ dataSource: data0, total: total0 } = await server({
+                    limit: _pageSize,
+                    offset: Math.round((totalPage - 1) * _pageSize),
+                    current: _current,
+                }));
+                if (_seq !== seq.current)
+                    return;
+                _current = totalPage;
+                // message.error('数据源发生变化，该页没有数据，自动加载最后一页');
+            }
+            const d = reset ? data0 : dataSource.concat(data0);
+            setDataSource(d);
+            setCurrentAndRef(_current);
+            setPageSizeAndRef(_pageSize);
+            setTotal(total0);
+        }
+        catch (error) {
+            console.error('fetch err', error);
+            if (_seq !== seq.current)
+                return;
+        }
+        setIsFirstComplete(true);
+        setIsLoading(false);
+    };
+    // 加载下一页数据
+    const refresh = async (reset) => {
+        if (reset) {
+            setDataSource([]);
+            setCurrentAndRef(propCurrent);
+            setPageSizeAndRef(propPageSize);
+        }
+        else {
+            const curTotal = pageSize * current;
+            if (total && total <= curTotal)
+                return;
+            setCurrentAndRef(current + 1);
+        }
+        await doSearch(reset);
+    };
+    // 防抖 加载下一页数据
+    const debounceRefresh = useCallback(debounce(refresh, 500), [refresh]);
+    /* 重置逻辑 */
+    const _deps = [...(deps || []), isReady];
+    useEffect(() => {
+        if (!isReady)
+            return;
+        debounceRefresh(true);
+    }, _deps);
+    return {
+        loading: isLoading,
+        dataSource,
+        paginationProps: {
+            current,
+            pageSize,
+            total,
+        },
+        isFirstComplete,
+        refresh: async (reset) => {
+            await refresh(reset);
+        },
+        debounceRefresh,
+        setDataSource,
+        setTotal,
+    };
+};

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './constants';
+export * from './hooks';
 export * from './utils';