@hi-ui/form 4.1.0 → 4.1.1

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 (9) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/lib/cjs/FormItem.js +6 -4
  3. package/lib/cjs/FormLabel.js +17 -9
  4. package/lib/cjs/styles/index.scss.js +1 -1
  5. package/lib/esm/FormItem.js +6 -4
  6. package/lib/esm/FormLabel.js +17 -9
  7. package/lib/esm/styles/index.scss.js +1 -1
  8. package/lib/types/FormLabel.d.ts +5 -1
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @hi-ui/form
2
2
 
3
+ ## 4.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#2347](https://github.com/XiaoMi/hiui/pull/2347) [`1dd3fa9ce`](https://github.com/XiaoMi/hiui/commit/1dd3fa9cee0c408ead0849b9fab3e451bcf3e1f7) Thanks [@zyprepare](https://github.com/zyprepare)! - 修复体验问题: 错误提示过长时样式错乱
8
+
3
9
  ## 4.1.0
4
10
 
5
11
  ### Minor Changes
package/lib/cjs/FormItem.js CHANGED
@@ -80,6 +80,11 @@ var FormItem = function FormItem(_a) {
80
80
  }, [required, showRequiredOnValidateRequired, fieldRules]);
81
81
  return /*#__PURE__*/React__default["default"].createElement(FormLabel.FormLabel, Object.assign({}, rest, {
82
82
  required: showRequired,
83
+ // @ts-ignore
84
+ formMessage: /*#__PURE__*/React__default["default"].createElement(FormMessage.FormMessage, {
85
+ field: field,
86
+ className: prefixCls + "-item__message"
87
+ }),
83
88
  className: classname.cx(prefixCls + "-item", className)
84
89
  }), /*#__PURE__*/React__default["default"].createElement(FormField.FormField, {
85
90
  field: field,
@@ -91,10 +96,7 @@ var FormItem = function FormItem(_a) {
91
96
  valueConnectTransform: valueConnectTransform,
92
97
  validateTrigger: validateTrigger,
93
98
  render: render
94
- }, children), /*#__PURE__*/React__default["default"].createElement(FormMessage.FormMessage, {
95
- field: field,
96
- className: prefixCls + "-item__message"
97
- }));
99
+ }, children));
98
100
  };
99
101
 
100
102
  if (env.__DEV__) {
package/lib/cjs/FormLabel.js CHANGED
@@ -72,7 +72,8 @@ var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
72
72
  contentPosition = _props$contentPositio === void 0 ? contentPositionContext : _props$contentPositio,
73
73
  _props$labelPlacement = props.labelPlacement,
74
74
  labelPlacement = _props$labelPlacement === void 0 ? labelPlacementContext : _props$labelPlacement,
75
- rest = tslib.__rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement"]);
75
+ formMessage = props.formMessage,
76
+ rest = tslib.__rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement", "formMessage"]);
76
77
 
77
78
  var _useMemo = React.useMemo(function () {
78
79
  if (labelPlacement === 'top') return {
@@ -105,30 +106,37 @@ var FormLabel = /*#__PURE__*/React.forwardRef(function (props, ref) {
105
106
  var cls = classname.cx(prefixCls, className, required && prefixCls + "--required", labelPlacement && prefixCls + "--placement-" + labelPlacement // error && `${prefixCls}--error`,
106
107
  // validating && `${prefixCls}--validating`
107
108
  );
108
- var style = Object.assign(Object.assign({}, styleProp), {
109
- alignItems: contentPositionMemo
110
- });
109
+ var style = Object.assign({}, styleProp);
111
110
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
112
111
  ref: ref,
113
112
  role: role,
114
113
  className: cls,
115
114
  style: style
116
- }, rest), label ? /*#__PURE__*/React__default["default"].createElement("label", {
117
- className: prefixCls + "__text",
115
+ }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
116
+ className: prefixCls + "__content",
117
+ style: {
118
+ alignItems: contentPositionMemo
119
+ }
120
+ }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
121
+ className: prefixCls + "__content__text",
118
122
  style: {
119
123
  width: labelWidth
120
124
  }
121
125
  }, label, colon) : /*#__PURE__*/React__default["default"].createElement("span", {
122
- className: prefixCls + "__indent",
126
+ className: prefixCls + "__content__indent",
123
127
  style: {
124
128
  width: labelWidth
125
129
  }
126
130
  }), /*#__PURE__*/React__default["default"].createElement("div", {
127
- className: prefixCls + "__control",
131
+ className: prefixCls + "__content__control",
128
132
  style: {
129
133
  width: controlWidth
130
134
  }
131
- }, children));
135
+ }, children)), /*#__PURE__*/React__default["default"].createElement("div", {
136
+ style: {
137
+ paddingLeft: labelWidth
138
+ }
139
+ }, formMessage));
132
140
  });
133
141
 
134
142
  if (env.__DEV__) {
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,7 +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; }.hi-v4-form fieldset {margin: 0;padding: 0;border: 0; }.hi-v4-form fieldset + fieldset {margin-top: 16px; }.hi-v4-form legend {margin: 0 0 16px;color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-form--placement-horizontal {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-column-gap: var(--hi-v4-spacing-10, 20px);-moz-column-gap: var(--hi-v4-spacing-10, 20px);column-gap: var(--hi-v4-spacing-10, 20px); }.hi-v4-form--placement-horizontal .hi-v4-form-label__indent {min-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label {display: -webkit-box;display: -ms-flexbox;display: flex;font-size: var(--hi-v4-text-size-md, 0.875rem);-webkit-box-sizing: border-box;box-sizing: border-box;margin-right: 0;margin-bottom: var(--hi-v4-spacing-12, 24px); }.hi-v4-form-label__text, .hi-v4-form-label__indent {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-sizing: border-box;box-sizing: border-box;vertical-align: top;color: var(--hi-v4-color-gray-800, #1f2937);overflow-wrap: break-word; }.hi-v4-form-label__text {padding-right: var(--hi-v4-spacing-6, 12px);min-height: var(--hi-v4-height-8, 32px);line-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label--placement-left > .hi-v4-form-label__text {text-align: left; }.hi-v4-form-label--placement-right > .hi-v4-form-label__text {text-align: right; }.hi-v4-form-label--placement-top > .hi-v4-form-label__text {height: 22px;min-height: 22px;line-height: 22px;padding-right: 0;margin-bottom: var(--hi-v4-spacing-4, 8px); }.hi-v4-form-label--required > .hi-v4-form-label__text::before {margin-right: var(--hi-v4-spacing-2, 4px);content: '*';color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-form-label--placement-top {text-align: left;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;margin-bottom: var(--hi-v4-spacing-12, 24px);padding-right: 0; }.hi-v4-form-label__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;vertical-align: top;min-height: var(--hi-v4-height-8, 32px);-ms-flex-negative: 0;flex-shrink: 0; }.hi-v4-form-label__control {min-width: 1px; }.hi-v4-form-message {display: block;font-size: var(--hi-v4-text-size-md, 0.875rem);min-height: 24px;padding: 2px 0;-webkit-box-sizing: border-box;box-sizing: border-box;line-height: 20px;-webkit-transform: translateY(-10%);transform: translateY(-10%);opacity: 0;color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-form-message--show {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0); }.hi-v4-form-item {position: relative; }.hi-v4-form-item__message {position: absolute; }";
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
16
 
17
17
  var __styleInject__ = require('inject-head-style')["default"];
18
18
 
package/lib/esm/FormItem.js CHANGED
@@ -55,6 +55,11 @@ var FormItem = function FormItem(_a) {
55
55
  }, [required, showRequiredOnValidateRequired, fieldRules]);
56
56
  return /*#__PURE__*/React.createElement(FormLabel, Object.assign({}, rest, {
57
57
  required: showRequired,
58
+ // @ts-ignore
59
+ formMessage: /*#__PURE__*/React.createElement(FormMessage, {
60
+ field: field,
61
+ className: prefixCls + "-item__message"
62
+ }),
58
63
  className: cx(prefixCls + "-item", className)
59
64
  }), /*#__PURE__*/React.createElement(FormField, {
60
65
  field: field,
@@ -66,10 +71,7 @@ var FormItem = function FormItem(_a) {
66
71
  valueConnectTransform: valueConnectTransform,
67
72
  validateTrigger: validateTrigger,
68
73
  render: render
69
- }, children), /*#__PURE__*/React.createElement(FormMessage, {
70
- field: field,
71
- className: prefixCls + "-item__message"
72
- }));
74
+ }, children));
73
75
  };
74
76
 
75
77
  if (__DEV__) {
package/lib/esm/FormLabel.js CHANGED
@@ -49,7 +49,8 @@ var FormLabel = /*#__PURE__*/forwardRef(function (props, ref) {
49
49
  contentPosition = _props$contentPositio === void 0 ? contentPositionContext : _props$contentPositio,
50
50
  _props$labelPlacement = props.labelPlacement,
51
51
  labelPlacement = _props$labelPlacement === void 0 ? labelPlacementContext : _props$labelPlacement,
52
- rest = __rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement"]);
52
+ formMessage = props.formMessage,
53
+ rest = __rest(props, ["prefixCls", "role", "className", "style", "children", "label", "required", "labelWidth", "showColon", "contentPosition", "labelPlacement", "formMessage"]);
53
54
 
54
55
  var _useMemo = useMemo(function () {
55
56
  if (labelPlacement === 'top') return {
@@ -82,30 +83,37 @@ var FormLabel = /*#__PURE__*/forwardRef(function (props, ref) {
82
83
  var cls = cx(prefixCls, className, required && prefixCls + "--required", labelPlacement && prefixCls + "--placement-" + labelPlacement // error && `${prefixCls}--error`,
83
84
  // validating && `${prefixCls}--validating`
84
85
  );
85
- var style = Object.assign(Object.assign({}, styleProp), {
86
- alignItems: contentPositionMemo
87
- });
86
+ var style = Object.assign({}, styleProp);
88
87
  return /*#__PURE__*/React.createElement("div", Object.assign({
89
88
  ref: ref,
90
89
  role: role,
91
90
  className: cls,
92
91
  style: style
93
- }, rest), label ? /*#__PURE__*/React.createElement("label", {
94
- className: prefixCls + "__text",
92
+ }, rest), /*#__PURE__*/React.createElement("div", {
93
+ className: prefixCls + "__content",
94
+ style: {
95
+ alignItems: contentPositionMemo
96
+ }
97
+ }, label ? /*#__PURE__*/React.createElement("label", {
98
+ className: prefixCls + "__content__text",
95
99
  style: {
96
100
  width: labelWidth
97
101
  }
98
102
  }, label, colon) : /*#__PURE__*/React.createElement("span", {
99
- className: prefixCls + "__indent",
103
+ className: prefixCls + "__content__indent",
100
104
  style: {
101
105
  width: labelWidth
102
106
  }
103
107
  }), /*#__PURE__*/React.createElement("div", {
104
- className: prefixCls + "__control",
108
+ className: prefixCls + "__content__control",
105
109
  style: {
106
110
  width: controlWidth
107
111
  }
108
- }, children));
112
+ }, children)), /*#__PURE__*/React.createElement("div", {
113
+ style: {
114
+ paddingLeft: labelWidth
115
+ }
116
+ }, formMessage));
109
117
  });
110
118
 
111
119
  if (__DEV__) {
package/lib/esm/styles/index.scss.js CHANGED
@@ -8,7 +8,7 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import __styleInject__ from 'inject-head-style';
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 {display: -webkit-box;display: -ms-flexbox;display: flex;font-size: var(--hi-v4-text-size-md, 0.875rem);-webkit-box-sizing: border-box;box-sizing: border-box;margin-right: 0;margin-bottom: var(--hi-v4-spacing-12, 24px); }.hi-v4-form-label__text, .hi-v4-form-label__indent {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-sizing: border-box;box-sizing: border-box;vertical-align: top;color: var(--hi-v4-color-gray-800, #1f2937);overflow-wrap: break-word; }.hi-v4-form-label__text {padding-right: var(--hi-v4-spacing-6, 12px);min-height: var(--hi-v4-height-8, 32px);line-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label--placement-left > .hi-v4-form-label__text {text-align: left; }.hi-v4-form-label--placement-right > .hi-v4-form-label__text {text-align: right; }.hi-v4-form-label--placement-top > .hi-v4-form-label__text {height: 22px;min-height: 22px;line-height: 22px;padding-right: 0;margin-bottom: var(--hi-v4-spacing-4, 8px); }.hi-v4-form-label--required > .hi-v4-form-label__text::before {margin-right: var(--hi-v4-spacing-2, 4px);content: '*';color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-form-label--placement-top {text-align: left;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;margin-bottom: var(--hi-v4-spacing-12, 24px);padding-right: 0; }.hi-v4-form-label__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;vertical-align: top;min-height: var(--hi-v4-height-8, 32px);-ms-flex-negative: 0;flex-shrink: 0; }.hi-v4-form-label__control {min-width: 1px; }.hi-v4-form-message {display: block;font-size: var(--hi-v4-text-size-md, 0.875rem);min-height: 24px;padding: 2px 0;-webkit-box-sizing: border-box;box-sizing: border-box;line-height: 20px;-webkit-transform: translateY(-10%);transform: translateY(-10%);opacity: 0;color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-form-message--show {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0); }.hi-v4-form-item {position: relative; }.hi-v4-form-item__message {position: absolute; }";
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; }";
12
12
 
13
13
  __styleInject__(css_248z);
14
14
 
package/lib/types/FormLabel.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { ReactNode } from 'react';
2
2
  import { HiBaseHTMLProps } from '@hi-ui/core';
3
3
  /**
4
4
  * TODO: What is FormLabel
@@ -29,4 +29,8 @@ export interface FormLabelProps extends HiBaseHTMLProps<'div'> {
29
29
  * 在 vertical 放置时，label 相对表单控件垂直对齐的方式，优先级低于 Form
30
30
  */
31
31
  contentPosition?: 'top' | 'center' | 'bottom';
32
+ /**
33
+ * 提示信息
34
+ */
35
+ formMessage?: ReactNode;
32
36
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/form",
3
- "version": "4.1.0",
3
+ "version": "4.1.1",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",