@hi-ui/form 4.0.0-beta.7 → 4.0.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/README.md +1 -1
- package/lib/cjs/Form.js +12 -10
- package/lib/cjs/FormField.js +11 -2
- package/lib/cjs/FormItem.js +28 -9
- package/lib/cjs/FormLabel.js +11 -10
- package/lib/cjs/FormList.js +9 -11
- package/lib/cjs/FormMessage.js +2 -3
- package/lib/cjs/FormReset.js +2 -3
- package/lib/cjs/FormSubmit.js +4 -3
- package/lib/cjs/context.js +1 -2
- package/lib/cjs/index.js +1 -2
- package/lib/cjs/styles/index.scss.js +3 -4
- package/lib/cjs/use-form-field.js +20 -17
- package/lib/cjs/use-form.js +133 -46
- package/lib/cjs/utils/index.js +29 -2
- package/lib/esm/Form.js +10 -8
- package/lib/esm/FormField.js +10 -2
- package/lib/esm/FormItem.js +25 -7
- package/lib/esm/FormLabel.js +6 -5
- package/lib/esm/FormList.js +2 -4
- package/lib/esm/FormMessage.js +1 -2
- package/lib/esm/FormReset.js +1 -2
- package/lib/esm/FormSubmit.js +3 -2
- package/lib/esm/context.js +1 -2
- package/lib/esm/index.js +2 -3
- package/lib/esm/styles/index.scss.js +4 -6
- package/lib/esm/use-form-field.js +21 -19
- package/lib/esm/use-form.js +128 -41
- package/lib/esm/utils/index.js +27 -3
- package/lib/types/Form.d.ts +4 -0
- 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/context.d.ts +2 -0
- package/lib/types/types.d.ts +38 -21
- package/lib/types/use-form-field.d.ts +3 -1
- package/lib/types/use-form.d.ts +9 -7
- package/lib/types/utils/index.d.ts +2 -1
- package/package.json +16 -15
- 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
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -60,9 +60,11 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
60
60
|
placement = _a$placement === void 0 ? 'vertical' : _a$placement,
|
|
61
61
|
_a$contentPosition = _a.contentPosition,
|
|
62
62
|
contentPosition = _a$contentPosition === void 0 ? 'center' : _a$contentPosition,
|
|
63
|
+
_a$showRequiredOnVali = _a.showRequiredOnValidateRequired,
|
|
64
|
+
showRequiredOnValidateRequired = _a$showRequiredOnVali === void 0 ? false : _a$showRequiredOnVali,
|
|
63
65
|
_a$showColon = _a.showColon,
|
|
64
66
|
showColon = _a$showColon === void 0 ? true : _a$showColon,
|
|
65
|
-
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showColon"]);
|
|
67
|
+
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showRequiredOnValidateRequired", "showColon"]);
|
|
66
68
|
|
|
67
69
|
var formContext = useForm.useForm(rest);
|
|
68
70
|
var getRootProps = formContext.getRootProps; // @ts-ignore
|
|
@@ -72,14 +74,14 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
72
74
|
validate: formContext.submitForm,
|
|
73
75
|
reset: formContext.resetForm,
|
|
74
76
|
validateField: formContext.validateFieldState,
|
|
75
|
-
// validateFields: formContext.va,
|
|
76
77
|
setFieldValue: formContext.setFieldValue,
|
|
77
78
|
setFieldsValue: formContext.setFieldsValue,
|
|
78
79
|
getFieldValue: formContext.getFieldValue,
|
|
79
80
|
getFieldsValue: formContext.getFieldsValue,
|
|
80
81
|
getFieldError: formContext.getFieldError,
|
|
81
82
|
getFieldsError: formContext.getFieldsError,
|
|
82
|
-
clearValidates: formContext.resetErrors
|
|
83
|
+
clearValidates: formContext.resetErrors,
|
|
84
|
+
clearFieldValidate: formContext.resetFieldError
|
|
83
85
|
};
|
|
84
86
|
});
|
|
85
87
|
var providedValue = React.useMemo(function () {
|
|
@@ -87,18 +89,19 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
87
89
|
labelWidth: labelWidth,
|
|
88
90
|
labelPlacement: labelPlacement,
|
|
89
91
|
showColon: showColon,
|
|
90
|
-
contentPosition: contentPosition
|
|
92
|
+
contentPosition: contentPosition,
|
|
93
|
+
showRequiredOnValidateRequired: showRequiredOnValidateRequired
|
|
91
94
|
}, formContext), {
|
|
92
95
|
prefixCls: prefixCls
|
|
93
96
|
});
|
|
94
|
-
}, [labelWidth, formContext, labelPlacement, showColon, prefixCls, contentPosition]);
|
|
97
|
+
}, [labelWidth, formContext, labelPlacement, showColon, prefixCls, contentPosition, showRequiredOnValidateRequired]);
|
|
95
98
|
var cls = classname.cx(prefixCls, className, placement && prefixCls + "--placement-" + placement);
|
|
96
99
|
return (
|
|
97
100
|
/*#__PURE__*/
|
|
98
101
|
// @ts-ignore
|
|
99
|
-
React__default[
|
|
102
|
+
React__default["default"].createElement(context.FormProvider, {
|
|
100
103
|
value: providedValue
|
|
101
|
-
}, /*#__PURE__*/React__default[
|
|
104
|
+
}, /*#__PURE__*/React__default["default"].createElement("form", Object.assign({
|
|
102
105
|
ref: ref,
|
|
103
106
|
role: role,
|
|
104
107
|
className: cls
|
|
@@ -116,7 +119,7 @@ var formExtends = function formExtends(model) {
|
|
|
116
119
|
// @ts-ignore
|
|
117
120
|
FORM_REGISTER_TABLE[model.name] = model;
|
|
118
121
|
} else {
|
|
119
|
-
env.invariant(
|
|
122
|
+
env.invariant(false, 'The name should be unique string and not empty.');
|
|
120
123
|
}
|
|
121
124
|
};
|
|
122
125
|
|
|
@@ -125,4 +128,3 @@ Object.assign(Form, {
|
|
|
125
128
|
});
|
|
126
129
|
exports.FORM_REGISTER_TABLE = FORM_REGISTER_TABLE;
|
|
127
130
|
exports.Form = Form;
|
|
128
|
-
//# sourceMappingURL=Form.js.map
|
package/lib/cjs/FormField.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -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
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -21,6 +21,8 @@ var React = require('react');
|
|
|
21
21
|
|
|
22
22
|
var env = require('@hi-ui/env');
|
|
23
23
|
|
|
24
|
+
var useFormField = require('./use-form-field.js');
|
|
25
|
+
|
|
24
26
|
var FormLabel = require('./FormLabel.js');
|
|
25
27
|
|
|
26
28
|
var FormMessage = require('./FormMessage.js');
|
|
@@ -54,15 +56,32 @@ var FormItem = function FormItem(_a) {
|
|
|
54
56
|
valueDispatchTransform = _a.valueDispatchTransform,
|
|
55
57
|
valueConnectTransform = _a.valueConnectTransform,
|
|
56
58
|
validateTrigger = _a.validateTrigger,
|
|
57
|
-
|
|
58
|
-
|
|
59
|
+
render = _a.render,
|
|
60
|
+
rest = tslib.__rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]);
|
|
59
61
|
|
|
60
62
|
var _useFormContext = context.useFormContext(),
|
|
61
|
-
prefixCls = _useFormContext.prefixCls
|
|
63
|
+
prefixCls = _useFormContext.prefixCls,
|
|
64
|
+
showRequiredOnValidateRequired = _useFormContext.showRequiredOnValidateRequired;
|
|
62
65
|
|
|
63
|
-
|
|
66
|
+
var fieldRules = useFormField.useFiledRules({
|
|
67
|
+
field: field,
|
|
68
|
+
rules: rules,
|
|
69
|
+
valueType: valueType
|
|
70
|
+
});
|
|
71
|
+
var required = rest.required;
|
|
72
|
+
var showRequired = React.useMemo(function () {
|
|
73
|
+
if (required === undefined) {
|
|
74
|
+
return showRequiredOnValidateRequired && fieldRules.some(function (item) {
|
|
75
|
+
return item.required;
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
return required;
|
|
80
|
+
}, [required, showRequiredOnValidateRequired, fieldRules]);
|
|
81
|
+
return /*#__PURE__*/React__default["default"].createElement(FormLabel.FormLabel, Object.assign({}, rest, {
|
|
82
|
+
required: showRequired,
|
|
64
83
|
className: classname.cx(prefixCls + "-item", className)
|
|
65
|
-
}), /*#__PURE__*/React__default[
|
|
84
|
+
}), /*#__PURE__*/React__default["default"].createElement(FormField.FormField, {
|
|
66
85
|
field: field,
|
|
67
86
|
valueType: valueType,
|
|
68
87
|
rules: rules,
|
|
@@ -70,8 +89,9 @@ var FormItem = function FormItem(_a) {
|
|
|
70
89
|
valueChangeFuncPropName: valueChangeFuncPropName,
|
|
71
90
|
valueDispatchTransform: valueDispatchTransform,
|
|
72
91
|
valueConnectTransform: valueConnectTransform,
|
|
73
|
-
validateTrigger: validateTrigger
|
|
74
|
-
|
|
92
|
+
validateTrigger: validateTrigger,
|
|
93
|
+
render: render
|
|
94
|
+
}, children), /*#__PURE__*/React__default["default"].createElement(FormMessage.FormMessage, {
|
|
75
95
|
field: field,
|
|
76
96
|
className: prefixCls + "-item__message"
|
|
77
97
|
}));
|
|
@@ -82,4 +102,3 @@ if (env.__DEV__) {
|
|
|
82
102
|
}
|
|
83
103
|
|
|
84
104
|
exports.FormItem = FormItem;
|
|
85
|
-
//# sourceMappingURL=FormItem.js.map
|
package/lib/cjs/FormLabel.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -27,7 +27,7 @@ var context = require('./context.js');
|
|
|
27
27
|
|
|
28
28
|
var typeAssertion = require('@hi-ui/type-assertion');
|
|
29
29
|
|
|
30
|
-
var
|
|
30
|
+
var core = require('@hi-ui/core');
|
|
31
31
|
|
|
32
32
|
function _interopDefaultLegacy(e) {
|
|
33
33
|
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
@@ -46,11 +46,11 @@ var _prefix = classname.getPrefixCls(_role);
|
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
49
|
-
var i18n =
|
|
49
|
+
var i18n = core.useLocaleContext();
|
|
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
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -54,10 +54,9 @@ 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 = objectUtils.setNested(prev.values, name, stateFunc(objectUtils.getNested(prev.values, name)));
|
|
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
62
|
var fieldError = alterErrors ? updateErrors(objectUtils.getNested(prev.errors, name)) : undefined;
|
|
@@ -78,20 +77,20 @@ var FormList = function FormList(_ref) {
|
|
|
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,7 +117,7 @@ var FormList = function FormList(_ref) {
|
|
|
118
117
|
return copy;
|
|
119
118
|
}, true, true);
|
|
120
119
|
}, [updateFormList]);
|
|
121
|
-
var listFields = React__default[
|
|
120
|
+
var listFields = React__default["default"].useMemo(function () {
|
|
122
121
|
var list = objectUtils.getNested(values, name) || []; // @ts-ignore
|
|
123
122
|
|
|
124
123
|
return list.map(function (value, index) {
|
|
@@ -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
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -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
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -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
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -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
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -30,4 +30,3 @@ var useFormContext = function useFormContext() {
|
|
|
30
30
|
|
|
31
31
|
exports.FormProvider = FormProvider;
|
|
32
32
|
exports.useFormContext = useFormContext;
|
|
33
|
-
//# sourceMappingURL=context.js.map
|
package/lib/cjs/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -38,4 +38,3 @@ exports.FormList = FormList.FormList;
|
|
|
38
38
|
exports.FormSubmit = FormSubmit.FormSubmit;
|
|
39
39
|
exports.FormReset = FormReset.FormReset;
|
|
40
40
|
exports["default"] = Form;
|
|
41
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -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;-webkit-column-gap: var(--hi-v4-spacing-10, 20px);-moz-column-gap: var(--hi-v4-spacing-10, 20px);column-gap: var(--hi-v4-spacing-10, 20px); }.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
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* @hi-ui/form
|
|
3
3
|
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/form#readme
|
|
4
4
|
*
|
|
5
|
-
* Copyright (c)
|
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -35,17 +35,14 @@ function _interopDefaultLegacy(e) {
|
|
|
35
35
|
|
|
36
36
|
var Validater__default = /*#__PURE__*/_interopDefaultLegacy(Validater);
|
|
37
37
|
|
|
38
|
-
var
|
|
38
|
+
var useFiledRules = function useFiledRules(props) {
|
|
39
39
|
var field = props.field,
|
|
40
40
|
rulesProp = props.rules,
|
|
41
41
|
_props$valueType = props.valueType,
|
|
42
42
|
valueType = _props$valueType === void 0 ? 'any' : _props$valueType;
|
|
43
43
|
|
|
44
44
|
var _useFormContext = context.useFormContext(),
|
|
45
|
-
getFieldRules = _useFormContext.getFieldRules
|
|
46
|
-
getFieldProps = _useFormContext.getFieldProps,
|
|
47
|
-
registerField = _useFormContext.registerField,
|
|
48
|
-
unregisterField = _useFormContext.unregisterField;
|
|
45
|
+
getFieldRules = _useFormContext.getFieldRules;
|
|
49
46
|
/**
|
|
50
47
|
* 处理校验规则,item 优先级大于 form
|
|
51
48
|
*/
|
|
@@ -59,7 +56,19 @@ var useFormField = function useFormField(props) {
|
|
|
59
56
|
type: valueType
|
|
60
57
|
}, rule);
|
|
61
58
|
});
|
|
62
|
-
}, [rulesProp, field, getFieldRules, valueType]);
|
|
59
|
+
}, [rulesProp, field, getFieldRules, valueType]);
|
|
60
|
+
return fieldRules;
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
var useFormField = function useFormField(props) {
|
|
64
|
+
var field = props.field;
|
|
65
|
+
|
|
66
|
+
var _useFormContext2 = context.useFormContext(),
|
|
67
|
+
getFieldProps = _useFormContext2.getFieldProps,
|
|
68
|
+
registerField = _useFormContext2.registerField,
|
|
69
|
+
unregisterField = _useFormContext2.unregisterField;
|
|
70
|
+
|
|
71
|
+
var fieldRules = useFiledRules(props); // 当前 field 的唯一校验器
|
|
63
72
|
|
|
64
73
|
var fieldValidate = React.useCallback(function (value) {
|
|
65
74
|
var _Validater, _validater$validate;
|
|
@@ -70,30 +79,24 @@ var useFormField = function useFormField(props) {
|
|
|
70
79
|
|
|
71
80
|
|
|
72
81
|
var fieldMD5 = index.stringify(field);
|
|
73
|
-
var validater = new Validater__default[
|
|
82
|
+
var validater = new Validater__default["default"]((_Validater = {}, _Validater[fieldMD5] = fieldRules, _Validater));
|
|
74
83
|
return validater.validate((_validater$validate = {}, _validater$validate[fieldMD5] = value, _validater$validate), {
|
|
75
84
|
firstFields: true
|
|
76
85
|
});
|
|
77
86
|
}, [fieldRules, field]); // 注入当前 field 及其验证规则到 Form
|
|
78
87
|
|
|
79
88
|
React.useEffect(function () {
|
|
80
|
-
if (
|
|
81
|
-
if (typeAssertion.isArray(field) && field.every(function (item) {
|
|
82
|
-
return typeAssertion.isNullish(item) || item === '';
|
|
83
|
-
})) return;
|
|
89
|
+
if (!index.isValidField(field)) return;
|
|
84
90
|
registerField(field, {
|
|
85
91
|
validate: fieldValidate
|
|
86
92
|
});
|
|
87
93
|
return function () {
|
|
88
|
-
if (
|
|
89
|
-
if (typeAssertion.isArray(field) && field.every(function (item) {
|
|
90
|
-
return typeAssertion.isNullish(item) || item === '';
|
|
91
|
-
})) return;
|
|
94
|
+
if (!index.isValidField(field)) return;
|
|
92
95
|
unregisterField(field);
|
|
93
96
|
};
|
|
94
97
|
}, [registerField, unregisterField, field, fieldValidate]);
|
|
95
98
|
return getFieldProps(props);
|
|
96
99
|
};
|
|
97
100
|
|
|
101
|
+
exports.useFiledRules = useFiledRules;
|
|
98
102
|
exports.useFormField = useFormField;
|
|
99
|
-
//# sourceMappingURL=use-form-field.js.map
|