@hi-ui/form 4.0.0-beta.3 → 4.0.0-beta.30
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/README.md +1 -1
- package/lib/cjs/Form.js +5 -6
- package/lib/cjs/FormField.js +10 -1
- package/lib/cjs/FormItem.js +7 -6
- package/lib/cjs/FormLabel.js +8 -7
- package/lib/cjs/FormList.js +14 -16
- package/lib/cjs/FormMessage.js +1 -2
- package/lib/cjs/FormReset.js +1 -2
- package/lib/cjs/FormSubmit.js +3 -2
- package/lib/cjs/context.js +0 -1
- package/lib/cjs/index.js +0 -1
- package/lib/cjs/styles/index.scss.js +2 -3
- package/lib/cjs/use-form-field.js +5 -12
- package/lib/cjs/use-form.js +138 -45
- package/lib/cjs/utils/index.js +28 -1
- package/lib/esm/Form.js +3 -4
- package/lib/esm/FormField.js +9 -1
- package/lib/esm/FormItem.js +4 -3
- package/lib/esm/FormLabel.js +4 -3
- package/lib/esm/FormList.js +2 -4
- package/lib/esm/FormMessage.js +0 -1
- package/lib/esm/FormReset.js +0 -1
- package/lib/esm/FormSubmit.js +2 -1
- package/lib/esm/context.js +0 -1
- package/lib/esm/index.js +1 -2
- package/lib/esm/styles/index.scss.js +3 -5
- package/lib/esm/use-form-field.js +6 -13
- package/lib/esm/use-form.js +123 -31
- package/lib/esm/utils/index.js +26 -2
- package/lib/types/FormField.d.ts +5 -1
- package/lib/types/FormItem.d.ts +6 -2
- package/lib/types/FormLabel.d.ts +1 -1
- package/lib/types/FormList.d.ts +4 -3
- package/lib/types/FormReset.d.ts +3 -0
- package/lib/types/FormSubmit.d.ts +4 -1
- package/lib/types/types.d.ts +38 -21
- package/lib/types/use-form-field.d.ts +1 -1
- package/lib/types/use-form.d.ts +9 -7
- package/lib/types/utils/index.d.ts +2 -1
- package/package.json +13 -11
- package/lib/cjs/Form.js.map +0 -1
- package/lib/cjs/FormField.js.map +0 -1
- package/lib/cjs/FormItem.js.map +0 -1
- package/lib/cjs/FormLabel.js.map +0 -1
- package/lib/cjs/FormList.js.map +0 -1
- package/lib/cjs/FormMessage.js.map +0 -1
- package/lib/cjs/FormReset.js.map +0 -1
- package/lib/cjs/FormSubmit.js.map +0 -1
- package/lib/cjs/context.js.map +0 -1
- package/lib/cjs/index.js.map +0 -1
- package/lib/cjs/styles/index.scss.js.map +0 -1
- package/lib/cjs/use-form-field.js.map +0 -1
- package/lib/cjs/use-form.js.map +0 -1
- package/lib/cjs/utils/index.js.map +0 -1
- package/lib/esm/Form.js.map +0 -1
- package/lib/esm/FormField.js.map +0 -1
- package/lib/esm/FormItem.js.map +0 -1
- package/lib/esm/FormLabel.js.map +0 -1
- package/lib/esm/FormList.js.map +0 -1
- package/lib/esm/FormMessage.js.map +0 -1
- package/lib/esm/FormReset.js.map +0 -1
- package/lib/esm/FormSubmit.js.map +0 -1
- package/lib/esm/context.js.map +0 -1
- package/lib/esm/index.js.map +0 -1
- package/lib/esm/styles/index.scss.js.map +0 -1
- package/lib/esm/use-form-field.js.map +0 -1
- package/lib/esm/use-form.js.map +0 -1
- package/lib/esm/utils/index.js.map +0 -1
package/README.md
CHANGED
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
| valueDispatchTransform | feature | - | 强化功能 |
|
|
163
163
|
| valueConnectTransform | feature | - | 强化功能 |
|
|
164
164
|
| validateTrigger | feature | - | 强化功能 |
|
|
165
|
-
|
|
|
165
|
+
| render | feature | 支持函数自定义渲染表单控件 | 强化功能 |
|
|
166
166
|
|
|
167
167
|
### FormList
|
|
168
168
|
|
package/lib/cjs/Form.js
CHANGED
|
@@ -72,14 +72,14 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
72
72
|
validate: formContext.submitForm,
|
|
73
73
|
reset: formContext.resetForm,
|
|
74
74
|
validateField: formContext.validateFieldState,
|
|
75
|
-
// validateFields: formContext.va,
|
|
76
75
|
setFieldValue: formContext.setFieldValue,
|
|
77
76
|
setFieldsValue: formContext.setFieldsValue,
|
|
78
77
|
getFieldValue: formContext.getFieldValue,
|
|
79
78
|
getFieldsValue: formContext.getFieldsValue,
|
|
80
79
|
getFieldError: formContext.getFieldError,
|
|
81
80
|
getFieldsError: formContext.getFieldsError,
|
|
82
|
-
clearValidates: formContext.resetErrors
|
|
81
|
+
clearValidates: formContext.resetErrors,
|
|
82
|
+
clearFieldValidate: formContext.resetFieldError
|
|
83
83
|
};
|
|
84
84
|
});
|
|
85
85
|
var providedValue = React.useMemo(function () {
|
|
@@ -96,9 +96,9 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
96
96
|
return (
|
|
97
97
|
/*#__PURE__*/
|
|
98
98
|
// @ts-ignore
|
|
99
|
-
React__default[
|
|
99
|
+
React__default["default"].createElement(context.FormProvider, {
|
|
100
100
|
value: providedValue
|
|
101
|
-
}, /*#__PURE__*/React__default[
|
|
101
|
+
}, /*#__PURE__*/React__default["default"].createElement("form", Object.assign({
|
|
102
102
|
ref: ref,
|
|
103
103
|
role: role,
|
|
104
104
|
className: cls
|
|
@@ -116,7 +116,7 @@ var formExtends = function formExtends(model) {
|
|
|
116
116
|
// @ts-ignore
|
|
117
117
|
FORM_REGISTER_TABLE[model.name] = model;
|
|
118
118
|
} else {
|
|
119
|
-
env.invariant(
|
|
119
|
+
env.invariant(false, 'The name should be unique string and not empty.');
|
|
120
120
|
}
|
|
121
121
|
};
|
|
122
122
|
|
|
@@ -125,4 +125,3 @@ Object.assign(Form, {
|
|
|
125
125
|
});
|
|
126
126
|
exports.FORM_REGISTER_TABLE = FORM_REGISTER_TABLE;
|
|
127
127
|
exports.Form = Form;
|
|
128
|
-
//# sourceMappingURL=Form.js.map
|
package/lib/cjs/FormField.js
CHANGED
|
@@ -18,6 +18,8 @@ var React = require('react');
|
|
|
18
18
|
var env = require('@hi-ui/env');
|
|
19
19
|
|
|
20
20
|
var useFormField = require('./use-form-field.js');
|
|
21
|
+
|
|
22
|
+
var typeAssertion = require('@hi-ui/type-assertion');
|
|
21
23
|
/**
|
|
22
24
|
* TODO: What is FormField
|
|
23
25
|
*/
|
|
@@ -28,6 +30,14 @@ var FormField = function FormField(props) {
|
|
|
28
30
|
|
|
29
31
|
var fieldProps = useFormField.useFormField(props);
|
|
30
32
|
|
|
33
|
+
if (typeAssertion.isFunction(props.render)) {
|
|
34
|
+
return props.render(fieldProps);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
if (typeAssertion.isFunction(props.children)) {
|
|
38
|
+
return props.children(fieldProps);
|
|
39
|
+
}
|
|
40
|
+
|
|
31
41
|
if (! /*#__PURE__*/React.isValidElement(props.children)) {
|
|
32
42
|
console.warn('FormField must pass a valid element as children.');
|
|
33
43
|
return (_a = props.children) !== null && _a !== void 0 ? _a : null;
|
|
@@ -41,4 +51,3 @@ if (env.__DEV__) {
|
|
|
41
51
|
}
|
|
42
52
|
|
|
43
53
|
exports.FormField = FormField;
|
|
44
|
-
//# sourceMappingURL=FormField.js.map
|
package/lib/cjs/FormItem.js
CHANGED
|
@@ -54,15 +54,16 @@ var FormItem = function FormItem(_a) {
|
|
|
54
54
|
valueDispatchTransform = _a.valueDispatchTransform,
|
|
55
55
|
valueConnectTransform = _a.valueConnectTransform,
|
|
56
56
|
validateTrigger = _a.validateTrigger,
|
|
57
|
-
|
|
57
|
+
render = _a.render,
|
|
58
|
+
rest = tslib.__rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]); // @ts-ignore
|
|
58
59
|
|
|
59
60
|
|
|
60
61
|
var _useFormContext = context.useFormContext(),
|
|
61
62
|
prefixCls = _useFormContext.prefixCls;
|
|
62
63
|
|
|
63
|
-
return /*#__PURE__*/React__default[
|
|
64
|
+
return /*#__PURE__*/React__default["default"].createElement(FormLabel.FormLabel, Object.assign({}, rest, {
|
|
64
65
|
className: classname.cx(prefixCls + "-item", className)
|
|
65
|
-
}), /*#__PURE__*/React__default[
|
|
66
|
+
}), /*#__PURE__*/React__default["default"].createElement(FormField.FormField, {
|
|
66
67
|
field: field,
|
|
67
68
|
valueType: valueType,
|
|
68
69
|
rules: rules,
|
|
@@ -70,8 +71,9 @@ var FormItem = function FormItem(_a) {
|
|
|
70
71
|
valueChangeFuncPropName: valueChangeFuncPropName,
|
|
71
72
|
valueDispatchTransform: valueDispatchTransform,
|
|
72
73
|
valueConnectTransform: valueConnectTransform,
|
|
73
|
-
validateTrigger: validateTrigger
|
|
74
|
-
|
|
74
|
+
validateTrigger: validateTrigger,
|
|
75
|
+
render: render
|
|
76
|
+
}, children), /*#__PURE__*/React__default["default"].createElement(FormMessage.FormMessage, {
|
|
75
77
|
field: field,
|
|
76
78
|
className: prefixCls + "-item__message"
|
|
77
79
|
}));
|
|
@@ -82,4 +84,3 @@ if (env.__DEV__) {
|
|
|
82
84
|
}
|
|
83
85
|
|
|
84
86
|
exports.FormItem = FormItem;
|
|
85
|
-
//# sourceMappingURL=FormItem.js.map
|
package/lib/cjs/FormLabel.js
CHANGED
|
@@ -50,7 +50,7 @@ var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
50
50
|
|
|
51
51
|
var _useFormContext = context.useFormContext(),
|
|
52
52
|
labelWidthContext = _useFormContext.labelWidth,
|
|
53
|
-
|
|
53
|
+
labelPlacementContext = _useFormContext.labelPlacement,
|
|
54
54
|
showColonContext = _useFormContext.showColon,
|
|
55
55
|
contentPositionContext = _useFormContext.contentPosition;
|
|
56
56
|
|
|
@@ -70,7 +70,9 @@ var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
70
70
|
showColon = _props$showColon === void 0 ? showColonContext : _props$showColon,
|
|
71
71
|
_props$contentPositio = props.contentPosition,
|
|
72
72
|
contentPosition = _props$contentPositio === void 0 ? contentPositionContext : _props$contentPositio,
|
|
73
|
-
|
|
73
|
+
_props$labelPlacement = props.labelPlacement,
|
|
74
|
+
labelPlacement = _props$labelPlacement === void 0 ? labelPlacementContext : _props$labelPlacement,
|
|
75
|
+
rest = tslib.__rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement"]);
|
|
74
76
|
|
|
75
77
|
var _useMemo = React.useMemo(function () {
|
|
76
78
|
if (labelPlacement === 'top') return {
|
|
@@ -106,22 +108,22 @@ var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
106
108
|
var style = Object.assign(Object.assign({}, styleProp), {
|
|
107
109
|
alignItems: contentPositionMemo
|
|
108
110
|
});
|
|
109
|
-
return /*#__PURE__*/React__default[
|
|
111
|
+
return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
|
|
110
112
|
ref: ref,
|
|
111
113
|
role: role,
|
|
112
114
|
className: cls,
|
|
113
115
|
style: style
|
|
114
|
-
}, rest), label ? /*#__PURE__*/React__default[
|
|
116
|
+
}, rest), label ? /*#__PURE__*/React__default["default"].createElement("label", {
|
|
115
117
|
className: prefixCls + "__text",
|
|
116
118
|
style: {
|
|
117
119
|
width: labelWidth
|
|
118
120
|
}
|
|
119
|
-
}, label, colon) : /*#__PURE__*/React__default[
|
|
121
|
+
}, label, colon) : /*#__PURE__*/React__default["default"].createElement("span", {
|
|
120
122
|
className: prefixCls + "__indent",
|
|
121
123
|
style: {
|
|
122
124
|
width: labelWidth
|
|
123
125
|
}
|
|
124
|
-
}), /*#__PURE__*/React__default[
|
|
126
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
125
127
|
className: prefixCls + "__control",
|
|
126
128
|
style: {
|
|
127
129
|
width: controlWidth
|
|
@@ -134,4 +136,3 @@ if (env.__DEV__) {
|
|
|
134
136
|
}
|
|
135
137
|
|
|
136
138
|
exports.FormLabel = FormLabel;
|
|
137
|
-
//# sourceMappingURL=FormLabel.js.map
|
package/lib/cjs/FormList.js
CHANGED
|
@@ -21,7 +21,7 @@ var env = require('@hi-ui/env');
|
|
|
21
21
|
|
|
22
22
|
var context = require('./context.js');
|
|
23
23
|
|
|
24
|
-
var
|
|
24
|
+
var objectUtils = require('@hi-ui/object-utils');
|
|
25
25
|
|
|
26
26
|
var typeAssertion = require('@hi-ui/type-assertion');
|
|
27
27
|
|
|
@@ -54,14 +54,13 @@ var FormList = function FormList(_ref) {
|
|
|
54
54
|
* form List 动态字段更新器
|
|
55
55
|
*/
|
|
56
56
|
|
|
57
|
-
var updateFormList = React__default[
|
|
57
|
+
var updateFormList = React__default["default"].useCallback(function (stateFunc, alterTouched, alterErrors) {
|
|
58
58
|
setFormState(function (prev) {
|
|
59
|
-
var values =
|
|
60
|
-
|
|
59
|
+
var values = objectUtils.setNested(prev.values, name, stateFunc(objectUtils.getNested(prev.values, name)));
|
|
61
60
|
var updateErrors = typeof alterErrors === 'function' ? alterErrors : stateFunc;
|
|
62
61
|
var updateTouched = typeof alterTouched === 'function' ? alterTouched : stateFunc;
|
|
63
|
-
var fieldError = alterErrors ? updateErrors(
|
|
64
|
-
var fieldTouched = alterTouched ? updateTouched(
|
|
62
|
+
var fieldError = alterErrors ? updateErrors(objectUtils.getNested(prev.errors, name)) : undefined;
|
|
63
|
+
var fieldTouched = alterTouched ? updateTouched(objectUtils.getNested(prev.touched, name)) : undefined;
|
|
65
64
|
|
|
66
65
|
if (!typeAssertion.isArrayNonEmpty(fieldError)) {
|
|
67
66
|
fieldError = undefined;
|
|
@@ -73,25 +72,25 @@ var FormList = function FormList(_ref) {
|
|
|
73
72
|
|
|
74
73
|
return {
|
|
75
74
|
values: values,
|
|
76
|
-
errors: alterErrors ?
|
|
77
|
-
touched: alterTouched ?
|
|
75
|
+
errors: alterErrors ? objectUtils.setNested(prev.errors, name, fieldError) : prev.errors,
|
|
76
|
+
touched: alterTouched ? objectUtils.setNested(prev.touched, name, fieldTouched) : prev.touched
|
|
78
77
|
};
|
|
79
78
|
});
|
|
80
79
|
}, [name, setFormState]);
|
|
81
|
-
var add = React__default[
|
|
80
|
+
var add = React__default["default"].useCallback(function (value) {
|
|
82
81
|
// 维护的 动态 field list
|
|
83
82
|
updateFormList(function (prev) {
|
|
84
83
|
return [].concat(asArray(prev), [value]);
|
|
85
84
|
}, false, false);
|
|
86
85
|
}, [updateFormList]);
|
|
87
|
-
var remove = React__default[
|
|
86
|
+
var remove = React__default["default"].useCallback(function (index) {
|
|
88
87
|
updateFormList(function (prev) {
|
|
89
88
|
return asArray(prev).filter(function (_, idx) {
|
|
90
89
|
return idx !== index;
|
|
91
90
|
});
|
|
92
91
|
}, true, true);
|
|
93
92
|
}, [updateFormList]);
|
|
94
|
-
var insertBefore = React__default[
|
|
93
|
+
var insertBefore = React__default["default"].useCallback(function (index, value) {
|
|
95
94
|
updateFormList(function (prev) {
|
|
96
95
|
return insert(asArray(prev), index, value);
|
|
97
96
|
}, function (prev) {
|
|
@@ -100,7 +99,7 @@ var FormList = function FormList(_ref) {
|
|
|
100
99
|
return insert(asArray(prev), index, null);
|
|
101
100
|
});
|
|
102
101
|
}, [updateFormList]);
|
|
103
|
-
var swap = React__default[
|
|
102
|
+
var swap = React__default["default"].useCallback(function (aIndex, bIndex) {
|
|
104
103
|
updateFormList(function (prev) {
|
|
105
104
|
var copy = [].concat(asArray(prev));
|
|
106
105
|
var temp = copy[aIndex];
|
|
@@ -109,7 +108,7 @@ var FormList = function FormList(_ref) {
|
|
|
109
108
|
return copy;
|
|
110
109
|
}, true, true);
|
|
111
110
|
}, [updateFormList]);
|
|
112
|
-
var move = React__default[
|
|
111
|
+
var move = React__default["default"].useCallback(function (fromIndex, toIndex) {
|
|
113
112
|
updateFormList(function (prev) {
|
|
114
113
|
var copy = [].concat(asArray(prev));
|
|
115
114
|
var temp = copy[fromIndex];
|
|
@@ -118,8 +117,8 @@ var FormList = function FormList(_ref) {
|
|
|
118
117
|
return copy;
|
|
119
118
|
}, true, true);
|
|
120
119
|
}, [updateFormList]);
|
|
121
|
-
var listFields = React__default[
|
|
122
|
-
var list =
|
|
120
|
+
var listFields = React__default["default"].useMemo(function () {
|
|
121
|
+
var list = objectUtils.getNested(values, name) || []; // @ts-ignore
|
|
123
122
|
|
|
124
123
|
return list.map(function (value, index) {
|
|
125
124
|
return {
|
|
@@ -163,4 +162,3 @@ var asArray = function asArray(arr) {
|
|
|
163
162
|
};
|
|
164
163
|
|
|
165
164
|
exports.FormList = FormList;
|
|
166
|
-
//# sourceMappingURL=FormList.js.map
|
package/lib/cjs/FormMessage.js
CHANGED
|
@@ -57,7 +57,7 @@ var FormMessage = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
57
57
|
|
|
58
58
|
var message = field ? getFieldError(field) : null;
|
|
59
59
|
var cls = classname.cx(prefixCls, className, message && prefixCls + "--show");
|
|
60
|
-
return /*#__PURE__*/React__default[
|
|
60
|
+
return /*#__PURE__*/React__default["default"].createElement("span", Object.assign({
|
|
61
61
|
ref: ref,
|
|
62
62
|
role: role,
|
|
63
63
|
className: cls
|
|
@@ -69,4 +69,3 @@ if (env.__DEV__) {
|
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
exports.FormMessage = FormMessage;
|
|
72
|
-
//# sourceMappingURL=FormMessage.js.map
|
package/lib/cjs/FormReset.js
CHANGED
|
@@ -56,7 +56,7 @@ var FormReset = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
56
56
|
resetForm = _useFormContext.resetForm;
|
|
57
57
|
|
|
58
58
|
var cls = classname.cx(prefixCls, className);
|
|
59
|
-
return /*#__PURE__*/React__default[
|
|
59
|
+
return /*#__PURE__*/React__default["default"].createElement(Button__default["default"], Object.assign({
|
|
60
60
|
ref: ref,
|
|
61
61
|
className: cls,
|
|
62
62
|
type: type
|
|
@@ -73,4 +73,3 @@ if (env.__DEV__) {
|
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
exports.FormReset = FormReset;
|
|
76
|
-
//# sourceMappingURL=FormReset.js.map
|
package/lib/cjs/FormSubmit.js
CHANGED
|
@@ -61,7 +61,7 @@ var FormSubmit = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
61
61
|
submitForm = _useFormContext.submitForm;
|
|
62
62
|
|
|
63
63
|
var cls = classname.cx(prefixCls, className);
|
|
64
|
-
return /*#__PURE__*/React__default[
|
|
64
|
+
return /*#__PURE__*/React__default["default"].createElement(Button__default["default"], Object.assign({
|
|
65
65
|
ref: ref,
|
|
66
66
|
role: role,
|
|
67
67
|
className: cls,
|
|
@@ -71,8 +71,10 @@ var FormSubmit = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
71
71
|
evt.preventDefault();
|
|
72
72
|
evt.stopPropagation();
|
|
73
73
|
submitForm().then(function (result) {
|
|
74
|
+
// @ts-ignore
|
|
74
75
|
_onClick === null || _onClick === void 0 ? void 0 : _onClick(result, null);
|
|
75
76
|
})["catch"](function (error) {
|
|
77
|
+
// @ts-ignore
|
|
76
78
|
_onClick === null || _onClick === void 0 ? void 0 : _onClick(null, error);
|
|
77
79
|
});
|
|
78
80
|
}
|
|
@@ -84,4 +86,3 @@ if (env.__DEV__) {
|
|
|
84
86
|
}
|
|
85
87
|
|
|
86
88
|
exports.FormSubmit = FormSubmit;
|
|
87
|
-
//# sourceMappingURL=FormSubmit.js.map
|
package/lib/cjs/context.js
CHANGED
package/lib/cjs/index.js
CHANGED
|
@@ -12,11 +12,10 @@
|
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
|
-
var css_248z = "
|
|
15
|
+
var css_248z = ".hi-v4-form {max-width: 100%;position: relative; }.hi-v4-form fieldset {margin: 0;padding: 0;border: 0; }.hi-v4-form fieldset + fieldset {margin-top: 16px; }.hi-v4-form legend {margin: 0 0 16px;color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-form--placement-horizontal {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap; }.hi-v4-form--placement-horizontal .hi-v4-form-label__indent {min-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label {display: -webkit-box;display: -ms-flexbox;display: flex;font-size: var(--hi-v4-text-size-md, 0.875rem);-webkit-box-sizing: border-box;box-sizing: border-box;margin-right: 0;margin-bottom: var(--hi-v4-spacing-12, 24px); }.hi-v4-form-label__text, .hi-v4-form-label__indent {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-sizing: border-box;box-sizing: border-box;vertical-align: top;color: var(--hi-v4-color-gray-800, #1f2937);overflow-wrap: break-word; }.hi-v4-form-label__text {padding-right: var(--hi-v4-spacing-6, 12px);min-height: var(--hi-v4-height-8, 32px);line-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label--placement-left .hi-v4-form-label__text {text-align: left; }.hi-v4-form-label--placement-right .hi-v4-form-label__text {text-align: right; }.hi-v4-form-label--placement-top .hi-v4-form-label__text {height: 22px;min-height: 22px;line-height: 22px;padding-right: 0;margin-bottom: var(--hi-v4-spacing-4, 8px); }.hi-v4-form-label--required .hi-v4-form-label__text::before {margin-right: var(--hi-v4-spacing-2, 4px);content: '*';color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-form-label--placement-top {text-align: left;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;margin-bottom: var(--hi-v4-spacing-12, 24px);padding-right: 0; }.hi-v4-form-label__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;vertical-align: top;min-height: var(--hi-v4-height-8, 32px);-ms-flex-negative: 0;flex-shrink: 0; }.hi-v4-form-label__control {min-width: 1px; }.hi-v4-form-message {display: block;font-size: var(--hi-v4-text-size-md, 0.875rem);min-height: 24px;padding: 2px 0;-webkit-box-sizing: border-box;box-sizing: border-box;line-height: 20px;-webkit-transform: translateY(-10%);transform: translateY(-10%);opacity: 0;color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-form-message--show {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0); }.hi-v4-form-item {position: relative; }.hi-v4-form-item__message {position: absolute; }";
|
|
16
16
|
|
|
17
|
-
var __styleInject__ = require('
|
|
17
|
+
var __styleInject__ = require('inject-head-style')["default"];
|
|
18
18
|
|
|
19
19
|
__styleInject__(css_248z);
|
|
20
20
|
|
|
21
21
|
exports["default"] = css_248z;
|
|
22
|
-
//# sourceMappingURL=index.scss.js.map
|
|
@@ -23,7 +23,7 @@ var typeAssertion = require('@hi-ui/type-assertion');
|
|
|
23
23
|
|
|
24
24
|
var Validater = require('async-validator');
|
|
25
25
|
|
|
26
|
-
var
|
|
26
|
+
var arrayUtils = require('@hi-ui/array-utils');
|
|
27
27
|
|
|
28
28
|
var index = require('./utils/index.js');
|
|
29
29
|
|
|
@@ -53,7 +53,7 @@ var useFormField = function useFormField(props) {
|
|
|
53
53
|
|
|
54
54
|
var fieldRules = React.useMemo(function () {
|
|
55
55
|
// @ts-ignore
|
|
56
|
-
var rules =
|
|
56
|
+
var rules = arrayUtils.normalizeArray(rulesProp !== null && rulesProp !== void 0 ? rulesProp : getFieldRules(field));
|
|
57
57
|
return rules.map(function (rule) {
|
|
58
58
|
return Object.assign({
|
|
59
59
|
type: valueType
|
|
@@ -70,25 +70,19 @@ var useFormField = function useFormField(props) {
|
|
|
70
70
|
|
|
71
71
|
|
|
72
72
|
var fieldMD5 = index.stringify(field);
|
|
73
|
-
var validater = new Validater__default[
|
|
73
|
+
var validater = new Validater__default["default"]((_Validater = {}, _Validater[fieldMD5] = fieldRules, _Validater));
|
|
74
74
|
return validater.validate((_validater$validate = {}, _validater$validate[fieldMD5] = value, _validater$validate), {
|
|
75
75
|
firstFields: true
|
|
76
76
|
});
|
|
77
77
|
}, [fieldRules, field]); // 注入当前 field 及其验证规则到 Form
|
|
78
78
|
|
|
79
79
|
React.useEffect(function () {
|
|
80
|
-
if (
|
|
81
|
-
if (typeAssertion.isArray(field) && field.every(function (item) {
|
|
82
|
-
return typeAssertion.isNullish(item) || item === '';
|
|
83
|
-
})) return;
|
|
80
|
+
if (!index.isValidField(field)) return;
|
|
84
81
|
registerField(field, {
|
|
85
82
|
validate: fieldValidate
|
|
86
83
|
});
|
|
87
84
|
return function () {
|
|
88
|
-
if (
|
|
89
|
-
if (typeAssertion.isArray(field) && field.every(function (item) {
|
|
90
|
-
return typeAssertion.isNullish(item) || item === '';
|
|
91
|
-
})) return;
|
|
85
|
+
if (!index.isValidField(field)) return;
|
|
92
86
|
unregisterField(field);
|
|
93
87
|
};
|
|
94
88
|
}, [registerField, unregisterField, field, fieldValidate]);
|
|
@@ -96,4 +90,3 @@ var useFormField = function useFormField(props) {
|
|
|
96
90
|
};
|
|
97
91
|
|
|
98
92
|
exports.useFormField = useFormField;
|
|
99
|
-
//# sourceMappingURL=use-form-field.js.map
|