@hi-ui/form 4.1.2 → 4.1.3
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/CHANGELOG.md +18 -0
- package/lib/cjs/Form.js +26 -54
- package/lib/cjs/FormField.js +0 -19
- package/lib/cjs/FormItem.js +16 -48
- package/lib/cjs/FormLabel.js +45 -78
- package/lib/cjs/FormList.js +16 -52
- package/lib/cjs/FormMessage.js +9 -38
- package/lib/cjs/FormReset.js +9 -39
- package/lib/cjs/FormSubmit.js +11 -43
- package/lib/cjs/context.js +0 -9
- package/lib/cjs/index.js +0 -7
- package/lib/cjs/styles/index.scss.js +2 -5
- package/lib/cjs/use-form-field.js +15 -44
- package/lib/cjs/use-form.js +71 -168
- package/lib/cjs/utils/index.js +1 -11
- package/lib/esm/Form.js +24 -32
- package/lib/esm/FormField.js +0 -11
- package/lib/esm/FormItem.js +13 -22
- package/lib/esm/FormLabel.js +39 -51
- package/lib/esm/FormList.js +9 -26
- package/lib/esm/FormMessage.js +8 -18
- package/lib/esm/FormReset.js +8 -16
- package/lib/esm/FormSubmit.js +10 -20
- package/lib/esm/context.js +0 -4
- package/lib/esm/index.js +2 -6
- package/lib/esm/styles/index.scss.js +2 -4
- package/lib/esm/use-form-field.js +14 -24
- package/lib/esm/use-form.js +64 -136
- package/lib/esm/utils/index.js +1 -6
- package/lib/types/Form.d.ts +1 -1
- package/lib/types/FormField.d.ts +0 -3
- package/lib/types/FormItem.d.ts +0 -3
- package/lib/types/FormLabel.d.ts +0 -3
- package/lib/types/FormList.d.ts +0 -3
- package/lib/types/FormMessage.d.ts +0 -3
- package/lib/types/FormReset.d.ts +0 -3
- package/lib/types/FormSubmit.d.ts +0 -3
- package/package.json +13 -14
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @hi-ui/form
|
|
2
2
|
|
|
3
|
+
## 4.1.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#2672](https://github.com/XiaoMi/hiui/pull/2672) [`1ebe27830`](https://github.com/XiaoMi/hiui/commit/1ebe2783098b3a8cd980bd10076d67635463800e) Thanks [@zyprepare](https://github.com/zyprepare)! - build: 升级到 rollup3,重新构建发布组件
|
|
8
|
+
|
|
9
|
+
- Updated dependencies [[`1ebe27830`](https://github.com/XiaoMi/hiui/commit/1ebe2783098b3a8cd980bd10076d67635463800e)]:
|
|
10
|
+
- @hi-ui/core@4.0.6
|
|
11
|
+
- @hi-ui/use-latest@4.0.2
|
|
12
|
+
- @hi-ui/button@4.0.7
|
|
13
|
+
- @hi-ui/array-utils@4.0.2
|
|
14
|
+
- @hi-ui/classname@4.0.2
|
|
15
|
+
- @hi-ui/dom-utils@4.0.5
|
|
16
|
+
- @hi-ui/env@4.0.2
|
|
17
|
+
- @hi-ui/func-utils@4.0.2
|
|
18
|
+
- @hi-ui/object-utils@4.0.2
|
|
19
|
+
- @hi-ui/type-assertion@4.0.2
|
|
20
|
+
|
|
3
21
|
## 4.1.2
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
package/lib/cjs/Form.js
CHANGED
|
@@ -9,66 +9,42 @@
|
|
|
9
9
|
*/
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
-
|
|
14
|
-
Object.defineProperty(exports, '__esModule', {
|
|
15
|
-
value: true
|
|
16
|
-
});
|
|
17
|
-
|
|
18
12
|
var tslib = require('tslib');
|
|
19
|
-
|
|
20
13
|
var React = require('react');
|
|
21
|
-
|
|
22
14
|
var classname = require('@hi-ui/classname');
|
|
23
|
-
|
|
24
15
|
var env = require('@hi-ui/env');
|
|
25
|
-
|
|
26
16
|
var context = require('./context.js');
|
|
27
|
-
|
|
28
17
|
var useForm = require('./use-form.js');
|
|
29
|
-
|
|
30
|
-
function _interopDefaultLegacy(e) {
|
|
31
|
-
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
32
|
-
'default': e
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
37
|
-
|
|
38
18
|
var _role = 'form';
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
19
|
+
var _prefix = classname.getPrefixCls(_role);
|
|
20
|
+
// form 注册表
|
|
43
21
|
var FORM_REGISTER_TABLE = {};
|
|
44
22
|
/**
|
|
45
|
-
*
|
|
23
|
+
* 表单
|
|
46
24
|
*/
|
|
47
|
-
|
|
48
25
|
var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
49
26
|
var _a$prefixCls = _a.prefixCls,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
27
|
+
prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
|
|
28
|
+
_a$role = _a.role,
|
|
29
|
+
role = _a$role === void 0 ? _role : _a$role,
|
|
30
|
+
className = _a.className,
|
|
31
|
+
children = _a.children,
|
|
32
|
+
innerRef = _a.innerRef,
|
|
33
|
+
labelWidth = _a.labelWidth,
|
|
34
|
+
_a$labelPlacement = _a.labelPlacement,
|
|
35
|
+
labelPlacement = _a$labelPlacement === void 0 ? 'right' : _a$labelPlacement,
|
|
36
|
+
_a$placement = _a.placement,
|
|
37
|
+
placement = _a$placement === void 0 ? 'vertical' : _a$placement,
|
|
38
|
+
_a$contentPosition = _a.contentPosition,
|
|
39
|
+
contentPosition = _a$contentPosition === void 0 ? 'center' : _a$contentPosition,
|
|
40
|
+
_a$showRequiredOnVali = _a.showRequiredOnValidateRequired,
|
|
41
|
+
showRequiredOnValidateRequired = _a$showRequiredOnVali === void 0 ? false : _a$showRequiredOnVali,
|
|
42
|
+
_a$showColon = _a.showColon,
|
|
43
|
+
showColon = _a$showColon === void 0 ? true : _a$showColon,
|
|
44
|
+
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showRequiredOnValidateRequired", "showColon"]);
|
|
69
45
|
var formContext = useForm.useForm(rest);
|
|
70
|
-
var getRootProps = formContext.getRootProps;
|
|
71
|
-
|
|
46
|
+
var getRootProps = formContext.getRootProps;
|
|
47
|
+
// @ts-ignore
|
|
72
48
|
React.useImperativeHandle(innerRef, function () {
|
|
73
49
|
return {
|
|
74
50
|
validate: formContext.submitForm,
|
|
@@ -96,23 +72,20 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
96
72
|
});
|
|
97
73
|
}, [labelWidth, formContext, labelPlacement, showColon, prefixCls, contentPosition, showRequiredOnValidateRequired]);
|
|
98
74
|
var cls = classname.cx(prefixCls, className, placement && prefixCls + "--placement-" + placement);
|
|
99
|
-
return (
|
|
100
|
-
/*#__PURE__*/
|
|
75
|
+
return /*#__PURE__*/(
|
|
101
76
|
// @ts-ignore
|
|
102
|
-
|
|
77
|
+
React.createElement(context.FormProvider, {
|
|
103
78
|
value: providedValue
|
|
104
|
-
}, /*#__PURE__*/
|
|
79
|
+
}, /*#__PURE__*/React.createElement("form", Object.assign({
|
|
105
80
|
ref: ref,
|
|
106
81
|
role: role,
|
|
107
82
|
className: cls
|
|
108
83
|
}, getRootProps()), children))
|
|
109
84
|
);
|
|
110
85
|
});
|
|
111
|
-
|
|
112
86
|
if (env.__DEV__) {
|
|
113
87
|
Form.displayName = 'Form';
|
|
114
88
|
}
|
|
115
|
-
|
|
116
89
|
var formExtends = function formExtends(model) {
|
|
117
90
|
// @ts-ignore
|
|
118
91
|
if (typeof model.name === 'string') {
|
|
@@ -122,7 +95,6 @@ var formExtends = function formExtends(model) {
|
|
|
122
95
|
env.invariant(false, 'The name should be unique string and not empty.');
|
|
123
96
|
}
|
|
124
97
|
};
|
|
125
|
-
|
|
126
98
|
Object.assign(Form, {
|
|
127
99
|
"extends": formExtends
|
|
128
100
|
});
|
package/lib/cjs/FormField.js
CHANGED
|
@@ -9,45 +9,26 @@
|
|
|
9
9
|
*/
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
|
-
Object.defineProperty(exports, '__esModule', {
|
|
13
|
-
value: true
|
|
14
|
-
});
|
|
15
|
-
|
|
16
12
|
var React = require('react');
|
|
17
|
-
|
|
18
13
|
var env = require('@hi-ui/env');
|
|
19
|
-
|
|
20
14
|
var useFormField = require('./use-form-field.js');
|
|
21
|
-
|
|
22
15
|
var typeAssertion = require('@hi-ui/type-assertion');
|
|
23
|
-
/**
|
|
24
|
-
* TODO: What is FormField
|
|
25
|
-
*/
|
|
26
|
-
|
|
27
|
-
|
|
28
16
|
var FormField = function FormField(props) {
|
|
29
17
|
var _a;
|
|
30
|
-
|
|
31
18
|
var fieldProps = useFormField.useFormField(props);
|
|
32
|
-
|
|
33
19
|
if (typeAssertion.isFunction(props.render)) {
|
|
34
20
|
return props.render(fieldProps);
|
|
35
21
|
}
|
|
36
|
-
|
|
37
22
|
if (typeAssertion.isFunction(props.children)) {
|
|
38
23
|
return props.children(fieldProps);
|
|
39
24
|
}
|
|
40
|
-
|
|
41
25
|
if (! /*#__PURE__*/React.isValidElement(props.children)) {
|
|
42
26
|
console.warn('FormField must pass a valid element as children.');
|
|
43
27
|
return (_a = props.children) !== null && _a !== void 0 ? _a : null;
|
|
44
28
|
}
|
|
45
|
-
|
|
46
29
|
return /*#__PURE__*/React.cloneElement(props.children, Object.assign({}, fieldProps));
|
|
47
30
|
};
|
|
48
|
-
|
|
49
31
|
if (env.__DEV__) {
|
|
50
32
|
FormField.displayName = 'FormField';
|
|
51
33
|
}
|
|
52
|
-
|
|
53
34
|
exports.FormField = FormField;
|
package/lib/cjs/FormItem.js
CHANGED
|
@@ -9,60 +9,31 @@
|
|
|
9
9
|
*/
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
-
|
|
14
|
-
Object.defineProperty(exports, '__esModule', {
|
|
15
|
-
value: true
|
|
16
|
-
});
|
|
17
|
-
|
|
18
12
|
var tslib = require('tslib');
|
|
19
|
-
|
|
20
13
|
var React = require('react');
|
|
21
|
-
|
|
22
14
|
var env = require('@hi-ui/env');
|
|
23
|
-
|
|
24
15
|
var useFormField = require('./use-form-field.js');
|
|
25
|
-
|
|
26
16
|
var FormLabel = require('./FormLabel.js');
|
|
27
|
-
|
|
28
17
|
var FormMessage = require('./FormMessage.js');
|
|
29
|
-
|
|
30
18
|
var FormField = require('./FormField.js');
|
|
31
|
-
|
|
32
19
|
var context = require('./context.js');
|
|
33
|
-
|
|
34
20
|
var classname = require('@hi-ui/classname');
|
|
35
|
-
|
|
36
|
-
function _interopDefaultLegacy(e) {
|
|
37
|
-
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
38
|
-
'default': e
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
43
|
-
/**
|
|
44
|
-
* TODO: What is FormItem
|
|
45
|
-
*/
|
|
46
|
-
|
|
47
|
-
|
|
48
21
|
var FormItem = function FormItem(_a) {
|
|
49
22
|
var className = _a.className,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
23
|
+
children = _a.children,
|
|
24
|
+
field = _a.field,
|
|
25
|
+
valueType = _a.valueType,
|
|
26
|
+
rules = _a.rules,
|
|
27
|
+
valuePropName = _a.valuePropName,
|
|
28
|
+
valueChangeFuncPropName = _a.valueChangeFuncPropName,
|
|
29
|
+
valueDispatchTransform = _a.valueDispatchTransform,
|
|
30
|
+
valueConnectTransform = _a.valueConnectTransform,
|
|
31
|
+
validateTrigger = _a.validateTrigger,
|
|
32
|
+
render = _a.render,
|
|
33
|
+
rest = tslib.__rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]);
|
|
62
34
|
var _useFormContext = context.useFormContext(),
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
35
|
+
prefixCls = _useFormContext.prefixCls,
|
|
36
|
+
showRequiredOnValidateRequired = _useFormContext.showRequiredOnValidateRequired;
|
|
66
37
|
var fieldRules = useFormField.useFiledRules({
|
|
67
38
|
field: field,
|
|
68
39
|
rules: rules,
|
|
@@ -75,18 +46,17 @@ var FormItem = function FormItem(_a) {
|
|
|
75
46
|
return item.required;
|
|
76
47
|
});
|
|
77
48
|
}
|
|
78
|
-
|
|
79
49
|
return required;
|
|
80
50
|
}, [required, showRequiredOnValidateRequired, fieldRules]);
|
|
81
|
-
return /*#__PURE__*/
|
|
51
|
+
return /*#__PURE__*/React.createElement(FormLabel.FormLabel, Object.assign({}, rest, {
|
|
82
52
|
required: showRequired,
|
|
83
53
|
// @ts-ignore
|
|
84
|
-
formMessage: /*#__PURE__*/
|
|
54
|
+
formMessage: /*#__PURE__*/React.createElement(FormMessage.FormMessage, {
|
|
85
55
|
field: field,
|
|
86
56
|
className: prefixCls + "-item__message"
|
|
87
57
|
}),
|
|
88
58
|
className: classname.cx(prefixCls + "-item", className)
|
|
89
|
-
}), /*#__PURE__*/
|
|
59
|
+
}), /*#__PURE__*/React.createElement(FormField.FormField, {
|
|
90
60
|
field: field,
|
|
91
61
|
valueType: valueType,
|
|
92
62
|
rules: rules,
|
|
@@ -98,9 +68,7 @@ var FormItem = function FormItem(_a) {
|
|
|
98
68
|
render: render
|
|
99
69
|
}, children));
|
|
100
70
|
};
|
|
101
|
-
|
|
102
71
|
if (env.__DEV__) {
|
|
103
72
|
FormItem.displayName = 'FormItem';
|
|
104
73
|
}
|
|
105
|
-
|
|
106
74
|
exports.FormItem = FormItem;
|
package/lib/cjs/FormLabel.js
CHANGED
|
@@ -9,138 +9,105 @@
|
|
|
9
9
|
*/
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
-
|
|
14
|
-
Object.defineProperty(exports, '__esModule', {
|
|
15
|
-
value: true
|
|
16
|
-
});
|
|
17
|
-
|
|
18
12
|
var tslib = require('tslib');
|
|
19
|
-
|
|
20
13
|
var React = require('react');
|
|
21
|
-
|
|
22
14
|
var classname = require('@hi-ui/classname');
|
|
23
|
-
|
|
24
15
|
var env = require('@hi-ui/env');
|
|
25
|
-
|
|
26
16
|
var context = require('./context.js');
|
|
27
|
-
|
|
28
17
|
var typeAssertion = require('@hi-ui/type-assertion');
|
|
29
|
-
|
|
30
18
|
var core = require('@hi-ui/core');
|
|
31
|
-
|
|
32
|
-
function _interopDefaultLegacy(e) {
|
|
33
|
-
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
34
|
-
'default': e
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
39
|
-
|
|
40
19
|
var _role = 'form-label';
|
|
41
|
-
|
|
42
20
|
var _prefix = classname.getPrefixCls(_role);
|
|
43
|
-
/**
|
|
44
|
-
* TODO: What is FormLabel
|
|
45
|
-
*/
|
|
46
|
-
|
|
47
|
-
|
|
48
21
|
var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
49
22
|
var i18n = core.useLocaleContext();
|
|
50
|
-
|
|
51
23
|
var _useFormContext = context.useFormContext(),
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
24
|
+
labelWidthContext = _useFormContext.labelWidth,
|
|
25
|
+
labelPlacementContext = _useFormContext.labelPlacement,
|
|
26
|
+
showColonContext = _useFormContext.showColon,
|
|
27
|
+
contentPositionContext = _useFormContext.contentPosition;
|
|
57
28
|
var _props$prefixCls = props.prefixCls,
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
29
|
+
prefixCls = _props$prefixCls === void 0 ? _prefix : _props$prefixCls,
|
|
30
|
+
_props$role = props.role,
|
|
31
|
+
role = _props$role === void 0 ? _role : _props$role,
|
|
32
|
+
className = props.className,
|
|
33
|
+
styleProp = props.style,
|
|
34
|
+
children = props.children,
|
|
35
|
+
label = props.label,
|
|
36
|
+
_props$required = props.required,
|
|
37
|
+
required = _props$required === void 0 ? false : _props$required,
|
|
38
|
+
_props$labelWidth = props.labelWidth,
|
|
39
|
+
labelWidthProp = _props$labelWidth === void 0 ? labelWidthContext : _props$labelWidth,
|
|
40
|
+
_props$showColon = props.showColon,
|
|
41
|
+
showColon = _props$showColon === void 0 ? showColonContext : _props$showColon,
|
|
42
|
+
_props$contentPositio = props.contentPosition,
|
|
43
|
+
contentPosition = _props$contentPositio === void 0 ? contentPositionContext : _props$contentPositio,
|
|
44
|
+
_props$labelPlacement = props.labelPlacement,
|
|
45
|
+
labelPlacement = _props$labelPlacement === void 0 ? labelPlacementContext : _props$labelPlacement,
|
|
46
|
+
formMessage = props.formMessage,
|
|
47
|
+
rest = tslib.__rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement", "formMessage"]);
|
|
78
48
|
var _useMemo = React.useMemo(function () {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
49
|
+
if (labelPlacement === 'top') return {
|
|
50
|
+
labelWidth: '100%',
|
|
51
|
+
controlWidth: '100%'
|
|
52
|
+
};
|
|
53
|
+
var labelWidth = typeAssertion.isNumeric(labelWidthProp) ? Number(labelWidthProp) : labelWidthProp;
|
|
54
|
+
return {
|
|
55
|
+
labelWidth: labelWidth,
|
|
56
|
+
controlWidth: "calc(100% - " + labelWidth + "px)"
|
|
57
|
+
};
|
|
58
|
+
}, [labelPlacement, labelWidthProp]),
|
|
59
|
+
labelWidth = _useMemo.labelWidth,
|
|
60
|
+
controlWidth = _useMemo.controlWidth;
|
|
61
|
+
// 指定子元素位置
|
|
93
62
|
var contentPositionMemo = React.useMemo(function () {
|
|
94
63
|
switch (contentPosition) {
|
|
95
64
|
case 'top':
|
|
96
65
|
return 'flex-start';
|
|
97
|
-
|
|
98
66
|
case 'bottom':
|
|
99
67
|
return 'flex-end';
|
|
100
|
-
|
|
101
68
|
default:
|
|
102
69
|
return 'center';
|
|
103
70
|
}
|
|
104
71
|
}, [contentPosition]);
|
|
105
72
|
var colon = showColon ? i18n.get('form.colon') : null;
|
|
106
|
-
var cls = classname.cx(prefixCls, className, required && prefixCls + "--required", labelPlacement && prefixCls + "--placement-" + labelPlacement
|
|
73
|
+
var cls = classname.cx(prefixCls, className, required && prefixCls + "--required", labelPlacement && prefixCls + "--placement-" + labelPlacement
|
|
74
|
+
// error && `${prefixCls}--error`,
|
|
107
75
|
// validating && `${prefixCls}--validating`
|
|
108
76
|
);
|
|
77
|
+
|
|
109
78
|
var style = Object.assign({}, styleProp);
|
|
110
|
-
return /*#__PURE__*/
|
|
79
|
+
return /*#__PURE__*/React.createElement("div", Object.assign({
|
|
111
80
|
ref: ref,
|
|
112
81
|
role: role,
|
|
113
82
|
className: cls,
|
|
114
83
|
style: style
|
|
115
|
-
}, rest), /*#__PURE__*/
|
|
84
|
+
}, rest), /*#__PURE__*/React.createElement("div", {
|
|
116
85
|
className: prefixCls + "__content",
|
|
117
86
|
style: {
|
|
118
87
|
alignItems: contentPositionMemo
|
|
119
88
|
}
|
|
120
|
-
}, label ? /*#__PURE__*/
|
|
89
|
+
}, label ? /*#__PURE__*/React.createElement("label", {
|
|
121
90
|
className: prefixCls + "__content__text",
|
|
122
91
|
style: {
|
|
123
92
|
width: labelWidth
|
|
124
93
|
}
|
|
125
|
-
}, label, colon) : /*#__PURE__*/
|
|
94
|
+
}, label, colon) : /*#__PURE__*/React.createElement("span", {
|
|
126
95
|
className: prefixCls + "__content__indent",
|
|
127
96
|
style: {
|
|
128
97
|
width: labelWidth
|
|
129
98
|
}
|
|
130
|
-
}), /*#__PURE__*/
|
|
99
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
131
100
|
className: prefixCls + "__content__control",
|
|
132
101
|
style: {
|
|
133
102
|
width: controlWidth
|
|
134
103
|
}
|
|
135
|
-
}, children)), /*#__PURE__*/
|
|
104
|
+
}, children)), /*#__PURE__*/React.createElement("div", {
|
|
136
105
|
style: {
|
|
137
106
|
paddingLeft: "calc(100% - " + controlWidth + ")"
|
|
138
107
|
}
|
|
139
108
|
}, formMessage));
|
|
140
109
|
});
|
|
141
|
-
|
|
142
110
|
if (env.__DEV__) {
|
|
143
111
|
FormLabel.displayName = 'FormLabel';
|
|
144
112
|
}
|
|
145
|
-
|
|
146
113
|
exports.FormLabel = FormLabel;
|
package/lib/cjs/FormList.js
CHANGED
|
@@ -9,68 +9,39 @@
|
|
|
9
9
|
*/
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
-
|
|
14
|
-
Object.defineProperty(exports, '__esModule', {
|
|
15
|
-
value: true
|
|
16
|
-
});
|
|
17
|
-
|
|
18
12
|
var React = require('react');
|
|
19
|
-
|
|
20
13
|
var env = require('@hi-ui/env');
|
|
21
|
-
|
|
22
14
|
var context = require('./context.js');
|
|
23
|
-
|
|
24
15
|
var objectUtils = require('@hi-ui/object-utils');
|
|
25
|
-
|
|
26
16
|
var typeAssertion = require('@hi-ui/type-assertion');
|
|
27
|
-
|
|
28
|
-
function _interopDefaultLegacy(e) {
|
|
29
|
-
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
30
|
-
'default': e
|
|
31
|
-
};
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
35
|
-
|
|
36
17
|
var fieldListSymbol = Symbol('field-list');
|
|
37
|
-
/**
|
|
38
|
-
* TODO: What is FormList
|
|
39
|
-
*/
|
|
40
|
-
|
|
41
18
|
var FormList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
42
19
|
var children = _ref.children,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
20
|
+
nameProp = _ref.name,
|
|
21
|
+
innerRef = _ref.innerRef;
|
|
46
22
|
var _useFormContext = context.useFormContext(),
|
|
47
|
-
|
|
48
|
-
|
|
23
|
+
values = _useFormContext.values,
|
|
24
|
+
setFormState = _useFormContext.setFormState;
|
|
25
|
+
// 唯一 id 生成器
|
|
49
26
|
// const listCountRef = React.useRef(0)
|
|
50
27
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
51
|
-
|
|
52
|
-
|
|
53
28
|
var name = typeAssertion.isArray(nameProp) ? nameProp : [nameProp];
|
|
54
29
|
/**
|
|
55
30
|
* form List 动态字段更新器
|
|
56
31
|
*/
|
|
57
|
-
|
|
58
|
-
var updateFormList = React__default["default"].useCallback(function (stateFunc, alterTouched, alterErrors) {
|
|
32
|
+
var updateFormList = React.useCallback(function (stateFunc, alterTouched, alterErrors) {
|
|
59
33
|
setFormState(function (prev) {
|
|
60
34
|
var values = objectUtils.setNested(prev.values, name, stateFunc(objectUtils.getNested(prev.values, name)));
|
|
61
35
|
var updateErrors = typeof alterErrors === 'function' ? alterErrors : stateFunc;
|
|
62
36
|
var updateTouched = typeof alterTouched === 'function' ? alterTouched : stateFunc;
|
|
63
37
|
var fieldError = alterErrors ? updateErrors(objectUtils.getNested(prev.errors, name)) : undefined;
|
|
64
38
|
var fieldTouched = alterTouched ? updateTouched(objectUtils.getNested(prev.touched, name)) : undefined;
|
|
65
|
-
|
|
66
39
|
if (!typeAssertion.isArrayNonEmpty(fieldError)) {
|
|
67
40
|
fieldError = undefined;
|
|
68
41
|
}
|
|
69
|
-
|
|
70
42
|
if (!typeAssertion.isArrayNonEmpty(fieldTouched)) {
|
|
71
43
|
fieldTouched = undefined;
|
|
72
44
|
}
|
|
73
|
-
|
|
74
45
|
return {
|
|
75
46
|
values: values,
|
|
76
47
|
errors: alterErrors ? objectUtils.setNested(prev.errors, name, fieldError) : prev.errors,
|
|
@@ -78,20 +49,20 @@ var FormList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
78
49
|
};
|
|
79
50
|
});
|
|
80
51
|
}, [name, setFormState]);
|
|
81
|
-
var add =
|
|
52
|
+
var add = React.useCallback(function (value) {
|
|
82
53
|
// 维护的 动态 field list
|
|
83
54
|
updateFormList(function (prev) {
|
|
84
55
|
return [].concat(asArray(prev), [value]);
|
|
85
56
|
}, false, false);
|
|
86
57
|
}, [updateFormList]);
|
|
87
|
-
var remove =
|
|
58
|
+
var remove = React.useCallback(function (index) {
|
|
88
59
|
updateFormList(function (prev) {
|
|
89
60
|
return asArray(prev).filter(function (_, idx) {
|
|
90
61
|
return idx !== index;
|
|
91
62
|
});
|
|
92
63
|
}, true, true);
|
|
93
64
|
}, [updateFormList]);
|
|
94
|
-
var insertBefore =
|
|
65
|
+
var insertBefore = React.useCallback(function (index, value) {
|
|
95
66
|
updateFormList(function (prev) {
|
|
96
67
|
return insert(asArray(prev), index, value);
|
|
97
68
|
}, function (prev) {
|
|
@@ -100,7 +71,7 @@ var FormList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
100
71
|
return insert(asArray(prev), index, null);
|
|
101
72
|
});
|
|
102
73
|
}, [updateFormList]);
|
|
103
|
-
var swap =
|
|
74
|
+
var swap = React.useCallback(function (aIndex, bIndex) {
|
|
104
75
|
updateFormList(function (prev) {
|
|
105
76
|
var copy = [].concat(asArray(prev));
|
|
106
77
|
var temp = copy[aIndex];
|
|
@@ -109,7 +80,7 @@ var FormList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
109
80
|
return copy;
|
|
110
81
|
}, true, true);
|
|
111
82
|
}, [updateFormList]);
|
|
112
|
-
var move =
|
|
83
|
+
var move = React.useCallback(function (fromIndex, toIndex) {
|
|
113
84
|
updateFormList(function (prev) {
|
|
114
85
|
var copy = [].concat(asArray(prev));
|
|
115
86
|
var temp = copy[fromIndex];
|
|
@@ -118,9 +89,9 @@ var FormList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
118
89
|
return copy;
|
|
119
90
|
}, true, true);
|
|
120
91
|
}, [updateFormList]);
|
|
121
|
-
var listFields =
|
|
122
|
-
var list = objectUtils.getNested(values, name) || [];
|
|
123
|
-
|
|
92
|
+
var listFields = React.useMemo(function () {
|
|
93
|
+
var list = objectUtils.getNested(values, name) || [];
|
|
94
|
+
// @ts-ignore
|
|
124
95
|
return list.map(function (value, index) {
|
|
125
96
|
return {
|
|
126
97
|
name: '' + index,
|
|
@@ -129,8 +100,8 @@ var FormList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
129
100
|
value: value
|
|
130
101
|
};
|
|
131
102
|
});
|
|
132
|
-
}, [values, name]);
|
|
133
|
-
|
|
103
|
+
}, [values, name]);
|
|
104
|
+
// @ts-ignore
|
|
134
105
|
React.useImperativeHandle(innerRef, function () {
|
|
135
106
|
return {
|
|
136
107
|
add: add,
|
|
@@ -140,15 +111,12 @@ var FormList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
140
111
|
move: move
|
|
141
112
|
};
|
|
142
113
|
});
|
|
143
|
-
|
|
144
114
|
if (typeof children !== 'function') {
|
|
145
115
|
if (env.__DEV__) {
|
|
146
116
|
console.warn(false, 'FormList only accepts a render function as children.');
|
|
147
117
|
}
|
|
148
|
-
|
|
149
118
|
return null;
|
|
150
119
|
}
|
|
151
|
-
|
|
152
120
|
return children(listFields, {
|
|
153
121
|
add: add,
|
|
154
122
|
remove: remove,
|
|
@@ -157,19 +125,15 @@ var FormList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
157
125
|
move: move
|
|
158
126
|
});
|
|
159
127
|
});
|
|
160
|
-
|
|
161
128
|
if (env.__DEV__) {
|
|
162
129
|
FormList.displayName = 'FormList';
|
|
163
130
|
}
|
|
164
|
-
|
|
165
131
|
var insert = function insert(arr, index, value) {
|
|
166
132
|
arr = [].concat(arr);
|
|
167
133
|
arr.splice(index, 0, value);
|
|
168
134
|
return arr;
|
|
169
135
|
};
|
|
170
|
-
|
|
171
136
|
var asArray = function asArray(arr) {
|
|
172
137
|
return typeAssertion.isArray(arr) ? arr : [];
|
|
173
138
|
};
|
|
174
|
-
|
|
175
139
|
exports.FormList = FormList;
|