@hw-component/form 1.9.14 → 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/Input/InputNumberGroup.js +5 -3
- package/es/index.css +39 -0
- package/lib/Form/Label.js +2 -3
- package/lib/Input/InputNumberGroup.js +5 -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/components/Input/InputNumberGroup.tsx +7 -3
- 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,
|
|
@@ -62,7 +62,9 @@ var InputNumberGroup = function InputNumberGroup(_ref2) {
|
|
|
62
62
|
noHandlerWrap = _ref2$noHandlerWrap === void 0 ? true : _ref2$noHandlerWrap,
|
|
63
63
|
addFormat = _ref2.addFormat,
|
|
64
64
|
disabled = _ref2.disabled,
|
|
65
|
-
addonBefore = _ref2.addonBefore
|
|
65
|
+
addonBefore = _ref2.addonBefore,
|
|
66
|
+
minValMk = _ref2.minValMk,
|
|
67
|
+
maxValMk = _ref2.maxValMk;
|
|
66
68
|
var min = valueMap.min,
|
|
67
69
|
max = valueMap.max;
|
|
68
70
|
var minVal = value[min],
|
|
@@ -133,7 +135,7 @@ var InputNumberGroup = function InputNumberGroup(_ref2) {
|
|
|
133
135
|
}), jsx(InputNumber, _objectSpread(_objectSpread({
|
|
134
136
|
bordered: false,
|
|
135
137
|
value: minVal,
|
|
136
|
-
max: maxVal,
|
|
138
|
+
max: maxValMk ? maxValMk(maxVal) : maxVal,
|
|
137
139
|
min: 0,
|
|
138
140
|
className: oneClassname,
|
|
139
141
|
onFocus: function onFocus() {
|
|
@@ -156,7 +158,7 @@ var InputNumberGroup = function InputNumberGroup(_ref2) {
|
|
|
156
158
|
value: maxVal,
|
|
157
159
|
className: oneClassname,
|
|
158
160
|
placeholder: edPlaceholder,
|
|
159
|
-
min: minVal,
|
|
161
|
+
min: minValMk ? minValMk(minVal) : minVal,
|
|
160
162
|
onFocus: function onFocus() {
|
|
161
163
|
setFocus(true);
|
|
162
164
|
},
|
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,
|
|
@@ -65,7 +65,9 @@ var InputNumberGroup = function InputNumberGroup(_ref2) {
|
|
|
65
65
|
noHandlerWrap = _ref2$noHandlerWrap === void 0 ? true : _ref2$noHandlerWrap,
|
|
66
66
|
addFormat = _ref2.addFormat,
|
|
67
67
|
disabled = _ref2.disabled,
|
|
68
|
-
addonBefore = _ref2.addonBefore
|
|
68
|
+
addonBefore = _ref2.addonBefore,
|
|
69
|
+
minValMk = _ref2.minValMk,
|
|
70
|
+
maxValMk = _ref2.maxValMk;
|
|
69
71
|
var min = valueMap.min,
|
|
70
72
|
max = valueMap.max;
|
|
71
73
|
var minVal = value[min],
|
|
@@ -136,7 +138,7 @@ var InputNumberGroup = function InputNumberGroup(_ref2) {
|
|
|
136
138
|
}), jsxRuntime.jsx(antd.InputNumber, _objectSpread(_objectSpread({
|
|
137
139
|
bordered: false,
|
|
138
140
|
value: minVal,
|
|
139
|
-
max: maxVal,
|
|
141
|
+
max: maxValMk ? maxValMk(maxVal) : maxVal,
|
|
140
142
|
min: 0,
|
|
141
143
|
className: oneClassname,
|
|
142
144
|
onFocus: function onFocus() {
|
|
@@ -159,7 +161,7 @@ var InputNumberGroup = function InputNumberGroup(_ref2) {
|
|
|
159
161
|
value: maxVal,
|
|
160
162
|
className: oneClassname,
|
|
161
163
|
placeholder: edPlaceholder,
|
|
162
|
-
min: minVal,
|
|
164
|
+
min: minValMk ? minValMk(minVal) : minVal,
|
|
163
165
|
onFocus: function onFocus() {
|
|
164
166
|
setFocus(true);
|
|
165
167
|
},
|
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;
|
|
@@ -19,7 +19,9 @@ interface IProps<T = any> {
|
|
|
19
19
|
addFormat?: (config: Record<string, addFormatItemModal>) => void;
|
|
20
20
|
noHandlerWrap?: boolean;
|
|
21
21
|
disabled?: boolean;
|
|
22
|
-
addonBefore?:React.ReactNode
|
|
22
|
+
addonBefore?:React.ReactNode;
|
|
23
|
+
minValMk?:(val:number)=>number;
|
|
24
|
+
maxValMk?:(val:number)=>number;
|
|
23
25
|
}
|
|
24
26
|
const useArrayProps = (props: any) => {
|
|
25
27
|
return useMemo(() => {
|
|
@@ -54,6 +56,8 @@ const InputNumberGroup = ({
|
|
|
54
56
|
addFormat,
|
|
55
57
|
disabled,
|
|
56
58
|
addonBefore,
|
|
59
|
+
minValMk,
|
|
60
|
+
maxValMk
|
|
57
61
|
}: IProps) => {
|
|
58
62
|
const { min, max } = valueMap;
|
|
59
63
|
const { [min]: minVal, [max]: maxVal } = value;
|
|
@@ -123,7 +127,7 @@ const InputNumberGroup = ({
|
|
|
123
127
|
<InputNumber<number>
|
|
124
128
|
bordered={false}
|
|
125
129
|
value={minVal}
|
|
126
|
-
max={maxVal}
|
|
130
|
+
max={maxValMk?maxValMk(maxVal):maxVal}
|
|
127
131
|
min={0}
|
|
128
132
|
className={oneClassname}
|
|
129
133
|
onFocus={() => {
|
|
@@ -147,7 +151,7 @@ const InputNumberGroup = ({
|
|
|
147
151
|
value={maxVal}
|
|
148
152
|
className={oneClassname}
|
|
149
153
|
placeholder={edPlaceholder}
|
|
150
|
-
min={minVal}
|
|
154
|
+
min={minValMk?minValMk(minVal):minVal}
|
|
151
155
|
onFocus={() => {
|
|
152
156
|
setFocus(true);
|
|
153
157
|
}}
|
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
|
{
|