@mi-avalon/libs 0.0.26 → 0.0.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/MForm/MFormItemConst.js +1 -1
- package/dist/components/MiModal/index.d.ts +2 -2
- package/dist/components/ThemeContext/index.d.ts +3 -6
- package/dist/hooks/usePagination.js +4 -2
- package/dist/hooks/useVirtualList.d.ts +1 -27
- package/dist/hooks/useVirtualList.js +56 -46
- package/dist/index.es.js +1530 -1388
- package/dist/index.umd.js +16 -16
- package/package.json +5 -2
|
@@ -55,7 +55,7 @@ export class MFormItemConst {
|
|
|
55
55
|
return _jsx(Checkbox.Group, { disabled: item.disabled, ...item.props });
|
|
56
56
|
};
|
|
57
57
|
static upload = (item) => {
|
|
58
|
-
return (_jsx(Upload, {
|
|
58
|
+
return (_jsx(Upload, { ...item.props, children: item.children || (_jsxs(Button, { children: [_jsx(UploadOutlined, {}), " \u70B9\u51FB\u4E0A\u4F20"] })) }));
|
|
59
59
|
};
|
|
60
60
|
static mentions = (item) => {
|
|
61
61
|
return (_jsx(Mentions, { ...item.props, placeholder: item.placeholder || MFormItemConst.getDefaultPlaceholder(item) }));
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { ThemeConfig } from 'antd';
|
|
2
2
|
import React, { Component } from 'react';
|
|
3
|
-
import { IModalBaseProps } from '../../utils';
|
|
3
|
+
import { IModalBaseProps, IModalControls } from '../../utils';
|
|
4
4
|
export type IMiModalProps = IModalBaseProps & {
|
|
5
5
|
mode?: string;
|
|
6
6
|
};
|
|
7
7
|
export declare class MiModal extends Component<IMiModalProps> {
|
|
8
8
|
static setMode: (mode: string) => void;
|
|
9
9
|
static setThemeConfig: (fn: (m: string) => ThemeConfig) => void;
|
|
10
|
-
static open: (props: IMiModalProps) =>
|
|
10
|
+
static open: (props: IMiModalProps) => IModalControls<IMiModalProps>;
|
|
11
11
|
getTheme(): ThemeConfig;
|
|
12
12
|
handleCancel: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
13
13
|
handleOk: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
}
|
|
5
|
-
export declare const MiThemeProvider: import("react").Provider<ThemeContextType>;
|
|
6
|
-
export declare function useMiThemeConfig(): ThemeContextType;
|
|
1
|
+
import { ConfigProviderProps } from 'antd';
|
|
2
|
+
export declare const MiThemeProvider: import("react").Provider<ConfigProviderProps>;
|
|
3
|
+
export declare function useMiThemeConfig(): ConfigProviderProps;
|
|
7
4
|
interface IProps {
|
|
8
5
|
children: React.ReactNode;
|
|
9
6
|
}
|
|
@@ -65,8 +65,7 @@ option) => {
|
|
|
65
65
|
setTotal(_total);
|
|
66
66
|
}
|
|
67
67
|
catch (error) {
|
|
68
|
-
|
|
69
|
-
console.error('fetch err', error);
|
|
68
|
+
console.error('usePagination error', error);
|
|
70
69
|
if (_seq !== seq.current)
|
|
71
70
|
return;
|
|
72
71
|
}
|
|
@@ -105,6 +104,9 @@ option) => {
|
|
|
105
104
|
current,
|
|
106
105
|
pageSize,
|
|
107
106
|
total,
|
|
107
|
+
showTotal(t) {
|
|
108
|
+
return `共 ${t} 条`;
|
|
109
|
+
},
|
|
108
110
|
onChange,
|
|
109
111
|
onShowSizeChange,
|
|
110
112
|
};
|
|
@@ -1,38 +1,13 @@
|
|
|
1
1
|
import { DependencyList } from 'react';
|
|
2
2
|
export interface IPaginationResult<T> {
|
|
3
|
-
/**
|
|
4
|
-
* 数据
|
|
5
|
-
*
|
|
6
|
-
* @memberof IPaginationResult
|
|
7
|
-
*/
|
|
8
3
|
dataSource: T[];
|
|
9
|
-
/**
|
|
10
|
-
* 加载状态
|
|
11
|
-
*
|
|
12
|
-
* @memberof IPaginationResult
|
|
13
|
-
*/
|
|
14
4
|
loading?: boolean;
|
|
15
|
-
/**
|
|
16
|
-
* 是否完成了一次请求
|
|
17
|
-
*
|
|
18
|
-
* @memberof IPaginationResult
|
|
19
|
-
*/
|
|
20
5
|
isFirstComplete: boolean;
|
|
21
|
-
/**
|
|
22
|
-
* 分页信息
|
|
23
|
-
*
|
|
24
|
-
* @memberof IPaginationResult
|
|
25
|
-
*/
|
|
26
6
|
paginationProps: {
|
|
27
7
|
current: number;
|
|
28
8
|
pageSize: number;
|
|
29
9
|
total: number;
|
|
30
10
|
};
|
|
31
|
-
/**
|
|
32
|
-
* reset 是否重置查询
|
|
33
|
-
*
|
|
34
|
-
* @memberof IPaginationResult
|
|
35
|
-
*/
|
|
36
11
|
refresh: (reset?: boolean) => Promise<void>;
|
|
37
12
|
debounceRefresh: (reset?: boolean) => void;
|
|
38
13
|
setDataSource: (data: T[]) => void;
|
|
@@ -70,6 +45,5 @@ interface IInfoOption<T> {
|
|
|
70
45
|
*/
|
|
71
46
|
pageSize?: number;
|
|
72
47
|
}
|
|
73
|
-
export declare const useVirtualList: <T>(server: IInfoServer<T>, deps?: DependencyList,
|
|
74
|
-
option?: IInfoOption<T>) => IPaginationResult<T>;
|
|
48
|
+
export declare const useVirtualList: <T>(server: IInfoServer<T>, deps?: DependencyList, option?: IInfoOption<T>) => IPaginationResult<T>;
|
|
75
49
|
export {};
|
|
@@ -1,33 +1,31 @@
|
|
|
1
1
|
// 虚拟列表加载
|
|
2
|
-
import { useCallback, useEffect, useRef, useState
|
|
2
|
+
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import { PAGE_SIZE } from '../constants';
|
|
4
4
|
import { debounce } from '../utils';
|
|
5
|
-
export const useVirtualList = (server, deps,
|
|
6
|
-
option) => {
|
|
5
|
+
export const useVirtualList = (server, deps, option) => {
|
|
7
6
|
const { isReady = true, dataSource: propDataSource = [], current: propCurrent = 1, pageSize: propPageSize = PAGE_SIZE, } = option || {};
|
|
8
|
-
// 是否完成了一次请求
|
|
9
7
|
const [isFirstComplete, setIsFirstComplete] = useState(false);
|
|
10
|
-
// 分页
|
|
11
8
|
const [current, setCurrent] = useState(propCurrent);
|
|
12
9
|
const [pageSize, setPageSize] = useState(propPageSize);
|
|
13
10
|
const [total, setTotal] = useState(0);
|
|
14
|
-
// 表格
|
|
15
11
|
const [isLoading, setIsLoading] = useState(false);
|
|
16
|
-
const [dataSource,
|
|
12
|
+
const [dataSource, setDataSourceState] = useState(propDataSource);
|
|
17
13
|
const currentRef = useRef(current);
|
|
18
14
|
const pageSizeRef = useRef(pageSize);
|
|
15
|
+
const seq = useRef(0);
|
|
19
16
|
// 在状态更新时同步更新ref
|
|
20
|
-
const setCurrentAndRef = (val) => {
|
|
17
|
+
const setCurrentAndRef = useCallback((val) => {
|
|
21
18
|
setCurrent(val);
|
|
22
19
|
currentRef.current = val;
|
|
23
|
-
};
|
|
24
|
-
const setPageSizeAndRef = (val) => {
|
|
20
|
+
}, []);
|
|
21
|
+
const setPageSizeAndRef = useCallback((val) => {
|
|
25
22
|
setPageSize(val);
|
|
26
23
|
pageSizeRef.current = val;
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
24
|
+
}, []);
|
|
25
|
+
const setDataSource = useCallback((data) => {
|
|
26
|
+
setDataSourceState(data);
|
|
27
|
+
}, []);
|
|
28
|
+
const doSearch = useCallback(async (reset) => {
|
|
31
29
|
if (!isReady) {
|
|
32
30
|
return;
|
|
33
31
|
}
|
|
@@ -37,51 +35,54 @@ option) => {
|
|
|
37
35
|
seq.current += 1;
|
|
38
36
|
const _seq = seq.current;
|
|
39
37
|
try {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
offset = 0;
|
|
44
|
-
}
|
|
45
|
-
if (_pageSize < 1) {
|
|
46
|
-
_pageSize = 1;
|
|
47
|
-
}
|
|
48
|
-
let { dataSource: data0, total: total0 } = await server({
|
|
38
|
+
let offset = Math.max(0, Math.round((_current - 1) * _pageSize));
|
|
39
|
+
_pageSize = Math.max(1, _pageSize);
|
|
40
|
+
let result = await server({
|
|
49
41
|
limit: _pageSize,
|
|
50
42
|
offset,
|
|
51
43
|
current: _current,
|
|
52
44
|
});
|
|
53
45
|
if (_seq !== seq.current)
|
|
54
46
|
return;
|
|
47
|
+
let { dataSource: data0, total: total0 } = result;
|
|
48
|
+
// 处理数据源变化的情况
|
|
55
49
|
if (pageSize * (_current - 1) >= total0 && _current !== 1) {
|
|
56
|
-
const totalPage = Math.ceil(total0 / pageSize);
|
|
57
|
-
|
|
50
|
+
const totalPage = Math.max(1, Math.ceil(total0 / pageSize));
|
|
51
|
+
offset = Math.max(0, Math.round((totalPage - 1) * _pageSize));
|
|
52
|
+
result = await server({
|
|
58
53
|
limit: _pageSize,
|
|
59
|
-
offset
|
|
60
|
-
current:
|
|
61
|
-
})
|
|
54
|
+
offset,
|
|
55
|
+
current: totalPage,
|
|
56
|
+
});
|
|
62
57
|
if (_seq !== seq.current)
|
|
63
58
|
return;
|
|
59
|
+
data0 = result.dataSource;
|
|
60
|
+
total0 = result.total;
|
|
64
61
|
_current = totalPage;
|
|
65
|
-
// message.error('数据源发生变化,该页没有数据,自动加载最后一页');
|
|
66
62
|
}
|
|
67
|
-
const
|
|
68
|
-
|
|
63
|
+
const newData = reset ? data0 : [...dataSource, ...data0];
|
|
64
|
+
// 批量更新状态以减少渲染次数
|
|
65
|
+
setDataSourceState(newData);
|
|
69
66
|
setCurrentAndRef(_current);
|
|
70
67
|
setPageSizeAndRef(_pageSize);
|
|
71
68
|
setTotal(total0);
|
|
69
|
+
setIsFirstComplete(true);
|
|
72
70
|
}
|
|
73
71
|
catch (error) {
|
|
74
|
-
console.error('
|
|
72
|
+
console.error('useVirtualList error', error);
|
|
75
73
|
if (_seq !== seq.current)
|
|
76
74
|
return;
|
|
77
75
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
76
|
+
finally {
|
|
77
|
+
if (_seq === seq.current) {
|
|
78
|
+
setIsLoading(false);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}, [isReady, server, dataSource, setCurrentAndRef, setPageSizeAndRef]);
|
|
81
82
|
// 加载下一页数据
|
|
82
|
-
const refresh = async (reset) => {
|
|
83
|
+
const refresh = useCallback(async (reset) => {
|
|
83
84
|
if (reset) {
|
|
84
|
-
|
|
85
|
+
setDataSourceState([]);
|
|
85
86
|
setCurrentAndRef(propCurrent);
|
|
86
87
|
setPageSizeAndRef(propPageSize);
|
|
87
88
|
}
|
|
@@ -92,16 +93,27 @@ option) => {
|
|
|
92
93
|
setCurrentAndRef(current + 1);
|
|
93
94
|
}
|
|
94
95
|
await doSearch(reset);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
96
|
+
}, [
|
|
97
|
+
current,
|
|
98
|
+
doSearch,
|
|
99
|
+
pageSize,
|
|
100
|
+
propCurrent,
|
|
101
|
+
propPageSize,
|
|
102
|
+
setCurrentAndRef,
|
|
103
|
+
setPageSizeAndRef,
|
|
104
|
+
total,
|
|
105
|
+
]);
|
|
106
|
+
// 防抖刷新函数
|
|
107
|
+
const debounceRefresh = useCallback(debounce((reset) => {
|
|
108
|
+
refresh(reset);
|
|
109
|
+
}, 500), [refresh]);
|
|
110
|
+
// 使用useMemo优化依赖项
|
|
111
|
+
const memoizedDeps = useMemo(() => [...(deps || []), isReady], [deps, isReady]);
|
|
100
112
|
useEffect(() => {
|
|
101
113
|
if (!isReady)
|
|
102
114
|
return;
|
|
103
115
|
debounceRefresh(true);
|
|
104
|
-
},
|
|
116
|
+
}, memoizedDeps); // 使用memoized依赖项
|
|
105
117
|
return {
|
|
106
118
|
loading: isLoading,
|
|
107
119
|
dataSource,
|
|
@@ -111,9 +123,7 @@ option) => {
|
|
|
111
123
|
total,
|
|
112
124
|
},
|
|
113
125
|
isFirstComplete,
|
|
114
|
-
refresh
|
|
115
|
-
await refresh(reset);
|
|
116
|
-
},
|
|
126
|
+
refresh,
|
|
117
127
|
debounceRefresh,
|
|
118
128
|
setDataSource,
|
|
119
129
|
setTotal,
|