@rainbow-oh/yee-c 0.9.0 → 0.9.2
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/Badge/badge.js +5 -3
- package/dist/cjs/Badge/interface.d.ts +4 -0
- package/dist/cjs/Form/demo/async-validate.js +2 -2
- package/dist/cjs/Form/demo/validate.js +2 -2
- package/dist/cjs/Form/form-store.js +19 -6
- package/dist/cjs/Form/index.d.ts +1 -1
- package/dist/cjs/Form/interface.d.ts +9 -2
- package/dist/cjs/Form/utils/path.js +1 -1
- package/dist/cjs/Popconfirm/interface.d.ts +0 -4
- package/dist/cjs/Select/select.js +2 -1
- package/dist/cjs/TableSelect/table-select.js +2 -2
- package/dist/cjs/TreeSelect/tree-select.js +15 -5
- 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/Badge/badge.js +3 -2
- package/dist/esm/Badge/interface.d.ts +4 -0
- package/dist/esm/Form/demo/async-validate.js +2 -2
- package/dist/esm/Form/demo/validate.js +2 -2
- package/dist/esm/Form/form-store.js +33 -10
- package/dist/esm/Form/hooks/useForm.js +0 -175
- package/dist/esm/Form/index.d.ts +1 -1
- package/dist/esm/Form/interface.d.ts +9 -2
- package/dist/esm/Form/utils/path.js +2 -1
- package/dist/esm/Popconfirm/interface.d.ts +0 -4
- package/dist/esm/Select/select.js +2 -1
- package/dist/esm/TableSelect/table-select.js +2 -2
- package/dist/esm/TreeSelect/tree-select.js +21 -7
- 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/Badge/badge.tsx +2 -1
- package/src/Badge/interface.ts +4 -0
- package/src/Form/demo/async-validate.tsx +3 -2
- package/src/Form/demo/validate.tsx +3 -2
- package/src/Form/form-store.test.ts +156 -0
- package/src/Form/form-store.ts +28 -9
- package/src/Form/hooks/useForm.ts +0 -175
- package/src/Form/index.en-US.md +92 -92
- package/src/Form/index.ts +1 -0
- package/src/Form/index.zh-CN.md +55 -55
- package/src/Form/interface.ts +9 -2
- package/src/Form/utils/path.ts +2 -1
- package/src/Popconfirm/interface.ts +0 -4
- package/src/Select/select.tsx +2 -1
- package/src/TableSelect/table-select.tsx +1 -0
- package/src/TreeSelect/tree-select.tsx +22 -5
- package/src/version.ts +1 -1
package/dist/cjs/Badge/badge.js
CHANGED
|
@@ -86,7 +86,8 @@ var InternalBadge = (baseprops) => {
|
|
|
86
86
|
active = false,
|
|
87
87
|
className,
|
|
88
88
|
styles,
|
|
89
|
-
classNames
|
|
89
|
+
classNames,
|
|
90
|
+
title
|
|
90
91
|
} = _a, rest = __objRest(_a, [
|
|
91
92
|
"prefixCls",
|
|
92
93
|
"children",
|
|
@@ -103,7 +104,8 @@ var InternalBadge = (baseprops) => {
|
|
|
103
104
|
"active",
|
|
104
105
|
"className",
|
|
105
106
|
"styles",
|
|
106
|
-
"classNames"
|
|
107
|
+
"classNames",
|
|
108
|
+
"title"
|
|
107
109
|
]);
|
|
108
110
|
let supNode;
|
|
109
111
|
let supTitle = "";
|
|
@@ -115,7 +117,7 @@ var InternalBadge = (baseprops) => {
|
|
|
115
117
|
if (count === null || count === void 0)
|
|
116
118
|
return null;
|
|
117
119
|
if (typeof count === "number") {
|
|
118
|
-
supTitle = String(count);
|
|
120
|
+
supTitle = title || String(count);
|
|
119
121
|
if (count === 0 && !showZero)
|
|
120
122
|
return null;
|
|
121
123
|
return /* @__PURE__ */ import_react.default.createElement(
|
|
@@ -65,8 +65,8 @@ var async_validate_default = () => {
|
|
|
65
65
|
const onFinish = (values) => {
|
|
66
66
|
console.log("Received values:", values);
|
|
67
67
|
};
|
|
68
|
-
const onFinishFailed = (
|
|
69
|
-
console.log("Failed:",
|
|
68
|
+
const onFinishFailed = (errors) => {
|
|
69
|
+
console.log("Failed:", errors);
|
|
70
70
|
};
|
|
71
71
|
return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form, { form, onFinish, onFinishFailed }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid, null, /* @__PURE__ */ import_react.default.createElement(
|
|
72
72
|
import_yee_c.Form.Field,
|
|
@@ -39,8 +39,8 @@ var validate_default = () => {
|
|
|
39
39
|
const onFinish = (values) => {
|
|
40
40
|
console.log("Received values:", values);
|
|
41
41
|
};
|
|
42
|
-
const onFinishFailed = (
|
|
43
|
-
console.log("Failed:",
|
|
42
|
+
const onFinishFailed = (errors) => {
|
|
43
|
+
console.log("Failed:", errors);
|
|
44
44
|
};
|
|
45
45
|
return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form, { form, onFinish, onFinishFailed }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid, null, /* @__PURE__ */ import_react.default.createElement(
|
|
46
46
|
import_yee_c.Form.Field,
|
|
@@ -201,7 +201,7 @@ var FormStore = class {
|
|
|
201
201
|
this.setFieldsValue = (newStore, trigger = "onChange") => {
|
|
202
202
|
var _a, _b, _c, _d;
|
|
203
203
|
if (trigger === "reset" || trigger === "clear") {
|
|
204
|
-
this.store = newStore;
|
|
204
|
+
this.store = trigger === "reset" ? newStore : __spreadValues(__spreadValues({}, this.store), newStore);
|
|
205
205
|
if (trigger === "reset") {
|
|
206
206
|
(_b = (_a = this.callbacks) == null ? void 0 : _a.onReset) == null ? void 0 : _b.call(_a);
|
|
207
207
|
} else {
|
|
@@ -269,13 +269,26 @@ var FormStore = class {
|
|
|
269
269
|
this.refreshField();
|
|
270
270
|
};
|
|
271
271
|
this.clearFields = (name) => {
|
|
272
|
+
var _a, _b;
|
|
272
273
|
const names = name || Object.keys(this.store);
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
274
|
+
let clearStore = __spreadValues({}, this.store);
|
|
275
|
+
names.forEach((n) => {
|
|
276
|
+
const parsedPath = (0, import_path.parsePath)(n);
|
|
277
|
+
if (parsedPath.length > 1) {
|
|
278
|
+
clearStore = (0, import_path.setValueByPath)(clearStore, parsedPath, void 0);
|
|
279
|
+
} else {
|
|
280
|
+
clearStore[n] = void 0;
|
|
281
|
+
}
|
|
282
|
+
});
|
|
283
|
+
this.deleteRelatedEntries(this.validateMessages, name);
|
|
277
284
|
this.clearFieldStatuses(name);
|
|
278
|
-
this.
|
|
285
|
+
this.store = clearStore;
|
|
286
|
+
(_b = (_a = this.callbacks) == null ? void 0 : _a.onClear) == null ? void 0 : _b.call(_a);
|
|
287
|
+
this.getRelatedFieldNames(names).forEach((fieldName) => {
|
|
288
|
+
var _a2;
|
|
289
|
+
(_a2 = this.fieldMap.get(fieldName)) == null ? void 0 : _a2.onStoreChange();
|
|
290
|
+
});
|
|
291
|
+
this.notifyWatchers(names);
|
|
279
292
|
};
|
|
280
293
|
this.validateField = (name, trigger) => __async(this, null, function* () {
|
|
281
294
|
var _a;
|
package/dist/cjs/Form/index.d.ts
CHANGED
|
@@ -16,5 +16,5 @@ type FormInterface = typeof InternalForm & {
|
|
|
16
16
|
List: typeof List;
|
|
17
17
|
};
|
|
18
18
|
declare const Form: FormInterface;
|
|
19
|
-
export type { FieldGroupProps, FieldStatus, FieldStatusData, FormInstance, FormListProps, FormProps, } from './interface';
|
|
19
|
+
export type { FieldGroupProps, FieldStatus, FieldStatusData, FormInstance, FormListProps, FormProps, ValidateMessage, } from './interface';
|
|
20
20
|
export default Form;
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
import type { TooltipProps } from '../Tooltip';
|
|
3
3
|
import type { DataAttributeProps } from '../utils/types';
|
|
4
4
|
export type StoreValue = any;
|
|
5
|
+
/**
|
|
6
|
+
* Form values keyed by field name. Nested-path fields (e.g.
|
|
7
|
+
* name="user.name") hold their values in nested objects:
|
|
8
|
+
* `{ user: { name: 'tom' } }`
|
|
9
|
+
*/
|
|
5
10
|
export type Store = Record<string, StoreValue>;
|
|
6
11
|
export type Name = string;
|
|
7
12
|
export type NamePath = string | string[] | number | (string | number)[];
|
|
@@ -37,7 +42,9 @@ export interface FormProps<Values = any> extends DataAttributeProps {
|
|
|
37
42
|
*/
|
|
38
43
|
disabled?: boolean;
|
|
39
44
|
/**
|
|
40
|
-
* Initial values
|
|
45
|
+
* Initial values, keyed by field name. Nested-path fields (e.g.
|
|
46
|
+
* name="user.name") take their values from nested objects:
|
|
47
|
+
* `{ user: { name: 'tom' } }`
|
|
41
48
|
*/
|
|
42
49
|
initialValues?: Store;
|
|
43
50
|
/**
|
|
@@ -81,7 +88,7 @@ export interface Callbacks<Values = any> {
|
|
|
81
88
|
/**
|
|
82
89
|
* Triggered on failed form submit
|
|
83
90
|
* */
|
|
84
|
-
onFinishFailed?: (
|
|
91
|
+
onFinishFailed?: (errors: ValidateMessage[]) => void;
|
|
85
92
|
/**
|
|
86
93
|
* Triggered on form reset
|
|
87
94
|
* */
|
|
@@ -71,7 +71,7 @@ function setValueByPath(store, path, value) {
|
|
|
71
71
|
let current = newStore;
|
|
72
72
|
for (let i = 0; i < path.length - 1; i++) {
|
|
73
73
|
const key = String(path[i]);
|
|
74
|
-
if (
|
|
74
|
+
if (current[key] == null) {
|
|
75
75
|
current[key] = typeof path[i + 1] === "number" ? [] : {};
|
|
76
76
|
}
|
|
77
77
|
current = current[key];
|
|
@@ -69,6 +69,7 @@ var import_useMergedState = __toESM(require("../hooks/useMergedState"));
|
|
|
69
69
|
var import_mergeContextToProps = __toESM(require("../utils/mergeContextToProps"));
|
|
70
70
|
var import_useSelectKeyboard = __toESM(require("./hooks/useSelectKeyboard"));
|
|
71
71
|
var import_options = __toESM(require("./options"));
|
|
72
|
+
var import_omit = __toESM(require("../utils/omit"));
|
|
72
73
|
var import_style = require("./style/index.less");
|
|
73
74
|
function matchValue(a, b, loose) {
|
|
74
75
|
if (loose)
|
|
@@ -264,7 +265,7 @@ var Select = (baseprops) => {
|
|
|
264
265
|
}),
|
|
265
266
|
/* @__PURE__ */ import_react.default.createElement(
|
|
266
267
|
import_Selector.default,
|
|
267
|
-
__spreadProps(__spreadValues({}, rest), {
|
|
268
|
+
__spreadProps(__spreadValues({}, (0, import_omit.default)(rest, ["forceRender"])), {
|
|
268
269
|
mode,
|
|
269
270
|
value: searchValue,
|
|
270
271
|
options,
|
|
@@ -225,7 +225,7 @@ var TableSelect = (baseprops) => {
|
|
|
225
225
|
const renderPopup = () => /* @__PURE__ */ import_react.default.createElement(import_internal_table.default, __spreadProps(__spreadValues({}, tableProps), { value, rowKey }));
|
|
226
226
|
return /* @__PURE__ */ import_react.default.createElement(
|
|
227
227
|
import_Trigger.default,
|
|
228
|
-
{
|
|
228
|
+
__spreadProps(__spreadValues({}, rest), {
|
|
229
229
|
trigger: "click",
|
|
230
230
|
popupClassName: `${prefixCls}-popup`,
|
|
231
231
|
popup: renderPopup(),
|
|
@@ -233,7 +233,7 @@ var TableSelect = (baseprops) => {
|
|
|
233
233
|
hideOnClick: selectionType === "radio" ? true : false,
|
|
234
234
|
onOpenChange: onVisibleChange,
|
|
235
235
|
stretch: "minWidth"
|
|
236
|
-
},
|
|
236
|
+
}),
|
|
237
237
|
/* @__PURE__ */ import_react.default.createElement(import_Selector.default, __spreadValues({}, selectorProps))
|
|
238
238
|
);
|
|
239
239
|
};
|
|
@@ -138,6 +138,16 @@ var TreeSelect = (baseprops) => {
|
|
|
138
138
|
),
|
|
139
139
|
[dataSource, mergedFieldNames]
|
|
140
140
|
);
|
|
141
|
+
const keyItemMap = (0, import_react.useMemo)(() => {
|
|
142
|
+
const map = /* @__PURE__ */ new Map();
|
|
143
|
+
itemMap.forEach((item) => {
|
|
144
|
+
const k = String(item.key);
|
|
145
|
+
if (!map.has(k)) {
|
|
146
|
+
map.set(k, item);
|
|
147
|
+
}
|
|
148
|
+
});
|
|
149
|
+
return map;
|
|
150
|
+
}, [itemMap]);
|
|
141
151
|
const filteredDataSource = (0, import_react.useMemo)(() => {
|
|
142
152
|
const sourceArray = Array.isArray(dataSource) ? dataSource : [dataSource];
|
|
143
153
|
if (!searchValue) {
|
|
@@ -170,7 +180,7 @@ var TreeSelect = (baseprops) => {
|
|
|
170
180
|
}, [searchValue, dataSource, mergedFieldNames, onFilter]);
|
|
171
181
|
const selectedOptions = (0, import_react.useMemo)(() => {
|
|
172
182
|
return mergedValue.map((key) => {
|
|
173
|
-
const item =
|
|
183
|
+
const item = keyItemMap.get(String(key));
|
|
174
184
|
if (!item)
|
|
175
185
|
return null;
|
|
176
186
|
const label = typeof optionLabelProp === "function" ? optionLabelProp(item.original) : String(item[optionLabelProp] || item.label);
|
|
@@ -179,7 +189,7 @@ var TreeSelect = (baseprops) => {
|
|
|
179
189
|
label
|
|
180
190
|
}, item.original);
|
|
181
191
|
}).filter(Boolean);
|
|
182
|
-
}, [mergedValue,
|
|
192
|
+
}, [mergedValue, keyItemMap, optionLabelProp]);
|
|
183
193
|
const getNodes = (keys) => {
|
|
184
194
|
var _a2;
|
|
185
195
|
if (keys === "" || keys === null) {
|
|
@@ -191,10 +201,10 @@ var TreeSelect = (baseprops) => {
|
|
|
191
201
|
}
|
|
192
202
|
return keys.map((key) => {
|
|
193
203
|
var _a3;
|
|
194
|
-
return (_a3 =
|
|
204
|
+
return (_a3 = keyItemMap.get(String(key))) == null ? void 0 : _a3.original;
|
|
195
205
|
}).filter((node) => node !== void 0);
|
|
196
206
|
}
|
|
197
|
-
return (_a2 =
|
|
207
|
+
return (_a2 = keyItemMap.get(String(keys))) == null ? void 0 : _a2.original;
|
|
198
208
|
};
|
|
199
209
|
const handleSelect = (selectedKeys) => {
|
|
200
210
|
let keys;
|
|
@@ -264,7 +274,7 @@ var TreeSelect = (baseprops) => {
|
|
|
264
274
|
}),
|
|
265
275
|
/* @__PURE__ */ import_react.default.createElement(
|
|
266
276
|
import_Selector.default,
|
|
267
|
-
__spreadProps(__spreadValues({}, (0, import_omit.default)(rest, ["showLine"])), {
|
|
277
|
+
__spreadProps(__spreadValues({}, (0, import_omit.default)(rest, ["showLine", "forceRender"])), {
|
|
268
278
|
className: `${prefixCls}-selector`,
|
|
269
279
|
mode,
|
|
270
280
|
value: searchValue,
|
package/dist/cjs/version.d.ts
CHANGED
package/dist/cjs/version.js
CHANGED
package/dist/esm/Badge/badge.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
-
var _excluded = ["prefixCls", "children", "count", "showZero", "dot", "size", "status", "offset", "style", "color", "overflowCount", "text", "active", "className", "styles", "classNames"];
|
|
2
|
+
var _excluded = ["prefixCls", "children", "count", "showZero", "dot", "size", "status", "offset", "style", "color", "overflowCount", "text", "active", "className", "styles", "classNames", "title"];
|
|
3
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
4
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
5
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -40,6 +40,7 @@ var InternalBadge = function InternalBadge(baseprops) {
|
|
|
40
40
|
className = props.className,
|
|
41
41
|
styles = props.styles,
|
|
42
42
|
classNames = props.classNames,
|
|
43
|
+
title = props.title,
|
|
43
44
|
rest = _objectWithoutProperties(props, _excluded);
|
|
44
45
|
var supNode;
|
|
45
46
|
var supTitle = '';
|
|
@@ -49,7 +50,7 @@ var InternalBadge = function InternalBadge(baseprops) {
|
|
|
49
50
|
var renderCountNode = function renderCountNode() {
|
|
50
51
|
if (count === null || count === undefined) return null;
|
|
51
52
|
if (typeof count === 'number') {
|
|
52
|
-
supTitle = String(count);
|
|
53
|
+
supTitle = title || String(count);
|
|
53
54
|
|
|
54
55
|
// When count is 0 and showZero is false, return null
|
|
55
56
|
if (count === 0 && !showZero) return null;
|
|
@@ -27,8 +27,8 @@ export default (function () {
|
|
|
27
27
|
var onFinish = function onFinish(values) {
|
|
28
28
|
console.log('Received values:', values);
|
|
29
29
|
};
|
|
30
|
-
var onFinishFailed = function onFinishFailed(
|
|
31
|
-
console.log('Failed:',
|
|
30
|
+
var onFinishFailed = function onFinishFailed(errors) {
|
|
31
|
+
console.log('Failed:', errors);
|
|
32
32
|
};
|
|
33
33
|
return /*#__PURE__*/React.createElement(Form, {
|
|
34
34
|
form: form,
|
|
@@ -13,8 +13,8 @@ export default (function () {
|
|
|
13
13
|
var onFinish = function onFinish(values) {
|
|
14
14
|
console.log('Received values:', values);
|
|
15
15
|
};
|
|
16
|
-
var onFinishFailed = function onFinishFailed(
|
|
17
|
-
console.log('Failed:',
|
|
16
|
+
var onFinishFailed = function onFinishFailed(errors) {
|
|
17
|
+
console.log('Failed:', errors);
|
|
18
18
|
};
|
|
19
19
|
return /*#__PURE__*/React.createElement(Form, {
|
|
20
20
|
form: form,
|
|
@@ -172,7 +172,10 @@ export var FormStore = /*#__PURE__*/function () {
|
|
|
172
172
|
_defineProperty(this, "setFieldsValue", function (newStore) {
|
|
173
173
|
var trigger = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'onChange';
|
|
174
174
|
if (trigger === 'reset' || trigger === 'clear') {
|
|
175
|
-
|
|
175
|
+
// 'reset' replaces the whole store; 'clear' merges the given keys
|
|
176
|
+
// (typically undefined) over the store so a partial clear never
|
|
177
|
+
// wipes values of unrelated fields.
|
|
178
|
+
_this.store = trigger === 'reset' ? newStore : _objectSpread(_objectSpread({}, _this.store), newStore);
|
|
176
179
|
if (trigger === 'reset') {
|
|
177
180
|
var _this$callbacks, _this$callbacks$onRes;
|
|
178
181
|
(_this$callbacks = _this.callbacks) === null || _this$callbacks === void 0 || (_this$callbacks$onRes = _this$callbacks.onReset) === null || _this$callbacks$onRes === void 0 || _this$callbacks$onRes.call(_this$callbacks);
|
|
@@ -259,13 +262,33 @@ export var FormStore = /*#__PURE__*/function () {
|
|
|
259
262
|
_this.refreshField();
|
|
260
263
|
});
|
|
261
264
|
_defineProperty(this, "clearFields", function (name) {
|
|
265
|
+
var _this$callbacks5, _this$callbacks5$onCl;
|
|
262
266
|
var names = name || Object.keys(_this.store);
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
},
|
|
267
|
+
|
|
268
|
+
// Merge undefined over the current store (nested paths included) —
|
|
269
|
+
// unrelated fields keep their values.
|
|
270
|
+
var clearStore = _objectSpread({}, _this.store);
|
|
271
|
+
names.forEach(function (n) {
|
|
272
|
+
var parsedPath = parsePath(n);
|
|
273
|
+
if (parsedPath.length > 1) {
|
|
274
|
+
clearStore = setValueByPath(clearStore, parsedPath, undefined);
|
|
275
|
+
} else {
|
|
276
|
+
clearStore[n] = undefined;
|
|
277
|
+
}
|
|
278
|
+
});
|
|
279
|
+
_this.deleteRelatedEntries(_this.validateMessages, name);
|
|
267
280
|
_this.clearFieldStatuses(name);
|
|
268
|
-
_this.
|
|
281
|
+
_this.store = clearStore;
|
|
282
|
+
(_this$callbacks5 = _this.callbacks) === null || _this$callbacks5 === void 0 || (_this$callbacks5$onCl = _this$callbacks5.onClear) === null || _this$callbacks5$onCl === void 0 || _this$callbacks5$onCl.call(_this$callbacks5);
|
|
283
|
+
|
|
284
|
+
// clearStore carries the whole store (nested paths must materialize
|
|
285
|
+
// it), so derive the refresh scope from `names` — only cleared
|
|
286
|
+
// fields re-render, not the entire form.
|
|
287
|
+
_this.getRelatedFieldNames(names).forEach(function (fieldName) {
|
|
288
|
+
var _this$fieldMap$get2;
|
|
289
|
+
(_this$fieldMap$get2 = _this.fieldMap.get(fieldName)) === null || _this$fieldMap$get2 === void 0 || _this$fieldMap$get2.onStoreChange();
|
|
290
|
+
});
|
|
291
|
+
_this.notifyWatchers(names);
|
|
269
292
|
});
|
|
270
293
|
_defineProperty(this, "validateField", /*#__PURE__*/function () {
|
|
271
294
|
var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(name, trigger) {
|
|
@@ -411,8 +434,8 @@ export var FormStore = /*#__PURE__*/function () {
|
|
|
411
434
|
var changedKeys = Object.keys(newStore);
|
|
412
435
|
var fieldNames = relatedFieldNames !== null && relatedFieldNames !== void 0 ? relatedFieldNames : _this.getRelatedFieldNames(changedKeys);
|
|
413
436
|
fieldNames.forEach(function (fieldName) {
|
|
414
|
-
var _this$fieldMap$
|
|
415
|
-
(_this$fieldMap$
|
|
437
|
+
var _this$fieldMap$get3;
|
|
438
|
+
(_this$fieldMap$get3 = _this.fieldMap.get(fieldName)) === null || _this$fieldMap$get3 === void 0 || _this$fieldMap$get3.onStoreChange();
|
|
416
439
|
});
|
|
417
440
|
_this.notifyWatchers(changedKeys);
|
|
418
441
|
} else {
|
|
@@ -641,11 +664,11 @@ export var FormStore = /*#__PURE__*/function () {
|
|
|
641
664
|
};
|
|
642
665
|
});
|
|
643
666
|
_defineProperty(this, "submit", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
|
|
644
|
-
var _this$
|
|
667
|
+
var _this$callbacks6, onFinish, onFinishFailed, fieldErrors, groupErrors, statusErrors, allErrors;
|
|
645
668
|
return _regeneratorRuntime().wrap(function _callee4$(_context4) {
|
|
646
669
|
while (1) switch (_context4.prev = _context4.next) {
|
|
647
670
|
case 0:
|
|
648
|
-
_this$
|
|
671
|
+
_this$callbacks6 = _this.callbacks, onFinish = _this$callbacks6.onFinish, onFinishFailed = _this$callbacks6.onFinishFailed;
|
|
649
672
|
_context4.next = 3;
|
|
650
673
|
return _this.validateFields();
|
|
651
674
|
case 3:
|
|
@@ -1,178 +1,3 @@
|
|
|
1
|
-
// import { useRef } from 'react';
|
|
2
|
-
// import type {
|
|
3
|
-
// Callbacks,
|
|
4
|
-
// FieldEntity,
|
|
5
|
-
// FormInstance,
|
|
6
|
-
// NamePath,
|
|
7
|
-
// Store,
|
|
8
|
-
// validateMessage,
|
|
9
|
-
// } from './interface';
|
|
10
|
-
// import validate from './utils/validate';
|
|
11
|
-
|
|
12
|
-
// class FormStore {
|
|
13
|
-
// private store: Store = {};
|
|
14
|
-
// private callbacks: Callbacks = {};
|
|
15
|
-
// private fieldEntities: FieldEntity[] = [];
|
|
16
|
-
// private validateMessages: validateMessage[] = [];
|
|
17
|
-
// private initialized = false;
|
|
18
|
-
// // 初始化form实例
|
|
19
|
-
// initialize = ({
|
|
20
|
-
// initialValues,
|
|
21
|
-
// callbacks,
|
|
22
|
-
// }: {
|
|
23
|
-
// initialValues?: Store;
|
|
24
|
-
// callbacks?: Callbacks;
|
|
25
|
-
// }) => {
|
|
26
|
-
// if (!this.initialized) {
|
|
27
|
-
// this.initialized = true;
|
|
28
|
-
|
|
29
|
-
// if (initialValues) {
|
|
30
|
-
// this.store = initialValues;
|
|
31
|
-
// } else {
|
|
32
|
-
// this.store = {};
|
|
33
|
-
// }
|
|
34
|
-
|
|
35
|
-
// if (callbacks) {
|
|
36
|
-
// this.setCallbacks(callbacks);
|
|
37
|
-
// }
|
|
38
|
-
// }
|
|
39
|
-
// };
|
|
40
|
-
|
|
41
|
-
// getFieldsValue = () => {
|
|
42
|
-
// return { ...this.store };
|
|
43
|
-
// };
|
|
44
|
-
|
|
45
|
-
// getFieldValue = (name: NamePath) => {
|
|
46
|
-
// return this.store[name];
|
|
47
|
-
// };
|
|
48
|
-
|
|
49
|
-
// getFieldValidate = (name: NamePath) => {
|
|
50
|
-
// return this.validateMessages?.find((item) => item.name === name);
|
|
51
|
-
// };
|
|
52
|
-
|
|
53
|
-
// resetFields = (name?: NamePath[]) => {
|
|
54
|
-
// if (name) {
|
|
55
|
-
// name.forEach((n) => {
|
|
56
|
-
// this.setFieldsValue({ [n]: undefined });
|
|
57
|
-
// });
|
|
58
|
-
// } else {
|
|
59
|
-
// Object.keys(this.store).forEach((key) => {
|
|
60
|
-
// this.setFieldsValue({ [key]: undefined });
|
|
61
|
-
// });
|
|
62
|
-
// }
|
|
63
|
-
// };
|
|
64
|
-
|
|
65
|
-
// validateFields = () => {
|
|
66
|
-
// const err: validateMessage[] = [];
|
|
67
|
-
// this.fieldEntities.forEach((entity) => {
|
|
68
|
-
// const { name, rules, required } = entity.props;
|
|
69
|
-
// const value: NamePath = name && this.getFieldValue(name);
|
|
70
|
-
|
|
71
|
-
// const mergedRules = rules || [];
|
|
72
|
-
|
|
73
|
-
// if (required) {
|
|
74
|
-
// mergedRules.push({
|
|
75
|
-
// required: true,
|
|
76
|
-
// message: 'This is required field.',
|
|
77
|
-
// });
|
|
78
|
-
// }
|
|
79
|
-
|
|
80
|
-
// mergedRules.forEach((rule) => {
|
|
81
|
-
// const mark = validate(rule, value);
|
|
82
|
-
// if (name && !mark) {
|
|
83
|
-
// err.push({
|
|
84
|
-
// name: name,
|
|
85
|
-
// status: 'error',
|
|
86
|
-
// value,
|
|
87
|
-
// ...rule
|
|
88
|
-
// });
|
|
89
|
-
// }
|
|
90
|
-
// });
|
|
91
|
-
// });
|
|
92
|
-
// return err;
|
|
93
|
-
// };
|
|
94
|
-
|
|
95
|
-
// setFieldsValue = (newStore: Store, isChange?: boolean) => {
|
|
96
|
-
// // const { onValuesChange } = this.callbacks;
|
|
97
|
-
// this.store = {
|
|
98
|
-
// ...this.store,
|
|
99
|
-
// ...newStore,
|
|
100
|
-
// };
|
|
101
|
-
// // onValuesChange?.(newStore, this.store);
|
|
102
|
-
// this.refreshField(newStore, isChange);
|
|
103
|
-
// };
|
|
104
|
-
|
|
105
|
-
// refreshField = (newStore?: Store, isChange?: boolean) => {
|
|
106
|
-
// if (newStore) {
|
|
107
|
-
// this.fieldEntities.forEach((entity) => {
|
|
108
|
-
// Object.keys(newStore).forEach((k) => {
|
|
109
|
-
// if (k === entity.props.name) {
|
|
110
|
-
// if (isChange) {
|
|
111
|
-
// this.validateMessages = this.validateFields();
|
|
112
|
-
// }
|
|
113
|
-
// entity.onStoreChange();
|
|
114
|
-
// }
|
|
115
|
-
// });
|
|
116
|
-
// });
|
|
117
|
-
// } else {
|
|
118
|
-
// this.fieldEntities.forEach((entity) => {
|
|
119
|
-
// if (entity.props.rules || entity.props.required) {
|
|
120
|
-
// entity?.onStoreChange();
|
|
121
|
-
// }
|
|
122
|
-
// });
|
|
123
|
-
// }
|
|
124
|
-
// };
|
|
125
|
-
|
|
126
|
-
// setCallbacks = (callbacks: Callbacks) => {
|
|
127
|
-
// this.callbacks = { ...this.callbacks, ...callbacks };
|
|
128
|
-
// };
|
|
129
|
-
|
|
130
|
-
// getCallbacks = () => {
|
|
131
|
-
// return this.callbacks;
|
|
132
|
-
// };
|
|
133
|
-
|
|
134
|
-
// // 订阅与取消订阅
|
|
135
|
-
// registerFieldEntities = (entity: FieldEntity) => {
|
|
136
|
-
// this.fieldEntities.push(entity);
|
|
137
|
-
// if (entity.props.name) {
|
|
138
|
-
// this.store = { ...this.store, [entity.props.name]: undefined };
|
|
139
|
-
// }
|
|
140
|
-
// return () => {
|
|
141
|
-
// this.fieldEntities = this.fieldEntities.filter((item) => item !== entity);
|
|
142
|
-
// const { name } = entity.props;
|
|
143
|
-
// if (name) {
|
|
144
|
-
// delete this.store[name];
|
|
145
|
-
// }
|
|
146
|
-
// };
|
|
147
|
-
// };
|
|
148
|
-
|
|
149
|
-
// submit = () => {
|
|
150
|
-
// const { onFinish, onFinishFailed } = this.callbacks;
|
|
151
|
-
// this.validateMessages = this.validateFields();
|
|
152
|
-
// if (this.validateMessages.length === 0) {
|
|
153
|
-
// onFinish?.(this.getFieldsValue());
|
|
154
|
-
// } else {
|
|
155
|
-
// onFinishFailed?.(this.validateMessages);
|
|
156
|
-
// }
|
|
157
|
-
// this.refreshField();
|
|
158
|
-
// };
|
|
159
|
-
|
|
160
|
-
// getForm(): FormInstance {
|
|
161
|
-
// return {
|
|
162
|
-
// getFieldValidate: this.getFieldValidate,
|
|
163
|
-
// getFieldsValue: this.getFieldsValue,
|
|
164
|
-
// getFieldValue: this.getFieldValue,
|
|
165
|
-
// setFieldsValue: this.setFieldsValue,
|
|
166
|
-
// resetFields: this.resetFields,
|
|
167
|
-
// submit: this.submit,
|
|
168
|
-
// setCallbacks: this.setCallbacks,
|
|
169
|
-
// getCallbacks: this.getCallbacks,
|
|
170
|
-
// registerFieldEntities: this.registerFieldEntities,
|
|
171
|
-
// initialize: this.initialize,
|
|
172
|
-
// };
|
|
173
|
-
// }
|
|
174
|
-
// }
|
|
175
|
-
|
|
176
1
|
import { useRef } from 'react';
|
|
177
2
|
import { useLocale } from "../../locale";
|
|
178
3
|
import { FormStore } from "../form-store";
|
package/dist/esm/Form/index.d.ts
CHANGED
|
@@ -16,5 +16,5 @@ type FormInterface = typeof InternalForm & {
|
|
|
16
16
|
List: typeof List;
|
|
17
17
|
};
|
|
18
18
|
declare const Form: FormInterface;
|
|
19
|
-
export type { FieldGroupProps, FieldStatus, FieldStatusData, FormInstance, FormListProps, FormProps, } from './interface';
|
|
19
|
+
export type { FieldGroupProps, FieldStatus, FieldStatusData, FormInstance, FormListProps, FormProps, ValidateMessage, } from './interface';
|
|
20
20
|
export default Form;
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
import type { TooltipProps } from '../Tooltip';
|
|
3
3
|
import type { DataAttributeProps } from '../utils/types';
|
|
4
4
|
export type StoreValue = any;
|
|
5
|
+
/**
|
|
6
|
+
* Form values keyed by field name. Nested-path fields (e.g.
|
|
7
|
+
* name="user.name") hold their values in nested objects:
|
|
8
|
+
* `{ user: { name: 'tom' } }`
|
|
9
|
+
*/
|
|
5
10
|
export type Store = Record<string, StoreValue>;
|
|
6
11
|
export type Name = string;
|
|
7
12
|
export type NamePath = string | string[] | number | (string | number)[];
|
|
@@ -37,7 +42,9 @@ export interface FormProps<Values = any> extends DataAttributeProps {
|
|
|
37
42
|
*/
|
|
38
43
|
disabled?: boolean;
|
|
39
44
|
/**
|
|
40
|
-
* Initial values
|
|
45
|
+
* Initial values, keyed by field name. Nested-path fields (e.g.
|
|
46
|
+
* name="user.name") take their values from nested objects:
|
|
47
|
+
* `{ user: { name: 'tom' } }`
|
|
41
48
|
*/
|
|
42
49
|
initialValues?: Store;
|
|
43
50
|
/**
|
|
@@ -81,7 +88,7 @@ export interface Callbacks<Values = any> {
|
|
|
81
88
|
/**
|
|
82
89
|
* Triggered on failed form submit
|
|
83
90
|
* */
|
|
84
|
-
onFinishFailed?: (
|
|
91
|
+
onFinishFailed?: (errors: ValidateMessage[]) => void;
|
|
85
92
|
/**
|
|
86
93
|
* Triggered on form reset
|
|
87
94
|
* */
|