@hi-ui/input 4.0.10 → 4.0.12
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/CHANGELOG.md +35 -0
- package/lib/cjs/Input.js +85 -112
- package/lib/cjs/MockInput.js +45 -66
- package/lib/cjs/index.js +0 -6
- package/lib/cjs/styles/index.scss.js +1 -4
- package/lib/cjs/use-input-cursor.js +22 -39
- package/lib/cjs/use-input.js +40 -60
- package/lib/cjs/utils/index.js +1 -37
- package/lib/esm/Input.js +83 -100
- package/lib/esm/MockInput.js +43 -54
- package/lib/esm/styles/index.scss.js +1 -3
- package/lib/esm/use-input-cursor.js +22 -36
- package/lib/esm/use-input.js +40 -52
- package/lib/esm/utils/index.js +0 -37
- package/package.json +13 -13
@@ -12,64 +12,53 @@
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
13
13
|
value: true
|
14
14
|
});
|
15
|
-
|
16
15
|
var React = require('react');
|
17
|
-
|
18
16
|
var typeAssertion = require('@hi-ui/type-assertion');
|
19
|
-
|
20
17
|
var defaultSeparator = ' ';
|
21
|
-
|
22
18
|
var useInputCursor = function useInputCursor(_ref) {
|
23
19
|
var inputElementRef = _ref.inputElementRef,
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
20
|
+
value = _ref.value,
|
21
|
+
formatter = _ref.formatter,
|
22
|
+
_ref$separator = _ref.separator,
|
23
|
+
separator = _ref$separator === void 0 ? defaultSeparator : _ref$separator;
|
29
24
|
var _useState = React.useState(0),
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
25
|
+
position = _useState[0],
|
26
|
+
setPosition = _useState[1];
|
27
|
+
var startPositionRef = React.useRef(0);
|
28
|
+
// 记录值变化前的位置
|
35
29
|
var handleOnKeyDown = React.useCallback(function () {
|
36
30
|
var _a, _b;
|
37
|
-
|
38
31
|
startPositionRef.current = (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0;
|
39
32
|
}, [inputElementRef]);
|
40
33
|
var handleChange = React.useCallback(function (evt) {
|
41
34
|
var _a, _b;
|
42
|
-
|
43
35
|
if (typeAssertion.isNullish(value)) {
|
44
36
|
return;
|
45
37
|
}
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
38
|
+
var val = evt.target.value;
|
39
|
+
// 处理后的字符串
|
40
|
+
var str = typeof formatter === 'function' ? formatter(val) : val;
|
41
|
+
// 光标变化后的位置
|
42
|
+
var endPosition = (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0;
|
43
|
+
// 字符串添加
|
53
44
|
if (str.length > value.length) {
|
54
45
|
// 值变化的长度
|
55
|
-
var len = str.length - value.length;
|
56
|
-
|
57
|
-
var addStr = str.substring(startPositionRef.current, startPositionRef.current + len);
|
58
|
-
|
46
|
+
var len = str.length - value.length;
|
47
|
+
// 取出变化的值
|
48
|
+
var addStr = str.substring(startPositionRef.current, startPositionRef.current + len);
|
49
|
+
// 光标应该移动的格数
|
59
50
|
var step = getSeparatorNum(addStr, separator);
|
60
51
|
setPosition(endPosition + step);
|
61
|
-
}
|
62
|
-
|
63
|
-
|
52
|
+
}
|
53
|
+
// 字符串删除
|
64
54
|
if (str.length < value.length) {
|
65
55
|
if (str.charAt(endPosition - 1) === separator) {
|
66
56
|
setPosition(endPosition - 1);
|
67
57
|
} else {
|
68
58
|
setPosition(endPosition);
|
69
59
|
}
|
70
|
-
}
|
71
|
-
|
72
|
-
|
60
|
+
}
|
61
|
+
// 没有变化
|
73
62
|
if (str.length === value.length) {
|
74
63
|
if (str.charAt(startPositionRef.current) === separator) {
|
75
64
|
setPosition(endPosition + 1);
|
@@ -89,22 +78,16 @@ var useInputCursor = function useInputCursor(_ref) {
|
|
89
78
|
* @param str
|
90
79
|
* @returns
|
91
80
|
*/
|
92
|
-
|
93
|
-
|
94
81
|
var getSeparatorNum = function getSeparatorNum(str, separator) {
|
95
82
|
if (separator === void 0) {
|
96
83
|
separator = defaultSeparator;
|
97
84
|
}
|
98
|
-
|
99
85
|
var index = str.indexOf(separator);
|
100
86
|
var num = 0;
|
101
|
-
|
102
87
|
while (index !== -1) {
|
103
88
|
index = str.indexOf(separator, index + 1);
|
104
89
|
num++;
|
105
90
|
}
|
106
|
-
|
107
91
|
return num;
|
108
92
|
};
|
109
|
-
|
110
93
|
exports.useInputCursor = useInputCursor;
|
package/lib/cjs/use-input.js
CHANGED
@@ -12,65 +12,53 @@
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
13
13
|
value: true
|
14
14
|
});
|
15
|
-
|
16
15
|
var React = require('react');
|
17
|
-
|
18
16
|
var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
|
19
|
-
|
20
17
|
var useLatest = require('@hi-ui/use-latest');
|
21
|
-
|
22
18
|
var domUtils = require('@hi-ui/dom-utils');
|
23
|
-
|
24
19
|
var funcUtils = require('@hi-ui/func-utils');
|
25
|
-
|
26
20
|
var index = require('./utils/index.js');
|
27
|
-
|
28
21
|
var useInputCursor = require('./use-input-cursor.js');
|
29
|
-
|
30
|
-
|
31
|
-
|
22
|
+
var EXTRA_TYPE = ['text', 'id', 'tel', 'card', 'amount', 'email'];
|
23
|
+
// 需要格式化后校对光标的类型
|
32
24
|
var RESET_CURSOR_TYPE = ['id', 'tel', 'card'];
|
33
|
-
|
34
25
|
var useInput = function useInput(_ref) {
|
35
26
|
var name = _ref.name,
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
27
|
+
_ref$autoFocus = _ref.autoFocus,
|
28
|
+
autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
|
29
|
+
_ref$disabled = _ref.disabled,
|
30
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
31
|
+
_ref$readOnly = _ref.readOnly,
|
32
|
+
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
|
33
|
+
maxLength = _ref.maxLength,
|
34
|
+
placeholder = _ref.placeholder,
|
35
|
+
_ref$defaultValue = _ref.defaultValue,
|
36
|
+
defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
|
37
|
+
valueProp = _ref.value,
|
38
|
+
onChange = _ref.onChange,
|
39
|
+
onFocus = _ref.onFocus,
|
40
|
+
onBlur = _ref.onBlur,
|
41
|
+
onKeyDown = _ref.onKeyDown,
|
42
|
+
_ref$trimValueOnBlur = _ref.trimValueOnBlur,
|
43
|
+
trimValueOnBlur = _ref$trimValueOnBlur === void 0 ? false : _ref$trimValueOnBlur,
|
44
|
+
_ref$type = _ref.type,
|
45
|
+
type = _ref$type === void 0 ? 'text' : _ref$type,
|
46
|
+
clearElementRef = _ref.clearElementRef,
|
47
|
+
inputElementRef = _ref.inputElementRef;
|
48
|
+
// Object.is 避免 trimValueOnBlur 和 点击 clearIcon 触发 2 次相同的 onCHange
|
58
49
|
var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange, Object.is),
|
59
|
-
|
60
|
-
|
61
|
-
|
50
|
+
value = _useUncontrolledState[0],
|
51
|
+
tryChangeValue = _useUncontrolledState[1];
|
62
52
|
var _useInputCursor = useInputCursor.useInputCursor({
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
53
|
+
inputElementRef: inputElementRef,
|
54
|
+
value: index.format(value, type)
|
55
|
+
}),
|
56
|
+
formatHandleChange = _useInputCursor.handleChange,
|
57
|
+
handleOnKeyDown = _useInputCursor.handleOnKeyDown,
|
58
|
+
position = _useInputCursor.position;
|
69
59
|
/**
|
70
60
|
* 修复值格式化时光标位置问题:https://github.com/XiaoMi/hiui/issues/2438
|
71
61
|
*/
|
72
|
-
|
73
|
-
|
74
62
|
var needResetCursorPosition = React.useMemo(function () {
|
75
63
|
return RESET_CURSOR_TYPE.includes(type);
|
76
64
|
}, [type]);
|
@@ -78,18 +66,15 @@ var useInput = function useInput(_ref) {
|
|
78
66
|
if (trim === void 0) {
|
79
67
|
trim = false;
|
80
68
|
}
|
81
|
-
|
82
69
|
evt.persist();
|
83
70
|
var nextValue = evt.target.value;
|
84
|
-
var valueTrue = index.pure(nextValue, type);
|
85
|
-
|
71
|
+
var valueTrue = index.pure(nextValue, type);
|
72
|
+
// 防溢出,保证 onChange 拿到的是值是最新的 formatted value
|
86
73
|
var value = index.format(nextValue, type);
|
87
|
-
|
88
74
|
if (trim) {
|
89
75
|
valueTrue = valueTrue.trim();
|
90
76
|
value = value.trim();
|
91
77
|
}
|
92
|
-
|
93
78
|
var event = Object.create(evt);
|
94
79
|
event.target = Object.assign(Object.assign({}, evt.target), {
|
95
80
|
value: value
|
@@ -97,31 +82,27 @@ var useInput = function useInput(_ref) {
|
|
97
82
|
tryChangeValue(valueTrue, event);
|
98
83
|
needResetCursorPosition && formatHandleChange(event);
|
99
84
|
}, [formatHandleChange, needResetCursorPosition, tryChangeValue, type]);
|
100
|
-
|
101
85
|
var _useState = React.useState(autoFocus),
|
102
|
-
|
103
|
-
|
104
|
-
|
86
|
+
focused = _useState[0],
|
87
|
+
setFocused = _useState[1];
|
105
88
|
var handleFocus = useLatest.useLatestCallback(function (evt) {
|
106
89
|
setFocused(true);
|
107
90
|
onFocus === null || onFocus === void 0 ? void 0 : onFocus(evt);
|
108
91
|
});
|
109
92
|
var handleBlur = useLatest.useLatestCallback(function (event) {
|
110
|
-
var relatedTarget = event.relatedTarget;
|
111
|
-
|
93
|
+
var relatedTarget = event.relatedTarget;
|
94
|
+
// 拦截 clearIcon 点击清空,阻止其触发 input 失焦
|
112
95
|
if (clearElementRef && clearElementRef.current && clearElementRef.current === relatedTarget) {
|
113
96
|
return;
|
114
97
|
}
|
115
|
-
|
116
|
-
|
117
|
-
|
98
|
+
setFocused(false);
|
99
|
+
// amount 自动添加小数
|
118
100
|
if (type === 'amount') {
|
119
101
|
event.target.value = index.formatAmount(value, true);
|
120
102
|
handleChange(event, trimValueOnBlur);
|
121
103
|
} else if (trimValueOnBlur) {
|
122
104
|
handleChange(event, true);
|
123
105
|
}
|
124
|
-
|
125
106
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
126
107
|
});
|
127
108
|
var nativeInputProps = React.useMemo(function () {
|
@@ -160,5 +141,4 @@ var useInput = function useInput(_ref) {
|
|
160
141
|
getInputProps: getInputProps
|
161
142
|
};
|
162
143
|
};
|
163
|
-
|
164
144
|
exports.useInput = useInput;
|
package/lib/cjs/utils/index.js
CHANGED
@@ -12,18 +12,16 @@
|
|
12
12
|
Object.defineProperty(exports, '__esModule', {
|
13
13
|
value: true
|
14
14
|
});
|
15
|
+
|
15
16
|
/**
|
16
17
|
* 格式化身份证
|
17
18
|
*/
|
18
|
-
|
19
19
|
var formatId = function formatId(val) {
|
20
20
|
val = val.replace(/[^a-zA-Z0-9]/g, '');
|
21
21
|
var len = val.length;
|
22
|
-
|
23
22
|
if (val === '' || len < 7) {
|
24
23
|
return val;
|
25
24
|
}
|
26
|
-
|
27
25
|
if (len < 11) {
|
28
26
|
return val.slice(0, 6) + ' ' + val.slice(6, 10);
|
29
27
|
} else if (len < 15) {
|
@@ -32,7 +30,6 @@ var formatId = function formatId(val) {
|
|
32
30
|
return val.slice(0, 6) + ' ' + val.slice(6, 10) + ' ' + val.slice(10, 14) + ' ' + val.slice(14, 18);
|
33
31
|
}
|
34
32
|
};
|
35
|
-
|
36
33
|
var pureId = function pureId(val) {
|
37
34
|
var tmp = val.replace(/[^\d|.]/g, '');
|
38
35
|
return tmp.slice(0, 18);
|
@@ -40,23 +37,18 @@ var pureId = function pureId(val) {
|
|
40
37
|
/**
|
41
38
|
* 格式化手机号
|
42
39
|
*/
|
43
|
-
|
44
|
-
|
45
40
|
var formatTel = function formatTel(val) {
|
46
41
|
val = val.replace(/\D/g, '');
|
47
42
|
var len = val.length;
|
48
|
-
|
49
43
|
if (val === '' || len < 4) {
|
50
44
|
return val;
|
51
45
|
}
|
52
|
-
|
53
46
|
if (len < 8) {
|
54
47
|
return val.slice(0, 3) + ' ' + val.slice(3, 7);
|
55
48
|
} else {
|
56
49
|
return val.slice(0, 3) + ' ' + val.slice(3, 7) + ' ' + val.slice(7, 11);
|
57
50
|
}
|
58
51
|
};
|
59
|
-
|
60
52
|
var pureTel = function pureTel(val) {
|
61
53
|
var tmp = val.replace(/[^\d|.]/g, '');
|
62
54
|
return tmp.slice(0, 11);
|
@@ -64,16 +56,12 @@ var pureTel = function pureTel(val) {
|
|
64
56
|
/**
|
65
57
|
* 格式化银行卡号
|
66
58
|
*/
|
67
|
-
|
68
|
-
|
69
59
|
var formatCard = function formatCard(val) {
|
70
60
|
val = val.replace(/\D/g, '');
|
71
61
|
var len = val.length;
|
72
|
-
|
73
62
|
if (val === '' || val.length < 5) {
|
74
63
|
return val;
|
75
64
|
}
|
76
|
-
|
77
65
|
if (len < 9) {
|
78
66
|
return val.slice(0, 4) + ' ' + val.slice(4, 8);
|
79
67
|
} else if (len < 13) {
|
@@ -84,7 +72,6 @@ var formatCard = function formatCard(val) {
|
|
84
72
|
return val.slice(0, 4) + ' ' + val.slice(4, 8) + ' ' + val.slice(8, 12) + ' ' + val.slice(12, 16) + ' ' + val.slice(16, 19);
|
85
73
|
}
|
86
74
|
};
|
87
|
-
|
88
75
|
var pureCard = function pureCard(val) {
|
89
76
|
var tmp = val.replace(/[^\d|.]/g, '');
|
90
77
|
return tmp.slice(0, 19);
|
@@ -93,59 +80,44 @@ var pureCard = function pureCard(val) {
|
|
93
80
|
* 金额自动生成小数
|
94
81
|
* @param {string} val 需要处理的值
|
95
82
|
*/
|
96
|
-
|
97
|
-
|
98
83
|
var formatAmount = function formatAmount(val, fill) {
|
99
84
|
if (fill === void 0) {
|
100
85
|
fill = false;
|
101
86
|
}
|
102
|
-
|
103
87
|
val = val.replace(/[^\d|.|,]/g, '').replace(/(\.\d*?)(\.|,).*/, function (_, $1) {
|
104
88
|
return $1;
|
105
89
|
});
|
106
|
-
|
107
90
|
if (fill) {
|
108
91
|
if (!val) return val;
|
109
92
|
return val.indexOf('.') > -1 ? val : val + '.00';
|
110
93
|
}
|
111
|
-
|
112
94
|
return val;
|
113
95
|
};
|
114
|
-
|
115
96
|
var pureAmount = function pureAmount(val) {
|
116
97
|
var tmp = val.replace(/[^\d|.]/g, '');
|
117
98
|
return tmp;
|
118
99
|
};
|
119
|
-
|
120
100
|
var formatEmail = function formatEmail(val) {
|
121
101
|
return val.replace(/\W/g, '');
|
122
102
|
};
|
123
|
-
|
124
103
|
var pureEmail = function pureEmail(val) {
|
125
104
|
return val;
|
126
105
|
};
|
127
106
|
/**
|
128
107
|
* 输入规则
|
129
108
|
*/
|
130
|
-
|
131
|
-
|
132
109
|
var format = function format(val, type) {
|
133
110
|
switch (type) {
|
134
111
|
case 'id':
|
135
112
|
return formatId(val);
|
136
|
-
|
137
113
|
case 'tel':
|
138
114
|
return formatTel(val);
|
139
|
-
|
140
115
|
case 'card':
|
141
116
|
return formatCard(val);
|
142
|
-
|
143
117
|
case 'email':
|
144
118
|
return formatEmail(val);
|
145
|
-
|
146
119
|
case 'amount':
|
147
120
|
return formatAmount(val);
|
148
|
-
|
149
121
|
default:
|
150
122
|
return val;
|
151
123
|
}
|
@@ -153,30 +125,22 @@ var format = function format(val, type) {
|
|
153
125
|
/**
|
154
126
|
* 净化规则
|
155
127
|
*/
|
156
|
-
|
157
|
-
|
158
128
|
var pure = function pure(val, type) {
|
159
129
|
switch (type) {
|
160
130
|
case 'id':
|
161
131
|
return pureId(val);
|
162
|
-
|
163
132
|
case 'tel':
|
164
133
|
return pureTel(val);
|
165
|
-
|
166
134
|
case 'card':
|
167
135
|
return pureCard(val);
|
168
|
-
|
169
136
|
case 'email':
|
170
137
|
return pureEmail(val);
|
171
|
-
|
172
138
|
case 'amount':
|
173
139
|
return pureAmount(val);
|
174
|
-
|
175
140
|
default:
|
176
141
|
return val;
|
177
142
|
}
|
178
143
|
};
|
179
|
-
|
180
144
|
exports.format = format;
|
181
145
|
exports.formatAmount = formatAmount;
|
182
146
|
exports.formatCard = formatCard;
|
package/lib/esm/Input.js
CHANGED
@@ -14,113 +14,101 @@ import { __DEV__ } from '@hi-ui/env';
|
|
14
14
|
import { useMergeRefs } from '@hi-ui/use-merge-refs';
|
15
15
|
import { CloseCircleFilled } from '@hi-ui/icons';
|
16
16
|
import { useInput } from './use-input.js';
|
17
|
-
|
18
17
|
var _prefix = getPrefixCls('input');
|
19
18
|
/**
|
20
19
|
* 输入框
|
21
20
|
*/
|
22
|
-
|
23
|
-
|
24
21
|
var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
|
25
22
|
var _a$prefixCls = _a.prefixCls,
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
23
|
+
prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
|
24
|
+
_a$role = _a.role,
|
25
|
+
role = _a$role === void 0 ? 'input' : _a$role,
|
26
|
+
className = _a.className,
|
27
|
+
style = _a.style,
|
28
|
+
_a$size = _a.size,
|
29
|
+
size = _a$size === void 0 ? 'md' : _a$size,
|
30
|
+
_a$appearance = _a.appearance,
|
31
|
+
appearance = _a$appearance === void 0 ? 'line' : _a$appearance,
|
32
|
+
prepend = _a.prepend,
|
33
|
+
append = _a.append,
|
34
|
+
prefix = _a.prefix,
|
35
|
+
suffix = _a.suffix,
|
36
|
+
_a$clearableTrigger = _a.clearableTrigger,
|
37
|
+
clearableTrigger = _a$clearableTrigger === void 0 ? 'hover' : _a$clearableTrigger,
|
38
|
+
_a$clearable = _a.clearable,
|
39
|
+
clearable = _a$clearable === void 0 ? false : _a$clearable,
|
40
|
+
_a$invalid = _a.invalid,
|
41
|
+
invalid = _a$invalid === void 0 ? false : _a$invalid,
|
42
|
+
name = _a.name,
|
43
|
+
autoFocus = _a.autoFocus,
|
44
|
+
disabled = _a.disabled,
|
45
|
+
readOnly = _a.readOnly,
|
46
|
+
maxLength = _a.maxLength,
|
47
|
+
placeholder = _a.placeholder,
|
48
|
+
defaultValue = _a.defaultValue,
|
49
|
+
valueProp = _a.value,
|
50
|
+
onChange = _a.onChange,
|
51
|
+
onFocus = _a.onFocus,
|
52
|
+
onBlur = _a.onBlur,
|
53
|
+
onKeyDown = _a.onKeyDown,
|
54
|
+
trimValueOnBlur = _a.trimValueOnBlur,
|
55
|
+
onClear = _a.onClear,
|
56
|
+
type = _a.type,
|
57
|
+
containerRef = _a.containerRef,
|
58
|
+
rest = __rest(_a, ["prefixCls", "role", "className", "style", "size", "appearance", "prepend", "append", "prefix", "suffix", "clearableTrigger", "clearable", "invalid", "name", "autoFocus", "disabled", "readOnly", "maxLength", "placeholder", "defaultValue", "value", "onChange", "onFocus", "onBlur", "onKeyDown", "trimValueOnBlur", "onClear", "type", "containerRef"]);
|
59
|
+
// @TODO: 临时方案,后面迁移至 InputGroup
|
64
60
|
var _useMemo = useMemo(function () {
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
unsetPrepend = _useMemo[0],
|
81
|
-
unsetAppend = _useMemo[1];
|
82
|
-
|
61
|
+
var shouldUnset = [false, false];
|
62
|
+
// @ts-ignore
|
63
|
+
// @ts-ignore
|
64
|
+
if ( /*#__PURE__*/isValidElement(prepend) && ['Select', 'Button'].includes(prepend.type.HiName)) {
|
65
|
+
shouldUnset[0] = true;
|
66
|
+
}
|
67
|
+
// @ts-ignore
|
68
|
+
// @ts-ignore
|
69
|
+
if ( /*#__PURE__*/isValidElement(append) && ['Select', 'Button'].includes(append.type.HiName)) {
|
70
|
+
shouldUnset[1] = true;
|
71
|
+
}
|
72
|
+
return shouldUnset;
|
73
|
+
}, [prepend, append]),
|
74
|
+
unsetPrepend = _useMemo[0],
|
75
|
+
unsetAppend = _useMemo[1];
|
83
76
|
var inputElementRef = useRef(null);
|
84
77
|
var proxyOnChange = useCallback(function (value, evt) {
|
85
78
|
if (!onChange) return;
|
86
79
|
onChangeMock(onChange, evt, inputElementRef.current, value);
|
87
80
|
}, [onChange]);
|
88
81
|
var clearElementRef = useRef(null);
|
89
|
-
|
90
82
|
var _useInput = useInput({
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
83
|
+
clearElementRef: clearElementRef,
|
84
|
+
inputElementRef: inputElementRef,
|
85
|
+
name: name,
|
86
|
+
autoFocus: autoFocus,
|
87
|
+
disabled: disabled,
|
88
|
+
readOnly: readOnly,
|
89
|
+
maxLength: maxLength,
|
90
|
+
placeholder: placeholder,
|
91
|
+
defaultValue: defaultValue,
|
92
|
+
value: valueProp,
|
93
|
+
onChange: proxyOnChange,
|
94
|
+
onFocus: onFocus,
|
95
|
+
onBlur: onBlur,
|
96
|
+
onKeyDown: onKeyDown,
|
97
|
+
trimValueOnBlur: trimValueOnBlur,
|
98
|
+
type: type
|
99
|
+
}),
|
100
|
+
tryChangeValue = _useInput.tryChangeValue,
|
101
|
+
focused = _useInput.focused,
|
102
|
+
value = _useInput.value,
|
103
|
+
getInputProps = _useInput.getInputProps;
|
113
104
|
var focus = useCallback(function () {
|
114
105
|
var _a;
|
115
|
-
|
116
106
|
(_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
117
107
|
}, []);
|
118
|
-
|
119
108
|
var _useState = useState(false),
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
109
|
+
hover = _useState[0],
|
110
|
+
setHover = _useState[1];
|
111
|
+
// 在开启 clearable 下展示 清除内容按钮,可点击进行内容清楚
|
124
112
|
var showClearableIcon = clearable && !!value && !disabled;
|
125
113
|
var mergedRef = useMergeRefs(ref, inputElementRef);
|
126
114
|
var cls = cx(prefixCls, className, prefixCls + "--size-" + size, prefixCls + "--appearance-" + appearance);
|
@@ -147,9 +135,9 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
147
135
|
}, prefix) : null, /*#__PURE__*/React.createElement("input", Object.assign({
|
148
136
|
ref: mergedRef,
|
149
137
|
className: prefixCls + "__text"
|
150
|
-
}, getInputProps(), rest)), suffix || showClearableIcon ? /*#__PURE__*/React.createElement("span", {
|
138
|
+
}, getInputProps(), rest)), suffix || showClearableIcon ? ( /*#__PURE__*/React.createElement("span", {
|
151
139
|
className: prefixCls + "__suffix"
|
152
|
-
}, showClearableIcon ? /*#__PURE__*/React.createElement("span", {
|
140
|
+
}, showClearableIcon ? ( /*#__PURE__*/React.createElement("span", {
|
153
141
|
ref: clearElementRef,
|
154
142
|
className: cx(prefixCls + "__clear", (clearableTrigger === 'always' || hover) && prefixCls + "__clear--active"),
|
155
143
|
role: "button",
|
@@ -159,11 +147,10 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
159
147
|
onClear === null || onClear === void 0 ? void 0 : onClear();
|
160
148
|
focus();
|
161
149
|
}
|
162
|
-
}, /*#__PURE__*/React.createElement(CloseCircleFilled, null)) : null, suffix) : null), append ? /*#__PURE__*/React.createElement("div", {
|
150
|
+
}, /*#__PURE__*/React.createElement(CloseCircleFilled, null))) : null, suffix)) : null), append ? /*#__PURE__*/React.createElement("div", {
|
163
151
|
className: prefixCls + "__append"
|
164
152
|
}, append) : null));
|
165
153
|
});
|
166
|
-
|
167
154
|
if (__DEV__) {
|
168
155
|
Input.displayName = 'Input';
|
169
156
|
}
|
@@ -176,11 +163,9 @@ if (__DEV__) {
|
|
176
163
|
* @param targetValue
|
177
164
|
* @returns
|
178
165
|
*/
|
179
|
-
|
180
|
-
|
181
166
|
function onChangeMock(onChange, evt, target, targetValue) {
|
182
|
-
var event = evt;
|
183
|
-
|
167
|
+
var event = evt;
|
168
|
+
// 点击 clearIcon 或者 失焦 trim 时,都会代理 onChange 的事件对象 target 指向 input.target
|
184
169
|
if (evt.type !== 'change') {
|
185
170
|
if (!target) return;
|
186
171
|
var originalTargetValue = target.value;
|
@@ -188,13 +173,11 @@ function onChangeMock(onChange, evt, target, targetValue) {
|
|
188
173
|
event.target = target;
|
189
174
|
event.currentTarget = target;
|
190
175
|
target.value = targetValue;
|
191
|
-
onChange(event, targetValue);
|
192
|
-
|
176
|
+
onChange(event, targetValue);
|
177
|
+
// 重置为之前值
|
193
178
|
target.value = originalTargetValue;
|
194
179
|
return;
|
195
180
|
}
|
196
|
-
|
197
181
|
onChange(event, targetValue);
|
198
182
|
}
|
199
|
-
|
200
183
|
export { Input, onChangeMock };
|