@mi-avalon/libs 0.0.22 → 0.0.24

package/dist/hooks/usePagination.js

@@ -0,0 +1,124 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { debounce } from '../utils';
+export const usePagination = (server, deps, // 依赖条件 数据更新默认执行server
+option) => {
+    const { isReady = true, dataSource: propDataSource = [], current: propCurrent = 1, pageSize: propPageSize = 10, } = option || {};
+    const [current, setCurrent] = useState(propCurrent);
+    const [pageSize, setPageSize] = useState(propPageSize);
+    const [dataSource, setDataSource] = useState(propDataSource);
+    const [total, setTotal] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [isFirstComplete, setIsFirstComplete] = useState(false);
+    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 () => {
+        if (!isReady) {
+            return;
+        }
+        let _current = currentRef.current;
+        let _pageSize = pageSizeRef.current;
+        setLoading(true);
+        seq.current++;
+        const _seq = seq.current;
+        try {
+            // 发送请求
+            let offset = Math.round((_current - 1) * _pageSize);
+            if (offset < 0) {
+                offset = 0;
+            }
+            if (_pageSize < 1) {
+                _pageSize = 1;
+            }
+            let { dataSource: data_source, total: _total } = await server({
+                limit: _pageSize,
+                offset,
+                current: _current,
+            });
+            if (_seq !== seq.current)
+                return;
+            if (pageSize * (_current - 1) >= _total && _current !== 1) {
+                _current = 1;
+                const totalPage = Math.ceil(_total / pageSize);
+                ({ dataSource: data_source, total: _total } = await server({
+                    limit: _pageSize,
+                    offset,
+                    current: _current,
+                }));
+                if (_seq !== seq.current)
+                    return;
+                _current = totalPage;
+            }
+            setDataSource(data_source);
+            setCurrentAndRef(_current);
+            setPageSizeAndRef(_pageSize);
+            setTotal(_total);
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('fetch err', error);
+            if (_seq !== seq.current)
+                return;
+        }
+        finally {
+            setIsFirstComplete(true);
+            setLoading(false);
+        }
+    };
+    const refresh = async (resetPage) => {
+        if (resetPage) {
+            setDataSource([]);
+            setCurrentAndRef(propCurrent);
+            setPageSizeAndRef(propPageSize);
+        }
+        await doSearch();
+    };
+    const debounceRefresh = useCallback(debounce(refresh, 500), [refresh]);
+    /* 重置逻辑 */
+    const _deps = [...(deps || []), isReady];
+    useEffect(() => {
+        if (!isReady)
+            return;
+        debounceRefresh(true);
+    }, _deps);
+    const onChange = async (page, pageSize) => {
+        setCurrentAndRef(page);
+        setPageSizeAndRef(pageSize);
+        await refresh();
+    };
+    const onShowSizeChange = async (size, current) => {
+        setPageSizeAndRef(size);
+        setCurrentAndRef(current);
+        await refresh();
+    };
+    const paginationProps = {
+        current,
+        pageSize,
+        total,
+        onChange,
+        onShowSizeChange,
+    };
+    return {
+        tableProps: {
+            loading,
+            dataSource,
+        },
+        loading,
+        dataSource,
+        paginationProps,
+        isFirstComplete,
+        refresh,
+        debounceRefresh,
+        setDataSource,
+    };
+};

package/dist/hooks/useQuery.d.ts

@@ -0,0 +1,3 @@
+export declare function useQuery(): {
+    [k: string]: string;
+};

package/dist/hooks/useQuery.js

@@ -0,0 +1,6 @@
+export function useQuery() {
+    const search = window.location.href.split('?')[1] || '';
+    const params = new URLSearchParams(search);
+    const query = Object.fromEntries(params.entries());
+    return query;
+}

package/dist/hooks/useReactive.d.ts

@@ -0,0 +1,2 @@
+declare const useReactive: <T extends object>(initialState: T) => readonly [T, (newState: Partial<T> | ((prev: T) => Partial<T>)) => void, () => T, () => void];
+export { useReactive };

package/dist/hooks/useReactive.js

@@ -0,0 +1,20 @@
+import { useCallback, useRef, useState } from 'react';
+const useReactive = (initialState) => {
+    const [state, setState] = useState(initialState);
+    const stateRef = useRef(state);
+    const updateState = useCallback((newState) => {
+        setState(prev => {
+            const updatedPart = typeof newState === 'function' ? newState(prev) : newState;
+            const newFullState = { ...prev, ...updatedPart };
+            stateRef.current = newFullState; // 同步更新ref
+            return newFullState;
+        });
+    }, []);
+    const getState = useCallback(() => stateRef.current, []);
+    const resetState = useCallback(() => {
+        setState(initialState);
+        stateRef.current = initialState;
+    }, [initialState]);
+    return [state, updateState, getState, resetState];
+};
+export { useReactive };

package/dist/hooks/useTimeout.d.ts

@@ -0,0 +1,8 @@
+type Callback = () => void;
+interface UseTimeoutReturn {
+    start: Callback;
+    isRunning: boolean;
+    clear: Callback;
+}
+declare function useTimeout(callback: Callback, delay: number | null, immediate?: boolean): UseTimeoutReturn;
+export { useTimeout };

package/dist/hooks/useTimeout.js

@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useRef } from 'react';
+function useTimeout(callback, delay, immediate = false) {
+    const timerRef = useRef(undefined);
+    const savedCallback = useRef(callback);
+    // Update callback ref if callback changes
+    useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    const clear = useCallback(() => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = undefined;
+        }
+    }, []);
+    const start = useCallback(() => {
+        clear();
+        if (delay !== null && delay !== undefined) {
+            timerRef.current = setTimeout(() => savedCallback.current(), delay);
+        }
+    }, [delay, clear]);
+    useEffect(() => {
+        if (immediate) {
+            savedCallback.current();
+        }
+        start();
+        return clear;
+    }, [delay, start, clear, immediate]);
+    return { start, clear, isRunning: !!timerRef.current };
+}
+export { useTimeout };

package/dist/hooks/useVirtualList.d.ts

@@ -0,0 +1,75 @@
+import { DependencyList } from 'react';
+export interface IPaginationResult<T> {
+    /**
+     * 数据
+     *
+     * @memberof IPaginationResult
+     */
+    dataSource: T[];
+    /**
+     * 加载状态
+     *
+     * @memberof IPaginationResult
+     */
+    loading?: boolean;
+    /**
+     * 是否完成了一次请求
+     *
+     * @memberof IPaginationResult
+     */
+    isFirstComplete: boolean;
+    /**
+     * 分页信息
+     *
+     * @memberof IPaginationResult
+     */
+    paginationProps: {
+        current: number;
+        pageSize: number;
+        total: number;
+    };
+    /**
+     * reset 是否重置查询
+     *
+     * @memberof IPaginationResult
+     */
+    refresh: (reset?: boolean) => Promise<void>;
+    debounceRefresh: (reset?: boolean) => void;
+    setDataSource: (data: T[]) => void;
+    setTotal: (total: number) => void;
+}
+interface IServerParams {
+    offset: number;
+    limit: number;
+    current: number;
+}
+type IInfoBack<T> = {
+    dataSource: T[];
+    total: number;
+};
+type IInfoServer<T> = (params: IServerParams) => IInfoBack<T> | Promise<IInfoBack<T>>;
+interface IInfoOption<T> {
+    /**
+     * 第一次是否执行server
+     *
+     */
+    isReady?: boolean;
+    /**
+     * 默认的数据
+     *
+     */
+    dataSource?: T[];
+    /**
+     * 默认当前第几页
+     *
+     */
+    current?: number;
+    /**
+     * 默认一页几条数据
+     *
+     */
+    pageSize?: number;
+}
+export declare const useVirtualList: <T>(server: IInfoServer<T>, deps?: DependencyList, // 依赖条件 数据更新默认执行server
+option?: IInfoOption<T>) => IPaginationResult<T>;
+export {};

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';