@hi-ui/form 5.0.0-experimental.0 → 5.0.0-rc.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.
Files changed (15) hide show
  1. package/CHANGELOG.md +26 -20
  2. package/lib/cjs/Form.js +38 -6
  3. package/lib/cjs/FormItem.js +41 -3
  4. package/lib/cjs/FormLabel.js +12 -10
  5. package/lib/esm/Form.js +38 -6
  6. package/lib/esm/FormItem.js +41 -3
  7. package/lib/esm/FormLabel.js +12 -10
  8. package/lib/types/Form.d.ts +6 -1
  9. package/lib/types/FormItem.d.ts +6 -1
  10. package/lib/types/FormLabel.d.ts +20 -0
  11. package/lib/types/context.d.ts +13 -0
  12. package/lib/types/index.d.ts +1 -0
  13. package/lib/types/types.d.ts +9 -9
  14. package/lib/types/use-form.d.ts +6 -6
  15. package/package.json +14 -13
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @hi-ui/form
2
2
 
3
- ## 5.0.0-experimental.0
3
+ ## 5.0.0-rc.0
4
4
 
5
5
  ### Major Changes
6
6
 
@@ -9,14 +9,13 @@
9
9
  ### Minor Changes
10
10
 
11
11
  - dd5033f60: feat(form): 增加 autoRegister 参数,支持动态添加和删除表单时,数据同步更新 (5.0)
12
+ - 59cef699f: feat: 组件语义化样式改造，增加 styles 和 classNames 属性 (5.0)
12
13
 
13
14
  ### Patch Changes
14
15
 
15
- - 1662753e0: style: fix ui bug (5.0)
16
16
  - dd83a83bc: fix(form): 修复 FormList 字段变化时没有触发 onValuesChange 回调的问题 (5.0)
17
17
  - 8c0ee78f0: perf: 优化全局 size 配置,对于组件中没有的 size 值,取最接近的尺寸展示 (5.0)
18
18
  - 9b34d99bc: fix: 修复 5.0 UI 问题 (5.0)
19
- - f4fc0ef30: style: 修改样式问题 (5.0)
20
19
  - 79ea480f3: feat(global-context): 增加 size api 全局配置 (5.0)
21
20
  - 2e56529f7: styles: 主题定制功能完善&&样式变量化写法改造&&兼容 RTL (5.0)
22
21
  - 539749951: <br>
@@ -25,38 +24,45 @@
25
24
  - fix(form): 标题和控件间距改为 6px (5.0)
26
25
  - fix(form): 包裹控件容器设置最小高度 32px (5.0)
27
26
  - fix(form): 默认不显示标题冒号 (5.0)
27
+ - eb17c4697: style: 修复 UI/样式问题 (5.0)
28
28
  - 33da3144e: build: 将 package.json 中 exports 配置中的 types 配置放在最上面 (5.0)
29
- - 7f3abee55: style: fix ui bug (5.0)
30
- - b12cd78a3: fix(form): 修复当 initialValues 为 {} 时无法正常重置表单问题 (#3475)
31
29
  - Updated dependencies [eea29eade]
30
+ - Updated dependencies [eb17c4697]
32
31
  - Updated dependencies [8c0ee78f0]
33
32
  - Updated dependencies [9b34d99bc]
34
33
  - Updated dependencies [8f3aa85e4]
35
34
  - Updated dependencies [fd4c20bbd]
36
- - Updated dependencies [be5a59325]
37
- - Updated dependencies [71fc15e5c]
38
35
  - Updated dependencies [79ea480f3]
39
36
  - Updated dependencies [2e56529f7]
37
+ - Updated dependencies [3a7186e4b]
40
38
  - Updated dependencies [8a92ec660]
41
39
  - Updated dependencies [1429eced2]
40
+ - Updated dependencies [eb17c4697]
42
41
  - Updated dependencies [f1ab51725]
42
+ - Updated dependencies [c407744fe]
43
+ - Updated dependencies [d91a8bb0f]
43
44
  - Updated dependencies [4006b2c8c]
44
45
  - Updated dependencies [33da3144e]
45
- - Updated dependencies [0a8cc07a7]
46
- - Updated dependencies [7f3abee55]
47
46
  - Updated dependencies [58ad82e94]
47
+ - Updated dependencies [95d930354]
48
48
  - Updated dependencies [99801c2d1]
49
- - Updated dependencies [86910f5e2]
50
- - @hi-ui/button@5.0.0-experimental.0
51
- - @hi-ui/core@5.0.0-experimental.0
52
- - @hi-ui/use-latest@5.0.0-experimental.0
53
- - @hi-ui/array-utils@5.0.0-experimental.0
54
- - @hi-ui/classname@5.0.0-experimental.0
55
- - @hi-ui/dom-utils@5.0.0-experimental.0
56
- - @hi-ui/env@5.0.0-experimental.0
57
- - @hi-ui/func-utils@5.0.0-experimental.0
58
- - @hi-ui/object-utils@5.0.0-experimental.0
59
- - @hi-ui/type-assertion@5.0.0-experimental.0
49
+ - @hi-ui/button@5.0.0-rc.0
50
+ - @hi-ui/core@5.0.0-rc.0
51
+ - @hi-ui/use-latest@5.0.0-rc.0
52
+ - @hi-ui/array-utils@5.0.0-rc.0
53
+ - @hi-ui/classname@5.0.0-rc.0
54
+ - @hi-ui/dom-utils@5.0.0-rc.0
55
+ - @hi-ui/env@5.0.0-rc.0
56
+ - @hi-ui/func-utils@5.0.0-rc.0
57
+ - @hi-ui/object-utils@5.0.0-rc.0
58
+ - @hi-ui/type-assertion@5.0.0-rc.0
59
+ - @hi-ui/use-merge-semantic@5.0.0-rc.0
60
+
61
+ ## 4.3.4
62
+
63
+ ### Patch Changes
64
+
65
+ - [#3476](https://github.com/XiaoMi/hiui/pull/3476) [`b12cd78`](https://github.com/XiaoMi/hiui/commit/b12cd78a3e701a0efaacc6f14705a0afcb0fae08) Thanks [@zyprepare](https://github.com/zyprepare)! - fix(form): 修复当 initialValues 为 {} 时无法正常重置表单问题 (#3475)
60
66
 
61
67
  ## 4.3.3
62
68
 
package/lib/cjs/Form.js CHANGED
@@ -20,6 +20,7 @@ var env = require('@hi-ui/env');
20
20
  var context = require('./context.js');
21
21
  var useForm = require('./use-form.js');
22
22
  var core = require('@hi-ui/core');
23
+ var useMergeSemantic = require('@hi-ui/use-merge-semantic');
23
24
  function _interopDefaultCompat(e) {
24
25
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
25
26
  'default': e
@@ -39,6 +40,9 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
39
40
  _a$role = _a.role,
40
41
  role = _a$role === void 0 ? _role : _a$role,
41
42
  className = _a.className,
43
+ style = _a.style,
44
+ classNamesProp = _a.classNames,
45
+ stylesProp = _a.styles,
42
46
  children = _a.children,
43
47
  innerRef = _a.innerRef,
44
48
  labelWidth = _a.labelWidth,
@@ -54,10 +58,29 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
54
58
  _a$showValidateMessag = _a.showValidateMessage,
55
59
  showValidateMessage = _a$showValidateMessag === void 0 ? true : _a$showValidateMessag,
56
60
  sizeProp = _a.size,
57
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showRequiredOnValidateRequired", "showColon", "showValidateMessage", "size"]);
61
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showRequiredOnValidateRequired", "showColon", "showValidateMessage", "size"]);
58
62
  var _useGlobalContext = core.useGlobalContext(),
59
- globalSize = _useGlobalContext.size;
63
+ globalSize = _useGlobalContext.size,
64
+ formConfig = _useGlobalContext.form;
60
65
  var size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize;
66
+ var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
67
+ classNamesList: [formConfig === null || formConfig === void 0 ? void 0 : formConfig.classNames, classNamesProp],
68
+ stylesList: [formConfig === null || formConfig === void 0 ? void 0 : formConfig.styles, stylesProp],
69
+ info: {
70
+ props: Object.assign(Object.assign({}, rest), {
71
+ labelWidth: labelWidth,
72
+ labelPlacement: labelPlacement,
73
+ placement: placement,
74
+ contentPosition: contentPosition,
75
+ showRequiredOnValidateRequired: showRequiredOnValidateRequired,
76
+ showColon: showColon,
77
+ showValidateMessage: showValidateMessage,
78
+ size: size
79
+ })
80
+ }
81
+ }),
82
+ classNames = _useMergeSemantic.classNames,
83
+ styles = _useMergeSemantic.styles;
61
84
  var formContext = useForm.useForm(Object.assign(Object.assign({}, rest), {
62
85
  size: size
63
86
  }));
@@ -87,10 +110,18 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
87
110
  showRequiredOnValidateRequired: showRequiredOnValidateRequired,
88
111
  showValidateMessage: showValidateMessage
89
112
  }, formContext), {
90
- prefixCls: prefixCls
113
+ prefixCls: prefixCls,
114
+ formSemanticClassNames: (classNames === null || classNames === void 0 ? void 0 : classNames.label) != null || (classNames === null || classNames === void 0 ? void 0 : classNames.content) != null ? {
115
+ label: classNames === null || classNames === void 0 ? void 0 : classNames.label,
116
+ content: classNames === null || classNames === void 0 ? void 0 : classNames.content
117
+ } : undefined,
118
+ formSemanticStyles: (styles === null || styles === void 0 ? void 0 : styles.label) != null || (styles === null || styles === void 0 ? void 0 : styles.content) != null ? {
119
+ label: styles === null || styles === void 0 ? void 0 : styles.label,
120
+ content: styles === null || styles === void 0 ? void 0 : styles.content
121
+ } : undefined
91
122
  });
92
- }, [labelWidth, labelPlacement, showColon, contentPosition, showRequiredOnValidateRequired, showValidateMessage, formContext, prefixCls]);
93
- var cls = classname.cx(prefixCls, className, placement && prefixCls + "--placement-" + placement);
123
+ }, [labelWidth, labelPlacement, showColon, contentPosition, showRequiredOnValidateRequired, showValidateMessage, formContext, prefixCls, classNames === null || classNames === void 0 ? void 0 : classNames.label, classNames === null || classNames === void 0 ? void 0 : classNames.content, styles === null || styles === void 0 ? void 0 : styles.label, styles === null || styles === void 0 ? void 0 : styles.content]);
124
+ var cls = classname.cx(prefixCls, className, placement && prefixCls + "--placement-" + placement, classNames === null || classNames === void 0 ? void 0 : classNames.root);
94
125
  return /*#__PURE__*/(
95
126
  // @ts-ignore
96
127
  React__default["default"].createElement(context.FormProvider, {
@@ -98,7 +129,8 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
98
129
  }, /*#__PURE__*/React__default["default"].createElement("form", Object.assign({
99
130
  ref: ref,
100
131
  role: role,
101
- className: cls
132
+ className: cls,
133
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
102
134
  }, getRootProps()), children))
103
135
  );
104
136
  });
package/lib/cjs/FormItem.js CHANGED
@@ -23,6 +23,8 @@ var FormField = require('./FormField.js');
23
23
  var context = require('./context.js');
24
24
  var classname = require('@hi-ui/classname');
25
25
  var objectUtils = require('@hi-ui/object-utils');
26
+ var useMergeSemantic = require('@hi-ui/use-merge-semantic');
27
+ var core = require('@hi-ui/core');
26
28
  function _interopDefaultCompat(e) {
27
29
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
28
30
  'default': e
@@ -31,6 +33,9 @@ function _interopDefaultCompat(e) {
31
33
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
32
34
  var FormItem = function FormItem(_a) {
33
35
  var className = _a.className,
36
+ style = _a.style,
37
+ classNamesProp = _a.classNames,
38
+ stylesProp = _a.styles,
34
39
  children = _a.children,
35
40
  field = _a.field,
36
41
  valueType = _a.valueType,
@@ -41,7 +46,7 @@ var FormItem = function FormItem(_a) {
41
46
  valueConnectTransform = _a.valueConnectTransform,
42
47
  validateTrigger = _a.validateTrigger,
43
48
  render = _a.render,
44
- rest = tslib.__rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]);
49
+ rest = tslib.__rest(_a, ["className", "style", "classNames", "styles", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]);
45
50
  var _useFormContext = context.useFormContext(),
46
51
  prefixCls = _useFormContext.prefixCls,
47
52
  showRequiredOnValidateRequired = _useFormContext.showRequiredOnValidateRequired,
@@ -50,7 +55,31 @@ var FormItem = function FormItem(_a) {
50
55
  getFieldValue = _useFormContext.getFieldValue,
51
56
  addField = _useFormContext.addField,
52
57
  deleteField = _useFormContext.deleteField,
53
- autoRegister = _useFormContext.autoRegister;
58
+ autoRegister = _useFormContext.autoRegister,
59
+ formSemanticClassNames = _useFormContext.formSemanticClassNames,
60
+ formSemanticStyles = _useFormContext.formSemanticStyles;
61
+ var _useGlobalContext = core.useGlobalContext(),
62
+ formItemConfig = _useGlobalContext.formItem;
63
+ var formDefaultClassNames = formSemanticClassNames != null ? {
64
+ label: formSemanticClassNames.label,
65
+ content: formSemanticClassNames.content
66
+ } : undefined;
67
+ var formDefaultStyles = formSemanticStyles != null ? {
68
+ label: formSemanticStyles.label,
69
+ content: formSemanticStyles.content
70
+ } : undefined;
71
+ var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
72
+ classNamesList: [formDefaultClassNames, formItemConfig === null || formItemConfig === void 0 ? void 0 : formItemConfig.classNames, classNamesProp],
73
+ stylesList: [formDefaultStyles, formItemConfig === null || formItemConfig === void 0 ? void 0 : formItemConfig.styles, stylesProp],
74
+ info: {
75
+ props: Object.assign(Object.assign({}, rest), {
76
+ field: field,
77
+ required: rest.required
78
+ })
79
+ }
80
+ }),
81
+ classNames = _useMergeSemantic.classNames,
82
+ styles = _useMergeSemantic.styles;
54
83
  var fieldRules = useFormField.useFiledRules({
55
84
  field: field,
56
85
  rules: rules,
@@ -88,7 +117,16 @@ var FormItem = function FormItem(_a) {
88
117
  field: field,
89
118
  className: prefixCls + "-item__message"
90
119
  }),
91
- className: classname.cx(prefixCls + "-item", className)
120
+ className: classname.cx(prefixCls + "-item", className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
121
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
122
+ itemClassNames: {
123
+ label: classNames === null || classNames === void 0 ? void 0 : classNames.label,
124
+ content: classNames === null || classNames === void 0 ? void 0 : classNames.content
125
+ },
126
+ itemStyles: {
127
+ label: styles === null || styles === void 0 ? void 0 : styles.label,
128
+ content: styles === null || styles === void 0 ? void 0 : styles.content
129
+ }
92
130
  }), /*#__PURE__*/React__default["default"].createElement(FormField.FormField, {
93
131
  field: field,
94
132
  valueType: valueType,
package/lib/cjs/FormLabel.js CHANGED
@@ -57,7 +57,9 @@ var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
57
57
  formMessage = props.formMessage,
58
58
  _props$showValidateMe = props.showValidateMessage,
59
59
  showValidateMessageProp = _props$showValidateMe === void 0 ? showValidateMessageContext : _props$showValidateMe,
60
- rest = tslib.__rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement", "formMessage", "showValidateMessage"]);
60
+ semanticClassNames = props.itemClassNames,
61
+ semanticStyles = props.itemStyles,
62
+ rest = tslib.__rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement", "formMessage", "showValidateMessage", "itemClassNames", "itemStyles"]);
61
63
  var _useMemo = React.useMemo(function () {
62
64
  if (labelPlacement === 'top') return {
63
65
  labelWidth: '100%',
@@ -100,20 +102,20 @@ var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
100
102
  alignItems: contentPositionMemo
101
103
  }
102
104
  }, label ? ( /*#__PURE__*/React__default["default"].createElement("label", {
103
- className: prefixCls + "__content__text",
104
- style: {
105
+ className: classname.cx(prefixCls + "__content__text", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.label),
106
+ style: Object.assign({
105
107
  width: labelWidth
106
- }
108
+ }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.label)
107
109
  }, label, colon)) : ( /*#__PURE__*/React__default["default"].createElement("span", {
108
- className: prefixCls + "__content__indent",
109
- style: {
110
+ className: classname.cx(prefixCls + "__content__indent", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.label),
111
+ style: Object.assign({
110
112
  width: labelWidth
111
- }
113
+ }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.label)
112
114
  })), /*#__PURE__*/React__default["default"].createElement("div", {
113
- className: prefixCls + "__content__control",
114
- style: {
115
+ className: classname.cx(prefixCls + "__content__control", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.content),
116
+ style: Object.assign({
115
117
  width: controlWidth
116
- }
118
+ }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.content)
117
119
  }, children)), showValidateMessageProp && ( /*#__PURE__*/React__default["default"].createElement("div", {
118
120
  style: {
119
121
  paddingLeft: "calc(100% - " + controlWidth + ")"
package/lib/esm/Form.js CHANGED
@@ -14,6 +14,7 @@ import { __DEV__, invariant } from '@hi-ui/env';
14
14
  import { FormProvider } from './context.js';
15
15
  import { useForm } from './use-form.js';
16
16
  import { useGlobalContext } from '@hi-ui/core';
17
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
17
18
  var _role = 'form';
18
19
  var _prefix = getPrefixCls(_role);
19
20
  // form 注册表
@@ -27,6 +28,9 @@ var Form = /*#__PURE__*/forwardRef(function (_a, ref) {
27
28
  _a$role = _a.role,
28
29
  role = _a$role === void 0 ? _role : _a$role,
29
30
  className = _a.className,
31
+ style = _a.style,
32
+ classNamesProp = _a.classNames,
33
+ stylesProp = _a.styles,
30
34
  children = _a.children,
31
35
  innerRef = _a.innerRef,
32
36
  labelWidth = _a.labelWidth,
@@ -42,10 +46,29 @@ var Form = /*#__PURE__*/forwardRef(function (_a, ref) {
42
46
  _a$showValidateMessag = _a.showValidateMessage,
43
47
  showValidateMessage = _a$showValidateMessag === void 0 ? true : _a$showValidateMessag,
44
48
  sizeProp = _a.size,
45
- rest = __rest(_a, ["prefixCls", "role", "className", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showRequiredOnValidateRequired", "showColon", "showValidateMessage", "size"]);
49
+ rest = __rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showRequiredOnValidateRequired", "showColon", "showValidateMessage", "size"]);
46
50
  var _useGlobalContext = useGlobalContext(),
47
- globalSize = _useGlobalContext.size;
51
+ globalSize = _useGlobalContext.size,
52
+ formConfig = _useGlobalContext.form;
48
53
  var size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize;
54
+ var _useMergeSemantic = useMergeSemantic({
55
+ classNamesList: [formConfig === null || formConfig === void 0 ? void 0 : formConfig.classNames, classNamesProp],
56
+ stylesList: [formConfig === null || formConfig === void 0 ? void 0 : formConfig.styles, stylesProp],
57
+ info: {
58
+ props: Object.assign(Object.assign({}, rest), {
59
+ labelWidth: labelWidth,
60
+ labelPlacement: labelPlacement,
61
+ placement: placement,
62
+ contentPosition: contentPosition,
63
+ showRequiredOnValidateRequired: showRequiredOnValidateRequired,
64
+ showColon: showColon,
65
+ showValidateMessage: showValidateMessage,
66
+ size: size
67
+ })
68
+ }
69
+ }),
70
+ classNames = _useMergeSemantic.classNames,
71
+ styles = _useMergeSemantic.styles;
49
72
  var formContext = useForm(Object.assign(Object.assign({}, rest), {
50
73
  size: size
51
74
  }));
@@ -75,10 +98,18 @@ var Form = /*#__PURE__*/forwardRef(function (_a, ref) {
75
98
  showRequiredOnValidateRequired: showRequiredOnValidateRequired,
76
99
  showValidateMessage: showValidateMessage
77
100
  }, formContext), {
78
- prefixCls: prefixCls
101
+ prefixCls: prefixCls,
102
+ formSemanticClassNames: (classNames === null || classNames === void 0 ? void 0 : classNames.label) != null || (classNames === null || classNames === void 0 ? void 0 : classNames.content) != null ? {
103
+ label: classNames === null || classNames === void 0 ? void 0 : classNames.label,
104
+ content: classNames === null || classNames === void 0 ? void 0 : classNames.content
105
+ } : undefined,
106
+ formSemanticStyles: (styles === null || styles === void 0 ? void 0 : styles.label) != null || (styles === null || styles === void 0 ? void 0 : styles.content) != null ? {
107
+ label: styles === null || styles === void 0 ? void 0 : styles.label,
108
+ content: styles === null || styles === void 0 ? void 0 : styles.content
109
+ } : undefined
79
110
  });
80
- }, [labelWidth, labelPlacement, showColon, contentPosition, showRequiredOnValidateRequired, showValidateMessage, formContext, prefixCls]);
81
- var cls = cx(prefixCls, className, placement && prefixCls + "--placement-" + placement);
111
+ }, [labelWidth, labelPlacement, showColon, contentPosition, showRequiredOnValidateRequired, showValidateMessage, formContext, prefixCls, classNames === null || classNames === void 0 ? void 0 : classNames.label, classNames === null || classNames === void 0 ? void 0 : classNames.content, styles === null || styles === void 0 ? void 0 : styles.label, styles === null || styles === void 0 ? void 0 : styles.content]);
112
+ var cls = cx(prefixCls, className, placement && prefixCls + "--placement-" + placement, classNames === null || classNames === void 0 ? void 0 : classNames.root);
82
113
  return /*#__PURE__*/(
83
114
  // @ts-ignore
84
115
  React.createElement(FormProvider, {
@@ -86,7 +117,8 @@ var Form = /*#__PURE__*/forwardRef(function (_a, ref) {
86
117
  }, /*#__PURE__*/React.createElement("form", Object.assign({
87
118
  ref: ref,
88
119
  role: role,
89
- className: cls
120
+ className: cls,
121
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
90
122
  }, getRootProps()), children))
91
123
  );
92
124
  });
package/lib/esm/FormItem.js CHANGED
@@ -17,8 +17,13 @@ import { FormField } from './FormField.js';
17
17
  import { useFormContext } from './context.js';
18
18
  import { cx } from '@hi-ui/classname';
19
19
  import { hasProperty } from '@hi-ui/object-utils';
20
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
21
+ import { useGlobalContext } from '@hi-ui/core';
20
22
  var FormItem = function FormItem(_a) {
21
23
  var className = _a.className,
24
+ style = _a.style,
25
+ classNamesProp = _a.classNames,
26
+ stylesProp = _a.styles,
22
27
  children = _a.children,
23
28
  field = _a.field,
24
29
  valueType = _a.valueType,
@@ -29,7 +34,7 @@ var FormItem = function FormItem(_a) {
29
34
  valueConnectTransform = _a.valueConnectTransform,
30
35
  validateTrigger = _a.validateTrigger,
31
36
  render = _a.render,
32
- rest = __rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]);
37
+ rest = __rest(_a, ["className", "style", "classNames", "styles", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]);
33
38
  var _useFormContext = useFormContext(),
34
39
  prefixCls = _useFormContext.prefixCls,
35
40
  showRequiredOnValidateRequired = _useFormContext.showRequiredOnValidateRequired,
@@ -38,7 +43,31 @@ var FormItem = function FormItem(_a) {
38
43
  getFieldValue = _useFormContext.getFieldValue,
39
44
  addField = _useFormContext.addField,
40
45
  deleteField = _useFormContext.deleteField,
41
- autoRegister = _useFormContext.autoRegister;
46
+ autoRegister = _useFormContext.autoRegister,
47
+ formSemanticClassNames = _useFormContext.formSemanticClassNames,
48
+ formSemanticStyles = _useFormContext.formSemanticStyles;
49
+ var _useGlobalContext = useGlobalContext(),
50
+ formItemConfig = _useGlobalContext.formItem;
51
+ var formDefaultClassNames = formSemanticClassNames != null ? {
52
+ label: formSemanticClassNames.label,
53
+ content: formSemanticClassNames.content
54
+ } : undefined;
55
+ var formDefaultStyles = formSemanticStyles != null ? {
56
+ label: formSemanticStyles.label,
57
+ content: formSemanticStyles.content
58
+ } : undefined;
59
+ var _useMergeSemantic = useMergeSemantic({
60
+ classNamesList: [formDefaultClassNames, formItemConfig === null || formItemConfig === void 0 ? void 0 : formItemConfig.classNames, classNamesProp],
61
+ stylesList: [formDefaultStyles, formItemConfig === null || formItemConfig === void 0 ? void 0 : formItemConfig.styles, stylesProp],
62
+ info: {
63
+ props: Object.assign(Object.assign({}, rest), {
64
+ field: field,
65
+ required: rest.required
66
+ })
67
+ }
68
+ }),
69
+ classNames = _useMergeSemantic.classNames,
70
+ styles = _useMergeSemantic.styles;
42
71
  var fieldRules = useFiledRules({
43
72
  field: field,
44
73
  rules: rules,
@@ -76,7 +105,16 @@ var FormItem = function FormItem(_a) {
76
105
  field: field,
77
106
  className: prefixCls + "-item__message"
78
107
  }),
79
- className: cx(prefixCls + "-item", className)
108
+ className: cx(prefixCls + "-item", className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
109
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
110
+ itemClassNames: {
111
+ label: classNames === null || classNames === void 0 ? void 0 : classNames.label,
112
+ content: classNames === null || classNames === void 0 ? void 0 : classNames.content
113
+ },
114
+ itemStyles: {
115
+ label: styles === null || styles === void 0 ? void 0 : styles.label,
116
+ content: styles === null || styles === void 0 ? void 0 : styles.content
117
+ }
80
118
  }), /*#__PURE__*/React.createElement(FormField, {
81
119
  field: field,
82
120
  valueType: valueType,
package/lib/esm/FormLabel.js CHANGED
@@ -45,7 +45,9 @@ var FormLabel = /*#__PURE__*/forwardRef(function (props, ref) {
45
45
  formMessage = props.formMessage,
46
46
  _props$showValidateMe = props.showValidateMessage,
47
47
  showValidateMessageProp = _props$showValidateMe === void 0 ? showValidateMessageContext : _props$showValidateMe,
48
- rest = __rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement", "formMessage", "showValidateMessage"]);
48
+ semanticClassNames = props.itemClassNames,
49
+ semanticStyles = props.itemStyles,
50
+ rest = __rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement", "formMessage", "showValidateMessage", "itemClassNames", "itemStyles"]);
49
51
  var _useMemo = useMemo(function () {
50
52
  if (labelPlacement === 'top') return {
51
53
  labelWidth: '100%',
@@ -88,20 +90,20 @@ var FormLabel = /*#__PURE__*/forwardRef(function (props, ref) {
88
90
  alignItems: contentPositionMemo
89
91
  }
90
92
  }, label ? ( /*#__PURE__*/React.createElement("label", {
91
- className: prefixCls + "__content__text",
92
- style: {
93
+ className: cx(prefixCls + "__content__text", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.label),
94
+ style: Object.assign({
93
95
  width: labelWidth
94
- }
96
+ }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.label)
95
97
  }, label, colon)) : ( /*#__PURE__*/React.createElement("span", {
96
- className: prefixCls + "__content__indent",
97
- style: {
98
+ className: cx(prefixCls + "__content__indent", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.label),
99
+ style: Object.assign({
98
100
  width: labelWidth
99
- }
101
+ }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.label)
100
102
  })), /*#__PURE__*/React.createElement("div", {
101
- className: prefixCls + "__content__control",
102
- style: {
103
+ className: cx(prefixCls + "__content__control", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.content),
104
+ style: Object.assign({
103
105
  width: controlWidth
104
- }
106
+ }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.content)
105
107
  }, children)), showValidateMessageProp && ( /*#__PURE__*/React.createElement("div", {
106
108
  style: {
107
109
  paddingLeft: "calc(100% - " + controlWidth + ")"
package/lib/types/Form.d.ts CHANGED
@@ -2,12 +2,17 @@ import React from 'react';
2
2
  import { UseFormProps } from './use-form';
3
3
  import { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core';
4
4
  import { FormRuleModel, FormHelpers } from './types';
5
+ import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
5
6
  export declare const FORM_REGISTER_TABLE: Record<string, FormRuleModel>;
6
7
  /**
7
8
  * 表单
8
9
  */
9
10
  export declare const Form: React.ForwardRefExoticComponent<FormProps<Record<string, any>> & React.RefAttributes<HTMLFormElement | null>>;
10
- export interface FormProps<Values = Record<string, any>> extends Omit<HiBaseHTMLProps<'form'>, 'onSubmit' | 'onReset'>, UseFormProps<Values> {
11
+ export declare type FormSemanticName = 'root' | 'label' | 'content';
12
+ export declare type FormSemanticClassNames = SemanticClassNamesType<FormProps, FormSemanticName>;
13
+ export declare type FormSemanticStyles = SemanticStylesType<FormProps, FormSemanticName>;
14
+ export declare type FormSemantic = ComponentSemantic<FormSemanticClassNames, FormSemanticStyles>;
15
+ export interface FormProps<Values = Record<string, any>> extends Omit<HiBaseHTMLProps<'form'>, 'onSubmit' | 'onReset'>, UseFormProps<Values>, FormSemantic {
11
16
  /**
12
17
  * 提供辅助方法的内部引用
13
18
  */
package/lib/types/FormItem.d.ts CHANGED
@@ -1,8 +1,13 @@
1
1
  import React from 'react';
2
2
  import { UseFormFieldProps } from './use-form-field';
3
3
  import { FormLabelProps } from './FormLabel';
4
+ import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
4
5
  export declare const FormItem: React.FC<FormItemProps>;
5
- export interface FormItemProps extends UseFormFieldProps, FormLabelProps {
6
+ export declare type FormItemSemanticName = 'root' | 'label' | 'content';
7
+ export declare type FormItemSemanticClassNames = SemanticClassNamesType<FormItemProps, FormItemSemanticName>;
8
+ export declare type FormItemSemanticStyles = SemanticStylesType<FormItemProps, FormItemSemanticName>;
9
+ export declare type FormItemSemantic = ComponentSemantic<FormItemSemanticClassNames, FormItemSemanticStyles>;
10
+ export interface FormItemProps extends UseFormFieldProps, FormLabelProps, FormItemSemantic {
6
11
  /**
7
12
  * 表单控件或其渲染函数
8
13
  */
package/lib/types/FormLabel.d.ts CHANGED
@@ -1,7 +1,27 @@
1
1
  import React, { ReactNode } from 'react';
2
2
  import { HiBaseHTMLProps } from '@hi-ui/core';
3
3
  export declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<HTMLDivElement | null>>;
4
+ /** Form.Item 传入的 label/content 语义化 classNames */
5
+ export interface FormLabelSemanticClassNames {
6
+ label?: string;
7
+ content?: string;
8
+ }
9
+ /** Form.Item 传入的 label/content 语义化 styles */
10
+ export interface FormLabelSemanticStyles {
11
+ label?: React.CSSProperties;
12
+ content?: React.CSSProperties;
13
+ }
4
14
  export interface FormLabelProps extends HiBaseHTMLProps<'div'> {
15
+ /**
16
+ * 由 Form.Item 传入的语义化 classNames（label / content），勿直接使用
17
+ * @internal
18
+ */
19
+ itemClassNames?: FormLabelSemanticClassNames;
20
+ /**
21
+ * 由 Form.Item 传入的语义化 styles（label / content），勿直接使用
22
+ * @internal
23
+ */
24
+ itemStyles?: FormLabelSemanticStyles;
5
25
  /**
6
26
  * label 放置的位置
7
27
  */
package/lib/types/context.d.ts CHANGED
@@ -1,6 +1,15 @@
1
1
  import React, { MutableRefObject } from 'react';
2
2
  import { UseFormReturn } from './use-form';
3
3
  import { FormFieldPath } from './types';
4
+ /** Form 下发给 FormItem 的 label/content 语义化样式，FormItem 可覆盖 */
5
+ export interface FormSemanticLabelContent {
6
+ label?: string;
7
+ content?: string;
8
+ }
9
+ export interface FormSemanticLabelContentStyles {
10
+ label?: React.CSSProperties;
11
+ content?: React.CSSProperties;
12
+ }
4
13
  export interface FormContextProps extends UseFormReturn {
5
14
  labelWidth: React.ReactText;
6
15
  labelPlacement: 'left' | 'right' | 'top';
@@ -10,6 +19,10 @@ export interface FormContextProps extends UseFormReturn {
10
19
  showValidateMessage: boolean;
11
20
  prefixCls: string;
12
21
  formItemsRef: MutableRefObject<Map<FormFieldPath, HTMLDivElement | null>>;
22
+ /** Form 传入的 label/content 语义化 classNames，供 FormItem 默认使用 */
23
+ formSemanticClassNames?: FormSemanticLabelContent;
24
+ /** Form 传入的 label/content 语义化 styles，供 FormItem 默认使用 */
25
+ formSemanticStyles?: FormSemanticLabelContentStyles;
13
26
  }
14
27
  export declare const FormProvider: React.Provider<Omit<FormContextProps, "rootProps"> | null>;
15
28
  export declare const useFormContext: () => Omit<FormContextProps, "rootProps">;
package/lib/types/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import './styles/index.scss';
2
3
  declare const Form: import("react").ForwardRefExoticComponent<import("./Form").FormProps<Record<string, any>> & import("react").RefAttributes<HTMLFormElement | null>> & {
3
4
  Item: import("react").FC<import("./FormItem").FormItemProps>;
package/lib/types/types.d.ts CHANGED
@@ -21,10 +21,10 @@ export interface FormState<T> {
21
21
  */
22
22
  submitting?: boolean;
23
23
  }
24
- export type FormTouched<T = any> = Record<string, T>;
25
- export type FormErrors<T = any> = Record<string, T>;
26
- export type FormSetState<T> = Partial<FormState<T>> | ((state: FormState<T>) => Partial<FormState<T>>);
27
- export type FormAction<T> = {
24
+ export declare type FormTouched<T = any> = Record<string, T>;
25
+ export declare type FormErrors<T = any> = Record<string, T>;
26
+ export declare type FormSetState<T> = Partial<FormState<T>> | ((state: FormState<T>) => Partial<FormState<T>>);
27
+ export declare type FormAction<T> = {
28
28
  type: 'SUBMIT_ATTEMPT';
29
29
  } | {
30
30
  type: 'SUBMIT_DONE';
@@ -82,13 +82,13 @@ export type FormAction<T> = {
82
82
  field: FormFieldPath;
83
83
  };
84
84
  };
85
- export type FormValidateFunction<T = any> = (value: T) => string | Promise<string> | undefined;
85
+ export declare type FormValidateFunction<T = any> = (value: T) => string | Promise<string> | undefined;
86
86
  export interface FormFieldCollection<T> {
87
87
  validate: (value: any) => Promise<T>;
88
88
  }
89
89
  export interface FormRuleModel extends RuleItem, Record<string, any> {
90
90
  }
91
- export type FormRuleType = 'string' | 'number' | 'boolean' | 'method' | 'regexp' | 'integer' | 'float' | 'array' | 'object' | 'enum' | 'date' | 'url' | 'hex' | 'email' | 'any';
91
+ export declare type FormRuleType = 'string' | 'number' | 'boolean' | 'method' | 'regexp' | 'integer' | 'float' | 'array' | 'object' | 'enum' | 'date' | 'url' | 'hex' | 'email' | 'any';
92
92
  export interface FormHelpers<T = any> {
93
93
  /**
94
94
  * 对整个表单进行校验, 对应 Form.Submit中的 API
@@ -158,9 +158,9 @@ export interface FormListHelper {
158
158
  */
159
159
  move: (fromIndex: number, toIndex: number) => void;
160
160
  }
161
- export type FormFieldPath = (string | number)[] | string | number;
162
- export type FormErrorMessage = string;
163
- export type FormRules = Record<string, FormRuleModel[]>;
161
+ export declare type FormFieldPath = (string | number)[] | string | number;
162
+ export declare type FormErrorMessage = string;
163
+ export declare type FormRules = Record<string, FormRuleModel[]>;
164
164
  export interface FormListChildrenAction {
165
165
  /**
166
166
  * 在尾部追加一个 FormItems
package/lib/types/use-form.d.ts CHANGED
@@ -4,21 +4,21 @@ import { HiBaseSizeEnum } from '@hi-ui/core';
4
4
  import { FormState, FormFieldCollection, FormErrors, FormRuleModel, FormFieldPath, FormErrorMessage, FormSetState } from './types';
5
5
  export declare const useForm: <Values = Record<string, any>>({ initialValues, initialErrors, initialTouched, lazyValidate, onValuesChange, onReset, onSubmit, rules, validateAfterTouched, validateTrigger: validateTriggerProp, scrollToFirstError, size, autoRegister, ...rest }: UseFormProps<Values>) => {
6
6
  setFormState: (stateOrFunc: FormSetState<Values>) => void;
7
- setFieldValue: (field: FormFieldPath, value: unknown, shouldValidate?: boolean) => void;
7
+ setFieldValue: (field: FormFieldPath, value: unknown, shouldValidate?: boolean | undefined) => void;
8
8
  setFieldError: (field: FormFieldPath, errorMessage: FormErrorMessage | undefined) => void;
9
9
  setFieldTouched: (field: FormFieldPath, touched?: any) => void;
10
10
  getFieldValue: (fieldName: FormFieldPath) => any;
11
11
  getFieldError: (fieldName: FormFieldPath) => any;
12
12
  getFieldRules: (fieldName: FormFieldPath) => any;
13
13
  getRootProps: () => {
14
- onSubmit: (evt?: React.FormEvent<HTMLFormElement>) => Promise<any>;
15
- onReset: (evt?: React.FormEvent<HTMLFormElement>) => void;
14
+ onSubmit: (evt?: React.FormEvent<HTMLFormElement> | undefined) => Promise<any>;
15
+ onReset: (evt?: React.FormEvent<HTMLFormElement> | undefined) => void;
16
16
  };
17
17
  getFieldProps: (props?: any) => any;
18
18
  registerField: (keyOrKeys: FormFieldPath, value: FormFieldCollection<Values>) => void;
19
19
  unregisterField: (keyOrKeys: FormFieldPath) => void;
20
20
  submitForm: () => Promise<any>;
21
- resetForm: (nextState?: Partial<FormState<any>>) => Promise<void>;
21
+ resetForm: (nextState?: Partial<FormState<any>> | undefined) => Promise<void>;
22
22
  resetErrors: () => void;
23
23
  resetFieldError: (field: FormFieldPath) => void;
24
24
  validateFieldState: (field: FormFieldPath) => Promise<{} | undefined>;
@@ -35,7 +35,7 @@ export declare const useForm: <Values = Record<string, any>>({ initialValues, in
35
35
  errors: FormErrors<unknown>;
36
36
  touched: import("./types").FormTouched<unknown>;
37
37
  validating: boolean;
38
- submitting?: boolean;
38
+ submitting?: boolean | undefined;
39
39
  };
40
40
  export interface UseFormProps<T = Record<string, any>> {
41
41
  /**
@@ -96,4 +96,4 @@ export interface UseFormProps<T = Record<string, any>> {
96
96
  */
97
97
  autoRegister?: boolean;
98
98
  }
99
- export type UseFormReturn = ReturnType<typeof useForm>;
99
+ export declare type UseFormReturn = ReturnType<typeof useForm>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/form",
3
- "version": "5.0.0-experimental.0",
3
+ "version": "5.0.0-rc.0",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -44,26 +44,27 @@
44
44
  "url": "https://github.com/XiaoMi/hiui/issues"
45
45
  },
46
46
  "dependencies": {
47
- "@hi-ui/array-utils": "^5.0.0-experimental.0",
48
- "@hi-ui/button": "^5.0.0-experimental.0",
49
- "@hi-ui/classname": "^5.0.0-experimental.0",
50
- "@hi-ui/dom-utils": "^5.0.0-experimental.0",
51
- "@hi-ui/env": "^5.0.0-experimental.0",
52
- "@hi-ui/func-utils": "^5.0.0-experimental.0",
53
- "@hi-ui/object-utils": "^5.0.0-experimental.0",
54
- "@hi-ui/type-assertion": "^5.0.0-experimental.0",
55
- "@hi-ui/use-latest": "^5.0.0-experimental.0",
47
+ "@hi-ui/array-utils": "^5.0.0-rc.0",
48
+ "@hi-ui/button": "^5.0.0-rc.0",
49
+ "@hi-ui/classname": "^5.0.0-rc.0",
50
+ "@hi-ui/dom-utils": "^5.0.0-rc.0",
51
+ "@hi-ui/env": "^5.0.0-rc.0",
52
+ "@hi-ui/func-utils": "^5.0.0-rc.0",
53
+ "@hi-ui/object-utils": "^5.0.0-rc.0",
54
+ "@hi-ui/type-assertion": "^5.0.0-rc.0",
55
+ "@hi-ui/use-latest": "^5.0.0-rc.0",
56
+ "@hi-ui/use-merge-semantic": "^5.0.0-rc.0",
56
57
  "async-validator": "^4.0.7",
57
58
  "scroll-into-view-if-needed": "^3.1.0"
58
59
  },
59
60
  "peerDependencies": {
60
- "@hi-ui/core": ">=5.0.0-experimental.0",
61
+ "@hi-ui/core": ">=5.0.0-rc.0",
61
62
  "react": ">=16.8.6",
62
63
  "react-dom": ">=16.8.6"
63
64
  },
64
65
  "devDependencies": {
65
- "@hi-ui/core": "^5.0.0-experimental.0",
66
- "@hi-ui/core-css": "^5.0.0-experimental.0",
66
+ "@hi-ui/core": "^5.0.0-rc.0",
67
+ "@hi-ui/core-css": "^5.0.0-rc.0",
67
68
  "react": "^17.0.1",
68
69
  "react-dom": "^17.0.1"
69
70
  }