@hw-component/form 1.9.15 → 1.9.16
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/es/Form/Label.js +2 -3
- package/es/index.css +39 -0
- package/lib/Form/Label.js +2 -3
- package/lib/index.css +39 -0
- package/package.json +1 -1
- package/src/components/Form/Label.tsx +2 -1
- package/src/components/Form/index.less +12 -0
- package/src/pages/Form/index.tsx +13 -5
package/es/Form/Label.js
CHANGED
|
@@ -29,6 +29,7 @@ var Index = function Index(_ref2) {
|
|
|
29
29
|
var className = useClassName([].concat(array, ["hw-form-label-item"]));
|
|
30
30
|
var requiredClass = useClassName("hw-form-item-required");
|
|
31
31
|
var noRequiredClass = useClassName("hw-form-item-no-required");
|
|
32
|
+
var tooltipClassName = useClassName("hw-form-label-item-tooltip");
|
|
32
33
|
return jsxs("div", {
|
|
33
34
|
style: {
|
|
34
35
|
width: labelWidth
|
|
@@ -37,9 +38,7 @@ var Index = function Index(_ref2) {
|
|
|
37
38
|
children: [jsx("span", {
|
|
38
39
|
className: required ? requiredClass : noRequiredClass
|
|
39
40
|
}), children, text && jsx("span", {
|
|
40
|
-
|
|
41
|
-
marginLeft: 4
|
|
42
|
-
},
|
|
41
|
+
className: tooltipClassName,
|
|
43
42
|
children: jsx(Tooltip, {
|
|
44
43
|
placement: "top",
|
|
45
44
|
title: text,
|
package/es/index.css
CHANGED
|
@@ -13,6 +13,13 @@
|
|
|
13
13
|
margin: 0 0 0 2px;
|
|
14
14
|
content: ":";
|
|
15
15
|
}
|
|
16
|
+
.ant-hw-form-label-item-tooltip {
|
|
17
|
+
margin-left: 4px;
|
|
18
|
+
display: -webkit-inline-box;
|
|
19
|
+
display: -webkit-inline-flex;
|
|
20
|
+
display: -ms-inline-flexbox;
|
|
21
|
+
display: inline-flex;
|
|
22
|
+
}
|
|
16
23
|
.ant-hw-form-base-item {
|
|
17
24
|
display: -webkit-box;
|
|
18
25
|
display: -webkit-flex;
|
|
@@ -37,6 +44,14 @@
|
|
|
37
44
|
}
|
|
38
45
|
.ant-hw-form-base-item-top-left .ant-hw-form-label-item {
|
|
39
46
|
position: relative;
|
|
47
|
+
display: -webkit-box;
|
|
48
|
+
display: -webkit-flex;
|
|
49
|
+
display: -ms-flexbox;
|
|
50
|
+
display: flex;
|
|
51
|
+
-webkit-box-align: center;
|
|
52
|
+
-webkit-align-items: center;
|
|
53
|
+
-ms-flex-align: center;
|
|
54
|
+
align-items: center;
|
|
40
55
|
}
|
|
41
56
|
.ant-hw-form-base-item-top-right .ant-form-item-label > label {
|
|
42
57
|
height: auto;
|
|
@@ -49,12 +64,28 @@
|
|
|
49
64
|
}
|
|
50
65
|
.ant-hw-form-base-item-right > .ant-form-item-label .ant-hw-form-label-item {
|
|
51
66
|
text-align: right;
|
|
67
|
+
display: -webkit-box;
|
|
68
|
+
display: -webkit-flex;
|
|
69
|
+
display: -ms-flexbox;
|
|
70
|
+
display: flex;
|
|
71
|
+
-webkit-box-align: center;
|
|
72
|
+
-webkit-align-items: center;
|
|
73
|
+
-ms-flex-align: center;
|
|
74
|
+
align-items: center;
|
|
52
75
|
}
|
|
53
76
|
.ant-hw-form-base-item-right > .ant-form-item-label .ant-form-item-label > label {
|
|
54
77
|
height: 32px;
|
|
55
78
|
}
|
|
56
79
|
.ant-hw-form-base-item-left > .ant-form-item-label .ant-hw-form-label-item {
|
|
57
80
|
text-align: left;
|
|
81
|
+
display: -webkit-box;
|
|
82
|
+
display: -webkit-flex;
|
|
83
|
+
display: -ms-flexbox;
|
|
84
|
+
display: flex;
|
|
85
|
+
-webkit-box-align: center;
|
|
86
|
+
-webkit-align-items: center;
|
|
87
|
+
-ms-flex-align: center;
|
|
88
|
+
align-items: center;
|
|
58
89
|
}
|
|
59
90
|
.ant-hw-form-base-item-left > .ant-form-item-label .ant-hw-form-item-required {
|
|
60
91
|
position: absolute;
|
|
@@ -63,6 +94,14 @@
|
|
|
63
94
|
}
|
|
64
95
|
.ant-hw-form-base-item-left > .ant-form-item-label .ant-hw-form-label-item {
|
|
65
96
|
position: relative;
|
|
97
|
+
display: -webkit-box;
|
|
98
|
+
display: -webkit-flex;
|
|
99
|
+
display: -ms-flexbox;
|
|
100
|
+
display: flex;
|
|
101
|
+
-webkit-box-align: center;
|
|
102
|
+
-webkit-align-items: center;
|
|
103
|
+
-ms-flex-align: center;
|
|
104
|
+
align-items: center;
|
|
66
105
|
}
|
|
67
106
|
.ant-hw-form-base-item-left > .ant-form-item-label .ant-form-item-label > label {
|
|
68
107
|
height: 32px;
|
package/lib/Form/Label.js
CHANGED
|
@@ -32,6 +32,7 @@ var Index = function Index(_ref2) {
|
|
|
32
32
|
var className = index.useClassName([].concat(array, ["hw-form-label-item"]));
|
|
33
33
|
var requiredClass = index.useClassName("hw-form-item-required");
|
|
34
34
|
var noRequiredClass = index.useClassName("hw-form-item-no-required");
|
|
35
|
+
var tooltipClassName = index.useClassName("hw-form-label-item-tooltip");
|
|
35
36
|
return jsxRuntime.jsxs("div", {
|
|
36
37
|
style: {
|
|
37
38
|
width: labelWidth
|
|
@@ -40,9 +41,7 @@ var Index = function Index(_ref2) {
|
|
|
40
41
|
children: [jsxRuntime.jsx("span", {
|
|
41
42
|
className: required ? requiredClass : noRequiredClass
|
|
42
43
|
}), children, text && jsxRuntime.jsx("span", {
|
|
43
|
-
|
|
44
|
-
marginLeft: 4
|
|
45
|
-
},
|
|
44
|
+
className: tooltipClassName,
|
|
46
45
|
children: jsxRuntime.jsx(antd.Tooltip, {
|
|
47
46
|
placement: "top",
|
|
48
47
|
title: text,
|
package/lib/index.css
CHANGED
|
@@ -13,6 +13,13 @@
|
|
|
13
13
|
margin: 0 0 0 2px;
|
|
14
14
|
content: ":";
|
|
15
15
|
}
|
|
16
|
+
.ant-hw-form-label-item-tooltip {
|
|
17
|
+
margin-left: 4px;
|
|
18
|
+
display: -webkit-inline-box;
|
|
19
|
+
display: -webkit-inline-flex;
|
|
20
|
+
display: -ms-inline-flexbox;
|
|
21
|
+
display: inline-flex;
|
|
22
|
+
}
|
|
16
23
|
.ant-hw-form-base-item {
|
|
17
24
|
display: -webkit-box;
|
|
18
25
|
display: -webkit-flex;
|
|
@@ -37,6 +44,14 @@
|
|
|
37
44
|
}
|
|
38
45
|
.ant-hw-form-base-item-top-left .ant-hw-form-label-item {
|
|
39
46
|
position: relative;
|
|
47
|
+
display: -webkit-box;
|
|
48
|
+
display: -webkit-flex;
|
|
49
|
+
display: -ms-flexbox;
|
|
50
|
+
display: flex;
|
|
51
|
+
-webkit-box-align: center;
|
|
52
|
+
-webkit-align-items: center;
|
|
53
|
+
-ms-flex-align: center;
|
|
54
|
+
align-items: center;
|
|
40
55
|
}
|
|
41
56
|
.ant-hw-form-base-item-top-right .ant-form-item-label > label {
|
|
42
57
|
height: auto;
|
|
@@ -49,12 +64,28 @@
|
|
|
49
64
|
}
|
|
50
65
|
.ant-hw-form-base-item-right > .ant-form-item-label .ant-hw-form-label-item {
|
|
51
66
|
text-align: right;
|
|
67
|
+
display: -webkit-box;
|
|
68
|
+
display: -webkit-flex;
|
|
69
|
+
display: -ms-flexbox;
|
|
70
|
+
display: flex;
|
|
71
|
+
-webkit-box-align: center;
|
|
72
|
+
-webkit-align-items: center;
|
|
73
|
+
-ms-flex-align: center;
|
|
74
|
+
align-items: center;
|
|
52
75
|
}
|
|
53
76
|
.ant-hw-form-base-item-right > .ant-form-item-label .ant-form-item-label > label {
|
|
54
77
|
height: 32px;
|
|
55
78
|
}
|
|
56
79
|
.ant-hw-form-base-item-left > .ant-form-item-label .ant-hw-form-label-item {
|
|
57
80
|
text-align: left;
|
|
81
|
+
display: -webkit-box;
|
|
82
|
+
display: -webkit-flex;
|
|
83
|
+
display: -ms-flexbox;
|
|
84
|
+
display: flex;
|
|
85
|
+
-webkit-box-align: center;
|
|
86
|
+
-webkit-align-items: center;
|
|
87
|
+
-ms-flex-align: center;
|
|
88
|
+
align-items: center;
|
|
58
89
|
}
|
|
59
90
|
.ant-hw-form-base-item-left > .ant-form-item-label .ant-hw-form-item-required {
|
|
60
91
|
position: absolute;
|
|
@@ -63,6 +94,14 @@
|
|
|
63
94
|
}
|
|
64
95
|
.ant-hw-form-base-item-left > .ant-form-item-label .ant-hw-form-label-item {
|
|
65
96
|
position: relative;
|
|
97
|
+
display: -webkit-box;
|
|
98
|
+
display: -webkit-flex;
|
|
99
|
+
display: -ms-flexbox;
|
|
100
|
+
display: flex;
|
|
101
|
+
-webkit-box-align: center;
|
|
102
|
+
-webkit-align-items: center;
|
|
103
|
+
-ms-flex-align: center;
|
|
104
|
+
align-items: center;
|
|
66
105
|
}
|
|
67
106
|
.ant-hw-form-base-item-left > .ant-form-item-label .ant-form-item-label > label {
|
|
68
107
|
height: 32px;
|
package/package.json
CHANGED
|
@@ -32,12 +32,13 @@ const Index: React.FC<IProps> = ({
|
|
|
32
32
|
const className = useClassName([...array, "hw-form-label-item"]);
|
|
33
33
|
const requiredClass = useClassName("hw-form-item-required");
|
|
34
34
|
const noRequiredClass = useClassName("hw-form-item-no-required");
|
|
35
|
+
const tooltipClassName=useClassName("hw-form-label-item-tooltip")
|
|
35
36
|
return (
|
|
36
37
|
<div style={{ width: labelWidth }} className={className}>
|
|
37
38
|
<span className={required ? requiredClass : noRequiredClass} />
|
|
38
39
|
{children}
|
|
39
40
|
{text && (
|
|
40
|
-
<span
|
|
41
|
+
<span className={tooltipClassName}>
|
|
41
42
|
<Tooltip placement="top" title={text}>
|
|
42
43
|
{icon}
|
|
43
44
|
</Tooltip>
|
|
@@ -5,6 +5,10 @@
|
|
|
5
5
|
margin: 0 0 0 2px;
|
|
6
6
|
content: ":";
|
|
7
7
|
}
|
|
8
|
+
.@{ant-prefix}-hw-form-label-item-tooltip {
|
|
9
|
+
margin-left: 4px;
|
|
10
|
+
display: inline-flex;
|
|
11
|
+
}
|
|
8
12
|
.@{ant-prefix}-hw-form-base-item {
|
|
9
13
|
display: flex;
|
|
10
14
|
align-items: center;
|
|
@@ -24,6 +28,8 @@
|
|
|
24
28
|
}
|
|
25
29
|
.@{ant-prefix}-hw-form-label-item {
|
|
26
30
|
position: relative;
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
27
33
|
}
|
|
28
34
|
}
|
|
29
35
|
.@{ant-prefix}-hw-form-base-item-top-right {
|
|
@@ -42,6 +48,8 @@
|
|
|
42
48
|
.@{ant-prefix}-hw-form-base-item-right > .@{ant-prefix}-form-item-label {
|
|
43
49
|
.@{ant-prefix}-hw-form-label-item {
|
|
44
50
|
text-align: right;
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: center;
|
|
45
53
|
}
|
|
46
54
|
.@{ant-prefix}-form-item-label > label {
|
|
47
55
|
height: 32px;
|
|
@@ -51,6 +59,8 @@
|
|
|
51
59
|
.@{ant-prefix}-hw-form-base-item-left > .@{ant-prefix}-form-item-label {
|
|
52
60
|
.@{ant-prefix}-hw-form-label-item {
|
|
53
61
|
text-align: left;
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
54
64
|
}
|
|
55
65
|
.@{ant-prefix}-hw-form-item-required {
|
|
56
66
|
position: absolute;
|
|
@@ -59,6 +69,8 @@
|
|
|
59
69
|
}
|
|
60
70
|
.@{ant-prefix}-hw-form-label-item {
|
|
61
71
|
position: relative;
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
62
74
|
}
|
|
63
75
|
.@{ant-prefix}-form-item-label > label {
|
|
64
76
|
height: 32px;
|
package/src/pages/Form/index.tsx
CHANGED
|
@@ -69,21 +69,29 @@ const formData = (options) => {
|
|
|
69
69
|
{
|
|
70
70
|
name: "name",
|
|
71
71
|
label: "输入框",
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
return !check?.vv;
|
|
76
|
-
},
|
|
72
|
+
itemProps: {
|
|
73
|
+
|
|
74
|
+
}
|
|
77
75
|
},
|
|
78
76
|
{
|
|
79
77
|
name: "url",
|
|
80
78
|
type: "urlUpload",
|
|
81
79
|
label: "文本",
|
|
80
|
+
itemProps: {
|
|
81
|
+
initValueProvider:(props,val)=>{
|
|
82
|
+
console.log(props,val,"fff")
|
|
83
|
+
return {
|
|
84
|
+
...val,
|
|
85
|
+
name:"ffffsfsadasda"
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
82
89
|
},
|
|
83
90
|
{
|
|
84
91
|
label: "输入框",
|
|
85
92
|
type: "checkboxGroup",
|
|
86
93
|
name: "check",
|
|
94
|
+
hover:"你好",
|
|
87
95
|
itemProps: {
|
|
88
96
|
options: [
|
|
89
97
|
{
|