@hi-ui/input 4.0.6 → 4.0.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/CHANGELOG.md +7 -0
- package/lib/cjs/Input.js +4 -1
- package/lib/cjs/index.js +3 -0
- package/lib/cjs/use-input-cursor.js +104 -0
- package/lib/cjs/use-input.js +37 -5
- package/lib/esm/Input.js +4 -1
- package/lib/esm/index.js +1 -0
- package/lib/esm/use-input-cursor.js +97 -0
- package/lib/esm/use-input.js +37 -7
- package/lib/types/MockInput.d.ts +1 -1
- package/lib/types/index.d.ts +1 -0
- package/lib/types/use-input-cursor.d.ts +27 -0
- package/lib/types/use-input.d.ts +10 -1
- package/package.json +3 -3
- package/LICENSE +0 -21
package/CHANGELOG.md
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
# @hi-ui/input
|
2
|
+
|
3
|
+
## 4.0.7
|
4
|
+
|
5
|
+
### Patch Changes
|
6
|
+
|
7
|
+
- [#2440](https://github.com/XiaoMi/hiui/pull/2440) [`45f1ddd4d`](https://github.com/XiaoMi/hiui/commit/45f1ddd4de49c84f09b0074bcacdcb587a5d1535) Thanks [@zyprepare](https://github.com/zyprepare)! - fix: 输入框值格式化时光标跑到最后
|
package/lib/cjs/Input.js
CHANGED
@@ -82,11 +82,12 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
82
82
|
onChange = _a.onChange,
|
83
83
|
onFocus = _a.onFocus,
|
84
84
|
onBlur = _a.onBlur,
|
85
|
+
onKeyDown = _a.onKeyDown,
|
85
86
|
trimValueOnBlur = _a.trimValueOnBlur,
|
86
87
|
onClear = _a.onClear,
|
87
88
|
type = _a.type,
|
88
89
|
containerRef = _a.containerRef,
|
89
|
-
rest = tslib.__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", "trimValueOnBlur", "onClear", "type", "containerRef"]); // @TODO: 临时方案,后面迁移至 InputGroup
|
90
|
+
rest = tslib.__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"]); // @TODO: 临时方案,后面迁移至 InputGroup
|
90
91
|
|
91
92
|
|
92
93
|
var _useMemo = React.useMemo(function () {
|
@@ -117,6 +118,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
117
118
|
|
118
119
|
var _useInput = useInput.useInput({
|
119
120
|
clearElementRef: clearElementRef,
|
121
|
+
inputElementRef: inputElementRef,
|
120
122
|
name: name,
|
121
123
|
autoFocus: autoFocus,
|
122
124
|
disabled: disabled,
|
@@ -128,6 +130,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
128
130
|
onChange: proxyOnChange,
|
129
131
|
onFocus: onFocus,
|
130
132
|
onBlur: onBlur,
|
133
|
+
onKeyDown: onKeyDown,
|
131
134
|
trimValueOnBlur: trimValueOnBlur,
|
132
135
|
type: type
|
133
136
|
}),
|
package/lib/cjs/index.js
CHANGED
@@ -19,10 +19,13 @@ var Input = require('./Input.js');
|
|
19
19
|
|
20
20
|
var useInput = require('./use-input.js');
|
21
21
|
|
22
|
+
var useInputCursor = require('./use-input-cursor.js');
|
23
|
+
|
22
24
|
var MockInput = require('./MockInput.js');
|
23
25
|
|
24
26
|
exports.Input = Input.Input;
|
25
27
|
exports["default"] = Input.Input;
|
26
28
|
exports.onChangeMock = Input.onChangeMock;
|
27
29
|
exports.useInput = useInput.useInput;
|
30
|
+
exports.useInputCursor = useInputCursor.useInputCursor;
|
28
31
|
exports.MockInput = MockInput.MockInput;
|
@@ -0,0 +1,104 @@
|
|
1
|
+
/** @LICENSE
|
2
|
+
* @hi-ui/input
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/input#readme
|
4
|
+
*
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
6
|
+
*
|
7
|
+
* This source code is licensed under the MIT license found in the
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
9
|
+
*/
|
10
|
+
'use strict';
|
11
|
+
|
12
|
+
Object.defineProperty(exports, '__esModule', {
|
13
|
+
value: true
|
14
|
+
});
|
15
|
+
|
16
|
+
var React = require('react');
|
17
|
+
|
18
|
+
var defaultSeparator = ' ';
|
19
|
+
|
20
|
+
var useInputCursor = function useInputCursor(_ref) {
|
21
|
+
var inputElementRef = _ref.inputElementRef,
|
22
|
+
value = _ref.value,
|
23
|
+
formatter = _ref.formatter,
|
24
|
+
_ref$separator = _ref.separator,
|
25
|
+
separator = _ref$separator === void 0 ? defaultSeparator : _ref$separator;
|
26
|
+
|
27
|
+
var _useState = React.useState(0),
|
28
|
+
position = _useState[0],
|
29
|
+
setPosition = _useState[1];
|
30
|
+
|
31
|
+
var startPositionRef = React.useRef(0); // 记录值变化前的位置
|
32
|
+
|
33
|
+
var handleOnKeyDown = React.useCallback(function () {
|
34
|
+
var _a, _b;
|
35
|
+
|
36
|
+
startPositionRef.current = (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0;
|
37
|
+
}, [inputElementRef]);
|
38
|
+
var handleChange = React.useCallback(function (evt) {
|
39
|
+
var _a, _b;
|
40
|
+
|
41
|
+
var val = evt.target.value; // 处理后的字符串
|
42
|
+
|
43
|
+
var str = typeof formatter === 'function' ? formatter(val) : val; // 光标变化后的位置
|
44
|
+
|
45
|
+
var endPosition = (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0; // 字符串添加
|
46
|
+
|
47
|
+
if (str.length > value.length) {
|
48
|
+
// 值变化的长度
|
49
|
+
var len = str.length - value.length; // 取出变化的值
|
50
|
+
|
51
|
+
var addStr = str.substring(startPositionRef.current, startPositionRef.current + len); // 光标应该移动的格数
|
52
|
+
|
53
|
+
var step = getSeparatorNum(addStr, separator);
|
54
|
+
setPosition(endPosition + step);
|
55
|
+
} // 字符串删除
|
56
|
+
|
57
|
+
|
58
|
+
if (str.length < value.length) {
|
59
|
+
if (str.charAt(endPosition - 1) === separator) {
|
60
|
+
setPosition(endPosition - 1);
|
61
|
+
} else {
|
62
|
+
setPosition(endPosition);
|
63
|
+
}
|
64
|
+
} // 没有变化
|
65
|
+
|
66
|
+
|
67
|
+
if (str.length === value.length) {
|
68
|
+
if (str.charAt(startPositionRef.current) === separator) {
|
69
|
+
setPosition(endPosition + 1);
|
70
|
+
} else {
|
71
|
+
setPosition(endPosition);
|
72
|
+
}
|
73
|
+
}
|
74
|
+
}, [formatter, inputElementRef, separator, value.length]);
|
75
|
+
return {
|
76
|
+
position: position,
|
77
|
+
handleChange: handleChange,
|
78
|
+
handleOnKeyDown: handleOnKeyDown
|
79
|
+
};
|
80
|
+
};
|
81
|
+
/**
|
82
|
+
* 获取字符串中有多少格式化字符
|
83
|
+
* @param str
|
84
|
+
* @returns
|
85
|
+
*/
|
86
|
+
|
87
|
+
|
88
|
+
var getSeparatorNum = function getSeparatorNum(str, separator) {
|
89
|
+
if (separator === void 0) {
|
90
|
+
separator = defaultSeparator;
|
91
|
+
}
|
92
|
+
|
93
|
+
var index = str.indexOf(separator);
|
94
|
+
var num = 0;
|
95
|
+
|
96
|
+
while (index !== -1) {
|
97
|
+
index = str.indexOf(separator, index + 1);
|
98
|
+
num++;
|
99
|
+
}
|
100
|
+
|
101
|
+
return num;
|
102
|
+
};
|
103
|
+
|
104
|
+
exports.useInputCursor = useInputCursor;
|
package/lib/cjs/use-input.js
CHANGED
@@ -21,9 +21,15 @@ var useLatest = require('@hi-ui/use-latest');
|
|
21
21
|
|
22
22
|
var domUtils = require('@hi-ui/dom-utils');
|
23
23
|
|
24
|
+
var funcUtils = require('@hi-ui/func-utils');
|
25
|
+
|
24
26
|
var index = require('./utils/index.js');
|
25
27
|
|
26
|
-
var
|
28
|
+
var useInputCursor = require('./use-input-cursor.js');
|
29
|
+
|
30
|
+
var EXTRA_TYPE = ['text', 'id', 'tel', 'card', 'amount', 'email']; // 需要格式化后校对光标的类型
|
31
|
+
|
32
|
+
var RESET_CURSOR_TYPE = ['id', 'tel', 'card'];
|
27
33
|
|
28
34
|
var useInput = function useInput(_ref) {
|
29
35
|
var name = _ref.name,
|
@@ -41,16 +47,33 @@ var useInput = function useInput(_ref) {
|
|
41
47
|
onChange = _ref.onChange,
|
42
48
|
onFocus = _ref.onFocus,
|
43
49
|
onBlur = _ref.onBlur,
|
50
|
+
onKeyDown = _ref.onKeyDown,
|
44
51
|
_ref$trimValueOnBlur = _ref.trimValueOnBlur,
|
45
52
|
trimValueOnBlur = _ref$trimValueOnBlur === void 0 ? false : _ref$trimValueOnBlur,
|
46
53
|
_ref$type = _ref.type,
|
47
54
|
type = _ref$type === void 0 ? 'text' : _ref$type,
|
48
|
-
clearElementRef = _ref.clearElementRef
|
55
|
+
clearElementRef = _ref.clearElementRef,
|
56
|
+
inputElementRef = _ref.inputElementRef; // Object.is 避免 trimValueOnBlur 和 点击 clearIcon 触发 2 次相同的 onCHange
|
49
57
|
|
50
58
|
var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange, Object.is),
|
51
59
|
value = _useUncontrolledState[0],
|
52
60
|
tryChangeValue = _useUncontrolledState[1];
|
53
61
|
|
62
|
+
var _useInputCursor = useInputCursor.useInputCursor({
|
63
|
+
inputElementRef: inputElementRef,
|
64
|
+
value: index.format(value, type)
|
65
|
+
}),
|
66
|
+
formatHandleChange = _useInputCursor.handleChange,
|
67
|
+
handleOnKeyDown = _useInputCursor.handleOnKeyDown,
|
68
|
+
position = _useInputCursor.position;
|
69
|
+
/**
|
70
|
+
* 修复值格式化时光标位置问题:https://github.com/XiaoMi/hiui/issues/2438
|
71
|
+
*/
|
72
|
+
|
73
|
+
|
74
|
+
var needResetCursorPosition = React.useMemo(function () {
|
75
|
+
return RESET_CURSOR_TYPE.includes(type);
|
76
|
+
}, [type]);
|
54
77
|
var handleChange = React.useCallback(function (evt, trim) {
|
55
78
|
if (trim === void 0) {
|
56
79
|
trim = false;
|
@@ -72,7 +95,8 @@ var useInput = function useInput(_ref) {
|
|
72
95
|
value: value
|
73
96
|
});
|
74
97
|
tryChangeValue(valueTrue, event);
|
75
|
-
|
98
|
+
needResetCursorPosition && formatHandleChange(event);
|
99
|
+
}, [formatHandleChange, needResetCursorPosition, tryChangeValue, type]);
|
76
100
|
|
77
101
|
var _useState = React.useState(autoFocus),
|
78
102
|
focused = _useState[0],
|
@@ -118,9 +142,17 @@ var useInput = function useInput(_ref) {
|
|
118
142
|
type: nativeType,
|
119
143
|
onChange: handleChange,
|
120
144
|
onFocus: handleFocus,
|
121
|
-
onBlur: handleBlur
|
145
|
+
onBlur: handleBlur,
|
146
|
+
onKeyDown: needResetCursorPosition ? funcUtils.callAllFuncs(handleOnKeyDown, onKeyDown) : onKeyDown
|
122
147
|
});
|
123
|
-
}, [
|
148
|
+
}, [type, nativeInputProps, value, handleChange, handleFocus, handleBlur, needResetCursorPosition, handleOnKeyDown, onKeyDown]);
|
149
|
+
React.useEffect(function () {
|
150
|
+
// 满足以下条件时需要校对光标位置
|
151
|
+
if (needResetCursorPosition && inputElementRef.current) {
|
152
|
+
inputElementRef.current.selectionStart = position;
|
153
|
+
inputElementRef.current.selectionEnd = position;
|
154
|
+
}
|
155
|
+
}, [inputElementRef, needResetCursorPosition, position, type]);
|
124
156
|
return {
|
125
157
|
focused: focused,
|
126
158
|
value: value,
|
package/lib/esm/Input.js
CHANGED
@@ -60,11 +60,12 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
60
60
|
onChange = _a.onChange,
|
61
61
|
onFocus = _a.onFocus,
|
62
62
|
onBlur = _a.onBlur,
|
63
|
+
onKeyDown = _a.onKeyDown,
|
63
64
|
trimValueOnBlur = _a.trimValueOnBlur,
|
64
65
|
onClear = _a.onClear,
|
65
66
|
type = _a.type,
|
66
67
|
containerRef = _a.containerRef,
|
67
|
-
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", "trimValueOnBlur", "onClear", "type", "containerRef"]); // @TODO: 临时方案,后面迁移至 InputGroup
|
68
|
+
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"]); // @TODO: 临时方案,后面迁移至 InputGroup
|
68
69
|
|
69
70
|
|
70
71
|
var _useMemo = useMemo(function () {
|
@@ -95,6 +96,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
95
96
|
|
96
97
|
var _useInput = useInput({
|
97
98
|
clearElementRef: clearElementRef,
|
99
|
+
inputElementRef: inputElementRef,
|
98
100
|
name: name,
|
99
101
|
autoFocus: autoFocus,
|
100
102
|
disabled: disabled,
|
@@ -106,6 +108,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
106
108
|
onChange: proxyOnChange,
|
107
109
|
onFocus: onFocus,
|
108
110
|
onBlur: onBlur,
|
111
|
+
onKeyDown: onKeyDown,
|
109
112
|
trimValueOnBlur: trimValueOnBlur,
|
110
113
|
type: type
|
111
114
|
}),
|
package/lib/esm/index.js
CHANGED
@@ -0,0 +1,97 @@
|
|
1
|
+
/** @LICENSE
|
2
|
+
* @hi-ui/input
|
3
|
+
* https://github.com/XiaoMi/hiui/tree/master/packages/ui/input#readme
|
4
|
+
*
|
5
|
+
* Copyright (c) HiUI <mi-hiui@xiaomi.com>.
|
6
|
+
*
|
7
|
+
* This source code is licensed under the MIT license found in the
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
9
|
+
*/
|
10
|
+
import { useState, useRef, useCallback } from 'react';
|
11
|
+
var defaultSeparator = ' ';
|
12
|
+
|
13
|
+
var useInputCursor = function useInputCursor(_ref) {
|
14
|
+
var inputElementRef = _ref.inputElementRef,
|
15
|
+
value = _ref.value,
|
16
|
+
formatter = _ref.formatter,
|
17
|
+
_ref$separator = _ref.separator,
|
18
|
+
separator = _ref$separator === void 0 ? defaultSeparator : _ref$separator;
|
19
|
+
|
20
|
+
var _useState = useState(0),
|
21
|
+
position = _useState[0],
|
22
|
+
setPosition = _useState[1];
|
23
|
+
|
24
|
+
var startPositionRef = useRef(0); // 记录值变化前的位置
|
25
|
+
|
26
|
+
var handleOnKeyDown = useCallback(function () {
|
27
|
+
var _a, _b;
|
28
|
+
|
29
|
+
startPositionRef.current = (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0;
|
30
|
+
}, [inputElementRef]);
|
31
|
+
var handleChange = useCallback(function (evt) {
|
32
|
+
var _a, _b;
|
33
|
+
|
34
|
+
var val = evt.target.value; // 处理后的字符串
|
35
|
+
|
36
|
+
var str = typeof formatter === 'function' ? formatter(val) : val; // 光标变化后的位置
|
37
|
+
|
38
|
+
var endPosition = (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0; // 字符串添加
|
39
|
+
|
40
|
+
if (str.length > value.length) {
|
41
|
+
// 值变化的长度
|
42
|
+
var len = str.length - value.length; // 取出变化的值
|
43
|
+
|
44
|
+
var addStr = str.substring(startPositionRef.current, startPositionRef.current + len); // 光标应该移动的格数
|
45
|
+
|
46
|
+
var step = getSeparatorNum(addStr, separator);
|
47
|
+
setPosition(endPosition + step);
|
48
|
+
} // 字符串删除
|
49
|
+
|
50
|
+
|
51
|
+
if (str.length < value.length) {
|
52
|
+
if (str.charAt(endPosition - 1) === separator) {
|
53
|
+
setPosition(endPosition - 1);
|
54
|
+
} else {
|
55
|
+
setPosition(endPosition);
|
56
|
+
}
|
57
|
+
} // 没有变化
|
58
|
+
|
59
|
+
|
60
|
+
if (str.length === value.length) {
|
61
|
+
if (str.charAt(startPositionRef.current) === separator) {
|
62
|
+
setPosition(endPosition + 1);
|
63
|
+
} else {
|
64
|
+
setPosition(endPosition);
|
65
|
+
}
|
66
|
+
}
|
67
|
+
}, [formatter, inputElementRef, separator, value.length]);
|
68
|
+
return {
|
69
|
+
position: position,
|
70
|
+
handleChange: handleChange,
|
71
|
+
handleOnKeyDown: handleOnKeyDown
|
72
|
+
};
|
73
|
+
};
|
74
|
+
/**
|
75
|
+
* 获取字符串中有多少格式化字符
|
76
|
+
* @param str
|
77
|
+
* @returns
|
78
|
+
*/
|
79
|
+
|
80
|
+
|
81
|
+
var getSeparatorNum = function getSeparatorNum(str, separator) {
|
82
|
+
if (separator === void 0) {
|
83
|
+
separator = defaultSeparator;
|
84
|
+
}
|
85
|
+
|
86
|
+
var index = str.indexOf(separator);
|
87
|
+
var num = 0;
|
88
|
+
|
89
|
+
while (index !== -1) {
|
90
|
+
index = str.indexOf(separator, index + 1);
|
91
|
+
num++;
|
92
|
+
}
|
93
|
+
|
94
|
+
return num;
|
95
|
+
};
|
96
|
+
|
97
|
+
export { useInputCursor };
|
package/lib/esm/use-input.js
CHANGED
@@ -7,12 +7,16 @@
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
9
9
|
*/
|
10
|
-
import { useCallback, useState,
|
10
|
+
import { useMemo, useCallback, useState, useEffect } from 'react';
|
11
11
|
import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
|
12
12
|
import { useLatestCallback } from '@hi-ui/use-latest';
|
13
13
|
import { setAttrStatus } from '@hi-ui/dom-utils';
|
14
|
-
import {
|
15
|
-
|
14
|
+
import { callAllFuncs } from '@hi-ui/func-utils';
|
15
|
+
import { format, pure, formatAmount } from './utils/index.js';
|
16
|
+
import { useInputCursor } from './use-input-cursor.js';
|
17
|
+
var EXTRA_TYPE = ['text', 'id', 'tel', 'card', 'amount', 'email']; // 需要格式化后校对光标的类型
|
18
|
+
|
19
|
+
var RESET_CURSOR_TYPE = ['id', 'tel', 'card'];
|
16
20
|
|
17
21
|
var useInput = function useInput(_ref) {
|
18
22
|
var name = _ref.name,
|
@@ -30,16 +34,33 @@ var useInput = function useInput(_ref) {
|
|
30
34
|
onChange = _ref.onChange,
|
31
35
|
onFocus = _ref.onFocus,
|
32
36
|
onBlur = _ref.onBlur,
|
37
|
+
onKeyDown = _ref.onKeyDown,
|
33
38
|
_ref$trimValueOnBlur = _ref.trimValueOnBlur,
|
34
39
|
trimValueOnBlur = _ref$trimValueOnBlur === void 0 ? false : _ref$trimValueOnBlur,
|
35
40
|
_ref$type = _ref.type,
|
36
41
|
type = _ref$type === void 0 ? 'text' : _ref$type,
|
37
|
-
clearElementRef = _ref.clearElementRef
|
42
|
+
clearElementRef = _ref.clearElementRef,
|
43
|
+
inputElementRef = _ref.inputElementRef; // Object.is 避免 trimValueOnBlur 和 点击 clearIcon 触发 2 次相同的 onCHange
|
38
44
|
|
39
45
|
var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange, Object.is),
|
40
46
|
value = _useUncontrolledState[0],
|
41
47
|
tryChangeValue = _useUncontrolledState[1];
|
42
48
|
|
49
|
+
var _useInputCursor = useInputCursor({
|
50
|
+
inputElementRef: inputElementRef,
|
51
|
+
value: format(value, type)
|
52
|
+
}),
|
53
|
+
formatHandleChange = _useInputCursor.handleChange,
|
54
|
+
handleOnKeyDown = _useInputCursor.handleOnKeyDown,
|
55
|
+
position = _useInputCursor.position;
|
56
|
+
/**
|
57
|
+
* 修复值格式化时光标位置问题:https://github.com/XiaoMi/hiui/issues/2438
|
58
|
+
*/
|
59
|
+
|
60
|
+
|
61
|
+
var needResetCursorPosition = useMemo(function () {
|
62
|
+
return RESET_CURSOR_TYPE.includes(type);
|
63
|
+
}, [type]);
|
43
64
|
var handleChange = useCallback(function (evt, trim) {
|
44
65
|
if (trim === void 0) {
|
45
66
|
trim = false;
|
@@ -61,7 +82,8 @@ var useInput = function useInput(_ref) {
|
|
61
82
|
value: value
|
62
83
|
});
|
63
84
|
tryChangeValue(valueTrue, event);
|
64
|
-
|
85
|
+
needResetCursorPosition && formatHandleChange(event);
|
86
|
+
}, [formatHandleChange, needResetCursorPosition, tryChangeValue, type]);
|
65
87
|
|
66
88
|
var _useState = useState(autoFocus),
|
67
89
|
focused = _useState[0],
|
@@ -107,9 +129,17 @@ var useInput = function useInput(_ref) {
|
|
107
129
|
type: nativeType,
|
108
130
|
onChange: handleChange,
|
109
131
|
onFocus: handleFocus,
|
110
|
-
onBlur: handleBlur
|
132
|
+
onBlur: handleBlur,
|
133
|
+
onKeyDown: needResetCursorPosition ? callAllFuncs(handleOnKeyDown, onKeyDown) : onKeyDown
|
111
134
|
});
|
112
|
-
}, [
|
135
|
+
}, [type, nativeInputProps, value, handleChange, handleFocus, handleBlur, needResetCursorPosition, handleOnKeyDown, onKeyDown]);
|
136
|
+
useEffect(function () {
|
137
|
+
// 满足以下条件时需要校对光标位置
|
138
|
+
if (needResetCursorPosition && inputElementRef.current) {
|
139
|
+
inputElementRef.current.selectionStart = position;
|
140
|
+
inputElementRef.current.selectionEnd = position;
|
141
|
+
}
|
142
|
+
}, [inputElementRef, needResetCursorPosition, position, type]);
|
113
143
|
return {
|
114
144
|
focused: focused,
|
115
145
|
value: value,
|
package/lib/types/MockInput.d.ts
CHANGED
@@ -3,7 +3,7 @@ import type { HiBaseAppearanceEnum, HiBaseDataItem, HiBaseHTMLFieldProps } from
|
|
3
3
|
/**
|
4
4
|
* 支持自定义渲染输入框内容,暂时仅供内部 Picker 类组件使用,不对外提供
|
5
5
|
*/
|
6
|
-
export declare const MockInput: React.ForwardRefExoticComponent<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "
|
6
|
+
export declare const MockInput: React.ForwardRefExoticComponent<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "disabled" | "readOnly" | "placeholder" | "defaultValue" | "onChange" | "type" | "focused" | "onSelect" | "title" | "size" | "prefix" | "data" | "onClick" | "appearance" | "suffix" | "clearableTrigger" | "clearable" | "displayRender"> & {
|
7
7
|
prefixCls?: string | undefined;
|
8
8
|
role?: string | undefined;
|
9
9
|
} & {
|
package/lib/types/index.d.ts
CHANGED
@@ -0,0 +1,27 @@
|
|
1
|
+
import React, { MutableRefObject } from 'react';
|
2
|
+
export declare const useInputCursor: ({ inputElementRef, value, formatter, separator, }: UseInputCursorProps) => {
|
3
|
+
position: number;
|
4
|
+
handleChange: (evt: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
5
|
+
handleOnKeyDown: () => void;
|
6
|
+
};
|
7
|
+
export interface UseInputCursorProps {
|
8
|
+
/**
|
9
|
+
* 输入框 ref
|
10
|
+
*/
|
11
|
+
inputElementRef: MutableRefObject<HTMLInputElement | null>;
|
12
|
+
/**
|
13
|
+
* 输入框变化前的值
|
14
|
+
*/
|
15
|
+
value: string;
|
16
|
+
/**
|
17
|
+
* 格式化处理函数
|
18
|
+
* @param args
|
19
|
+
* @returns
|
20
|
+
*/
|
21
|
+
formatter?: (...args: any[]) => string;
|
22
|
+
/**
|
23
|
+
* 间隔符
|
24
|
+
*/
|
25
|
+
separator?: string;
|
26
|
+
}
|
27
|
+
export declare type useFormatReturn = ReturnType<typeof useInputCursor>;
|
package/lib/types/use-input.d.ts
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
export declare const useInput: ({ name, autoFocus, disabled, readOnly, maxLength, placeholder, defaultValue, value: valueProp, onChange, onFocus, onBlur, trimValueOnBlur, type, clearElementRef, }: UseInputProps) => {
|
2
|
+
export declare const useInput: ({ name, autoFocus, disabled, readOnly, maxLength, placeholder, defaultValue, value: valueProp, onChange, onFocus, onBlur, onKeyDown, trimValueOnBlur, type, clearElementRef, inputElementRef, }: UseInputProps) => {
|
3
3
|
focused: boolean;
|
4
4
|
value: string;
|
5
5
|
tryChangeValue: (stateOrFunction: React.SetStateAction<string>, ...args: any[]) => void;
|
@@ -9,6 +9,7 @@ export declare const useInput: ({ name, autoFocus, disabled, readOnly, maxLength
|
|
9
9
|
onChange: (evt: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, trim?: any) => void;
|
10
10
|
onFocus: (evt: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
11
11
|
onBlur: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
12
|
+
onKeyDown: ((evt: React.KeyboardEvent<any>) => void) | ((...args: any) => void) | undefined;
|
12
13
|
name: string | undefined;
|
13
14
|
disabled: boolean;
|
14
15
|
readOnly: boolean;
|
@@ -59,6 +60,10 @@ export interface UseInputProps {
|
|
59
60
|
* 值改变时的回调
|
60
61
|
*/
|
61
62
|
onChange?: (value: string, evt: React.ChangeEvent<any>) => void;
|
63
|
+
/**
|
64
|
+
* 输入框按下时的回调
|
65
|
+
*/
|
66
|
+
onKeyDown?: (evt: React.KeyboardEvent<any>) => void;
|
62
67
|
/**
|
63
68
|
* 输入框聚焦时的回调
|
64
69
|
*/
|
@@ -75,5 +80,9 @@ export interface UseInputProps {
|
|
75
80
|
* @private
|
76
81
|
*/
|
77
82
|
clearElementRef?: any;
|
83
|
+
/**
|
84
|
+
* 输入框 ref
|
85
|
+
*/
|
86
|
+
inputElementRef?: any;
|
78
87
|
}
|
79
88
|
export declare type useInputReturn = ReturnType<typeof useInput>;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@hi-ui/input",
|
3
|
-
"version": "4.0.
|
3
|
+
"version": "4.0.7",
|
4
4
|
"description": "A sub-package for @hi-ui/hiui.",
|
5
5
|
"keywords": [],
|
6
6
|
"author": "HiUI <mi-hiui@xiaomi.com>",
|
@@ -46,6 +46,7 @@
|
|
46
46
|
"@hi-ui/classname": "^4.0.1",
|
47
47
|
"@hi-ui/dom-utils": "^4.0.4",
|
48
48
|
"@hi-ui/env": "^4.0.1",
|
49
|
+
"@hi-ui/func-utils": "^4.0.1",
|
49
50
|
"@hi-ui/icons": "^4.0.4",
|
50
51
|
"@hi-ui/use-latest": "^4.0.1",
|
51
52
|
"@hi-ui/use-merge-refs": "^4.0.1",
|
@@ -62,6 +63,5 @@
|
|
62
63
|
"@hi-ui/hi-build": "^4.0.1",
|
63
64
|
"react": "^17.0.1",
|
64
65
|
"react-dom": "^17.0.1"
|
65
|
-
}
|
66
|
-
"gitHead": "d075180134a471227e6c344a5bbbb98d91904f9a"
|
66
|
+
}
|
67
67
|
}
|
package/LICENSE
DELETED
@@ -1,21 +0,0 @@
|
|
1
|
-
MIT License
|
2
|
-
|
3
|
-
Copyright (c) 2018 Xiaomi
|
4
|
-
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
7
|
-
in the Software without restriction, including without limitation the rights
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
10
|
-
furnished to do so, subject to the following conditions:
|
11
|
-
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
13
|
-
copies or substantial portions of the Software.
|
14
|
-
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21
|
-
SOFTWARE.
|