@hw-component/form 1.9.27 → 1.9.28
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/.eslintcache +1 -1
- package/es/Form/config.d.ts +5 -0
- package/es/Form/config.js +4 -2
- package/es/Select/TreeSelect.d.ts +7 -0
- package/es/Select/TreeSelect.js +30 -0
- package/es/Upload/UrlUpload/index.d.ts +1 -1
- package/es/index.css +9 -9
- package/lib/Form/config.d.ts +5 -0
- package/lib/Form/config.js +4 -2
- package/lib/Select/TreeSelect.d.ts +7 -0
- package/lib/Select/TreeSelect.js +33 -0
- package/lib/Upload/UrlUpload/index.d.ts +1 -1
- package/lib/index.css +9 -9
- package/package.json +1 -1
- package/src/components/DialogForm/hooks.ts +0 -1
- package/src/components/Form/Basic.tsx +5 -5
- package/src/components/Form/FormItem/BasicItem.tsx +11 -9
- package/src/components/Form/FormItem/index.tsx +2 -2
- package/src/components/Form/Label.tsx +1 -1
- package/src/components/Form/config.ts +9 -1
- package/src/components/Form/hooks/index.ts +2 -2
- package/src/components/Form/index.less +3 -3
- package/src/components/Form/index.tsx +2 -2
- package/src/components/Form/modal.ts +3 -3
- package/src/components/Input/ColorInput/index.tsx +2 -2
- package/src/components/Input/InputNumberGroup.tsx +27 -23
- package/src/components/Input/index.less +10 -10
- package/src/components/Select/TreeSelect.tsx +16 -0
- package/src/components/Switch/index.less +2 -2
- package/src/components/Switch/index.tsx +12 -14
- package/src/components/Upload/UrlUpload/index.tsx +1 -1
- package/src/pages/Form/index.tsx +87 -44
- package/src/pages/Input/index.tsx +3 -3
- package/src/pages/InputNumberGroup/index.tsx +21 -13
- package/src/pages/Switch/index.tsx +10 -11
- package/src/routes.tsx +1 -1
package/es/Form/config.d.ts
CHANGED
|
@@ -35,5 +35,10 @@ declare const componentConfig: {
|
|
|
35
35
|
Component: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
36
36
|
placeholder: ({ label }: import("./modal").HItemProps) => string[];
|
|
37
37
|
};
|
|
38
|
+
treeSelect: ({ request, options, ...props }: {
|
|
39
|
+
[x: string]: any;
|
|
40
|
+
request: any;
|
|
41
|
+
options: any;
|
|
42
|
+
}) => JSX.Element;
|
|
38
43
|
};
|
|
39
44
|
export default componentConfig;
|
package/es/Form/config.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
// welcome to hoo hoo hoo
|
|
2
2
|
import HSelect from '../Select/index.js';
|
|
3
|
+
import HTreeSelect from '../Select/TreeSelect.js';
|
|
3
4
|
import HInput from '../Input/index.js';
|
|
4
5
|
import HInputNumber from '../Input/InputNumber.js';
|
|
5
6
|
import HSelectInput from '../Input/SelectInput.js';
|
|
@@ -24,7 +25,7 @@ import HInputNumberGroup from '../Input/InputNumberGroup.js';
|
|
|
24
25
|
|
|
25
26
|
var placeholderConfig = {
|
|
26
27
|
inputType: ["input", "inputNumber", "selectInput", "buttonInput", "verificationCodeInput", "trimInput", "urlUpload", "textArea"],
|
|
27
|
-
selectType: ["select", "datePicker", "timePicker", "colorInput"]
|
|
28
|
+
selectType: ["select", "datePicker", "timePicker", "colorInput", "treeSelect"]
|
|
28
29
|
};
|
|
29
30
|
var componentConfig = {
|
|
30
31
|
select: HSelect,
|
|
@@ -48,7 +49,8 @@ var componentConfig = {
|
|
|
48
49
|
verificationCodeInput: VerificationCodeInput,
|
|
49
50
|
trimInput: TrimInput,
|
|
50
51
|
trimTextArea: TrimTextArea,
|
|
51
|
-
inputNumberGroup: HInputNumberGroup
|
|
52
|
+
inputNumberGroup: HInputNumberGroup,
|
|
53
|
+
treeSelect: HTreeSelect
|
|
52
54
|
};
|
|
53
55
|
|
|
54
56
|
export { componentConfig as default, placeholderConfig };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { TreeSelectProps } from "antd/lib/tree-select";
|
|
2
|
+
import { PromiseFnResult } from "../modal";
|
|
3
|
+
interface IProps extends TreeSelectProps {
|
|
4
|
+
request?: PromiseFnResult;
|
|
5
|
+
}
|
|
6
|
+
declare const _default: ({ request, treeData, ...props }: IProps) => JSX.Element;
|
|
7
|
+
export default _default;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
// welcome to hoo hoo hoo
|
|
2
|
+
import _defineProperty from '@babel/runtime-corejs3/helpers/defineProperty';
|
|
3
|
+
import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/objectWithoutProperties';
|
|
4
|
+
import { jsx } from 'react/jsx-runtime';
|
|
5
|
+
import { TreeSelect } from 'antd';
|
|
6
|
+
import { useRequest } from 'ahooks';
|
|
7
|
+
|
|
8
|
+
var _excluded = ["request", "treeData"];
|
|
9
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
10
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
11
|
+
var HTreeSelect = (function (_ref) {
|
|
12
|
+
var request = _ref.request,
|
|
13
|
+
treeData = _ref.treeData,
|
|
14
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
15
|
+
var _useRequest = useRequest(function () {
|
|
16
|
+
if (request) {
|
|
17
|
+
return request({});
|
|
18
|
+
}
|
|
19
|
+
return Promise.resolve(treeData);
|
|
20
|
+
}),
|
|
21
|
+
loading = _useRequest.loading,
|
|
22
|
+
data = _useRequest.data;
|
|
23
|
+
return jsx(TreeSelect, _objectSpread({
|
|
24
|
+
treeData: data,
|
|
25
|
+
loading: loading
|
|
26
|
+
}, props));
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
export { HTreeSelect as default };
|
|
30
|
+
// powered by hdj
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { IUrlUploadProps } from "../modal";
|
|
2
|
-
import { HItemProps } from "@/components/Form/modal";
|
|
2
|
+
import type { HItemProps } from "@/components/Form/modal";
|
|
3
3
|
declare const _default: {
|
|
4
4
|
Component: ({ placeholder, value, onChange, mediaType, inputHelper, style, exFiles, spaceSize, ...props }: IUrlUploadProps) => JSX.Element;
|
|
5
5
|
placeholder: ({ label }: HItemProps) => string;
|
package/es/index.css
CHANGED
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
content: ":";
|
|
15
15
|
}
|
|
16
16
|
.ant-hw-form-label-item-tooltip {
|
|
17
|
-
margin-left: 4px;
|
|
18
17
|
display: -webkit-inline-box;
|
|
19
18
|
display: -webkit-inline-flex;
|
|
20
19
|
display: -ms-inline-flexbox;
|
|
21
20
|
display: inline-flex;
|
|
21
|
+
margin-left: 4px;
|
|
22
22
|
}
|
|
23
23
|
.ant-hw-form-base-item {
|
|
24
24
|
display: -webkit-box;
|
|
@@ -63,10 +63,6 @@
|
|
|
63
63
|
height: auto;
|
|
64
64
|
}
|
|
65
65
|
.ant-hw-form-base-item-right > .ant-form-item-label .ant-hw-form-label-item {
|
|
66
|
-
-webkit-box-pack: end;
|
|
67
|
-
-webkit-justify-content: end;
|
|
68
|
-
-ms-flex-pack: end;
|
|
69
|
-
justify-content: end;
|
|
70
66
|
display: -webkit-box;
|
|
71
67
|
display: -webkit-flex;
|
|
72
68
|
display: -ms-flexbox;
|
|
@@ -75,12 +71,15 @@
|
|
|
75
71
|
-webkit-align-items: center;
|
|
76
72
|
-ms-flex-align: center;
|
|
77
73
|
align-items: center;
|
|
74
|
+
-webkit-box-pack: end;
|
|
75
|
+
-webkit-justify-content: end;
|
|
76
|
+
-ms-flex-pack: end;
|
|
77
|
+
justify-content: end;
|
|
78
78
|
}
|
|
79
79
|
.ant-hw-form-base-item-right > .ant-form-item-label .ant-form-item-label > label {
|
|
80
80
|
height: 32px;
|
|
81
81
|
}
|
|
82
82
|
.ant-hw-form-base-item-left > .ant-form-item-label .ant-hw-form-label-item {
|
|
83
|
-
text-align: left;
|
|
84
83
|
display: -webkit-box;
|
|
85
84
|
display: -webkit-flex;
|
|
86
85
|
display: -ms-flexbox;
|
|
@@ -89,6 +88,7 @@
|
|
|
89
88
|
-webkit-align-items: center;
|
|
90
89
|
-ms-flex-align: center;
|
|
91
90
|
align-items: center;
|
|
91
|
+
text-align: left;
|
|
92
92
|
}
|
|
93
93
|
.ant-hw-form-base-item-left > .ant-form-item-label .ant-hw-form-item-required {
|
|
94
94
|
position: absolute;
|
|
@@ -202,9 +202,6 @@
|
|
|
202
202
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
|
203
203
|
}
|
|
204
204
|
.ant-hw-input-group .ant-hw-input-group-addon {
|
|
205
|
-
padding: 0 11px;
|
|
206
|
-
background-color: #fafafa;
|
|
207
|
-
border: 1px solid #d9d9d9;
|
|
208
205
|
display: -webkit-box !important;
|
|
209
206
|
display: -webkit-flex !important;
|
|
210
207
|
display: -ms-flexbox !important;
|
|
@@ -213,6 +210,9 @@
|
|
|
213
210
|
-webkit-align-items: center;
|
|
214
211
|
-ms-flex-align: center;
|
|
215
212
|
align-items: center;
|
|
213
|
+
padding: 0 11px;
|
|
214
|
+
background-color: #fafafa;
|
|
215
|
+
border: 1px solid #d9d9d9;
|
|
216
216
|
}
|
|
217
217
|
.ant-hw-color-box {
|
|
218
218
|
width: 22px;
|
package/lib/Form/config.d.ts
CHANGED
|
@@ -35,5 +35,10 @@ declare const componentConfig: {
|
|
|
35
35
|
Component: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
36
36
|
placeholder: ({ label }: import("./modal").HItemProps) => string[];
|
|
37
37
|
};
|
|
38
|
+
treeSelect: ({ request, options, ...props }: {
|
|
39
|
+
[x: string]: any;
|
|
40
|
+
request: any;
|
|
41
|
+
options: any;
|
|
42
|
+
}) => JSX.Element;
|
|
38
43
|
};
|
|
39
44
|
export default componentConfig;
|
package/lib/Form/config.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var index = require('../Select/index.js');
|
|
6
|
+
var TreeSelect = require('../Select/TreeSelect.js');
|
|
6
7
|
var index$6 = require('../Input/index.js');
|
|
7
8
|
var InputNumber = require('../Input/InputNumber.js');
|
|
8
9
|
var SelectInput = require('../Input/SelectInput.js');
|
|
@@ -27,7 +28,7 @@ var InputNumberGroup = require('../Input/InputNumberGroup.js');
|
|
|
27
28
|
|
|
28
29
|
var placeholderConfig = {
|
|
29
30
|
inputType: ["input", "inputNumber", "selectInput", "buttonInput", "verificationCodeInput", "trimInput", "urlUpload", "textArea"],
|
|
30
|
-
selectType: ["select", "datePicker", "timePicker", "colorInput"]
|
|
31
|
+
selectType: ["select", "datePicker", "timePicker", "colorInput", "treeSelect"]
|
|
31
32
|
};
|
|
32
33
|
var componentConfig = {
|
|
33
34
|
select: index.default,
|
|
@@ -51,7 +52,8 @@ var componentConfig = {
|
|
|
51
52
|
verificationCodeInput: index$d.default,
|
|
52
53
|
trimInput: TrimInput.default,
|
|
53
54
|
trimTextArea: TrimTextArea.default,
|
|
54
|
-
inputNumberGroup: InputNumberGroup.default
|
|
55
|
+
inputNumberGroup: InputNumberGroup.default,
|
|
56
|
+
treeSelect: TreeSelect.default
|
|
55
57
|
};
|
|
56
58
|
|
|
57
59
|
exports.default = componentConfig;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { TreeSelectProps } from "antd/lib/tree-select";
|
|
2
|
+
import { PromiseFnResult } from "../modal";
|
|
3
|
+
interface IProps extends TreeSelectProps {
|
|
4
|
+
request?: PromiseFnResult;
|
|
5
|
+
}
|
|
6
|
+
declare const _default: ({ request, treeData, ...props }: IProps) => JSX.Element;
|
|
7
|
+
export default _default;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
6
|
+
var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
|
|
7
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
+
var antd = require('antd');
|
|
9
|
+
var ahooks = require('ahooks');
|
|
10
|
+
|
|
11
|
+
var _excluded = ["request", "treeData"];
|
|
12
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
13
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
14
|
+
var HTreeSelect = (function (_ref) {
|
|
15
|
+
var request = _ref.request,
|
|
16
|
+
treeData = _ref.treeData,
|
|
17
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
18
|
+
var _useRequest = ahooks.useRequest(function () {
|
|
19
|
+
if (request) {
|
|
20
|
+
return request({});
|
|
21
|
+
}
|
|
22
|
+
return Promise.resolve(treeData);
|
|
23
|
+
}),
|
|
24
|
+
loading = _useRequest.loading,
|
|
25
|
+
data = _useRequest.data;
|
|
26
|
+
return jsxRuntime.jsx(antd.TreeSelect, _objectSpread({
|
|
27
|
+
treeData: data,
|
|
28
|
+
loading: loading
|
|
29
|
+
}, props));
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
exports.default = HTreeSelect;
|
|
33
|
+
// powered by h
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { IUrlUploadProps } from "../modal";
|
|
2
|
-
import { HItemProps } from "@/components/Form/modal";
|
|
2
|
+
import type { HItemProps } from "@/components/Form/modal";
|
|
3
3
|
declare const _default: {
|
|
4
4
|
Component: ({ placeholder, value, onChange, mediaType, inputHelper, style, exFiles, spaceSize, ...props }: IUrlUploadProps) => JSX.Element;
|
|
5
5
|
placeholder: ({ label }: HItemProps) => string;
|
package/lib/index.css
CHANGED
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
content: ":";
|
|
15
15
|
}
|
|
16
16
|
.ant-hw-form-label-item-tooltip {
|
|
17
|
-
margin-left: 4px;
|
|
18
17
|
display: -webkit-inline-box;
|
|
19
18
|
display: -webkit-inline-flex;
|
|
20
19
|
display: -ms-inline-flexbox;
|
|
21
20
|
display: inline-flex;
|
|
21
|
+
margin-left: 4px;
|
|
22
22
|
}
|
|
23
23
|
.ant-hw-form-base-item {
|
|
24
24
|
display: -webkit-box;
|
|
@@ -63,10 +63,6 @@
|
|
|
63
63
|
height: auto;
|
|
64
64
|
}
|
|
65
65
|
.ant-hw-form-base-item-right > .ant-form-item-label .ant-hw-form-label-item {
|
|
66
|
-
-webkit-box-pack: end;
|
|
67
|
-
-webkit-justify-content: end;
|
|
68
|
-
-ms-flex-pack: end;
|
|
69
|
-
justify-content: end;
|
|
70
66
|
display: -webkit-box;
|
|
71
67
|
display: -webkit-flex;
|
|
72
68
|
display: -ms-flexbox;
|
|
@@ -75,12 +71,15 @@
|
|
|
75
71
|
-webkit-align-items: center;
|
|
76
72
|
-ms-flex-align: center;
|
|
77
73
|
align-items: center;
|
|
74
|
+
-webkit-box-pack: end;
|
|
75
|
+
-webkit-justify-content: end;
|
|
76
|
+
-ms-flex-pack: end;
|
|
77
|
+
justify-content: end;
|
|
78
78
|
}
|
|
79
79
|
.ant-hw-form-base-item-right > .ant-form-item-label .ant-form-item-label > label {
|
|
80
80
|
height: 32px;
|
|
81
81
|
}
|
|
82
82
|
.ant-hw-form-base-item-left > .ant-form-item-label .ant-hw-form-label-item {
|
|
83
|
-
text-align: left;
|
|
84
83
|
display: -webkit-box;
|
|
85
84
|
display: -webkit-flex;
|
|
86
85
|
display: -ms-flexbox;
|
|
@@ -89,6 +88,7 @@
|
|
|
89
88
|
-webkit-align-items: center;
|
|
90
89
|
-ms-flex-align: center;
|
|
91
90
|
align-items: center;
|
|
91
|
+
text-align: left;
|
|
92
92
|
}
|
|
93
93
|
.ant-hw-form-base-item-left > .ant-form-item-label .ant-hw-form-item-required {
|
|
94
94
|
position: absolute;
|
|
@@ -202,9 +202,6 @@
|
|
|
202
202
|
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
|
203
203
|
}
|
|
204
204
|
.ant-hw-input-group .ant-hw-input-group-addon {
|
|
205
|
-
padding: 0 11px;
|
|
206
|
-
background-color: #fafafa;
|
|
207
|
-
border: 1px solid #d9d9d9;
|
|
208
205
|
display: -webkit-box !important;
|
|
209
206
|
display: -webkit-flex !important;
|
|
210
207
|
display: -ms-flexbox !important;
|
|
@@ -213,6 +210,9 @@
|
|
|
213
210
|
-webkit-align-items: center;
|
|
214
211
|
-ms-flex-align: center;
|
|
215
212
|
align-items: center;
|
|
213
|
+
padding: 0 11px;
|
|
214
|
+
background-color: #fafafa;
|
|
215
|
+
border: 1px solid #d9d9d9;
|
|
216
216
|
}
|
|
217
217
|
.ant-hw-color-box {
|
|
218
218
|
width: 22px;
|
package/package.json
CHANGED
|
@@ -19,7 +19,7 @@ export default ({
|
|
|
19
19
|
const {
|
|
20
20
|
form,
|
|
21
21
|
itemProps: formItemProps,
|
|
22
|
-
itemSpan:formItemSpan,
|
|
22
|
+
itemSpan: formItemSpan,
|
|
23
23
|
colon: formColon,
|
|
24
24
|
setData,
|
|
25
25
|
} = useFormContext();
|
|
@@ -33,19 +33,19 @@ export default ({
|
|
|
33
33
|
const defaultOnPressEnter = () => {
|
|
34
34
|
form.submit();
|
|
35
35
|
};
|
|
36
|
-
const globalItemSpan=itemSpan||formItemSpan;
|
|
36
|
+
const globalItemSpan = itemSpan || formItemSpan;
|
|
37
37
|
return (
|
|
38
38
|
<Row gutter={gutter} style={{ width: "100%" }}>
|
|
39
39
|
{newConfigData.map((itemData: HItemProps, index) => {
|
|
40
40
|
const {
|
|
41
|
-
labelWidth: itemLabelWidth=labelWidth,
|
|
41
|
+
labelWidth: itemLabelWidth = labelWidth,
|
|
42
42
|
hideLabel,
|
|
43
43
|
labelAlign,
|
|
44
44
|
name,
|
|
45
45
|
style,
|
|
46
46
|
itemProps = {},
|
|
47
47
|
colon: itemColon,
|
|
48
|
-
|
|
48
|
+
itemSpan: configItemSpan,
|
|
49
49
|
} = itemData;
|
|
50
50
|
const defaultItemProps = {
|
|
51
51
|
onPressEnter: dismissOnPressEnter ? undefined : defaultOnPressEnter,
|
|
@@ -61,7 +61,7 @@ export default ({
|
|
|
61
61
|
style={style}
|
|
62
62
|
itemProps={defaultItemProps as ItemPropsType}
|
|
63
63
|
hideLabel={hideLabel}
|
|
64
|
-
itemSpan={configItemSpan||globalItemSpan}
|
|
64
|
+
itemSpan={configItemSpan || globalItemSpan}
|
|
65
65
|
labelWidth={itemLabelWidth}
|
|
66
66
|
colon={typeof itemColon === "undefined" ? formColon : itemColon}
|
|
67
67
|
/>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import Label from "../Label";
|
|
2
|
-
import {Form, Space, Col, Row} from "antd";
|
|
2
|
+
import { Form, Space, Col, Row } from "antd";
|
|
3
3
|
import React from "react";
|
|
4
4
|
import Helper from "./Helper";
|
|
5
5
|
import { useClassName } from "../../hooks";
|
|
@@ -119,12 +119,14 @@ const Index: React.FC<HFormItemProps> = (props) => {
|
|
|
119
119
|
);
|
|
120
120
|
};
|
|
121
121
|
|
|
122
|
-
export default (props:HFormItemProps)=>{
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
122
|
+
export default (props: HFormItemProps) => {
|
|
123
|
+
const { rowWrapper, ...oProps } = props;
|
|
124
|
+
if (rowWrapper) {
|
|
125
|
+
return (
|
|
126
|
+
<Row style={{ width: "100%" }}>
|
|
127
|
+
<Index {...oProps} />
|
|
128
|
+
</Row>
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
return <Index {...oProps} />;
|
|
130
132
|
};
|
|
@@ -10,7 +10,7 @@ export default (props: HItemProps) => {
|
|
|
10
10
|
hideLabel: formLabelHide,
|
|
11
11
|
formItemStyle,
|
|
12
12
|
colon: formColon,
|
|
13
|
-
rowWrapper:formRowWrapper,
|
|
13
|
+
rowWrapper: formRowWrapper,
|
|
14
14
|
} = useFormContext();
|
|
15
15
|
const {
|
|
16
16
|
labelWidth = formLabelWidth,
|
|
@@ -18,7 +18,7 @@ export default (props: HItemProps) => {
|
|
|
18
18
|
hideLabel = formLabelHide,
|
|
19
19
|
style = formItemStyle,
|
|
20
20
|
colon,
|
|
21
|
-
|
|
21
|
+
rowWrapper = formRowWrapper,
|
|
22
22
|
} = props;
|
|
23
23
|
const Component = useFormItemDomControl(props);
|
|
24
24
|
return (
|
|
@@ -32,7 +32,7 @@ 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
|
+
const tooltipClassName = useClassName("hw-form-label-item-tooltip");
|
|
36
36
|
return (
|
|
37
37
|
<div style={{ width: labelWidth }} className={className}>
|
|
38
38
|
<span className={required ? requiredClass : noRequiredClass} />
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import HSelect from "../Select";
|
|
2
|
+
import HTreeSelect from "../Select/TreeSelect";
|
|
2
3
|
import HInput from "../Input";
|
|
3
4
|
import HInputNumber from "../Input/InputNumber";
|
|
4
5
|
import HSelectInput from "../Input/SelectInput";
|
|
@@ -31,7 +32,13 @@ export const placeholderConfig = {
|
|
|
31
32
|
"urlUpload",
|
|
32
33
|
"textArea",
|
|
33
34
|
],
|
|
34
|
-
selectType: [
|
|
35
|
+
selectType: [
|
|
36
|
+
"select",
|
|
37
|
+
"datePicker",
|
|
38
|
+
"timePicker",
|
|
39
|
+
"colorInput",
|
|
40
|
+
"treeSelect",
|
|
41
|
+
],
|
|
35
42
|
};
|
|
36
43
|
const componentConfig = {
|
|
37
44
|
select: HSelect,
|
|
@@ -56,6 +63,7 @@ const componentConfig = {
|
|
|
56
63
|
trimInput: TrimInput,
|
|
57
64
|
trimTextArea: TrimTextArea,
|
|
58
65
|
inputNumberGroup: HInputNumberGroup,
|
|
66
|
+
treeSelect: HTreeSelect,
|
|
59
67
|
};
|
|
60
68
|
|
|
61
69
|
export default componentConfig;
|
|
@@ -51,8 +51,8 @@ export const useInfoReq = ({
|
|
|
51
51
|
form?.setFieldsValue(result);
|
|
52
52
|
return result || {};
|
|
53
53
|
}
|
|
54
|
-
if (typeof initialValues==="undefined"){
|
|
55
|
-
return
|
|
54
|
+
if (typeof initialValues === "undefined") {
|
|
55
|
+
return {};
|
|
56
56
|
}
|
|
57
57
|
form?.setFieldsValue(initialValues);
|
|
58
58
|
return initialValues;
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
content: ":";
|
|
7
7
|
}
|
|
8
8
|
.@{ant-prefix}-hw-form-label-item-tooltip {
|
|
9
|
-
margin-left: 4px;
|
|
10
9
|
display: inline-flex;
|
|
10
|
+
margin-left: 4px;
|
|
11
11
|
}
|
|
12
12
|
.@{ant-prefix}-hw-form-base-item {
|
|
13
13
|
display: flex;
|
|
@@ -47,9 +47,9 @@
|
|
|
47
47
|
}
|
|
48
48
|
.@{ant-prefix}-hw-form-base-item-right > .@{ant-prefix}-form-item-label {
|
|
49
49
|
.@{ant-prefix}-hw-form-label-item {
|
|
50
|
-
justify-content: end;
|
|
51
50
|
display: flex;
|
|
52
51
|
align-items: center;
|
|
52
|
+
justify-content: end;
|
|
53
53
|
}
|
|
54
54
|
.@{ant-prefix}-form-item-label > label {
|
|
55
55
|
height: 32px;
|
|
@@ -58,9 +58,9 @@
|
|
|
58
58
|
|
|
59
59
|
.@{ant-prefix}-hw-form-base-item-left > .@{ant-prefix}-form-item-label {
|
|
60
60
|
.@{ant-prefix}-hw-form-label-item {
|
|
61
|
-
text-align: left;
|
|
62
61
|
display: flex;
|
|
63
62
|
align-items: center;
|
|
63
|
+
text-align: left;
|
|
64
64
|
}
|
|
65
65
|
.@{ant-prefix}-hw-form-item-required {
|
|
66
66
|
position: absolute;
|
|
@@ -28,7 +28,7 @@ export default ({
|
|
|
28
28
|
colon = true,
|
|
29
29
|
dismissOnPressEnter,
|
|
30
30
|
preserve,
|
|
31
|
-
|
|
31
|
+
rowWrapper,
|
|
32
32
|
...props
|
|
33
33
|
}: HFormProps) => {
|
|
34
34
|
const hForm = useCurrentForm(form);
|
|
@@ -90,7 +90,7 @@ export default ({
|
|
|
90
90
|
itemProps: formItemProps,
|
|
91
91
|
itemSpan,
|
|
92
92
|
setData,
|
|
93
|
-
rowWrapper
|
|
93
|
+
rowWrapper,
|
|
94
94
|
}}
|
|
95
95
|
>
|
|
96
96
|
<Form
|
|
@@ -98,7 +98,7 @@ export interface HItemProps
|
|
|
98
98
|
labelAlign?: LabelAlignModal;
|
|
99
99
|
label?: React.ReactNode | HelperModal;
|
|
100
100
|
hidden?: boolean | HideModal;
|
|
101
|
-
rowWrapper?:boolean;
|
|
101
|
+
rowWrapper?: boolean;
|
|
102
102
|
}
|
|
103
103
|
export interface HFormProps<T = any, R = any>
|
|
104
104
|
extends Omit<FormProps, "form" | "onFinish" | "labelAlign"> {
|
|
@@ -118,7 +118,7 @@ export interface HFormProps<T = any, R = any>
|
|
|
118
118
|
formItemStyle?: React.CSSProperties;
|
|
119
119
|
itemProps?: ItemPropsType;
|
|
120
120
|
dismissOnPressEnter?: boolean;
|
|
121
|
-
rowWrapper?:boolean;
|
|
121
|
+
rowWrapper?: boolean;
|
|
122
122
|
}
|
|
123
123
|
export interface HFormItemProps extends HItemProps {
|
|
124
124
|
required?: boolean;
|
|
@@ -142,7 +142,7 @@ export interface FormContextProps {
|
|
|
142
142
|
itemProps?: ItemPropsType;
|
|
143
143
|
itemSpan?: ColProps;
|
|
144
144
|
setData?: (newData: any) => void;
|
|
145
|
-
rowWrapper?:boolean;
|
|
145
|
+
rowWrapper?: boolean;
|
|
146
146
|
}
|
|
147
147
|
interface ConfigUploadProps {
|
|
148
148
|
exFiles?: string[];
|
|
@@ -19,9 +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;
|
|
23
|
-
minValMk?:(val:number)=>number;
|
|
24
|
-
maxValMk?:(val:number)=>number;
|
|
22
|
+
addonBefore?: React.ReactNode;
|
|
23
|
+
minValMk?: (val: number) => number;
|
|
24
|
+
maxValMk?: (val: number) => number;
|
|
25
25
|
}
|
|
26
26
|
const useArrayProps = (props: any) => {
|
|
27
27
|
return useMemo(() => {
|
|
@@ -31,20 +31,20 @@ const useArrayProps = (props: any) => {
|
|
|
31
31
|
return [props, props];
|
|
32
32
|
}, [props]);
|
|
33
33
|
};
|
|
34
|
-
const Addon:React.FC<IProps
|
|
35
|
-
const addonClassname=useClassName(["hw-input-group-addon"])
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
39
|
-
if (React.isValidElement(children)){
|
|
40
|
-
return <div className={addonClassname}>
|
|
41
|
-
{ React.cloneElement(children as any, { value, onChange })}
|
|
42
|
-
</div>
|
|
34
|
+
const Addon: React.FC<IProps> = ({ children, value, onChange }) => {
|
|
35
|
+
const addonClassname = useClassName(["hw-input-group-addon"]);
|
|
36
|
+
if (!children) {
|
|
37
|
+
return <></>;
|
|
43
38
|
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
39
|
+
if (React.isValidElement(children)) {
|
|
40
|
+
return (
|
|
41
|
+
<div className={addonClassname}>
|
|
42
|
+
{React.cloneElement(children as any, { value, onChange })}
|
|
43
|
+
</div>
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
return <div className={addonClassname}>{children}</div>;
|
|
47
|
+
};
|
|
48
48
|
const InputNumberGroup = ({
|
|
49
49
|
value = {},
|
|
50
50
|
valueMap = { min: "min", max: "max" },
|
|
@@ -55,9 +55,9 @@ const InputNumberGroup = ({
|
|
|
55
55
|
noHandlerWrap = true,
|
|
56
56
|
addFormat,
|
|
57
57
|
disabled,
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
addonBefore,
|
|
59
|
+
minValMk,
|
|
60
|
+
maxValMk,
|
|
61
61
|
}: IProps) => {
|
|
62
62
|
const { min, max } = valueMap;
|
|
63
63
|
const { [min]: minVal, [max]: maxVal } = value;
|
|
@@ -115,7 +115,9 @@ const InputNumberGroup = ({
|
|
|
115
115
|
};
|
|
116
116
|
return (
|
|
117
117
|
<Input.Group compact className={contentClassname}>
|
|
118
|
-
<Addon value={value} onChange={onChange}>
|
|
118
|
+
<Addon value={value} onChange={onChange}>
|
|
119
|
+
{addonBefore}
|
|
120
|
+
</Addon>
|
|
119
121
|
<div
|
|
120
122
|
className={`${bodyClassname}
|
|
121
123
|
${focus ? activeClassname : ""}
|
|
@@ -127,7 +129,7 @@ const InputNumberGroup = ({
|
|
|
127
129
|
<InputNumber<number>
|
|
128
130
|
bordered={false}
|
|
129
131
|
value={minVal}
|
|
130
|
-
max={maxValMk?maxValMk(maxVal):maxVal}
|
|
132
|
+
max={maxValMk ? maxValMk(maxVal) : maxVal}
|
|
131
133
|
min={0}
|
|
132
134
|
className={oneClassname}
|
|
133
135
|
onFocus={() => {
|
|
@@ -151,7 +153,7 @@ const InputNumberGroup = ({
|
|
|
151
153
|
value={maxVal}
|
|
152
154
|
className={oneClassname}
|
|
153
155
|
placeholder={edPlaceholder}
|
|
154
|
-
min={minValMk?minValMk(minVal):minVal}
|
|
156
|
+
min={minValMk ? minValMk(minVal) : minVal}
|
|
155
157
|
onFocus={() => {
|
|
156
158
|
setFocus(true);
|
|
157
159
|
}}
|
|
@@ -165,7 +167,9 @@ const InputNumberGroup = ({
|
|
|
165
167
|
disabled={disabled}
|
|
166
168
|
/>
|
|
167
169
|
</div>
|
|
168
|
-
<Addon value={value} onChange={onChange}>
|
|
170
|
+
<Addon value={value} onChange={onChange}>
|
|
171
|
+
{addonAfter}
|
|
172
|
+
</Addon>
|
|
169
173
|
</Input.Group>
|
|
170
174
|
);
|
|
171
175
|
};
|