@mi-avalon/libs 0.0.23 → 0.0.24

package/dist/components/MSearch/index.d.ts

@@ -0,0 +1,26 @@
+import { ButtonProps } from 'antd';
+import { FormInstance } from 'antd/lib';
+import React from 'react';
+import { IMFormItem } from '../MForm';
+import './index.scss';
+export interface IMSearchProps {
+    form?: FormInstance;
+    /**
+     * 需要的数据: [ { label: ...,id: ..., required: ..., type: ..., }, ... ]
+     */
+    searchItems: IMFormItem[];
+    className?: string;
+    /**
+     * 搜索按钮 params返回form表单的数据
+     */
+    onSearch?: (params: any, isReset: boolean) => any;
+    /**
+     * 搜索项默认展开，不填写默认false
+     */
+    defaultShowAll?: boolean;
+    /**
+     * 自定义按钮
+     */
+    customButtons?: ButtonProps[];
+}
+export declare const MSearch: React.FC<IMSearchProps>;

package/dist/components/MSearch/index.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
+import { Button, Card, Form } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { getClassName, removeNull } from '../../utils';
+import MForm from '../MForm';
+import { CompThemeProvider } from '../ThemeContext';
+import './index.scss';
+const ENTER_KEY_CODE = 13; // 回车键的值为13
+const classname = (n = '') => {
+    const cn = 'm-search';
+    return getClassName(cn, n);
+};
+export const MSearch = props => {
+    const { className, searchItems = [], onSearch, defaultShowAll = false, customButtons = [], form: propsForm, } = props;
+    const [showAll, setShowAll] = useState(defaultShowAll);
+    const [curForm] = Form.useForm();
+    const searchWrap = useRef(null);
+    const form = propsForm ?? curForm;
+    // 键盘按下事件处理
+    const onEnterKeySearch = (keyObj) => {
+        const { keyCode } = keyObj;
+        if (keyCode === ENTER_KEY_CODE) {
+            search();
+        }
+    };
+    // 添加和移除事件监听
+    useEffect(() => {
+        const currentWrap = searchWrap.current;
+        currentWrap?.addEventListener('keydown', onEnterKeySearch);
+        return () => {
+            currentWrap?.removeEventListener('keydown', onEnterKeySearch);
+        };
+    }, []);
+    // 重置表单
+    const reset = () => {
+        form?.resetFields();
+        search(true);
+    };
+    // 搜索函数
+    const search = (isReset = false) => {
+        form?.validateFields().then(values => {
+            removeNull(values);
+            onSearch?.(values, isReset);
+        });
+    };
+    // 渲染搜索按钮
+    const renderSearchButtons = () => {
+        const hasMore = searchItems.length > 2;
+        return (_jsxs("div", { className: classname('btn-wrapper'), children: [customButtons?.length > 0 ? (_jsx(_Fragment, { children: customButtons.map((buttonProps, index) => (_jsx(Button, { className: classname('btn'), ...buttonProps, children: buttonProps.children }, `custom-btn-${index}`))) })) : (_jsxs(_Fragment, { children: [_jsx(Button, { className: classname('btn btn-reset'), onClick: reset, children: "\u91CD\u7F6E" }), _jsx(Button, { className: classname('btn btn-search'), onClick: () => search(), type: 'primary', children: "\u641C\u7D22" })] })), hasMore && (_jsxs("div", { className: classname('btn btn-collapse'), onClick: () => setShowAll(!showAll), children: [_jsx("span", { children: showAll ? '收起' : '展开' }), showAll ? _jsx(CaretUpOutlined, {}) : _jsx(CaretDownOutlined, {})] }))] }));
+    };
+    // 处理搜索项显示/隐藏
+    const processedSearchItems = searchItems.map((item, idx) => {
+        const newItem = { ...item };
+        if (searchItems.length > 2 && idx >= 2 && !showAll) {
+            newItem.formItemProps = {
+                ...item.formItemProps,
+                style: {
+                    ...item.formItemProps?.style,
+                    display: 'none',
+                },
+            };
+        }
+        return newItem;
+    });
+    const hasMore = searchItems.length > 2;
+    return (_jsx(CompThemeProvider, { children: _jsx("div", { className: `${classname('')} ${showAll ? '' : classname('collapsed')} ${className || ''}`, ref: searchWrap, children: _jsxs(Card, { children: [_jsxs("div", { className: classname('form'), children: [_jsx(MForm, { form: form, formItems: processedSearchItems, column: 3 }), (!hasMore || (hasMore && !showAll)) && renderSearchButtons()] }), hasMore && showAll && _jsx("div", { className: classname('footer'), children: renderSearchButtons() })] }) }) }));
+};

package/dist/components/index.d.ts

@@ -3,5 +3,6 @@ export * from './MBreadcrumb';
 export * from './MDescriptions';
 export * from './MForm';
 export { default as MForm } from './MForm';
+export * from './MSearch';
 export * from './MTable';
 export * from './ThemeContext';

package/dist/components/index.js

@@ -4,6 +4,6 @@ export * from './MDescriptions';
 export * from './MForm';
 export { default as MForm } from './MForm';
 // export * from './MiModal';
-// export { default as MSearch } from './MSearch';
+export * from './MSearch';
 export * from './MTable';
 export * from './ThemeContext';

package/dist/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export * from './useFuncRequest';
+export * from './useInterval';
+export * from './usePagination';
+export * from './useQuery';
+export * from './useReactive';
+export * from './useTimeout';
+export * from './useVirtualList';

package/dist/hooks/index.js

@@ -0,0 +1,7 @@
+export * from './useFuncRequest';
+export * from './useInterval';
+export * from './usePagination';
+export * from './useQuery';
+export * from './useReactive';
+export * from './useTimeout';
+export * from './useVirtualList';

package/dist/hooks/useFuncRequest.d.ts

@@ -0,0 +1,16 @@
+type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
+export type UseFuncRequestOptions<T extends (...args: any[]) => Promise<any>> = {
+    autoRunArgs?: Parameters<T>;
+    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 declare function useFuncRequest<T extends (...args: any[]) => Promise<any>>(asyncFunc: T, options?: UseFuncRequestOptions<T>): {
+    run: (...args: Parameters<T>) => Promise<any>;
+    cancel: () => void;
+    loading: boolean;
+    error: Error | null;
+    data: UnwrapPromise<ReturnType<T>> | null;
+};
+export {};

package/dist/hooks/useFuncRequest.js

@@ -0,0 +1,67 @@
+import { useEffect, useRef, useState } from 'react';
+export function useFuncRequest(
+// 异步函数
+asyncFunc, 
+// 配置项
+options) {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [data, setData] = useState(null);
+    const abortControllerRef = useRef(undefined);
+    const requestIdRef = useRef(0);
+    const cancel = () => {
+        abortControllerRef.current?.abort();
+        setLoading(false);
+        setError(null);
+    };
+    const run = async (...args) => {
+        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);
+            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);
+                await options?.onError?.(err);
+            }
+            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/dist/hooks/useInterval.d.ts

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

package/dist/hooks/useInterval.js

@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useRef } from 'react';
+function useInterval(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) {
+            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/dist/hooks/usePagination.d.ts

@@ -0,0 +1,42 @@
+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 declare const usePagination: <T>(server: IInfoServer<T>, deps?: any[], // 依赖条件 数据更新默认执行server
+option?: IInfoOption<T>) => PaginationResult<T>;
+export {};

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 {};