@hi-ui/form 4.1.2 → 4.1.4
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 +35 -0
- package/lib/cjs/Form.js +26 -44
- package/lib/cjs/FormField.js +0 -16
- package/lib/cjs/FormItem.js +15 -37
- package/lib/cjs/FormLabel.js +44 -67
- package/lib/cjs/FormList.js +11 -37
- package/lib/cjs/FormMessage.js +10 -29
- package/lib/cjs/FormReset.js +11 -30
- package/lib/cjs/FormSubmit.js +13 -34
- package/lib/cjs/context.js +0 -6
- package/lib/cjs/index.js +0 -7
- package/lib/cjs/styles/index.scss.js +2 -5
- package/lib/cjs/use-form-field.js +16 -35
- package/lib/cjs/use-form.js +67 -153
- package/lib/cjs/utils/index.js +1 -8
- 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 +42 -54
- 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/lib/esm/Form.js
CHANGED
|
@@ -14,39 +14,35 @@ import { __DEV__, invariant } from '@hi-ui/env';
|
|
|
14
14
|
import { FormProvider } from './context.js';
|
|
15
15
|
import { useForm } from './use-form.js';
|
|
16
16
|
var _role = 'form';
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
var _prefix = getPrefixCls(_role);
|
|
18
|
+
// form 注册表
|
|
21
19
|
var FORM_REGISTER_TABLE = {};
|
|
22
20
|
/**
|
|
23
|
-
*
|
|
21
|
+
* 表单
|
|
24
22
|
*/
|
|
25
|
-
|
|
26
23
|
var Form = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
27
24
|
var _a$prefixCls = _a.prefixCls,
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
25
|
+
prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
|
|
26
|
+
_a$role = _a.role,
|
|
27
|
+
role = _a$role === void 0 ? _role : _a$role,
|
|
28
|
+
className = _a.className,
|
|
29
|
+
children = _a.children,
|
|
30
|
+
innerRef = _a.innerRef,
|
|
31
|
+
labelWidth = _a.labelWidth,
|
|
32
|
+
_a$labelPlacement = _a.labelPlacement,
|
|
33
|
+
labelPlacement = _a$labelPlacement === void 0 ? 'right' : _a$labelPlacement,
|
|
34
|
+
_a$placement = _a.placement,
|
|
35
|
+
placement = _a$placement === void 0 ? 'vertical' : _a$placement,
|
|
36
|
+
_a$contentPosition = _a.contentPosition,
|
|
37
|
+
contentPosition = _a$contentPosition === void 0 ? 'center' : _a$contentPosition,
|
|
38
|
+
_a$showRequiredOnVali = _a.showRequiredOnValidateRequired,
|
|
39
|
+
showRequiredOnValidateRequired = _a$showRequiredOnVali === void 0 ? false : _a$showRequiredOnVali,
|
|
40
|
+
_a$showColon = _a.showColon,
|
|
41
|
+
showColon = _a$showColon === void 0 ? true : _a$showColon,
|
|
42
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showRequiredOnValidateRequired", "showColon"]);
|
|
47
43
|
var formContext = useForm(rest);
|
|
48
|
-
var getRootProps = formContext.getRootProps;
|
|
49
|
-
|
|
44
|
+
var getRootProps = formContext.getRootProps;
|
|
45
|
+
// @ts-ignore
|
|
50
46
|
useImperativeHandle(innerRef, function () {
|
|
51
47
|
return {
|
|
52
48
|
validate: formContext.submitForm,
|
|
@@ -74,8 +70,7 @@ var Form = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
74
70
|
});
|
|
75
71
|
}, [labelWidth, formContext, labelPlacement, showColon, prefixCls, contentPosition, showRequiredOnValidateRequired]);
|
|
76
72
|
var cls = cx(prefixCls, className, placement && prefixCls + "--placement-" + placement);
|
|
77
|
-
return (
|
|
78
|
-
/*#__PURE__*/
|
|
73
|
+
return /*#__PURE__*/(
|
|
79
74
|
// @ts-ignore
|
|
80
75
|
React.createElement(FormProvider, {
|
|
81
76
|
value: providedValue
|
|
@@ -86,11 +81,9 @@ var Form = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
86
81
|
}, getRootProps()), children))
|
|
87
82
|
);
|
|
88
83
|
});
|
|
89
|
-
|
|
90
84
|
if (__DEV__) {
|
|
91
85
|
Form.displayName = 'Form';
|
|
92
86
|
}
|
|
93
|
-
|
|
94
87
|
var formExtends = function formExtends(model) {
|
|
95
88
|
// @ts-ignore
|
|
96
89
|
if (typeof model.name === 'string') {
|
|
@@ -100,7 +93,6 @@ var formExtends = function formExtends(model) {
|
|
|
100
93
|
invariant(false, 'The name should be unique string and not empty.');
|
|
101
94
|
}
|
|
102
95
|
};
|
|
103
|
-
|
|
104
96
|
Object.assign(Form, {
|
|
105
97
|
"extends": formExtends
|
|
106
98
|
});
|
package/lib/esm/FormField.js
CHANGED
|
@@ -11,33 +11,22 @@ import { isValidElement, cloneElement } from 'react';
|
|
|
11
11
|
import { __DEV__ } from '@hi-ui/env';
|
|
12
12
|
import { useFormField } from './use-form-field.js';
|
|
13
13
|
import { isFunction } from '@hi-ui/type-assertion';
|
|
14
|
-
/**
|
|
15
|
-
* TODO: What is FormField
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
14
|
var FormField = function FormField(props) {
|
|
19
15
|
var _a;
|
|
20
|
-
|
|
21
16
|
var fieldProps = useFormField(props);
|
|
22
|
-
|
|
23
17
|
if (isFunction(props.render)) {
|
|
24
18
|
return props.render(fieldProps);
|
|
25
19
|
}
|
|
26
|
-
|
|
27
20
|
if (isFunction(props.children)) {
|
|
28
21
|
return props.children(fieldProps);
|
|
29
22
|
}
|
|
30
|
-
|
|
31
23
|
if (! /*#__PURE__*/isValidElement(props.children)) {
|
|
32
24
|
console.warn('FormField must pass a valid element as children.');
|
|
33
25
|
return (_a = props.children) !== null && _a !== void 0 ? _a : null;
|
|
34
26
|
}
|
|
35
|
-
|
|
36
27
|
return /*#__PURE__*/cloneElement(props.children, Object.assign({}, fieldProps));
|
|
37
28
|
};
|
|
38
|
-
|
|
39
29
|
if (__DEV__) {
|
|
40
30
|
FormField.displayName = 'FormField';
|
|
41
31
|
}
|
|
42
|
-
|
|
43
32
|
export { FormField };
|
package/lib/esm/FormItem.js
CHANGED
|
@@ -16,28 +16,22 @@ import { FormMessage } from './FormMessage.js';
|
|
|
16
16
|
import { FormField } from './FormField.js';
|
|
17
17
|
import { useFormContext } from './context.js';
|
|
18
18
|
import { cx } from '@hi-ui/classname';
|
|
19
|
-
/**
|
|
20
|
-
* TODO: What is FormItem
|
|
21
|
-
*/
|
|
22
|
-
|
|
23
19
|
var FormItem = function FormItem(_a) {
|
|
24
20
|
var className = _a.className,
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
21
|
+
children = _a.children,
|
|
22
|
+
field = _a.field,
|
|
23
|
+
valueType = _a.valueType,
|
|
24
|
+
rules = _a.rules,
|
|
25
|
+
valuePropName = _a.valuePropName,
|
|
26
|
+
valueChangeFuncPropName = _a.valueChangeFuncPropName,
|
|
27
|
+
valueDispatchTransform = _a.valueDispatchTransform,
|
|
28
|
+
valueConnectTransform = _a.valueConnectTransform,
|
|
29
|
+
validateTrigger = _a.validateTrigger,
|
|
30
|
+
render = _a.render,
|
|
31
|
+
rest = __rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]);
|
|
37
32
|
var _useFormContext = useFormContext(),
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
33
|
+
prefixCls = _useFormContext.prefixCls,
|
|
34
|
+
showRequiredOnValidateRequired = _useFormContext.showRequiredOnValidateRequired;
|
|
41
35
|
var fieldRules = useFiledRules({
|
|
42
36
|
field: field,
|
|
43
37
|
rules: rules,
|
|
@@ -50,7 +44,6 @@ var FormItem = function FormItem(_a) {
|
|
|
50
44
|
return item.required;
|
|
51
45
|
});
|
|
52
46
|
}
|
|
53
|
-
|
|
54
47
|
return required;
|
|
55
48
|
}, [required, showRequiredOnValidateRequired, fieldRules]);
|
|
56
49
|
return /*#__PURE__*/React.createElement(FormLabel, Object.assign({}, rest, {
|
|
@@ -73,9 +66,7 @@ var FormItem = function FormItem(_a) {
|
|
|
73
66
|
render: render
|
|
74
67
|
}, children));
|
|
75
68
|
};
|
|
76
|
-
|
|
77
69
|
if (__DEV__) {
|
|
78
70
|
FormItem.displayName = 'FormItem';
|
|
79
71
|
}
|
|
80
|
-
|
|
81
72
|
export { FormItem };
|
package/lib/esm/FormLabel.js
CHANGED
|
@@ -15,74 +15,64 @@ import { useFormContext } from './context.js';
|
|
|
15
15
|
import { isNumeric } from '@hi-ui/type-assertion';
|
|
16
16
|
import { useLocaleContext } from '@hi-ui/core';
|
|
17
17
|
var _role = 'form-label';
|
|
18
|
-
|
|
19
18
|
var _prefix = getPrefixCls(_role);
|
|
20
|
-
/**
|
|
21
|
-
* TODO: What is FormLabel
|
|
22
|
-
*/
|
|
23
|
-
|
|
24
|
-
|
|
25
19
|
var FormLabel = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
26
20
|
var i18n = useLocaleContext();
|
|
27
|
-
|
|
28
21
|
var _useFormContext = useFormContext(),
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
22
|
+
labelWidthContext = _useFormContext.labelWidth,
|
|
23
|
+
labelPlacementContext = _useFormContext.labelPlacement,
|
|
24
|
+
showColonContext = _useFormContext.showColon,
|
|
25
|
+
contentPositionContext = _useFormContext.contentPosition;
|
|
34
26
|
var _props$prefixCls = props.prefixCls,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
27
|
+
prefixCls = _props$prefixCls === void 0 ? _prefix : _props$prefixCls,
|
|
28
|
+
_props$role = props.role,
|
|
29
|
+
role = _props$role === void 0 ? _role : _props$role,
|
|
30
|
+
className = props.className,
|
|
31
|
+
styleProp = props.style,
|
|
32
|
+
children = props.children,
|
|
33
|
+
label = props.label,
|
|
34
|
+
_props$required = props.required,
|
|
35
|
+
required = _props$required === void 0 ? false : _props$required,
|
|
36
|
+
_props$labelWidth = props.labelWidth,
|
|
37
|
+
labelWidthProp = _props$labelWidth === void 0 ? labelWidthContext : _props$labelWidth,
|
|
38
|
+
_props$showColon = props.showColon,
|
|
39
|
+
showColon = _props$showColon === void 0 ? showColonContext : _props$showColon,
|
|
40
|
+
_props$contentPositio = props.contentPosition,
|
|
41
|
+
contentPosition = _props$contentPositio === void 0 ? contentPositionContext : _props$contentPositio,
|
|
42
|
+
_props$labelPlacement = props.labelPlacement,
|
|
43
|
+
labelPlacement = _props$labelPlacement === void 0 ? labelPlacementContext : _props$labelPlacement,
|
|
44
|
+
formMessage = props.formMessage,
|
|
45
|
+
rest = __rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement", "formMessage"]);
|
|
55
46
|
var _useMemo = useMemo(function () {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
47
|
+
if (labelPlacement === 'top') return {
|
|
48
|
+
labelWidth: '100%',
|
|
49
|
+
controlWidth: '100%'
|
|
50
|
+
};
|
|
51
|
+
var labelWidth = isNumeric(labelWidthProp) ? Number(labelWidthProp) : labelWidthProp;
|
|
52
|
+
return {
|
|
53
|
+
labelWidth: labelWidth,
|
|
54
|
+
controlWidth: "calc(100% - " + labelWidth + "px)"
|
|
55
|
+
};
|
|
56
|
+
}, [labelPlacement, labelWidthProp]),
|
|
57
|
+
labelWidth = _useMemo.labelWidth,
|
|
58
|
+
controlWidth = _useMemo.controlWidth;
|
|
59
|
+
// 指定子元素位置
|
|
70
60
|
var contentPositionMemo = useMemo(function () {
|
|
71
61
|
switch (contentPosition) {
|
|
72
62
|
case 'top':
|
|
73
63
|
return 'flex-start';
|
|
74
|
-
|
|
75
64
|
case 'bottom':
|
|
76
65
|
return 'flex-end';
|
|
77
|
-
|
|
78
66
|
default:
|
|
79
67
|
return 'center';
|
|
80
68
|
}
|
|
81
69
|
}, [contentPosition]);
|
|
82
70
|
var colon = showColon ? i18n.get('form.colon') : null;
|
|
83
|
-
var cls = cx(prefixCls, className, required && prefixCls + "--required", labelPlacement && prefixCls + "--placement-" + labelPlacement
|
|
71
|
+
var cls = cx(prefixCls, className, required && prefixCls + "--required", labelPlacement && prefixCls + "--placement-" + labelPlacement
|
|
72
|
+
// error && `${prefixCls}--error`,
|
|
84
73
|
// validating && `${prefixCls}--validating`
|
|
85
74
|
);
|
|
75
|
+
|
|
86
76
|
var style = Object.assign({}, styleProp);
|
|
87
77
|
return /*#__PURE__*/React.createElement("div", Object.assign({
|
|
88
78
|
ref: ref,
|
|
@@ -94,17 +84,17 @@ var FormLabel = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
94
84
|
style: {
|
|
95
85
|
alignItems: contentPositionMemo
|
|
96
86
|
}
|
|
97
|
-
}, label ? /*#__PURE__*/React.createElement("label", {
|
|
87
|
+
}, label ? ( /*#__PURE__*/React.createElement("label", {
|
|
98
88
|
className: prefixCls + "__content__text",
|
|
99
89
|
style: {
|
|
100
90
|
width: labelWidth
|
|
101
91
|
}
|
|
102
|
-
}, label, colon) : /*#__PURE__*/React.createElement("span", {
|
|
92
|
+
}, label, colon)) : ( /*#__PURE__*/React.createElement("span", {
|
|
103
93
|
className: prefixCls + "__content__indent",
|
|
104
94
|
style: {
|
|
105
95
|
width: labelWidth
|
|
106
96
|
}
|
|
107
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
97
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
108
98
|
className: prefixCls + "__content__control",
|
|
109
99
|
style: {
|
|
110
100
|
width: controlWidth
|
|
@@ -115,9 +105,7 @@ var FormLabel = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
115
105
|
}
|
|
116
106
|
}, formMessage));
|
|
117
107
|
});
|
|
118
|
-
|
|
119
108
|
if (__DEV__) {
|
|
120
109
|
FormLabel.displayName = 'FormLabel';
|
|
121
110
|
}
|
|
122
|
-
|
|
123
111
|
export { FormLabel };
|
package/lib/esm/FormList.js
CHANGED
|
@@ -13,27 +13,20 @@ import { useFormContext } from './context.js';
|
|
|
13
13
|
import { setNested, getNested } from '@hi-ui/object-utils';
|
|
14
14
|
import { isArray, isArrayNonEmpty } from '@hi-ui/type-assertion';
|
|
15
15
|
var fieldListSymbol = Symbol('field-list');
|
|
16
|
-
/**
|
|
17
|
-
* TODO: What is FormList
|
|
18
|
-
*/
|
|
19
|
-
|
|
20
16
|
var FormList = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
21
17
|
var children = _ref.children,
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
18
|
+
nameProp = _ref.name,
|
|
19
|
+
innerRef = _ref.innerRef;
|
|
25
20
|
var _useFormContext = useFormContext(),
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
values = _useFormContext.values,
|
|
22
|
+
setFormState = _useFormContext.setFormState;
|
|
23
|
+
// 唯一 id 生成器
|
|
28
24
|
// const listCountRef = React.useRef(0)
|
|
29
25
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
30
|
-
|
|
31
|
-
|
|
32
26
|
var name = isArray(nameProp) ? nameProp : [nameProp];
|
|
33
27
|
/**
|
|
34
28
|
* form List 动态字段更新器
|
|
35
29
|
*/
|
|
36
|
-
|
|
37
30
|
var updateFormList = React.useCallback(function (stateFunc, alterTouched, alterErrors) {
|
|
38
31
|
setFormState(function (prev) {
|
|
39
32
|
var values = setNested(prev.values, name, stateFunc(getNested(prev.values, name)));
|
|
@@ -41,15 +34,12 @@ var FormList = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
41
34
|
var updateTouched = typeof alterTouched === 'function' ? alterTouched : stateFunc;
|
|
42
35
|
var fieldError = alterErrors ? updateErrors(getNested(prev.errors, name)) : undefined;
|
|
43
36
|
var fieldTouched = alterTouched ? updateTouched(getNested(prev.touched, name)) : undefined;
|
|
44
|
-
|
|
45
37
|
if (!isArrayNonEmpty(fieldError)) {
|
|
46
38
|
fieldError = undefined;
|
|
47
39
|
}
|
|
48
|
-
|
|
49
40
|
if (!isArrayNonEmpty(fieldTouched)) {
|
|
50
41
|
fieldTouched = undefined;
|
|
51
42
|
}
|
|
52
|
-
|
|
53
43
|
return {
|
|
54
44
|
values: values,
|
|
55
45
|
errors: alterErrors ? setNested(prev.errors, name, fieldError) : prev.errors,
|
|
@@ -98,8 +88,8 @@ var FormList = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
98
88
|
}, true, true);
|
|
99
89
|
}, [updateFormList]);
|
|
100
90
|
var listFields = React.useMemo(function () {
|
|
101
|
-
var list = getNested(values, name) || [];
|
|
102
|
-
|
|
91
|
+
var list = getNested(values, name) || [];
|
|
92
|
+
// @ts-ignore
|
|
103
93
|
return list.map(function (value, index) {
|
|
104
94
|
return {
|
|
105
95
|
name: '' + index,
|
|
@@ -108,8 +98,8 @@ var FormList = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
108
98
|
value: value
|
|
109
99
|
};
|
|
110
100
|
});
|
|
111
|
-
}, [values, name]);
|
|
112
|
-
|
|
101
|
+
}, [values, name]);
|
|
102
|
+
// @ts-ignore
|
|
113
103
|
useImperativeHandle(innerRef, function () {
|
|
114
104
|
return {
|
|
115
105
|
add: add,
|
|
@@ -119,15 +109,12 @@ var FormList = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
119
109
|
move: move
|
|
120
110
|
};
|
|
121
111
|
});
|
|
122
|
-
|
|
123
112
|
if (typeof children !== 'function') {
|
|
124
113
|
if (__DEV__) {
|
|
125
114
|
console.warn(false, 'FormList only accepts a render function as children.');
|
|
126
115
|
}
|
|
127
|
-
|
|
128
116
|
return null;
|
|
129
117
|
}
|
|
130
|
-
|
|
131
118
|
return children(listFields, {
|
|
132
119
|
add: add,
|
|
133
120
|
remove: remove,
|
|
@@ -136,19 +123,15 @@ var FormList = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
136
123
|
move: move
|
|
137
124
|
});
|
|
138
125
|
});
|
|
139
|
-
|
|
140
126
|
if (__DEV__) {
|
|
141
127
|
FormList.displayName = 'FormList';
|
|
142
128
|
}
|
|
143
|
-
|
|
144
129
|
var insert = function insert(arr, index, value) {
|
|
145
130
|
arr = [].concat(arr);
|
|
146
131
|
arr.splice(index, 0, value);
|
|
147
132
|
return arr;
|
|
148
133
|
};
|
|
149
|
-
|
|
150
134
|
var asArray = function asArray(arr) {
|
|
151
135
|
return isArray(arr) ? arr : [];
|
|
152
136
|
};
|
|
153
|
-
|
|
154
137
|
export { FormList };
|
package/lib/esm/FormMessage.js
CHANGED
|
@@ -13,27 +13,19 @@ import { getPrefixCls, cx } from '@hi-ui/classname';
|
|
|
13
13
|
import { __DEV__ } from '@hi-ui/env';
|
|
14
14
|
import { useFormContext } from './context.js';
|
|
15
15
|
var _role = 'form-message';
|
|
16
|
-
|
|
17
16
|
var _prefix = getPrefixCls(_role);
|
|
18
|
-
/**
|
|
19
|
-
* TODO: What is FormMessage
|
|
20
|
-
*/
|
|
21
|
-
|
|
22
|
-
|
|
23
17
|
var FormMessage = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
24
18
|
var _a$prefixCls = _a.prefixCls,
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
19
|
+
prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
|
|
20
|
+
_a$role = _a.role,
|
|
21
|
+
role = _a$role === void 0 ? _role : _a$role,
|
|
22
|
+
className = _a.className,
|
|
23
|
+
field = _a.field,
|
|
24
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "children", "field"]);
|
|
32
25
|
var _useFormContext = useFormContext(),
|
|
33
|
-
|
|
26
|
+
getFieldError = _useFormContext.getFieldError;
|
|
27
|
+
// field 支持数组,递归去设置或者获取对象中的属性值
|
|
34
28
|
// 如何变成映射的 key,特殊处理化
|
|
35
|
-
|
|
36
|
-
|
|
37
29
|
var message = field ? getFieldError(field) : null;
|
|
38
30
|
var cls = cx(prefixCls, className, message && prefixCls + "--show");
|
|
39
31
|
return /*#__PURE__*/React.createElement("span", Object.assign({
|
|
@@ -42,9 +34,7 @@ var FormMessage = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
42
34
|
className: cls
|
|
43
35
|
}, rest), message);
|
|
44
36
|
});
|
|
45
|
-
|
|
46
37
|
if (__DEV__) {
|
|
47
38
|
FormMessage.displayName = 'FormMessage';
|
|
48
39
|
}
|
|
49
|
-
|
|
50
40
|
export { FormMessage };
|
package/lib/esm/FormReset.js
CHANGED
|
@@ -14,23 +14,17 @@ import { __DEV__ } from '@hi-ui/env';
|
|
|
14
14
|
import { useFormContext } from './context.js';
|
|
15
15
|
import Button from '@hi-ui/button';
|
|
16
16
|
var FORM_RESET_PREFIX = getPrefixCls('form-reset');
|
|
17
|
-
/**
|
|
18
|
-
* TODO: What is FormReset
|
|
19
|
-
*/
|
|
20
|
-
|
|
21
17
|
var FormReset = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
22
18
|
var _a$prefixCls = _a.prefixCls,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
19
|
+
prefixCls = _a$prefixCls === void 0 ? FORM_RESET_PREFIX : _a$prefixCls,
|
|
20
|
+
className = _a.className,
|
|
21
|
+
children = _a.children,
|
|
22
|
+
_a$type = _a.type,
|
|
23
|
+
type = _a$type === void 0 ? 'secondary' : _a$type,
|
|
24
|
+
_onClick = _a.onClick,
|
|
25
|
+
rest = __rest(_a, ["prefixCls", "className", "children", "type", "onClick"]);
|
|
31
26
|
var _useFormContext = useFormContext(),
|
|
32
|
-
|
|
33
|
-
|
|
27
|
+
resetForm = _useFormContext.resetForm;
|
|
34
28
|
var cls = cx(prefixCls, className);
|
|
35
29
|
return /*#__PURE__*/React.createElement(Button, Object.assign({
|
|
36
30
|
ref: ref,
|
|
@@ -43,9 +37,7 @@ var FormReset = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
43
37
|
}
|
|
44
38
|
}), children);
|
|
45
39
|
});
|
|
46
|
-
|
|
47
40
|
if (__DEV__) {
|
|
48
41
|
FormReset.displayName = 'FormReset';
|
|
49
42
|
}
|
|
50
|
-
|
|
51
43
|
export { FormReset };
|
package/lib/esm/FormSubmit.js
CHANGED
|
@@ -14,28 +14,20 @@ import { __DEV__ } from '@hi-ui/env';
|
|
|
14
14
|
import { useFormContext } from './context.js';
|
|
15
15
|
import Button from '@hi-ui/button';
|
|
16
16
|
var _role = 'form-submit';
|
|
17
|
-
|
|
18
17
|
var _prefix = getPrefixCls(_role);
|
|
19
|
-
/**
|
|
20
|
-
* TODO: What is FormSubmit
|
|
21
|
-
*/
|
|
22
|
-
|
|
23
|
-
|
|
24
18
|
var FormSubmit = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
25
19
|
var _a$prefixCls = _a.prefixCls,
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
20
|
+
prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
|
|
21
|
+
_a$role = _a.role,
|
|
22
|
+
role = _a$role === void 0 ? _role : _a$role,
|
|
23
|
+
className = _a.className,
|
|
24
|
+
children = _a.children,
|
|
25
|
+
_a$type = _a.type,
|
|
26
|
+
type = _a$type === void 0 ? 'primary' : _a$type,
|
|
27
|
+
_onClick = _a.onClick,
|
|
28
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "children", "type", "onClick"]);
|
|
36
29
|
var _useFormContext = useFormContext(),
|
|
37
|
-
|
|
38
|
-
|
|
30
|
+
submitForm = _useFormContext.submitForm;
|
|
39
31
|
var cls = cx(prefixCls, className);
|
|
40
32
|
return /*#__PURE__*/React.createElement(Button, Object.assign({
|
|
41
33
|
ref: ref,
|
|
@@ -56,9 +48,7 @@ var FormSubmit = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
56
48
|
}
|
|
57
49
|
}), children);
|
|
58
50
|
});
|
|
59
|
-
|
|
60
51
|
if (__DEV__) {
|
|
61
52
|
FormSubmit.displayName = 'FormSubmit';
|
|
62
53
|
}
|
|
63
|
-
|
|
64
54
|
export { FormSubmit };
|
package/lib/esm/context.js
CHANGED
|
@@ -10,15 +10,11 @@
|
|
|
10
10
|
import { useContext, createContext } from 'react';
|
|
11
11
|
var formContext = /*#__PURE__*/createContext(null);
|
|
12
12
|
var FormProvider = formContext.Provider;
|
|
13
|
-
|
|
14
13
|
var useFormContext = function useFormContext() {
|
|
15
14
|
var context = useContext(formContext);
|
|
16
|
-
|
|
17
15
|
if (!context) {
|
|
18
16
|
throw new Error('The FormContext should using in Form.');
|
|
19
17
|
}
|
|
20
|
-
|
|
21
18
|
return context;
|
|
22
19
|
};
|
|
23
|
-
|
|
24
20
|
export { FormProvider, useFormContext };
|
package/lib/esm/index.js
CHANGED
|
@@ -9,19 +9,15 @@
|
|
|
9
9
|
*/
|
|
10
10
|
import './styles/index.scss.js';
|
|
11
11
|
import { Form as Form$1 } from './Form.js';
|
|
12
|
-
export { FORM_REGISTER_TABLE
|
|
12
|
+
export { FORM_REGISTER_TABLE } from './Form.js';
|
|
13
13
|
import { FormItem } from './FormItem.js';
|
|
14
|
-
export { FormItem } from './FormItem.js';
|
|
15
14
|
import { FormList } from './FormList.js';
|
|
16
|
-
export { FormList } from './FormList.js';
|
|
17
15
|
import { FormSubmit } from './FormSubmit.js';
|
|
18
|
-
export { FormSubmit } from './FormSubmit.js';
|
|
19
16
|
import { FormReset } from './FormReset.js';
|
|
20
|
-
export { FormReset } from './FormReset.js';
|
|
21
17
|
var Form = Object.assign(Form$1, {
|
|
22
18
|
Item: FormItem,
|
|
23
19
|
List: FormList,
|
|
24
20
|
Submit: FormSubmit,
|
|
25
21
|
Reset: FormReset
|
|
26
22
|
});
|
|
27
|
-
export { Form as default };
|
|
23
|
+
export { Form$1 as Form, FormItem, FormList, FormReset, FormSubmit, Form as default };
|
|
@@ -7,9 +7,7 @@
|
|
|
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.
|
|
9
9
|
*/
|
|
10
|
-
import __styleInject__ from 'inject
|
|
11
|
-
var css_248z = ".hi-v4-form {max-width: 100%;position: relative;
|
|
12
|
-
|
|
10
|
+
import __styleInject__ from 'style-inject';
|
|
11
|
+
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 {font-size: var(--hi-v4-text-size-md, 0.875rem);-webkit-box-sizing: border-box;box-sizing: border-box;margin-right: 0;}.hi-v4-form-label__content {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-form-label--placement-top > .hi-v4-form-label__content {text-align: left;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding-right: 0;}.hi-v4-form-label__content__text, .hi-v4-form-label__content__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__content__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__content > .hi-v4-form-label__content__text {text-align: left;}.hi-v4-form-label--placement-right > .hi-v4-form-label__content > .hi-v4-form-label__content__text {text-align: right;}.hi-v4-form-label--placement-top > .hi-v4-form-label__content > .hi-v4-form-label__content__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__content > .hi-v4-form-label__content__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__content__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;}";
|
|
13
12
|
__styleInject__(css_248z);
|
|
14
|
-
|
|
15
13
|
export { css_248z as default };
|