@hw-component/form 1.4.6 → 1.4.7
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/config.d.ts +4 -0
- package/es/Form/config.js +3 -1
- package/es/Input/InputNumberGroup.d.ts +7 -0
- package/es/Input/InputNumberGroup.js +127 -0
- package/es/index.css +61 -0
- package/es/index.d.ts +1 -0
- package/es/index.js +2 -1
- package/lib/Form/config.d.ts +4 -0
- package/lib/Form/config.js +3 -1
- package/lib/Input/InputNumberGroup.d.ts +7 -0
- package/lib/Input/InputNumberGroup.js +130 -0
- package/lib/index.css +61 -0
- package/lib/index.d.ts +1 -0
- package/lib/index.js +2 -0
- package/package.json +1 -1
- package/src/components/Form/config.ts +3 -0
- package/src/components/Input/InputNumberGroup.tsx +104 -0
- package/src/components/Input/index.less +55 -0
- package/src/components/index.tsx +1 -0
- package/src/components/styles/index.less +1 -1
- package/src/pages/Form/index.tsx +22 -1
- package/src/components/Input/ColorInput/index.less +0 -10
package/es/Form/config.d.ts
CHANGED
|
@@ -29,5 +29,9 @@ declare const componentConfig: {
|
|
|
29
29
|
verificationCodeInput: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
30
30
|
trimInput: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
31
31
|
trimTextArea: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
32
|
+
inputNumberGroup: {
|
|
33
|
+
Component: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
34
|
+
placeholder: ({ label }: import("./modal").HItemProps) => string[];
|
|
35
|
+
};
|
|
32
36
|
};
|
|
33
37
|
export default componentConfig;
|
package/es/Form/config.js
CHANGED
|
@@ -20,6 +20,7 @@ import Cascader from '../Cascader/index.js';
|
|
|
20
20
|
import VerificationCodeInput from '../Input/VerificationCodeInput/index.js';
|
|
21
21
|
import TrimInput from '../Input/TrimInput.js';
|
|
22
22
|
import TrimTextArea from '../TextArea/TrimTextArea.js';
|
|
23
|
+
import HInputNumberGroup from '../Input/InputNumberGroup.js';
|
|
23
24
|
|
|
24
25
|
var placeholderConfig = {
|
|
25
26
|
inputType: ["input", "inputNumber", "selectInput", "buttonInput", "verificationCodeInput", "trimInput", "urlUpload", "textArea"],
|
|
@@ -46,7 +47,8 @@ var componentConfig = {
|
|
|
46
47
|
cascader: Cascader,
|
|
47
48
|
verificationCodeInput: VerificationCodeInput,
|
|
48
49
|
trimInput: TrimInput,
|
|
49
|
-
trimTextArea: TrimTextArea
|
|
50
|
+
trimTextArea: TrimTextArea,
|
|
51
|
+
inputNumberGroup: HInputNumberGroup
|
|
50
52
|
};
|
|
51
53
|
|
|
52
54
|
export { componentConfig as default, placeholderConfig };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { HItemProps } from "@/components/Form/modal";
|
|
3
|
+
declare const _default: {
|
|
4
|
+
Component: React.ForwardRefExoticComponent<import("@/components/Form/modal").HFormItemProps & React.RefAttributes<any>>;
|
|
5
|
+
placeholder: ({ label }: HItemProps) => string[];
|
|
6
|
+
};
|
|
7
|
+
export default _default;
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
// welcome to hoo hoo hoo
|
|
2
|
+
import 'core-js/modules/es.object.keys.js';
|
|
3
|
+
import 'core-js/modules/es.symbol.js';
|
|
4
|
+
import 'core-js/modules/es.array.filter.js';
|
|
5
|
+
import 'core-js/modules/es.object.to-string.js';
|
|
6
|
+
import 'core-js/modules/es.object.get-own-property-descriptor.js';
|
|
7
|
+
import 'core-js/modules/web.dom-collections.for-each.js';
|
|
8
|
+
import 'core-js/modules/es.object.get-own-property-descriptors.js';
|
|
9
|
+
import _defineProperty from '@babel/runtime-corejs3/helpers/defineProperty';
|
|
10
|
+
import _slicedToArray from '@babel/runtime-corejs3/helpers/slicedToArray';
|
|
11
|
+
import 'core-js/modules/es.array.concat.js';
|
|
12
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
13
|
+
import { Input, InputNumber } from 'antd';
|
|
14
|
+
import { SwapRightOutlined } from '@ant-design/icons';
|
|
15
|
+
import React, { useState, useMemo } from 'react';
|
|
16
|
+
import { useClassName } from '../hooks/index.js';
|
|
17
|
+
import HFormConnect from '../Form/HFormConnect.js';
|
|
18
|
+
|
|
19
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
20
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
21
|
+
var useArrayProps = function useArrayProps(props) {
|
|
22
|
+
return useMemo(function () {
|
|
23
|
+
if (Array.isArray(props)) {
|
|
24
|
+
return props;
|
|
25
|
+
}
|
|
26
|
+
return [props, props];
|
|
27
|
+
}, [props]);
|
|
28
|
+
};
|
|
29
|
+
var InputNumberGroup = function InputNumberGroup(_ref) {
|
|
30
|
+
var _ref$value = _ref.value,
|
|
31
|
+
value = _ref$value === void 0 ? {} : _ref$value,
|
|
32
|
+
_ref$valueMap = _ref.valueMap,
|
|
33
|
+
valueMap = _ref$valueMap === void 0 ? {
|
|
34
|
+
min: 'min',
|
|
35
|
+
max: 'max'
|
|
36
|
+
} : _ref$valueMap,
|
|
37
|
+
onChange = _ref.onChange,
|
|
38
|
+
_ref$placeholder = _ref.placeholder,
|
|
39
|
+
placeholder = _ref$placeholder === void 0 ? ['请输入', '请输入'] : _ref$placeholder,
|
|
40
|
+
_ref$inputNumberProps = _ref.inputNumberProps,
|
|
41
|
+
inputNumberProps = _ref$inputNumberProps === void 0 ? {} : _ref$inputNumberProps,
|
|
42
|
+
addonAfter = _ref.addonAfter;
|
|
43
|
+
var min = valueMap.min,
|
|
44
|
+
max = valueMap.max;
|
|
45
|
+
var minVal = value[min],
|
|
46
|
+
maxVal = value[max];
|
|
47
|
+
var _useArrayProps = useArrayProps(placeholder),
|
|
48
|
+
_useArrayProps2 = _slicedToArray(_useArrayProps, 2),
|
|
49
|
+
fsPlaceholder = _useArrayProps2[0],
|
|
50
|
+
edPlaceholder = _useArrayProps2[1];
|
|
51
|
+
var _useArrayProps3 = useArrayProps(inputNumberProps),
|
|
52
|
+
_useArrayProps4 = _slicedToArray(_useArrayProps3, 2),
|
|
53
|
+
fsProps = _useArrayProps4[0],
|
|
54
|
+
edProps = _useArrayProps4[1];
|
|
55
|
+
var _useState = useState(false),
|
|
56
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
57
|
+
focus = _useState2[0],
|
|
58
|
+
setFocus = _useState2[1];
|
|
59
|
+
var contentClassname = useClassName(["hw-input-group"]);
|
|
60
|
+
var bodyClassname = useClassName(["hw-input-group-body"]);
|
|
61
|
+
var activeClassname = useClassName(["hw-input-group-active"]);
|
|
62
|
+
var borderClassname = useClassName(["hw-input-group-border"]);
|
|
63
|
+
var oneClassname = useClassName(["hw-input-group-one"]);
|
|
64
|
+
var iconClassname = useClassName(["hw-input-group-icon"]);
|
|
65
|
+
var change = function change(key, val) {
|
|
66
|
+
var newVal = _objectSpread({}, value);
|
|
67
|
+
newVal[key] = val;
|
|
68
|
+
onChange === null || onChange === void 0 || onChange(newVal);
|
|
69
|
+
};
|
|
70
|
+
return jsxs(Input.Group, {
|
|
71
|
+
compact: true,
|
|
72
|
+
className: contentClassname,
|
|
73
|
+
children: [addonAfter ? /*#__PURE__*/React.cloneElement(addonAfter, {
|
|
74
|
+
value: value,
|
|
75
|
+
onChange: onChange
|
|
76
|
+
}) : addonAfter, jsxs("div", {
|
|
77
|
+
className: "".concat(bodyClassname, " ").concat(focus ? activeClassname : ''),
|
|
78
|
+
children: [jsx("span", {
|
|
79
|
+
className: borderClassname
|
|
80
|
+
}), jsx(InputNumber, _objectSpread({
|
|
81
|
+
bordered: false,
|
|
82
|
+
value: minVal,
|
|
83
|
+
max: maxVal,
|
|
84
|
+
min: 0,
|
|
85
|
+
className: oneClassname,
|
|
86
|
+
onFocus: function onFocus() {
|
|
87
|
+
setFocus(true);
|
|
88
|
+
},
|
|
89
|
+
onBlur: function onBlur() {
|
|
90
|
+
setFocus(false);
|
|
91
|
+
},
|
|
92
|
+
onChange: function onChange(val) {
|
|
93
|
+
change(min, val);
|
|
94
|
+
},
|
|
95
|
+
placeholder: fsPlaceholder
|
|
96
|
+
}, fsProps)), jsx(SwapRightOutlined, {
|
|
97
|
+
className: iconClassname
|
|
98
|
+
}), jsx(InputNumber, _objectSpread({
|
|
99
|
+
bordered: false,
|
|
100
|
+
value: maxVal,
|
|
101
|
+
className: oneClassname,
|
|
102
|
+
placeholder: edPlaceholder,
|
|
103
|
+
min: minVal,
|
|
104
|
+
onFocus: function onFocus() {
|
|
105
|
+
setFocus(true);
|
|
106
|
+
},
|
|
107
|
+
onBlur: function onBlur() {
|
|
108
|
+
setFocus(false);
|
|
109
|
+
},
|
|
110
|
+
onChange: function onChange(val) {
|
|
111
|
+
change(max, val);
|
|
112
|
+
}
|
|
113
|
+
}, edProps))]
|
|
114
|
+
})]
|
|
115
|
+
});
|
|
116
|
+
};
|
|
117
|
+
var Index = HFormConnect(InputNumberGroup);
|
|
118
|
+
var HInputNumberGroup = {
|
|
119
|
+
Component: Index,
|
|
120
|
+
placeholder: function placeholder(_ref2) {
|
|
121
|
+
var label = _ref2.label;
|
|
122
|
+
return ["\u8BF7\u8F93\u5165".concat(label, "\u6700\u5C0F\u503C"), "\u8BF7\u8F93\u5165".concat(label, "\u6700\u5927\u503C")];
|
|
123
|
+
}
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
export { HInputNumberGroup as default };
|
|
127
|
+
// powered by hdj
|
package/es/index.css
CHANGED
|
@@ -83,6 +83,67 @@
|
|
|
83
83
|
.ant-hw-form-form-item .ant-form-item-label {
|
|
84
84
|
overflow: visible;
|
|
85
85
|
}
|
|
86
|
+
.ant-hw-input-group {
|
|
87
|
+
display: -webkit-box !important;
|
|
88
|
+
display: -webkit-flex !important;
|
|
89
|
+
display: -ms-flexbox !important;
|
|
90
|
+
display: flex !important;
|
|
91
|
+
-webkit-box-align: center;
|
|
92
|
+
-webkit-align-items: center;
|
|
93
|
+
-ms-flex-align: center;
|
|
94
|
+
align-items: center;
|
|
95
|
+
width: 100%;
|
|
96
|
+
color: rgba(0, 0, 0, 0.25);
|
|
97
|
+
}
|
|
98
|
+
.ant-hw-input-group .ant-hw-input-group-body {
|
|
99
|
+
position: relative;
|
|
100
|
+
display: -webkit-box !important;
|
|
101
|
+
display: -webkit-flex !important;
|
|
102
|
+
display: -ms-flexbox !important;
|
|
103
|
+
display: flex !important;
|
|
104
|
+
-webkit-box-flex: 1;
|
|
105
|
+
-webkit-flex: 1;
|
|
106
|
+
-ms-flex: 1;
|
|
107
|
+
flex: 1;
|
|
108
|
+
-webkit-box-align: center;
|
|
109
|
+
-webkit-align-items: center;
|
|
110
|
+
-ms-flex-align: center;
|
|
111
|
+
align-items: center;
|
|
112
|
+
border: 1px solid #d9d9d9;
|
|
113
|
+
}
|
|
114
|
+
.ant-hw-input-group .ant-hw-input-group-body .ant-input-number-handler-wrap {
|
|
115
|
+
display: none;
|
|
116
|
+
}
|
|
117
|
+
.ant-hw-input-group .ant-hw-input-group-body:hover {
|
|
118
|
+
border-color: #40a9ff;
|
|
119
|
+
}
|
|
120
|
+
.ant-hw-input-group .ant-hw-input-group-body:hover .border {
|
|
121
|
+
display: block;
|
|
122
|
+
}
|
|
123
|
+
.ant-hw-input-group .ant-hw-input-group-body:active {
|
|
124
|
+
border-color: #40a9ff;
|
|
125
|
+
}
|
|
126
|
+
.ant-hw-input-group .ant-hw-input-group-border {
|
|
127
|
+
position: absolute;
|
|
128
|
+
left: -1px;
|
|
129
|
+
display: none;
|
|
130
|
+
width: 1px;
|
|
131
|
+
height: 100%;
|
|
132
|
+
background-color: #40a9ff;
|
|
133
|
+
}
|
|
134
|
+
.ant-hw-input-group .ant-hw-input-group-icon {
|
|
135
|
+
padding: 0 4px;
|
|
136
|
+
}
|
|
137
|
+
.ant-hw-input-group .ant-hw-input-group-one {
|
|
138
|
+
-webkit-box-flex: 1;
|
|
139
|
+
-webkit-flex: 1;
|
|
140
|
+
-ms-flex: 1;
|
|
141
|
+
flex: 1;
|
|
142
|
+
}
|
|
143
|
+
.ant-hw-input-group .ant-hw-input-group-active {
|
|
144
|
+
border-color: #40a9ff;
|
|
145
|
+
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
|
146
|
+
}
|
|
86
147
|
.ant-hw-color-box {
|
|
87
148
|
width: 22px;
|
|
88
149
|
height: 22px;
|
package/es/index.d.ts
CHANGED
|
@@ -28,3 +28,4 @@ export declare const HCascader: ({ request, options, fieldNames: propsFieldNames
|
|
|
28
28
|
export declare const HVerificationCodeInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
29
29
|
export declare const HTrimInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
30
30
|
export declare const HTrimTextArea: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
31
|
+
export declare const HInputNumberGroup: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
package/es/index.js
CHANGED
|
@@ -32,6 +32,7 @@ var HCascader = componentConfig.cascader;
|
|
|
32
32
|
var HVerificationCodeInput = componentConfig.verificationCodeInput;
|
|
33
33
|
var HTrimInput = componentConfig.trimInput;
|
|
34
34
|
var HTrimTextArea = componentConfig.trimTextArea;
|
|
35
|
+
var HInputNumberGroup = componentConfig.inputNumberGroup.Component;
|
|
35
36
|
|
|
36
|
-
export { HButtonInput, HCascader, HCheckBox, HCheckboxGroup, HColorInput, HDatePicker, HDrawerForm, HInput, HInputNumber, HModalForm, HPageHandler, HRadioGroup, HRangePicker, HSelect, HSelectInput, HSwitch, HTextArea, HTimePicker, HTrimInput, HTrimTextArea, HUpload, HUrlUpload, HVerificationCodeInput };
|
|
37
|
+
export { HButtonInput, HCascader, HCheckBox, HCheckboxGroup, HColorInput, HDatePicker, HDrawerForm, HInput, HInputNumber, HInputNumberGroup, HModalForm, HPageHandler, HRadioGroup, HRangePicker, HSelect, HSelectInput, HSwitch, HTextArea, HTimePicker, HTrimInput, HTrimTextArea, HUpload, HUrlUpload, HVerificationCodeInput };
|
|
37
38
|
// powered by hdj
|
package/lib/Form/config.d.ts
CHANGED
|
@@ -29,5 +29,9 @@ declare const componentConfig: {
|
|
|
29
29
|
verificationCodeInput: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
30
30
|
trimInput: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
31
31
|
trimTextArea: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
32
|
+
inputNumberGroup: {
|
|
33
|
+
Component: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
34
|
+
placeholder: ({ label }: import("./modal").HItemProps) => string[];
|
|
35
|
+
};
|
|
32
36
|
};
|
|
33
37
|
export default componentConfig;
|
package/lib/Form/config.js
CHANGED
|
@@ -23,6 +23,7 @@ var index$c = require('../Cascader/index.js');
|
|
|
23
23
|
var index$d = require('../Input/VerificationCodeInput/index.js');
|
|
24
24
|
var TrimInput = require('../Input/TrimInput.js');
|
|
25
25
|
var TrimTextArea = require('../TextArea/TrimTextArea.js');
|
|
26
|
+
var InputNumberGroup = require('../Input/InputNumberGroup.js');
|
|
26
27
|
|
|
27
28
|
var placeholderConfig = {
|
|
28
29
|
inputType: ["input", "inputNumber", "selectInput", "buttonInput", "verificationCodeInput", "trimInput", "urlUpload", "textArea"],
|
|
@@ -49,7 +50,8 @@ var componentConfig = {
|
|
|
49
50
|
cascader: index$c.default,
|
|
50
51
|
verificationCodeInput: index$d.default,
|
|
51
52
|
trimInput: TrimInput.default,
|
|
52
|
-
trimTextArea: TrimTextArea.default
|
|
53
|
+
trimTextArea: TrimTextArea.default,
|
|
54
|
+
inputNumberGroup: InputNumberGroup.default
|
|
53
55
|
};
|
|
54
56
|
|
|
55
57
|
exports.default = componentConfig;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { HItemProps } from "@/components/Form/modal";
|
|
3
|
+
declare const _default: {
|
|
4
|
+
Component: React.ForwardRefExoticComponent<import("@/components/Form/modal").HFormItemProps & React.RefAttributes<any>>;
|
|
5
|
+
placeholder: ({ label }: HItemProps) => string[];
|
|
6
|
+
};
|
|
7
|
+
export default _default;
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
require('core-js/modules/es.object.keys.js');
|
|
6
|
+
require('core-js/modules/es.symbol.js');
|
|
7
|
+
require('core-js/modules/es.array.filter.js');
|
|
8
|
+
require('core-js/modules/es.object.to-string.js');
|
|
9
|
+
require('core-js/modules/es.object.get-own-property-descriptor.js');
|
|
10
|
+
require('core-js/modules/web.dom-collections.for-each.js');
|
|
11
|
+
require('core-js/modules/es.object.get-own-property-descriptors.js');
|
|
12
|
+
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
|
|
13
|
+
var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
|
|
14
|
+
require('core-js/modules/es.array.concat.js');
|
|
15
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
16
|
+
var antd = require('antd');
|
|
17
|
+
var icons = require('@ant-design/icons');
|
|
18
|
+
var React = require('react');
|
|
19
|
+
var index = require('../hooks/index.js');
|
|
20
|
+
var HFormConnect = require('../Form/HFormConnect.js');
|
|
21
|
+
|
|
22
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
23
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
24
|
+
var useArrayProps = function useArrayProps(props) {
|
|
25
|
+
return React.useMemo(function () {
|
|
26
|
+
if (Array.isArray(props)) {
|
|
27
|
+
return props;
|
|
28
|
+
}
|
|
29
|
+
return [props, props];
|
|
30
|
+
}, [props]);
|
|
31
|
+
};
|
|
32
|
+
var InputNumberGroup = function InputNumberGroup(_ref) {
|
|
33
|
+
var _ref$value = _ref.value,
|
|
34
|
+
value = _ref$value === void 0 ? {} : _ref$value,
|
|
35
|
+
_ref$valueMap = _ref.valueMap,
|
|
36
|
+
valueMap = _ref$valueMap === void 0 ? {
|
|
37
|
+
min: 'min',
|
|
38
|
+
max: 'max'
|
|
39
|
+
} : _ref$valueMap,
|
|
40
|
+
onChange = _ref.onChange,
|
|
41
|
+
_ref$placeholder = _ref.placeholder,
|
|
42
|
+
placeholder = _ref$placeholder === void 0 ? ['请输入', '请输入'] : _ref$placeholder,
|
|
43
|
+
_ref$inputNumberProps = _ref.inputNumberProps,
|
|
44
|
+
inputNumberProps = _ref$inputNumberProps === void 0 ? {} : _ref$inputNumberProps,
|
|
45
|
+
addonAfter = _ref.addonAfter;
|
|
46
|
+
var min = valueMap.min,
|
|
47
|
+
max = valueMap.max;
|
|
48
|
+
var minVal = value[min],
|
|
49
|
+
maxVal = value[max];
|
|
50
|
+
var _useArrayProps = useArrayProps(placeholder),
|
|
51
|
+
_useArrayProps2 = _slicedToArray(_useArrayProps, 2),
|
|
52
|
+
fsPlaceholder = _useArrayProps2[0],
|
|
53
|
+
edPlaceholder = _useArrayProps2[1];
|
|
54
|
+
var _useArrayProps3 = useArrayProps(inputNumberProps),
|
|
55
|
+
_useArrayProps4 = _slicedToArray(_useArrayProps3, 2),
|
|
56
|
+
fsProps = _useArrayProps4[0],
|
|
57
|
+
edProps = _useArrayProps4[1];
|
|
58
|
+
var _useState = React.useState(false),
|
|
59
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
60
|
+
focus = _useState2[0],
|
|
61
|
+
setFocus = _useState2[1];
|
|
62
|
+
var contentClassname = index.useClassName(["hw-input-group"]);
|
|
63
|
+
var bodyClassname = index.useClassName(["hw-input-group-body"]);
|
|
64
|
+
var activeClassname = index.useClassName(["hw-input-group-active"]);
|
|
65
|
+
var borderClassname = index.useClassName(["hw-input-group-border"]);
|
|
66
|
+
var oneClassname = index.useClassName(["hw-input-group-one"]);
|
|
67
|
+
var iconClassname = index.useClassName(["hw-input-group-icon"]);
|
|
68
|
+
var change = function change(key, val) {
|
|
69
|
+
var newVal = _objectSpread({}, value);
|
|
70
|
+
newVal[key] = val;
|
|
71
|
+
onChange === null || onChange === void 0 || onChange(newVal);
|
|
72
|
+
};
|
|
73
|
+
return jsxRuntime.jsxs(antd.Input.Group, {
|
|
74
|
+
compact: true,
|
|
75
|
+
className: contentClassname,
|
|
76
|
+
children: [addonAfter ? /*#__PURE__*/React.cloneElement(addonAfter, {
|
|
77
|
+
value: value,
|
|
78
|
+
onChange: onChange
|
|
79
|
+
}) : addonAfter, jsxRuntime.jsxs("div", {
|
|
80
|
+
className: "".concat(bodyClassname, " ").concat(focus ? activeClassname : ''),
|
|
81
|
+
children: [jsxRuntime.jsx("span", {
|
|
82
|
+
className: borderClassname
|
|
83
|
+
}), jsxRuntime.jsx(antd.InputNumber, _objectSpread({
|
|
84
|
+
bordered: false,
|
|
85
|
+
value: minVal,
|
|
86
|
+
max: maxVal,
|
|
87
|
+
min: 0,
|
|
88
|
+
className: oneClassname,
|
|
89
|
+
onFocus: function onFocus() {
|
|
90
|
+
setFocus(true);
|
|
91
|
+
},
|
|
92
|
+
onBlur: function onBlur() {
|
|
93
|
+
setFocus(false);
|
|
94
|
+
},
|
|
95
|
+
onChange: function onChange(val) {
|
|
96
|
+
change(min, val);
|
|
97
|
+
},
|
|
98
|
+
placeholder: fsPlaceholder
|
|
99
|
+
}, fsProps)), jsxRuntime.jsx(icons.SwapRightOutlined, {
|
|
100
|
+
className: iconClassname
|
|
101
|
+
}), jsxRuntime.jsx(antd.InputNumber, _objectSpread({
|
|
102
|
+
bordered: false,
|
|
103
|
+
value: maxVal,
|
|
104
|
+
className: oneClassname,
|
|
105
|
+
placeholder: edPlaceholder,
|
|
106
|
+
min: minVal,
|
|
107
|
+
onFocus: function onFocus() {
|
|
108
|
+
setFocus(true);
|
|
109
|
+
},
|
|
110
|
+
onBlur: function onBlur() {
|
|
111
|
+
setFocus(false);
|
|
112
|
+
},
|
|
113
|
+
onChange: function onChange(val) {
|
|
114
|
+
change(max, val);
|
|
115
|
+
}
|
|
116
|
+
}, edProps))]
|
|
117
|
+
})]
|
|
118
|
+
});
|
|
119
|
+
};
|
|
120
|
+
var Index = HFormConnect.default(InputNumberGroup);
|
|
121
|
+
var HInputNumberGroup = {
|
|
122
|
+
Component: Index,
|
|
123
|
+
placeholder: function placeholder(_ref2) {
|
|
124
|
+
var label = _ref2.label;
|
|
125
|
+
return ["\u8BF7\u8F93\u5165".concat(label, "\u6700\u5C0F\u503C"), "\u8BF7\u8F93\u5165".concat(label, "\u6700\u5927\u503C")];
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
exports.default = HInputNumberGroup;
|
|
130
|
+
// powered by h
|
package/lib/index.css
CHANGED
|
@@ -83,6 +83,67 @@
|
|
|
83
83
|
.ant-hw-form-form-item .ant-form-item-label {
|
|
84
84
|
overflow: visible;
|
|
85
85
|
}
|
|
86
|
+
.ant-hw-input-group {
|
|
87
|
+
display: -webkit-box !important;
|
|
88
|
+
display: -webkit-flex !important;
|
|
89
|
+
display: -ms-flexbox !important;
|
|
90
|
+
display: flex !important;
|
|
91
|
+
-webkit-box-align: center;
|
|
92
|
+
-webkit-align-items: center;
|
|
93
|
+
-ms-flex-align: center;
|
|
94
|
+
align-items: center;
|
|
95
|
+
width: 100%;
|
|
96
|
+
color: rgba(0, 0, 0, 0.25);
|
|
97
|
+
}
|
|
98
|
+
.ant-hw-input-group .ant-hw-input-group-body {
|
|
99
|
+
position: relative;
|
|
100
|
+
display: -webkit-box !important;
|
|
101
|
+
display: -webkit-flex !important;
|
|
102
|
+
display: -ms-flexbox !important;
|
|
103
|
+
display: flex !important;
|
|
104
|
+
-webkit-box-flex: 1;
|
|
105
|
+
-webkit-flex: 1;
|
|
106
|
+
-ms-flex: 1;
|
|
107
|
+
flex: 1;
|
|
108
|
+
-webkit-box-align: center;
|
|
109
|
+
-webkit-align-items: center;
|
|
110
|
+
-ms-flex-align: center;
|
|
111
|
+
align-items: center;
|
|
112
|
+
border: 1px solid #d9d9d9;
|
|
113
|
+
}
|
|
114
|
+
.ant-hw-input-group .ant-hw-input-group-body .ant-input-number-handler-wrap {
|
|
115
|
+
display: none;
|
|
116
|
+
}
|
|
117
|
+
.ant-hw-input-group .ant-hw-input-group-body:hover {
|
|
118
|
+
border-color: #40a9ff;
|
|
119
|
+
}
|
|
120
|
+
.ant-hw-input-group .ant-hw-input-group-body:hover .border {
|
|
121
|
+
display: block;
|
|
122
|
+
}
|
|
123
|
+
.ant-hw-input-group .ant-hw-input-group-body:active {
|
|
124
|
+
border-color: #40a9ff;
|
|
125
|
+
}
|
|
126
|
+
.ant-hw-input-group .ant-hw-input-group-border {
|
|
127
|
+
position: absolute;
|
|
128
|
+
left: -1px;
|
|
129
|
+
display: none;
|
|
130
|
+
width: 1px;
|
|
131
|
+
height: 100%;
|
|
132
|
+
background-color: #40a9ff;
|
|
133
|
+
}
|
|
134
|
+
.ant-hw-input-group .ant-hw-input-group-icon {
|
|
135
|
+
padding: 0 4px;
|
|
136
|
+
}
|
|
137
|
+
.ant-hw-input-group .ant-hw-input-group-one {
|
|
138
|
+
-webkit-box-flex: 1;
|
|
139
|
+
-webkit-flex: 1;
|
|
140
|
+
-ms-flex: 1;
|
|
141
|
+
flex: 1;
|
|
142
|
+
}
|
|
143
|
+
.ant-hw-input-group .ant-hw-input-group-active {
|
|
144
|
+
border-color: #40a9ff;
|
|
145
|
+
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
|
146
|
+
}
|
|
86
147
|
.ant-hw-color-box {
|
|
87
148
|
width: 22px;
|
|
88
149
|
height: 22px;
|
package/lib/index.d.ts
CHANGED
|
@@ -28,3 +28,4 @@ export declare const HCascader: ({ request, options, fieldNames: propsFieldNames
|
|
|
28
28
|
export declare const HVerificationCodeInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
29
29
|
export declare const HTrimInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
30
30
|
export declare const HTrimTextArea: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
|
31
|
+
export declare const HInputNumberGroup: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
|
package/lib/index.js
CHANGED
|
@@ -33,6 +33,7 @@ var HCascader = config.default.cascader;
|
|
|
33
33
|
var HVerificationCodeInput = config.default.verificationCodeInput;
|
|
34
34
|
var HTrimInput = config.default.trimInput;
|
|
35
35
|
var HTrimTextArea = config.default.trimTextArea;
|
|
36
|
+
var HInputNumberGroup = config.default.inputNumberGroup.Component;
|
|
36
37
|
|
|
37
38
|
exports.HForm = index.default;
|
|
38
39
|
exports.useHForm = useHForm.default;
|
|
@@ -48,6 +49,7 @@ exports.HDatePicker = HDatePicker;
|
|
|
48
49
|
exports.HDrawerForm = HDrawerForm;
|
|
49
50
|
exports.HInput = HInput;
|
|
50
51
|
exports.HInputNumber = HInputNumber;
|
|
52
|
+
exports.HInputNumberGroup = HInputNumberGroup;
|
|
51
53
|
exports.HModalForm = HModalForm;
|
|
52
54
|
exports.HPageHandler = HPageHandler;
|
|
53
55
|
exports.HRadioGroup = HRadioGroup;
|
package/package.json
CHANGED
|
@@ -19,6 +19,7 @@ import Cascader from "../Cascader";
|
|
|
19
19
|
import VerificationCodeInput from "../Input/VerificationCodeInput";
|
|
20
20
|
import TrimInput from "../Input/TrimInput";
|
|
21
21
|
import TrimTextArea from "../TextArea/TrimTextArea";
|
|
22
|
+
import HInputNumberGroup from '../Input/InputNumberGroup'
|
|
22
23
|
export const placeholderConfig = {
|
|
23
24
|
inputType: [
|
|
24
25
|
"input",
|
|
@@ -54,6 +55,8 @@ const componentConfig = {
|
|
|
54
55
|
verificationCodeInput: VerificationCodeInput,
|
|
55
56
|
trimInput: TrimInput,
|
|
56
57
|
trimTextArea: TrimTextArea,
|
|
58
|
+
inputNumberGroup: HInputNumberGroup,
|
|
59
|
+
|
|
57
60
|
};
|
|
58
61
|
|
|
59
62
|
export default componentConfig;
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { InputNumber, Input } from 'antd';
|
|
2
|
+
import { SwapRightOutlined } from '@ant-design/icons';
|
|
3
|
+
import React, { useMemo, useState } from 'react';
|
|
4
|
+
import type { InputNumberProps } from 'antd/lib/input-number';
|
|
5
|
+
import { useClassName } from "../hooks";
|
|
6
|
+
import {addFormatItemModal, HItemProps} from "@/components/Form/modal";
|
|
7
|
+
import HFormConnect from "../Form/HFormConnect";
|
|
8
|
+
|
|
9
|
+
interface IProps<T=any> {
|
|
10
|
+
placeholder?: [string, string] | string;
|
|
11
|
+
addonAfter?: React.ReactNode;
|
|
12
|
+
valueMap?: {
|
|
13
|
+
min: string;
|
|
14
|
+
max: string;
|
|
15
|
+
};
|
|
16
|
+
inputNumberProps?: [InputNumberProps, InputNumberProps] | InputNumberProps;
|
|
17
|
+
value?:T;
|
|
18
|
+
onChange:(value:T)=>void;
|
|
19
|
+
addFormat?: (config: Record<string, addFormatItemModal>) => void;
|
|
20
|
+
}
|
|
21
|
+
const useArrayProps = (props: any) => {
|
|
22
|
+
return useMemo(() => {
|
|
23
|
+
if (Array.isArray(props)) {
|
|
24
|
+
return props;
|
|
25
|
+
}
|
|
26
|
+
return [props, props];
|
|
27
|
+
}, [props]);
|
|
28
|
+
};
|
|
29
|
+
const InputNumberGroup=({
|
|
30
|
+
value = {},
|
|
31
|
+
valueMap = { min: 'min', max: 'max' },
|
|
32
|
+
onChange,
|
|
33
|
+
placeholder = ['请输入', '请输入'],
|
|
34
|
+
inputNumberProps = {},
|
|
35
|
+
addonAfter,
|
|
36
|
+
}: IProps) => {
|
|
37
|
+
const { min, max } = valueMap;
|
|
38
|
+
const { [min]: minVal, [max]: maxVal } = value;
|
|
39
|
+
const [fsPlaceholder, edPlaceholder] = useArrayProps(placeholder);
|
|
40
|
+
const [fsProps, edProps] = useArrayProps(inputNumberProps);
|
|
41
|
+
const [focus, setFocus] = useState(false);
|
|
42
|
+
const contentClassname = useClassName(["hw-input-group"]);
|
|
43
|
+
const bodyClassname = useClassName(["hw-input-group-body"]);
|
|
44
|
+
const activeClassname = useClassName(["hw-input-group-active"]);
|
|
45
|
+
const borderClassname = useClassName(["hw-input-group-border"]);
|
|
46
|
+
const oneClassname = useClassName(["hw-input-group-one"]);
|
|
47
|
+
const iconClassname = useClassName(["hw-input-group-icon"]);
|
|
48
|
+
const change = (key: string, val: number | null) => {
|
|
49
|
+
const newVal = { ...value };
|
|
50
|
+
newVal[key] = val;
|
|
51
|
+
onChange?.(newVal);
|
|
52
|
+
};
|
|
53
|
+
return (
|
|
54
|
+
<Input.Group compact className={contentClassname}>
|
|
55
|
+
{addonAfter ? React.cloneElement(addonAfter as any, { value, onChange }) : addonAfter}
|
|
56
|
+
<div className={`${bodyClassname} ${focus ? activeClassname : ''}`}>
|
|
57
|
+
<span className={borderClassname} />
|
|
58
|
+
<InputNumber<number>
|
|
59
|
+
bordered={false}
|
|
60
|
+
value={minVal}
|
|
61
|
+
max={maxVal}
|
|
62
|
+
min={0}
|
|
63
|
+
className={oneClassname}
|
|
64
|
+
onFocus={() => {
|
|
65
|
+
setFocus(true);
|
|
66
|
+
}}
|
|
67
|
+
onBlur={() => {
|
|
68
|
+
setFocus(false);
|
|
69
|
+
}}
|
|
70
|
+
onChange={(val) => {
|
|
71
|
+
change(min, val);
|
|
72
|
+
}}
|
|
73
|
+
placeholder={fsPlaceholder}
|
|
74
|
+
{...fsProps}
|
|
75
|
+
/>
|
|
76
|
+
<SwapRightOutlined className={iconClassname} />
|
|
77
|
+
<InputNumber<number>
|
|
78
|
+
bordered={false}
|
|
79
|
+
value={maxVal}
|
|
80
|
+
className={oneClassname}
|
|
81
|
+
placeholder={edPlaceholder}
|
|
82
|
+
min={minVal}
|
|
83
|
+
onFocus={() => {
|
|
84
|
+
setFocus(true);
|
|
85
|
+
}}
|
|
86
|
+
onBlur={() => {
|
|
87
|
+
setFocus(false);
|
|
88
|
+
}}
|
|
89
|
+
onChange={(val) => {
|
|
90
|
+
change(max, val);
|
|
91
|
+
}}
|
|
92
|
+
{...edProps}
|
|
93
|
+
/>
|
|
94
|
+
</div>
|
|
95
|
+
</Input.Group>
|
|
96
|
+
);
|
|
97
|
+
};
|
|
98
|
+
const Index=HFormConnect(InputNumberGroup)
|
|
99
|
+
export default {
|
|
100
|
+
Component: Index,
|
|
101
|
+
placeholder: ({ label }: HItemProps) => {
|
|
102
|
+
return [`请输入${label}最小值`, `请输入${label}最大值`];
|
|
103
|
+
}
|
|
104
|
+
};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
@import "../styles/local.less";
|
|
2
|
+
@all-input-group: ~"@{ant-prefix}-hw-input-group";
|
|
3
|
+
.@{all-input-group} {
|
|
4
|
+
display: flex !important;
|
|
5
|
+
align-items: center;
|
|
6
|
+
width: 100%;
|
|
7
|
+
color: rgba(0, 0, 0, 0.25);
|
|
8
|
+
.@{all-input-group}-body{
|
|
9
|
+
position: relative;
|
|
10
|
+
display: flex !important;
|
|
11
|
+
flex: 1;
|
|
12
|
+
align-items: center;
|
|
13
|
+
border: 1px solid #d9d9d9;
|
|
14
|
+
.@{ant-prefix}-input-number-handler-wrap {
|
|
15
|
+
display: none;
|
|
16
|
+
}
|
|
17
|
+
&:hover {
|
|
18
|
+
border-color: #40a9ff;
|
|
19
|
+
.border {
|
|
20
|
+
display: block;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
&:active {
|
|
24
|
+
border-color: #40a9ff;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
.@{all-input-group}-border{
|
|
28
|
+
position: absolute;
|
|
29
|
+
left: -1px;
|
|
30
|
+
display: none;
|
|
31
|
+
width: 1px;
|
|
32
|
+
height: 100%;
|
|
33
|
+
background-color: #40a9ff;
|
|
34
|
+
}
|
|
35
|
+
.@{all-input-group}-icon{
|
|
36
|
+
padding: 0 4px;
|
|
37
|
+
}
|
|
38
|
+
.@{all-input-group}-one{
|
|
39
|
+
flex: 1;
|
|
40
|
+
}
|
|
41
|
+
.@{all-input-group}-active{
|
|
42
|
+
border-color: #40a9ff;
|
|
43
|
+
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.@{ant-prefix}-hw-color-box {
|
|
48
|
+
width: 22px;
|
|
49
|
+
height: 22px;
|
|
50
|
+
border-radius: 4px;
|
|
51
|
+
cursor: pointer;
|
|
52
|
+
}
|
|
53
|
+
.@{ant-prefix}-hw-color-input-picker {
|
|
54
|
+
box-shadow: 0 0 0 0 !important;
|
|
55
|
+
}
|
package/src/components/index.tsx
CHANGED
package/src/pages/Form/index.tsx
CHANGED
|
@@ -6,6 +6,16 @@ const Test2=()=>{
|
|
|
6
6
|
|
|
7
7
|
</Row>
|
|
8
8
|
}
|
|
9
|
+
const Test3=({value,onChange})=>{
|
|
10
|
+
return <Input value={value.input}
|
|
11
|
+
style={{width:100}}
|
|
12
|
+
onChange={(e)=>{
|
|
13
|
+
onChange({
|
|
14
|
+
...value,
|
|
15
|
+
input:e.target.value
|
|
16
|
+
})
|
|
17
|
+
}}/>
|
|
18
|
+
}
|
|
9
19
|
const formData = (options) => {
|
|
10
20
|
const op = [
|
|
11
21
|
{
|
|
@@ -21,7 +31,11 @@ const formData = (options) => {
|
|
|
21
31
|
{
|
|
22
32
|
label: "12321",
|
|
23
33
|
className: "3",
|
|
24
|
-
name:"
|
|
34
|
+
name:"min",
|
|
35
|
+
type:"inputNumberGroup",
|
|
36
|
+
itemProps:{
|
|
37
|
+
addonAfter:<Test3/>
|
|
38
|
+
},
|
|
25
39
|
},
|
|
26
40
|
{
|
|
27
41
|
label: "测试12312",
|
|
@@ -107,6 +121,13 @@ export default () => {
|
|
|
107
121
|
>
|
|
108
122
|
点我
|
|
109
123
|
</div>
|
|
124
|
+
<div
|
|
125
|
+
onClick={async () => {
|
|
126
|
+
form.submit()
|
|
127
|
+
}}
|
|
128
|
+
>
|
|
129
|
+
提交
|
|
130
|
+
</div>
|
|
110
131
|
<div
|
|
111
132
|
onClick={() => {
|
|
112
133
|
form.resetFields();
|