@zat-design/sisyphus-react 3.13.2-beta.4 → 3.13.2-beta.6
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.
|
@@ -1,6 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FormInstance, NamePath } from 'rc-field-form/es/interface';
|
|
2
2
|
export declare function toArray<T>(value?: T | T[] | null): T[];
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
/**
|
|
4
|
+
* ProForm的useWatch hook，用于监听表单字段变化
|
|
5
|
+
* @param dependencies 监听的字段路径
|
|
6
|
+
* @param form 表单实例
|
|
7
|
+
* @param wait 防抖等待时间
|
|
8
|
+
* @returns 表单值
|
|
9
|
+
*/
|
|
5
10
|
declare function useWatch(dependencies: string | NamePath[], form?: FormInstance, wait?: number): any;
|
|
6
11
|
export default useWatch;
|
|
@@ -1,93 +1,159 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
1
2
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
3
|
import { debounce } from 'lodash';
|
|
3
|
-
import { HOOK_MARK } from 'rc-field-form/es/FieldContext';
|
|
4
4
|
import warning from 'rc-util/lib/warning';
|
|
5
5
|
import { useState, useEffect, useRef, useMemo } from 'react';
|
|
6
|
+
import isEqual from 'lodash/isEqual';
|
|
6
7
|
export function toArray(value) {
|
|
7
8
|
if (value === undefined || value === null) {
|
|
8
9
|
return [];
|
|
9
10
|
}
|
|
10
11
|
return Array.isArray(value) ? value : [value];
|
|
11
12
|
}
|
|
12
|
-
|
|
13
|
-
|
|
13
|
+
// 从一个对象或Form值中获取特定路径的值
|
|
14
|
+
function get(source, path) {
|
|
15
|
+
if (!source || path.length === 0) {
|
|
16
|
+
return source;
|
|
17
|
+
}
|
|
18
|
+
var current = source;
|
|
19
|
+
for (var i = 0; i < path.length; i++) {
|
|
20
|
+
if (current === undefined || current === null) {
|
|
21
|
+
return undefined;
|
|
22
|
+
}
|
|
23
|
+
current = current[path[i]];
|
|
24
|
+
}
|
|
25
|
+
return current;
|
|
14
26
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
27
|
+
/**
|
|
28
|
+
* 将值设置到指定路径的嵌套对象中
|
|
29
|
+
* @param obj 目标对象
|
|
30
|
+
* @param path 路径数组
|
|
31
|
+
* @param value 要设置的值
|
|
32
|
+
*/
|
|
33
|
+
function setValueByPath(obj, path, value) {
|
|
34
|
+
if (path.length === 0) return;
|
|
35
|
+
// 处理单层路径
|
|
36
|
+
if (path.length === 1) {
|
|
37
|
+
obj[path[0]] = value;
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
// 处理多层嵌套路径
|
|
41
|
+
var current = obj;
|
|
42
|
+
for (var i = 0; i < path.length - 1; i++) {
|
|
43
|
+
var key = path[i];
|
|
44
|
+
if (!current[key]) {
|
|
45
|
+
current[key] = {};
|
|
46
|
+
}
|
|
47
|
+
current = current[key];
|
|
20
48
|
}
|
|
49
|
+
current[path[path.length - 1]] = value;
|
|
21
50
|
}
|
|
22
|
-
// 创建之后namepath
|
|
23
|
-
var useWatchWarning = process.env.NODE_ENV !== 'production' ? function (
|
|
24
|
-
var
|
|
25
|
-
var
|
|
26
|
-
warning(
|
|
51
|
+
// 创建之后namepath就不可变的警告
|
|
52
|
+
var useWatchWarning = process.env.NODE_ENV !== 'production' ? function (dependencies) {
|
|
53
|
+
var depsStr = JSON.stringify(dependencies);
|
|
54
|
+
var depsStrRef = useRef(depsStr);
|
|
55
|
+
warning(depsStrRef.current === depsStr, '`useWatch` is not support dynamic `namePath`. Please provide static instead.');
|
|
27
56
|
} : function () {};
|
|
57
|
+
/**
|
|
58
|
+
* ProForm的useWatch hook，用于监听表单字段变化
|
|
59
|
+
* @param dependencies 监听的字段路径
|
|
60
|
+
* @param form 表单实例
|
|
61
|
+
* @param wait 防抖等待时间
|
|
62
|
+
* @returns 表单值
|
|
63
|
+
*/
|
|
28
64
|
function useWatch(dependencies, form, wait) {
|
|
29
|
-
|
|
65
|
+
// 处理开发环境警告
|
|
66
|
+
useWatchWarning(dependencies);
|
|
67
|
+
// 获取表单实例
|
|
68
|
+
var formInstance = form;
|
|
69
|
+
// 用于存储最终结果
|
|
30
70
|
var _useState = useState({}),
|
|
31
71
|
_useState2 = _slicedToArray(_useState, 2),
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
// 只获取一次新值
|
|
57
|
-
var newValue = getFieldsValue(_dependencies);
|
|
58
|
-
var nextValueStr = stringify(newValue);
|
|
59
|
-
// Compare stringify in case it's nest object
|
|
60
|
-
if (valueStrRef.current !== nextValueStr) {
|
|
61
|
-
valueStrRef.current = nextValueStr;
|
|
62
|
-
// 关键修改：使用已获取的newValue，避免重复调用getFieldsValue
|
|
63
|
-
setValue(newValue);
|
|
72
|
+
state = _useState2[0],
|
|
73
|
+
setState = _useState2[1];
|
|
74
|
+
// 使用ref存储中间状态，避免不必要的渲染
|
|
75
|
+
var valueRef = useRef({});
|
|
76
|
+
var prevStateRef = useRef({});
|
|
77
|
+
// 标准化依赖为路径数组的数组
|
|
78
|
+
var namePaths = useMemo(function () {
|
|
79
|
+
// 将依赖标准化为数组的数组形式
|
|
80
|
+
var paths = [];
|
|
81
|
+
// 字符串形式: 'fieldName'
|
|
82
|
+
if (typeof dependencies === 'string') {
|
|
83
|
+
paths.push(dependencies);
|
|
84
|
+
// 数组形式
|
|
85
|
+
} else if (Array.isArray(dependencies)) {
|
|
86
|
+
// 检查是否是路径数组的集合，例如：[['a', 'number'], 'fieldName']
|
|
87
|
+
var isPathsCollection = dependencies.length > 0 && (typeof dependencies[0] === 'string' || Array.isArray(dependencies[0]));
|
|
88
|
+
if (isPathsCollection) {
|
|
89
|
+
// 每个元素都是一个路径
|
|
90
|
+
dependencies.forEach(function (path) {
|
|
91
|
+
paths.push(path);
|
|
92
|
+
});
|
|
93
|
+
} else {
|
|
94
|
+
// 整个数组是一个单一路径
|
|
95
|
+
paths.push(dependencies);
|
|
64
96
|
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
|
|
97
|
+
}
|
|
98
|
+
return paths;
|
|
99
|
+
}, [/* dependencies 故意忽略，与原实现一致 */]);
|
|
100
|
+
// 保存防抖函数引用，避免重复创建
|
|
101
|
+
var debouncedFn = useMemo(function () {
|
|
68
102
|
if (wait) {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
103
|
+
return debounce(function (value) {
|
|
104
|
+
// 只在值真正变化时才更新状态
|
|
105
|
+
if (!isEqual(prevStateRef.current, value)) {
|
|
106
|
+
prevStateRef.current = _objectSpread({}, value);
|
|
107
|
+
setState(value);
|
|
108
|
+
}
|
|
109
|
+
}, wait);
|
|
74
110
|
}
|
|
75
|
-
//
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
111
|
+
// 非防抖版本
|
|
112
|
+
return function (value) {
|
|
113
|
+
if (!isEqual(prevStateRef.current, value)) {
|
|
114
|
+
prevStateRef.current = _objectSpread({}, value);
|
|
115
|
+
setState(value);
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
}, [wait]);
|
|
119
|
+
useEffect(function () {
|
|
120
|
+
if (!formInstance) return undefined;
|
|
121
|
+
// 创建更新状态的函数
|
|
122
|
+
var updateState = function updateState() {
|
|
123
|
+
var values = formInstance.getFieldsValue(true);
|
|
124
|
+
var newState = {};
|
|
125
|
+
// 处理每个监听路径
|
|
126
|
+
namePaths.forEach(function (path) {
|
|
127
|
+
// 将路径转换为数组形式
|
|
128
|
+
var namePath = toArray(path);
|
|
129
|
+
// 获取路径对应的值
|
|
130
|
+
var value = get(values, namePath);
|
|
131
|
+
// 将值设置到正确的嵌套结构中
|
|
132
|
+
setValueByPath(newState, namePath, value);
|
|
133
|
+
});
|
|
134
|
+
// 存储并更新状态
|
|
135
|
+
valueRef.current = newState;
|
|
136
|
+
debouncedFn(newState);
|
|
137
|
+
};
|
|
138
|
+
// 初始调用一次
|
|
139
|
+
updateState();
|
|
140
|
+
// 注册表单变化监听
|
|
141
|
+
var getInternalHooks = formInstance.getInternalHooks;
|
|
142
|
+
var _getInternalHooks = getInternalHooks('RC_FORM_INTERNAL_HOOKS'),
|
|
143
|
+
registerWatch = _getInternalHooks.registerWatch;
|
|
144
|
+
var cancelWatch = registerWatch(function (values) {
|
|
145
|
+
if (values) {
|
|
146
|
+
updateState();
|
|
147
|
+
}
|
|
148
|
+
});
|
|
149
|
+
// 清理订阅
|
|
81
150
|
return function () {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
cancelDebounce();
|
|
151
|
+
if (wait) {
|
|
152
|
+
debouncedFn.cancel();
|
|
85
153
|
}
|
|
154
|
+
cancelWatch();
|
|
86
155
|
};
|
|
87
|
-
},
|
|
88
|
-
|
|
89
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
90
|
-
[isValidForm]);
|
|
91
|
-
return value;
|
|
156
|
+
}, [formInstance, namePaths, debouncedFn, wait]);
|
|
157
|
+
return state;
|
|
92
158
|
}
|
|
93
159
|
export default useWatch;
|
|
@@ -1,6 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FormInstance, NamePath } from 'rc-field-form/es/interface';
|
|
2
2
|
export declare function toArray<T>(value?: T | T[] | null): T[];
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
/**
|
|
4
|
+
* ProForm的useWatch hook，用于监听表单字段变化
|
|
5
|
+
* @param dependencies 监听的字段路径
|
|
6
|
+
* @param form 表单实例
|
|
7
|
+
* @param wait 防抖等待时间
|
|
8
|
+
* @returns 表单值
|
|
9
|
+
*/
|
|
5
10
|
declare function useWatch(dependencies: string | NamePath[], form?: FormInstance, wait?: number): any;
|
|
6
11
|
export default useWatch;
|
|
@@ -5,99 +5,163 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.default = void 0;
|
|
8
|
-
exports.getNamePath = getNamePath;
|
|
9
|
-
exports.stringify = stringify;
|
|
10
8
|
exports.toArray = toArray;
|
|
9
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
11
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
12
11
|
var _lodash = require("lodash");
|
|
13
|
-
var _FieldContext = require("rc-field-form/es/FieldContext");
|
|
14
12
|
var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
|
|
15
13
|
var _react = require("react");
|
|
14
|
+
var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
|
|
16
15
|
function toArray(value) {
|
|
17
16
|
if (value === undefined || value === null) {
|
|
18
17
|
return [];
|
|
19
18
|
}
|
|
20
19
|
return Array.isArray(value) ? value : [value];
|
|
21
20
|
}
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
// 从一个对象或Form值中获取特定路径的值
|
|
22
|
+
function get(source, path) {
|
|
23
|
+
if (!source || path.length === 0) {
|
|
24
|
+
return source;
|
|
25
|
+
}
|
|
26
|
+
var current = source;
|
|
27
|
+
for (var i = 0; i < path.length; i++) {
|
|
28
|
+
if (current === undefined || current === null) {
|
|
29
|
+
return undefined;
|
|
30
|
+
}
|
|
31
|
+
current = current[path[i]];
|
|
32
|
+
}
|
|
33
|
+
return current;
|
|
24
34
|
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
35
|
+
/**
|
|
36
|
+
* 将值设置到指定路径的嵌套对象中
|
|
37
|
+
* @param obj 目标对象
|
|
38
|
+
* @param path 路径数组
|
|
39
|
+
* @param value 要设置的值
|
|
40
|
+
*/
|
|
41
|
+
function setValueByPath(obj, path, value) {
|
|
42
|
+
if (path.length === 0) return;
|
|
43
|
+
// 处理单层路径
|
|
44
|
+
if (path.length === 1) {
|
|
45
|
+
obj[path[0]] = value;
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
// 处理多层嵌套路径
|
|
49
|
+
var current = obj;
|
|
50
|
+
for (var i = 0; i < path.length - 1; i++) {
|
|
51
|
+
var key = path[i];
|
|
52
|
+
if (!current[key]) {
|
|
53
|
+
current[key] = {};
|
|
54
|
+
}
|
|
55
|
+
current = current[key];
|
|
30
56
|
}
|
|
57
|
+
current[path[path.length - 1]] = value;
|
|
31
58
|
}
|
|
32
|
-
// 创建之后namepath
|
|
33
|
-
var useWatchWarning = process.env.NODE_ENV !== 'production' ? function (
|
|
34
|
-
var
|
|
35
|
-
var
|
|
36
|
-
(0, _warning.default)(
|
|
59
|
+
// 创建之后namepath就不可变的警告
|
|
60
|
+
var useWatchWarning = process.env.NODE_ENV !== 'production' ? function (dependencies) {
|
|
61
|
+
var depsStr = JSON.stringify(dependencies);
|
|
62
|
+
var depsStrRef = (0, _react.useRef)(depsStr);
|
|
63
|
+
(0, _warning.default)(depsStrRef.current === depsStr, '`useWatch` is not support dynamic `namePath`. Please provide static instead.');
|
|
37
64
|
} : function () {};
|
|
65
|
+
/**
|
|
66
|
+
* ProForm的useWatch hook，用于监听表单字段变化
|
|
67
|
+
* @param dependencies 监听的字段路径
|
|
68
|
+
* @param form 表单实例
|
|
69
|
+
* @param wait 防抖等待时间
|
|
70
|
+
* @returns 表单值
|
|
71
|
+
*/
|
|
38
72
|
function useWatch(dependencies, form, wait) {
|
|
39
|
-
|
|
73
|
+
// 处理开发环境警告
|
|
74
|
+
useWatchWarning(dependencies);
|
|
75
|
+
// 获取表单实例
|
|
76
|
+
var formInstance = form;
|
|
77
|
+
// 用于存储最终结果
|
|
40
78
|
var _useState = (0, _react.useState)({}),
|
|
41
79
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
// 只获取一次新值
|
|
67
|
-
var newValue = getFieldsValue(_dependencies);
|
|
68
|
-
var nextValueStr = stringify(newValue);
|
|
69
|
-
// Compare stringify in case it's nest object
|
|
70
|
-
if (valueStrRef.current !== nextValueStr) {
|
|
71
|
-
valueStrRef.current = nextValueStr;
|
|
72
|
-
// 关键修改：使用已获取的newValue，避免重复调用getFieldsValue
|
|
73
|
-
setValue(newValue);
|
|
80
|
+
state = _useState2[0],
|
|
81
|
+
setState = _useState2[1];
|
|
82
|
+
// 使用ref存储中间状态，避免不必要的渲染
|
|
83
|
+
var valueRef = (0, _react.useRef)({});
|
|
84
|
+
var prevStateRef = (0, _react.useRef)({});
|
|
85
|
+
// 标准化依赖为路径数组的数组
|
|
86
|
+
var namePaths = (0, _react.useMemo)(function () {
|
|
87
|
+
// 将依赖标准化为数组的数组形式
|
|
88
|
+
var paths = [];
|
|
89
|
+
// 字符串形式: 'fieldName'
|
|
90
|
+
if (typeof dependencies === 'string') {
|
|
91
|
+
paths.push(dependencies);
|
|
92
|
+
// 数组形式
|
|
93
|
+
} else if (Array.isArray(dependencies)) {
|
|
94
|
+
// 检查是否是路径数组的集合，例如：[['a', 'number'], 'fieldName']
|
|
95
|
+
var isPathsCollection = dependencies.length > 0 && (typeof dependencies[0] === 'string' || Array.isArray(dependencies[0]));
|
|
96
|
+
if (isPathsCollection) {
|
|
97
|
+
// 每个元素都是一个路径
|
|
98
|
+
dependencies.forEach(function (path) {
|
|
99
|
+
paths.push(path);
|
|
100
|
+
});
|
|
101
|
+
} else {
|
|
102
|
+
// 整个数组是一个单一路径
|
|
103
|
+
paths.push(dependencies);
|
|
74
104
|
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
|
|
105
|
+
}
|
|
106
|
+
return paths;
|
|
107
|
+
}, [/* dependencies 故意忽略，与原实现一致 */]);
|
|
108
|
+
// 保存防抖函数引用，避免重复创建
|
|
109
|
+
var debouncedFn = (0, _react.useMemo)(function () {
|
|
78
110
|
if (wait) {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
111
|
+
return (0, _lodash.debounce)(function (value) {
|
|
112
|
+
// 只在值真正变化时才更新状态
|
|
113
|
+
if (!(0, _isEqual.default)(prevStateRef.current, value)) {
|
|
114
|
+
prevStateRef.current = (0, _objectSpread2.default)({}, value);
|
|
115
|
+
setState(value);
|
|
116
|
+
}
|
|
117
|
+
}, wait);
|
|
84
118
|
}
|
|
85
|
-
//
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
119
|
+
// 非防抖版本
|
|
120
|
+
return function (value) {
|
|
121
|
+
if (!(0, _isEqual.default)(prevStateRef.current, value)) {
|
|
122
|
+
prevStateRef.current = (0, _objectSpread2.default)({}, value);
|
|
123
|
+
setState(value);
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
}, [wait]);
|
|
127
|
+
(0, _react.useEffect)(function () {
|
|
128
|
+
if (!formInstance) return undefined;
|
|
129
|
+
// 创建更新状态的函数
|
|
130
|
+
var updateState = function updateState() {
|
|
131
|
+
var values = formInstance.getFieldsValue(true);
|
|
132
|
+
var newState = {};
|
|
133
|
+
// 处理每个监听路径
|
|
134
|
+
namePaths.forEach(function (path) {
|
|
135
|
+
// 将路径转换为数组形式
|
|
136
|
+
var namePath = toArray(path);
|
|
137
|
+
// 获取路径对应的值
|
|
138
|
+
var value = get(values, namePath);
|
|
139
|
+
// 将值设置到正确的嵌套结构中
|
|
140
|
+
setValueByPath(newState, namePath, value);
|
|
141
|
+
});
|
|
142
|
+
// 存储并更新状态
|
|
143
|
+
valueRef.current = newState;
|
|
144
|
+
debouncedFn(newState);
|
|
145
|
+
};
|
|
146
|
+
// 初始调用一次
|
|
147
|
+
updateState();
|
|
148
|
+
// 注册表单变化监听
|
|
149
|
+
var getInternalHooks = formInstance.getInternalHooks;
|
|
150
|
+
var _getInternalHooks = getInternalHooks('RC_FORM_INTERNAL_HOOKS'),
|
|
151
|
+
registerWatch = _getInternalHooks.registerWatch;
|
|
152
|
+
var cancelWatch = registerWatch(function (values) {
|
|
153
|
+
if (values) {
|
|
154
|
+
updateState();
|
|
155
|
+
}
|
|
156
|
+
});
|
|
157
|
+
// 清理订阅
|
|
91
158
|
return function () {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
cancelDebounce();
|
|
159
|
+
if (wait) {
|
|
160
|
+
debouncedFn.cancel();
|
|
95
161
|
}
|
|
162
|
+
cancelWatch();
|
|
96
163
|
};
|
|
97
|
-
},
|
|
98
|
-
|
|
99
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
100
|
-
[isValidForm]);
|
|
101
|
-
return value;
|
|
164
|
+
}, [formInstance, namePaths, debouncedFn, wait]);
|
|
165
|
+
return state;
|
|
102
166
|
}
|
|
103
167
|
var _default = exports.default = useWatch;
|