@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/cjs/FormReset.js
CHANGED
|
@@ -10,51 +10,34 @@
|
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
12
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
-
|
|
14
13
|
Object.defineProperty(exports, '__esModule', {
|
|
15
14
|
value: true
|
|
16
15
|
});
|
|
17
|
-
|
|
18
16
|
var tslib = require('tslib');
|
|
19
|
-
|
|
20
17
|
var React = require('react');
|
|
21
|
-
|
|
22
18
|
var classname = require('@hi-ui/classname');
|
|
23
|
-
|
|
24
19
|
var env = require('@hi-ui/env');
|
|
25
|
-
|
|
26
20
|
var context = require('./context.js');
|
|
27
|
-
|
|
28
21
|
var Button = require('@hi-ui/button');
|
|
29
|
-
|
|
30
|
-
function _interopDefaultLegacy(e) {
|
|
22
|
+
function _interopDefaultCompat(e) {
|
|
31
23
|
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
32
24
|
'default': e
|
|
33
25
|
};
|
|
34
26
|
}
|
|
35
|
-
|
|
36
|
-
var
|
|
37
|
-
|
|
38
|
-
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
39
|
-
|
|
27
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
28
|
+
var Button__default = /*#__PURE__*/_interopDefaultCompat(Button);
|
|
40
29
|
var FORM_RESET_PREFIX = classname.getPrefixCls('form-reset');
|
|
41
|
-
/**
|
|
42
|
-
* TODO: What is FormReset
|
|
43
|
-
*/
|
|
44
|
-
|
|
45
30
|
var FormReset = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
46
31
|
var _a$prefixCls = _a.prefixCls,
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
32
|
+
prefixCls = _a$prefixCls === void 0 ? FORM_RESET_PREFIX : _a$prefixCls,
|
|
33
|
+
className = _a.className,
|
|
34
|
+
children = _a.children,
|
|
35
|
+
_a$type = _a.type,
|
|
36
|
+
type = _a$type === void 0 ? 'secondary' : _a$type,
|
|
37
|
+
_onClick = _a.onClick,
|
|
38
|
+
rest = tslib.__rest(_a, ["prefixCls", "className", "children", "type", "onClick"]);
|
|
55
39
|
var _useFormContext = context.useFormContext(),
|
|
56
|
-
|
|
57
|
-
|
|
40
|
+
resetForm = _useFormContext.resetForm;
|
|
58
41
|
var cls = classname.cx(prefixCls, className);
|
|
59
42
|
return /*#__PURE__*/React__default["default"].createElement(Button__default["default"], Object.assign({
|
|
60
43
|
ref: ref,
|
|
@@ -67,9 +50,7 @@ var FormReset = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
67
50
|
}
|
|
68
51
|
}), children);
|
|
69
52
|
});
|
|
70
|
-
|
|
71
53
|
if (env.__DEV__) {
|
|
72
54
|
FormReset.displayName = 'FormReset';
|
|
73
55
|
}
|
|
74
|
-
|
|
75
56
|
exports.FormReset = FormReset;
|
package/lib/cjs/FormSubmit.js
CHANGED
|
@@ -10,56 +10,37 @@
|
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
12
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
-
|
|
14
13
|
Object.defineProperty(exports, '__esModule', {
|
|
15
14
|
value: true
|
|
16
15
|
});
|
|
17
|
-
|
|
18
16
|
var tslib = require('tslib');
|
|
19
|
-
|
|
20
17
|
var React = require('react');
|
|
21
|
-
|
|
22
18
|
var classname = require('@hi-ui/classname');
|
|
23
|
-
|
|
24
19
|
var env = require('@hi-ui/env');
|
|
25
|
-
|
|
26
20
|
var context = require('./context.js');
|
|
27
|
-
|
|
28
21
|
var Button = require('@hi-ui/button');
|
|
29
|
-
|
|
30
|
-
function _interopDefaultLegacy(e) {
|
|
22
|
+
function _interopDefaultCompat(e) {
|
|
31
23
|
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
32
24
|
'default': e
|
|
33
25
|
};
|
|
34
26
|
}
|
|
35
|
-
|
|
36
|
-
var
|
|
37
|
-
|
|
38
|
-
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
39
|
-
|
|
27
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
28
|
+
var Button__default = /*#__PURE__*/_interopDefaultCompat(Button);
|
|
40
29
|
var _role = 'form-submit';
|
|
41
|
-
|
|
42
30
|
var _prefix = classname.getPrefixCls(_role);
|
|
43
|
-
/**
|
|
44
|
-
* TODO: What is FormSubmit
|
|
45
|
-
*/
|
|
46
|
-
|
|
47
|
-
|
|
48
31
|
var FormSubmit = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
49
32
|
var _a$prefixCls = _a.prefixCls,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
33
|
+
prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
|
|
34
|
+
_a$role = _a.role,
|
|
35
|
+
role = _a$role === void 0 ? _role : _a$role,
|
|
36
|
+
className = _a.className,
|
|
37
|
+
children = _a.children,
|
|
38
|
+
_a$type = _a.type,
|
|
39
|
+
type = _a$type === void 0 ? 'primary' : _a$type,
|
|
40
|
+
_onClick = _a.onClick,
|
|
41
|
+
rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "type", "onClick"]);
|
|
60
42
|
var _useFormContext = context.useFormContext(),
|
|
61
|
-
|
|
62
|
-
|
|
43
|
+
submitForm = _useFormContext.submitForm;
|
|
63
44
|
var cls = classname.cx(prefixCls, className);
|
|
64
45
|
return /*#__PURE__*/React__default["default"].createElement(Button__default["default"], Object.assign({
|
|
65
46
|
ref: ref,
|
|
@@ -80,9 +61,7 @@ var FormSubmit = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
80
61
|
}
|
|
81
62
|
}), children);
|
|
82
63
|
});
|
|
83
|
-
|
|
84
64
|
if (env.__DEV__) {
|
|
85
65
|
FormSubmit.displayName = 'FormSubmit';
|
|
86
66
|
}
|
|
87
|
-
|
|
88
67
|
exports.FormSubmit = FormSubmit;
|
package/lib/cjs/context.js
CHANGED
|
@@ -12,21 +12,15 @@
|
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
|
-
|
|
16
15
|
var React = require('react');
|
|
17
|
-
|
|
18
16
|
var formContext = /*#__PURE__*/React.createContext(null);
|
|
19
17
|
var FormProvider = formContext.Provider;
|
|
20
|
-
|
|
21
18
|
var useFormContext = function useFormContext() {
|
|
22
19
|
var context = React.useContext(formContext);
|
|
23
|
-
|
|
24
20
|
if (!context) {
|
|
25
21
|
throw new Error('The FormContext should using in Form.');
|
|
26
22
|
}
|
|
27
|
-
|
|
28
23
|
return context;
|
|
29
24
|
};
|
|
30
|
-
|
|
31
25
|
exports.FormProvider = FormProvider;
|
|
32
26
|
exports.useFormContext = useFormContext;
|
package/lib/cjs/index.js
CHANGED
|
@@ -12,19 +12,12 @@
|
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
|
-
|
|
16
15
|
require('./styles/index.scss.js');
|
|
17
|
-
|
|
18
16
|
var Form$1 = require('./Form.js');
|
|
19
|
-
|
|
20
17
|
var FormItem = require('./FormItem.js');
|
|
21
|
-
|
|
22
18
|
var FormList = require('./FormList.js');
|
|
23
|
-
|
|
24
19
|
var FormSubmit = require('./FormSubmit.js');
|
|
25
|
-
|
|
26
20
|
var FormReset = require('./FormReset.js');
|
|
27
|
-
|
|
28
21
|
var Form = Object.assign(Form$1.Form, {
|
|
29
22
|
Item: FormItem.FormItem,
|
|
30
23
|
List: FormList.FormList,
|
|
@@ -12,10 +12,7 @@
|
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
|
13
13
|
value: true
|
|
14
14
|
});
|
|
15
|
-
var css_248z = ".hi-v4-form {max-width: 100%;position: relative;
|
|
16
|
-
|
|
17
|
-
var __styleInject__ = require('inject-head-style')["default"];
|
|
18
|
-
|
|
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 {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;}";
|
|
16
|
+
var __styleInject__ = require('style-inject')["default"];
|
|
19
17
|
__styleInject__(css_248z);
|
|
20
|
-
|
|
21
18
|
exports["default"] = css_248z;
|
|
@@ -10,44 +10,31 @@
|
|
|
10
10
|
'use strict';
|
|
11
11
|
|
|
12
12
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
13
|
-
|
|
14
13
|
Object.defineProperty(exports, '__esModule', {
|
|
15
14
|
value: true
|
|
16
15
|
});
|
|
17
|
-
|
|
18
16
|
var React = require('react');
|
|
19
|
-
|
|
20
17
|
var context = require('./context.js');
|
|
21
|
-
|
|
22
18
|
var typeAssertion = require('@hi-ui/type-assertion');
|
|
23
|
-
|
|
24
19
|
var Validater = require('async-validator');
|
|
25
|
-
|
|
26
20
|
var arrayUtils = require('@hi-ui/array-utils');
|
|
27
|
-
|
|
28
21
|
var index = require('./utils/index.js');
|
|
29
|
-
|
|
30
|
-
function _interopDefaultLegacy(e) {
|
|
22
|
+
function _interopDefaultCompat(e) {
|
|
31
23
|
return e && _typeof(e) === 'object' && 'default' in e ? e : {
|
|
32
24
|
'default': e
|
|
33
25
|
};
|
|
34
26
|
}
|
|
35
|
-
|
|
36
|
-
var Validater__default = /*#__PURE__*/_interopDefaultLegacy(Validater);
|
|
37
|
-
|
|
27
|
+
var Validater__default = /*#__PURE__*/_interopDefaultCompat(Validater);
|
|
38
28
|
var useFiledRules = function useFiledRules(props) {
|
|
39
29
|
var field = props.field,
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
30
|
+
rulesProp = props.rules,
|
|
31
|
+
_props$valueType = props.valueType,
|
|
32
|
+
valueType = _props$valueType === void 0 ? 'any' : _props$valueType;
|
|
44
33
|
var _useFormContext = context.useFormContext(),
|
|
45
|
-
|
|
34
|
+
getFieldRules = _useFormContext.getFieldRules;
|
|
46
35
|
/**
|
|
47
36
|
* 处理校验规则,item 优先级大于 form
|
|
48
37
|
*/
|
|
49
|
-
|
|
50
|
-
|
|
51
38
|
var fieldRules = React.useMemo(function () {
|
|
52
39
|
// @ts-ignore
|
|
53
40
|
var rules = arrayUtils.normalizeArray(rulesProp !== null && rulesProp !== void 0 ? rulesProp : getFieldRules(field));
|
|
@@ -59,33 +46,28 @@ var useFiledRules = function useFiledRules(props) {
|
|
|
59
46
|
}, [rulesProp, field, getFieldRules, valueType]);
|
|
60
47
|
return fieldRules;
|
|
61
48
|
};
|
|
62
|
-
|
|
63
49
|
var useFormField = function useFormField(props) {
|
|
64
50
|
var field = props.field,
|
|
65
|
-
|
|
66
|
-
|
|
51
|
+
valueType = props.valueType;
|
|
67
52
|
var _useFormContext2 = context.useFormContext(),
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
53
|
+
getFieldProps = _useFormContext2.getFieldProps,
|
|
54
|
+
registerField = _useFormContext2.registerField,
|
|
55
|
+
unregisterField = _useFormContext2.unregisterField;
|
|
56
|
+
var fieldRules = useFiledRules(props);
|
|
57
|
+
// 当前 field 的唯一校验器
|
|
74
58
|
var fieldValidate = React.useCallback(function (value) {
|
|
75
59
|
var _Validater, _validater$validate;
|
|
76
|
-
|
|
77
60
|
if (!typeAssertion.isArrayNonEmpty(fieldRules)) {
|
|
78
61
|
return Promise.resolve(null);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
|
|
62
|
+
}
|
|
63
|
+
// TODO: rules 处理成 Async Validate 的指定结构
|
|
82
64
|
var fieldMD5 = index.stringify(field);
|
|
83
65
|
var validater = new Validater__default["default"]((_Validater = {}, _Validater[fieldMD5] = fieldRules, _Validater));
|
|
84
66
|
return validater.validate((_validater$validate = {}, _validater$validate[fieldMD5] = valueType !== 'number' || value === '' ? value : isNaN(value) ? value : Number(value), _validater$validate), {
|
|
85
67
|
firstFields: true
|
|
86
68
|
});
|
|
87
|
-
}, [fieldRules, field, valueType]);
|
|
88
|
-
|
|
69
|
+
}, [fieldRules, field, valueType]);
|
|
70
|
+
// 注入当前 field 及其验证规则到 Form
|
|
89
71
|
React.useEffect(function () {
|
|
90
72
|
if (!index.isValidField(field)) return;
|
|
91
73
|
registerField(field, {
|
|
@@ -98,6 +80,5 @@ var useFormField = function useFormField(props) {
|
|
|
98
80
|
}, [registerField, unregisterField, field, fieldValidate]);
|
|
99
81
|
return getFieldProps(props);
|
|
100
82
|
};
|
|
101
|
-
|
|
102
83
|
exports.useFiledRules = useFiledRules;
|
|
103
84
|
exports.useFormField = useFormField;
|