@mi-avalon/libs 0.0.6 → 0.0.7

package/src/hooks/useFuncRequest.ts

@@ -0,0 +1,100 @@
+import { useEffect, useRef, useState } from 'react';
+
+type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
+
+export type UseFuncRequestOptions<
+  T extends (...args: any[]) => Promise<any>
+> = {
+  // 自动执行时的参数
+  autoRunArgs?: Parameters<T>;
+  // 开始执行前的回调函数 false 不执行 true 执行
+  onBefore?: (...args: Parameters<T>) => boolean | Promise<boolean>;
+  // 执行成功后的回调函数
+  onSuccess?: (data: UnwrapPromise<ReturnType<T>>) => void | Promise<void>;
+  // 执行失败后的回调函数
+  onError?: (error: Error) => void | Promise<void>;
+  // 结束后的回调函数
+  onFinally?: () => void | Promise<void>;
+};
+
+export function useFuncRequest<T extends (...args: any[]) => Promise<any>>(
+  // 异步函数
+  asyncFunc: T,
+  // 配置项
+  options?: UseFuncRequestOptions<T>
+) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [data, setData] = useState<UnwrapPromise<ReturnType<T>> | null>(null);
+  const abortControllerRef = useRef<AbortController>(undefined);
+  const requestIdRef = useRef(0);
+
+  const cancel = () => {
+    abortControllerRef.current?.abort();
+    setLoading(false);
+    setError(null);
+  };
+
+  const run = async (...args: Parameters<T>) => {
+    const currentRequestId = ++requestIdRef.current;
+    cancel();
+
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
+
+    try {
+      setLoading(true);
+      setError(null);
+      if (options?.onBefore) {
+        const beforeRes = await options?.onBefore?.(...args);
+        if (!beforeRes) {
+          cancel();
+          return;
+        }
+      }
+
+      // 安全传递 AbortSignal
+      const funcArgs =
+        args.length >= asyncFunc.length
+          ? args
+          : [...args, { signal: abortController.signal }];
+
+      const res = await asyncFunc(...(funcArgs as Parameters<T>));
+
+      if (
+        !abortController.signal.aborted &&
+        currentRequestId === requestIdRef.current
+      ) {
+        setData(res);
+        await options?.onSuccess?.(res);
+      }
+      return res;
+    } catch (err) {
+      if (
+        !abortController.signal.aborted &&
+        currentRequestId === requestIdRef.current
+      ) {
+        setError(err as Error);
+        await options?.onError?.(err as Error);
+      }
+      throw err;
+    } finally {
+      if (
+        !abortController.signal.aborted &&
+        currentRequestId === requestIdRef.current
+      ) {
+        setLoading(false);
+        await options?.onFinally?.();
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (options?.autoRunArgs) {
+      run(...options.autoRunArgs).catch(() => {});
+    }
+    return cancel;
+  }, [JSON.stringify(options?.autoRunArgs)]);
+
+  return { run, cancel, loading, error, data };
+}

package/src/hooks/useInterval.ts

@@ -0,0 +1,50 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+type Callback = () => void;
+
+interface UseTimeoutReturn {
+  start: Callback;
+  isRunning: boolean;
+  clear: Callback;
+}
+
+function useInterval(
+  callback: Callback,
+  delay: number | null,
+  immediate: boolean = false
+): UseTimeoutReturn {
+  const timerRef = useRef<ReturnType<typeof setInterval>>(undefined);
+  const savedCallback = useRef(callback);
+
+  // Update callback ref if callback changes
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  const clear = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = undefined;
+    }
+  }, []);
+
+  const start = useCallback(() => {
+    clear();
+    if (delay !== null && delay !== undefined) {
+      timerRef.current = setInterval(() => savedCallback.current(), delay);
+    }
+  }, [delay, clear]);
+
+  useEffect(() => {
+    if (immediate) {
+      savedCallback.current();
+    }
+    start();
+
+    return clear;
+  }, [delay, start, clear, immediate]);
+
+  return { start, clear, isRunning: !!timerRef.current };
+}
+
+export { useInterval };

package/src/hooks/usePagination.ts

@@ -0,0 +1,184 @@
+import { debounce } from 'lodash';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface IPaginationProps {
+	current: number;
+	pageSize: number;
+	total: number;
+	onChange: (page: number, pageSize: number) => Promise<void>;
+	onShowSizeChange: (size: number, current: number) => Promise<void>;
+	showTotal?: (t: number) => React.ReactNode;
+	showQuickJumper?: boolean;
+	showSizeChanger?: boolean;
+}
+
+interface PaginationResult<T> {
+	tableProps: {
+		loading?: boolean;
+		dataSource: T[];
+	};
+	loading?: boolean;
+	dataSource: T[];
+	paginationProps: IPaginationProps;
+	isFirstComplete: boolean;
+	refresh: (resetPage?: boolean) => Promise<void>;
+	debounceRefresh: (resetPage?: boolean) => void;
+	setDataSource: (data: T[]) => 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> {
+	isReady?: boolean;
+	dataSource?: T[];
+	current?: number;
+	pageSize?: number;
+}
+
+export const usePagination = <T>(
+	server: IInfoServer<T>,
+	deps?: any[], // 依赖条件 数据更新默认执行server
+	option?: IInfoOption<T>,
+): PaginationResult<T> => {
+	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<T[]>(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: number) => {
+		setCurrent(val);
+		currentRef.current = val;
+	};
+
+	const setPageSizeAndRef = (val: number) => {
+		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?: boolean) => {
+		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: number, pageSize: number) => {
+		setCurrentAndRef(page);
+		setPageSizeAndRef(pageSize);
+		await refresh();
+	};
+
+	const onShowSizeChange = async (size: number, current: number) => {
+		setPageSizeAndRef(size);
+		setCurrentAndRef(current);
+		await refresh();
+	};
+
+	const paginationProps: IPaginationProps = {
+		current,
+		pageSize,
+		total,
+		onChange,
+		onShowSizeChange,
+	};
+
+	return {
+		tableProps: {
+			loading,
+			dataSource,
+		},
+		loading,
+		dataSource,
+		paginationProps,
+		isFirstComplete,
+		refresh,
+		debounceRefresh,
+		setDataSource,
+	};
+};

package/src/hooks/useQuery.ts

@@ -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/src/hooks/useReactive.ts

@@ -0,0 +1,26 @@
+import { useCallback, useRef, useState } from 'react';
+
+const useReactive = <T extends object>(initialState: T) => {
+	const [state, setState] = useState<T>(initialState);
+	const stateRef = useRef<T>(state);
+
+	const updateState = useCallback((newState: Partial<T> | ((prev: T) => Partial<T>)) => {
+		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] as const;
+};
+
+export { useReactive };

package/src/hooks/useTimeout.ts

@@ -0,0 +1,50 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+type Callback = () => void;
+
+interface UseTimeoutReturn {
+  start: Callback;
+  isRunning: boolean;
+  clear: Callback;
+}
+
+function useTimeout(
+  callback: Callback,
+  delay: number | null,
+  immediate: boolean = false
+): UseTimeoutReturn {
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(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/src/hooks/useVirtualList.ts

@@ -0,0 +1,209 @@
+// 虚拟列表加载
+import { debounce } from 'lodash';
+import { DependencyList, useCallback, useEffect, useRef, useState } from 'react';
+import { PAGE_SIZE } from '../constants';
+
+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 const useVirtualList = <T>(
+	server: IInfoServer<T>,
+	deps?: DependencyList, // 依赖条件 数据更新默认执行server
+	option?: IInfoOption<T>,
+): IPaginationResult<T> => {
+	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: number) => {
+		setCurrent(val);
+		currentRef.current = val;
+	};
+
+	const setPageSizeAndRef = (val: number) => {
+		setPageSize(val);
+		pageSizeRef.current = val;
+	};
+
+	// 计数器
+	const seq = useRef(0);
+	const doSearch = async (reset?: boolean) => {
+		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 as T[]);
+			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?: boolean) => {
+		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?: boolean) => {
+			await refresh(reset);
+		},
+		debounceRefresh,
+		setDataSource,
+		setTotal,
+	};
+};

package/src/index.tsx

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