@rainbow-oh/yee-c 0.8.20 → 0.9.0
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/Field.js +6 -6
- package/dist/cjs/Form/demo/field-status.d.ts +3 -0
- package/dist/cjs/Form/demo/field-status.js +116 -0
- package/dist/cjs/Form/form-store.d.ts +6 -1
- package/dist/cjs/Form/form-store.js +74 -2
- package/dist/cjs/Form/index.d.ts +1 -1
- package/dist/cjs/Form/interface.d.ts +17 -1
- package/dist/cjs/Form/style/index.less +26 -0
- 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/Field.js +6 -6
- package/dist/esm/Form/demo/field-status.d.ts +3 -0
- package/dist/esm/Form/demo/field-status.js +104 -0
- package/dist/esm/Form/form-store.d.ts +6 -1
- package/dist/esm/Form/form-store.js +88 -6
- package/dist/esm/Form/index.d.ts +1 -1
- package/dist/esm/Form/interface.d.ts +17 -1
- package/dist/esm/Form/style/index.less +26 -0
- 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.css +1 -1
- package/dist/umd/yee-c.min.js +1 -1
- package/package.json +1 -1
- package/src/Form/Field.tsx +7 -8
- package/src/Form/demo/field-status.tsx +108 -0
- package/src/Form/form-store.ts +92 -2
- package/src/Form/index.en-US.md +6 -1
- package/src/Form/index.ts +2 -0
- package/src/Form/index.zh-CN.md +6 -1
- package/src/Form/interface.ts +19 -1
- package/src/Form/style/index.less +26 -0
- package/src/version.ts +1 -1
|
@@ -46,6 +46,7 @@ export var FormStore = /*#__PURE__*/function () {
|
|
|
46
46
|
_defineProperty(this, "fieldEntities", []);
|
|
47
47
|
_defineProperty(this, "fieldMap", new Map());
|
|
48
48
|
_defineProperty(this, "validateMessages", new Map());
|
|
49
|
+
_defineProperty(this, "fieldStatuses", new Map());
|
|
49
50
|
_defineProperty(this, "initialized", false);
|
|
50
51
|
_defineProperty(this, "initialValues", {});
|
|
51
52
|
// List key manager
|
|
@@ -109,6 +110,65 @@ export var FormStore = /*#__PURE__*/function () {
|
|
|
109
110
|
}
|
|
110
111
|
return null;
|
|
111
112
|
});
|
|
113
|
+
_defineProperty(this, "getFieldStatus", function (name) {
|
|
114
|
+
var _this$validateMessage;
|
|
115
|
+
var normalizedName = stringifyPath(getNamePath(name));
|
|
116
|
+
var manualStatus = _this.fieldStatuses.get(normalizedName);
|
|
117
|
+
var validateMessage = (_this$validateMessage = _this.validateMessages.get(normalizedName)) === null || _this$validateMessage === void 0 ? void 0 : _this$validateMessage[0];
|
|
118
|
+
|
|
119
|
+
// Rule errors reflect the current value and auto-clear once validation
|
|
120
|
+
// passes, so they always take display precedence — a stale manually set
|
|
121
|
+
// status must never hide why submission failed.
|
|
122
|
+
if ((validateMessage === null || validateMessage === void 0 ? void 0 : validateMessage.status) === 'error') {
|
|
123
|
+
return {
|
|
124
|
+
status: 'error',
|
|
125
|
+
message: validateMessage.message
|
|
126
|
+
};
|
|
127
|
+
}
|
|
128
|
+
if (manualStatus) {
|
|
129
|
+
return _objectSpread({}, manualStatus);
|
|
130
|
+
}
|
|
131
|
+
if (validateMessage) {
|
|
132
|
+
return {
|
|
133
|
+
status: validateMessage.status,
|
|
134
|
+
message: validateMessage.message
|
|
135
|
+
};
|
|
136
|
+
}
|
|
137
|
+
return null;
|
|
138
|
+
});
|
|
139
|
+
_defineProperty(this, "setFieldStatus", function (name, status) {
|
|
140
|
+
var _this$fieldMap$get;
|
|
141
|
+
var normalizedName = stringifyPath(getNamePath(name));
|
|
142
|
+
if (!normalizedName) return;
|
|
143
|
+
if (status) {
|
|
144
|
+
_this.fieldStatuses.set(normalizedName, _objectSpread({}, status));
|
|
145
|
+
} else {
|
|
146
|
+
_this.fieldStatuses.delete(normalizedName);
|
|
147
|
+
}
|
|
148
|
+
(_this$fieldMap$get = _this.fieldMap.get(normalizedName)) === null || _this$fieldMap$get === void 0 || _this$fieldMap$get.onStoreChange();
|
|
149
|
+
});
|
|
150
|
+
// Delete entries whose key equals or nests under one of `names`
|
|
151
|
+
// (no names = delete all). Keeps rule messages and manual statuses in
|
|
152
|
+
// sync with the fields that reset/clear actually touched.
|
|
153
|
+
_defineProperty(this, "deleteRelatedEntries", function (entries, names) {
|
|
154
|
+
if (!names) {
|
|
155
|
+
entries.clear();
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
158
|
+
var normalizedNames = names.map(function (name) {
|
|
159
|
+
return stringifyPath(getNamePath(name));
|
|
160
|
+
});
|
|
161
|
+
Array.from(entries.keys()).forEach(function (fieldName) {
|
|
162
|
+
if (normalizedNames.some(function (name) {
|
|
163
|
+
return isRelatedNamePath(fieldName, name);
|
|
164
|
+
})) {
|
|
165
|
+
entries.delete(fieldName);
|
|
166
|
+
}
|
|
167
|
+
});
|
|
168
|
+
});
|
|
169
|
+
_defineProperty(this, "clearFieldStatuses", function (names) {
|
|
170
|
+
_this.deleteRelatedEntries(_this.fieldStatuses, names);
|
|
171
|
+
});
|
|
112
172
|
_defineProperty(this, "setFieldsValue", function (newStore) {
|
|
113
173
|
var trigger = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'onChange';
|
|
114
174
|
if (trigger === 'reset' || trigger === 'clear') {
|
|
@@ -189,7 +249,10 @@ export var FormStore = /*#__PURE__*/function () {
|
|
|
189
249
|
});
|
|
190
250
|
}
|
|
191
251
|
(_this$callbacks4 = _this.callbacks) === null || _this$callbacks4 === void 0 || (_this$callbacks4$onRe = _this$callbacks4.onReset) === null || _this$callbacks4$onRe === void 0 || _this$callbacks4$onRe.call(_this$callbacks4);
|
|
192
|
-
|
|
252
|
+
// A named reset only clears rule messages of the fields it touched;
|
|
253
|
+
// unrelated fields keep their (still valid) validation state.
|
|
254
|
+
_this.deleteRelatedEntries(_this.validateMessages, name);
|
|
255
|
+
_this.clearFieldStatuses(name);
|
|
193
256
|
_this.groupEntities.forEach(function (entity) {
|
|
194
257
|
return entity.reset();
|
|
195
258
|
});
|
|
@@ -201,6 +264,7 @@ export var FormStore = /*#__PURE__*/function () {
|
|
|
201
264
|
acc[name] = undefined;
|
|
202
265
|
return acc;
|
|
203
266
|
}, {});
|
|
267
|
+
_this.clearFieldStatuses(name);
|
|
204
268
|
_this.setFieldsValue(clearStore, 'clear');
|
|
205
269
|
});
|
|
206
270
|
_defineProperty(this, "validateField", /*#__PURE__*/function () {
|
|
@@ -347,8 +411,8 @@ export var FormStore = /*#__PURE__*/function () {
|
|
|
347
411
|
var changedKeys = Object.keys(newStore);
|
|
348
412
|
var fieldNames = relatedFieldNames !== null && relatedFieldNames !== void 0 ? relatedFieldNames : _this.getRelatedFieldNames(changedKeys);
|
|
349
413
|
fieldNames.forEach(function (fieldName) {
|
|
350
|
-
var _this$fieldMap$
|
|
351
|
-
(_this$fieldMap$
|
|
414
|
+
var _this$fieldMap$get2;
|
|
415
|
+
(_this$fieldMap$get2 = _this.fieldMap.get(fieldName)) === null || _this$fieldMap$get2 === void 0 || _this$fieldMap$get2.onStoreChange();
|
|
352
416
|
});
|
|
353
417
|
_this.notifyWatchers(changedKeys);
|
|
354
418
|
} else {
|
|
@@ -577,7 +641,7 @@ export var FormStore = /*#__PURE__*/function () {
|
|
|
577
641
|
};
|
|
578
642
|
});
|
|
579
643
|
_defineProperty(this, "submit", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
|
|
580
|
-
var _this$callbacks5, onFinish, onFinishFailed, fieldErrors, groupErrors, allErrors;
|
|
644
|
+
var _this$callbacks5, onFinish, onFinishFailed, fieldErrors, groupErrors, statusErrors, allErrors;
|
|
581
645
|
return _regeneratorRuntime().wrap(function _callee4$(_context4) {
|
|
582
646
|
while (1) switch (_context4.prev = _context4.next) {
|
|
583
647
|
case 0:
|
|
@@ -590,7 +654,23 @@ export var FormStore = /*#__PURE__*/function () {
|
|
|
590
654
|
return _this.validateGroups(true);
|
|
591
655
|
case 6:
|
|
592
656
|
groupErrors = _context4.sent;
|
|
593
|
-
|
|
657
|
+
statusErrors = Array.from(_this.fieldStatuses.entries()).filter(function (_ref9) {
|
|
658
|
+
var _ref10 = _slicedToArray(_ref9, 2),
|
|
659
|
+
status = _ref10[1];
|
|
660
|
+
return status.status === 'error' && status.blocking === true;
|
|
661
|
+
}).map(function (_ref11) {
|
|
662
|
+
var _status$message;
|
|
663
|
+
var _ref12 = _slicedToArray(_ref11, 2),
|
|
664
|
+
name = _ref12[0],
|
|
665
|
+
status = _ref12[1];
|
|
666
|
+
return {
|
|
667
|
+
name: name,
|
|
668
|
+
message: (_status$message = status.message) !== null && _status$message !== void 0 ? _status$message : '',
|
|
669
|
+
value: _this.getFieldValue(name),
|
|
670
|
+
status: 'error'
|
|
671
|
+
};
|
|
672
|
+
});
|
|
673
|
+
allErrors = [].concat(_toConsumableArray(fieldErrors), _toConsumableArray(groupErrors), _toConsumableArray(statusErrors));
|
|
594
674
|
if (allErrors.length === 0) {
|
|
595
675
|
onFinish === null || onFinish === void 0 || onFinish(_this.getFieldsValue());
|
|
596
676
|
} else {
|
|
@@ -598,7 +678,7 @@ export var FormStore = /*#__PURE__*/function () {
|
|
|
598
678
|
}
|
|
599
679
|
_this.refreshField();
|
|
600
680
|
return _context4.abrupt("return", allErrors);
|
|
601
|
-
case
|
|
681
|
+
case 12:
|
|
602
682
|
case "end":
|
|
603
683
|
return _context4.stop();
|
|
604
684
|
}
|
|
@@ -647,6 +727,8 @@ export var FormStore = /*#__PURE__*/function () {
|
|
|
647
727
|
value: function getForm() {
|
|
648
728
|
return {
|
|
649
729
|
getFieldValidate: this.getFieldValidate,
|
|
730
|
+
getFieldStatus: this.getFieldStatus,
|
|
731
|
+
setFieldStatus: this.setFieldStatus,
|
|
650
732
|
getFieldsValue: this.getFieldsValue,
|
|
651
733
|
getFieldValue: this.getFieldValue,
|
|
652
734
|
setFieldsValue: this.setFieldsValue,
|
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, FormInstance, FormListProps, FormProps, } from './interface';
|
|
19
|
+
export type { FieldGroupProps, FieldStatus, FieldStatusData, FormInstance, FormListProps, FormProps, } from './interface';
|
|
20
20
|
export default Form;
|
|
@@ -96,6 +96,15 @@ export interface FormInstance<Values = any> {
|
|
|
96
96
|
* Get field validation info
|
|
97
97
|
*/
|
|
98
98
|
getFieldValidate: (name: Name) => ValidateMessage | null;
|
|
99
|
+
/**
|
|
100
|
+
* Get the displayed field status. Rule validation errors take display
|
|
101
|
+
* precedence; otherwise a manually set status overrides validation.
|
|
102
|
+
*/
|
|
103
|
+
getFieldStatus: (name: NamePath) => FieldStatusData | null;
|
|
104
|
+
/**
|
|
105
|
+
* Set or clear a field's displayed status. Pass null to clear it.
|
|
106
|
+
*/
|
|
107
|
+
setFieldStatus: (name: NamePath, status: FieldStatusData | null) => void;
|
|
99
108
|
/**
|
|
100
109
|
* Get field value
|
|
101
110
|
*/
|
|
@@ -225,11 +234,18 @@ export type Rule = {
|
|
|
225
234
|
*/
|
|
226
235
|
validateTrigger?: 'onBlur' | 'onChange' | 'onSubmit' | 'reset' | Array<'onBlur' | 'onChange' | 'onSubmit'>;
|
|
227
236
|
};
|
|
237
|
+
export type FieldStatus = 'error' | 'success' | 'warning' | 'info';
|
|
238
|
+
export type FieldStatusData = {
|
|
239
|
+
status: FieldStatus;
|
|
240
|
+
message?: string;
|
|
241
|
+
/** Whether an error status should prevent form submission. */
|
|
242
|
+
blocking?: boolean;
|
|
243
|
+
};
|
|
228
244
|
export type ValidateMessage = {
|
|
229
245
|
name: NamePath | NamePath[] | undefined;
|
|
230
246
|
message: string;
|
|
231
247
|
value: unknown;
|
|
232
|
-
status:
|
|
248
|
+
status: FieldStatus;
|
|
233
249
|
};
|
|
234
250
|
export type FieldConfigurableTooltip = Omit<TooltipProps, 'children'> & {
|
|
235
251
|
/**
|
|
@@ -79,6 +79,18 @@
|
|
|
79
79
|
&-error {
|
|
80
80
|
color: var(--yee-error-color);
|
|
81
81
|
}
|
|
82
|
+
|
|
83
|
+
&-warning {
|
|
84
|
+
color: var(--yee-warning-color);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&-success {
|
|
88
|
+
color: var(--yee-success-color);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&-info {
|
|
92
|
+
color: var(--yee-info-color);
|
|
93
|
+
}
|
|
82
94
|
}
|
|
83
95
|
|
|
84
96
|
// 表单校验态:在此重定义控件读取的 border / box-shadow 变量,
|
|
@@ -97,5 +109,19 @@
|
|
|
97
109
|
--yee-input-focus-bs-color: var(--yee-warning-color-border);
|
|
98
110
|
--yee-checkbox-border-color: var(--yee-warning-color);
|
|
99
111
|
}
|
|
112
|
+
|
|
113
|
+
&&-success {
|
|
114
|
+
--yee-input-border-color: var(--yee-success-color);
|
|
115
|
+
--yee-input-hover-border-color: var(--yee-success-color-hover);
|
|
116
|
+
--yee-input-focus-bs-color: var(--yee-success-color-border);
|
|
117
|
+
--yee-checkbox-border-color: var(--yee-success-color);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
&&-info {
|
|
121
|
+
--yee-input-border-color: var(--yee-info-color);
|
|
122
|
+
--yee-input-hover-border-color: var(--yee-info-color-hover);
|
|
123
|
+
--yee-input-focus-bs-color: var(--yee-info-color-border);
|
|
124
|
+
--yee-checkbox-border-color: var(--yee-info-color);
|
|
125
|
+
}
|
|
100
126
|
}
|
|
101
127
|
}
|
package/dist/esm/version.d.ts
CHANGED
package/dist/esm/version.js
CHANGED