@rainbow-oh/yee-c 0.14.4 → 0.14.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.
- package/dist/cjs/Form/List.js +13 -3
- package/dist/cjs/Form/form-store.js +3 -3
- package/dist/cjs/style/themes.css +1 -1
- package/dist/cjs/style/variables.css +1 -1
- package/dist/cjs/version.d.ts +1 -1
- package/dist/cjs/version.js +1 -1
- package/dist/esm/Form/List.js +26 -8
- package/dist/esm/Form/form-store.js +7 -3
- package/dist/esm/style/themes.css +1 -1
- package/dist/esm/style/variables.css +1 -1
- package/dist/esm/version.d.ts +1 -1
- package/dist/esm/version.js +1 -1
- package/dist/umd/yee-c.min.js +1 -1
- package/package.json +1 -1
- package/src/Form/List.test.tsx +126 -0
- package/src/Form/List.tsx +24 -3
- package/src/Form/form-store.test.ts +19 -0
- package/src/Form/form-store.ts +7 -3
- package/src/version.ts +1 -1
package/dist/cjs/Form/List.js
CHANGED
|
@@ -72,7 +72,7 @@ var List = ({
|
|
|
72
72
|
children,
|
|
73
73
|
initialValue = []
|
|
74
74
|
}) => {
|
|
75
|
-
const { getFieldValue, setFieldsValue, validateFields } = (0, import_react.useContext)(import_FieldContext.default);
|
|
75
|
+
const { getFieldValue, setFieldsValue, validateFields, subscribe } = (0, import_react.useContext)(import_FieldContext.default);
|
|
76
76
|
const listNamePath = (0, import_react.useMemo)(() => (0, import_path.getNamePath)(name), [name]);
|
|
77
77
|
const parentPrefixName = (0, import_react.useContext)(ListNameContext) || [];
|
|
78
78
|
const prefixName = (0, import_react.useMemo)(
|
|
@@ -81,6 +81,7 @@ var List = ({
|
|
|
81
81
|
);
|
|
82
82
|
const keyManager = (0, import_react.useRef)({ keys: [], id: 0 }).current;
|
|
83
83
|
const [, forceUpdate] = (0, import_react.useState)(0);
|
|
84
|
+
const listLengthRef = (0, import_react.useRef)(0);
|
|
84
85
|
(0, import_react.useLayoutEffect)(() => {
|
|
85
86
|
const pathStr = prefixName.join(".");
|
|
86
87
|
const currentValue = getFieldValue == null ? void 0 : getFieldValue(pathStr);
|
|
@@ -89,6 +90,16 @@ var List = ({
|
|
|
89
90
|
forceUpdate((prev) => prev + 1);
|
|
90
91
|
}
|
|
91
92
|
}, [prefixName, initialValue, getFieldValue, setFieldsValue]);
|
|
93
|
+
(0, import_react.useLayoutEffect)(
|
|
94
|
+
() => subscribe == null ? void 0 : subscribe(prefixName.join("."), () => {
|
|
95
|
+
const next = getFieldValue == null ? void 0 : getFieldValue(prefixName.join("."));
|
|
96
|
+
const nextLen = Array.isArray(next) ? next.length : 0;
|
|
97
|
+
if (nextLen === listLengthRef.current)
|
|
98
|
+
return;
|
|
99
|
+
forceUpdate((prev) => prev + 1);
|
|
100
|
+
}),
|
|
101
|
+
[prefixName, subscribe, getFieldValue]
|
|
102
|
+
);
|
|
92
103
|
const getListValue = () => {
|
|
93
104
|
const pathStr = prefixName.join(".");
|
|
94
105
|
const value = getFieldValue == null ? void 0 : getFieldValue(pathStr);
|
|
@@ -133,7 +144,6 @@ var List = ({
|
|
|
133
144
|
setFieldsValue == null ? void 0 : setFieldsValue({ [pathStr]: newList }, "update");
|
|
134
145
|
}
|
|
135
146
|
keyManager.id += 1;
|
|
136
|
-
forceUpdate((prev) => prev + 1);
|
|
137
147
|
});
|
|
138
148
|
const remove = (index) => {
|
|
139
149
|
const indices = Array.isArray(index) ? index : [index];
|
|
@@ -145,7 +155,6 @@ var List = ({
|
|
|
145
155
|
keyManager.keys = keyManager.keys.filter((_, i) => !indexSet.has(i));
|
|
146
156
|
const newList = currentValue.filter((_, i) => !indexSet.has(i));
|
|
147
157
|
setFieldsValue == null ? void 0 : setFieldsValue({ [pathStr]: newList }, "update");
|
|
148
|
-
forceUpdate((prev) => prev + 1);
|
|
149
158
|
};
|
|
150
159
|
const moveFunc = (from, to) => {
|
|
151
160
|
if (from === to)
|
|
@@ -163,6 +172,7 @@ var List = ({
|
|
|
163
172
|
return { add, remove, move: moveFunc };
|
|
164
173
|
}, [prefixName, getFieldValue, setFieldsValue]);
|
|
165
174
|
const listValue = getListValue();
|
|
175
|
+
listLengthRef.current = listValue.length;
|
|
166
176
|
while (keyManager.keys.length < listValue.length) {
|
|
167
177
|
keyManager.keys.push(keyManager.id++);
|
|
168
178
|
}
|
|
@@ -105,15 +105,15 @@ var FormStore = class {
|
|
|
105
105
|
initialValues,
|
|
106
106
|
callbacks
|
|
107
107
|
}) => {
|
|
108
|
+
if (callbacks) {
|
|
109
|
+
this.setCallbacks(callbacks);
|
|
110
|
+
}
|
|
108
111
|
if (!this.initialized) {
|
|
109
112
|
this.initialized = true;
|
|
110
113
|
if (initialValues) {
|
|
111
114
|
this.store = __spreadValues(__spreadValues({}, this.store), initialValues);
|
|
112
115
|
this.initialValues = JSON.parse(JSON.stringify(initialValues));
|
|
113
116
|
}
|
|
114
|
-
if (callbacks) {
|
|
115
|
-
this.setCallbacks(callbacks);
|
|
116
|
-
}
|
|
117
117
|
this.fieldEntities.forEach((entity) => {
|
|
118
118
|
entity == null ? void 0 : entity.onStoreChange();
|
|
119
119
|
});
|
package/dist/cjs/version.d.ts
CHANGED
package/dist/cjs/version.js
CHANGED
package/dist/esm/Form/List.js
CHANGED
|
@@ -40,7 +40,8 @@ var List = function List(_ref) {
|
|
|
40
40
|
var _useContext = useContext(FieldContext),
|
|
41
41
|
getFieldValue = _useContext.getFieldValue,
|
|
42
42
|
setFieldsValue = _useContext.setFieldsValue,
|
|
43
|
-
validateFields = _useContext.validateFields
|
|
43
|
+
validateFields = _useContext.validateFields,
|
|
44
|
+
subscribe = _useContext.subscribe;
|
|
44
45
|
|
|
45
46
|
// Normalize list name path
|
|
46
47
|
var listNamePath = useMemo(function () {
|
|
@@ -66,6 +67,9 @@ var List = function List(_ref) {
|
|
|
66
67
|
_useState2 = _slicedToArray(_useState, 2),
|
|
67
68
|
forceUpdate = _useState2[1];
|
|
68
69
|
|
|
70
|
+
// 上一次渲染的行数:订阅回调里跳过行内编辑(长度未变)触发的无效重渲染
|
|
71
|
+
var listLengthRef = useRef(0);
|
|
72
|
+
|
|
69
73
|
// Initialize list value - Fix: use prefixName instead of listNamePath
|
|
70
74
|
useLayoutEffect(function () {
|
|
71
75
|
var pathStr = prefixName.join('.');
|
|
@@ -78,6 +82,24 @@ var List = function List(_ref) {
|
|
|
78
82
|
}
|
|
79
83
|
}, [prefixName, initialValue, getFieldValue, setFieldsValue]);
|
|
80
84
|
|
|
85
|
+
// Subscribe to the list's own path: List re-reads the store only on its own render,
|
|
86
|
+
// so a whole-value replacement via form.setFieldsValue (row count changed) never
|
|
87
|
+
// re-rendered it and new rows never mounted. Field instances already refresh through
|
|
88
|
+
// registerFieldEntities, but the row count lives here. Aligned with rc-field-form.
|
|
89
|
+
useLayoutEffect(function () {
|
|
90
|
+
return subscribe === null || subscribe === void 0 ? void 0 : subscribe(prefixName.join('.'), function () {
|
|
91
|
+
// isRelatedNamePath 双向前缀匹配,行内编辑(options.i.label)也命中本 watcher;
|
|
92
|
+
// 但 List 渲染输出只取决于行数,行内 Field 会经 registerFieldEntities 自行刷新,
|
|
93
|
+
// 长度未变则跳过,避免大列表逐键全列表重渲染
|
|
94
|
+
var next = getFieldValue === null || getFieldValue === void 0 ? void 0 : getFieldValue(prefixName.join('.'));
|
|
95
|
+
var nextLen = Array.isArray(next) ? next.length : 0;
|
|
96
|
+
if (nextLen === listLengthRef.current) return;
|
|
97
|
+
forceUpdate(function (prev) {
|
|
98
|
+
return prev + 1;
|
|
99
|
+
});
|
|
100
|
+
});
|
|
101
|
+
}, [prefixName, subscribe, getFieldValue]);
|
|
102
|
+
|
|
81
103
|
// Get current list value
|
|
82
104
|
var getListValue = function getListValue() {
|
|
83
105
|
var pathStr = prefixName.join('.');
|
|
@@ -132,10 +154,7 @@ var List = function List(_ref) {
|
|
|
132
154
|
setFieldsValue === null || setFieldsValue === void 0 || setFieldsValue(_defineProperty({}, pathStr, _newList), 'update');
|
|
133
155
|
}
|
|
134
156
|
keyManager.id += 1;
|
|
135
|
-
|
|
136
|
-
return prev + 1;
|
|
137
|
-
});
|
|
138
|
-
case 13:
|
|
157
|
+
case 12:
|
|
139
158
|
case "end":
|
|
140
159
|
return _context.stop();
|
|
141
160
|
}
|
|
@@ -162,9 +181,6 @@ var List = function List(_ref) {
|
|
|
162
181
|
return !indexSet.has(i);
|
|
163
182
|
});
|
|
164
183
|
setFieldsValue === null || setFieldsValue === void 0 || setFieldsValue(_defineProperty({}, pathStr, newList), 'update');
|
|
165
|
-
forceUpdate(function (prev) {
|
|
166
|
-
return prev + 1;
|
|
167
|
-
});
|
|
168
184
|
};
|
|
169
185
|
var moveFunc = function moveFunc(from, to) {
|
|
170
186
|
if (from === to) return;
|
|
@@ -180,6 +196,7 @@ var List = function List(_ref) {
|
|
|
180
196
|
// Move list values
|
|
181
197
|
var newList = move(currentValue, from, to);
|
|
182
198
|
setFieldsValue === null || setFieldsValue === void 0 || setFieldsValue(_defineProperty({}, pathStr, newList), 'update');
|
|
199
|
+
// 同长度重排不会触发上方订阅回调(长度未变被跳过),须显式重渲染
|
|
183
200
|
forceUpdate(function (prev) {
|
|
184
201
|
return prev + 1;
|
|
185
202
|
});
|
|
@@ -193,6 +210,7 @@ var List = function List(_ref) {
|
|
|
193
210
|
|
|
194
211
|
// Build field list - removed useMemo, compute directly
|
|
195
212
|
var listValue = getListValue();
|
|
213
|
+
listLengthRef.current = listValue.length;
|
|
196
214
|
|
|
197
215
|
// Ensure enough keys
|
|
198
216
|
while (keyManager.keys.length < listValue.length) {
|
|
@@ -62,15 +62,19 @@ export var FormStore = /*#__PURE__*/function () {
|
|
|
62
62
|
_defineProperty(this, "initialize", function (_ref) {
|
|
63
63
|
var initialValues = _ref.initialValues,
|
|
64
64
|
callbacks = _ref.callbacks;
|
|
65
|
+
// callbacks 每次挂载重绑:form 实例可由外层 useForm 持有、跨越 <Form> 卸载/重挂载存活,
|
|
66
|
+
// 若只在此处注册一次,重挂载后 store 仍持旧挂载的 useEvent 闭包,其 ref 已随旧实例
|
|
67
|
+
// 死亡(不再更新),onValuesChange 等会以过期闭包执行。
|
|
68
|
+
if (callbacks) {
|
|
69
|
+
_this.setCallbacks(callbacks);
|
|
70
|
+
}
|
|
65
71
|
if (!_this.initialized) {
|
|
66
72
|
_this.initialized = true;
|
|
67
73
|
if (initialValues) {
|
|
68
74
|
_this.store = _objectSpread(_objectSpread({}, _this.store), initialValues);
|
|
69
75
|
_this.initialValues = JSON.parse(JSON.stringify(initialValues));
|
|
70
76
|
}
|
|
71
|
-
|
|
72
|
-
_this.setCallbacks(callbacks);
|
|
73
|
-
}
|
|
77
|
+
|
|
74
78
|
// Only refresh field entities, do not notify watchers (no value changes to watch during initialization)
|
|
75
79
|
_this.fieldEntities.forEach(function (entity) {
|
|
76
80
|
entity === null || entity === void 0 || entity.onStoreChange();
|
package/dist/esm/version.d.ts
CHANGED
package/dist/esm/version.js
CHANGED