antd-mobile 5.41.0-alpha.1 → 5.41.0-alpha.2
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/2x/bundle/antd-mobile.cjs.development.js +1346 -1312
- package/2x/bundle/antd-mobile.cjs.js +7 -7
- package/2x/bundle/antd-mobile.es.development.js +285 -251
- package/2x/bundle/antd-mobile.es.js +3611 -3583
- package/2x/bundle/antd-mobile.umd.development.js +1346 -1312
- package/2x/bundle/antd-mobile.umd.js +7 -7
- package/2x/cjs/components/ellipsis/useMeasure.js +4 -3
- package/2x/cjs/components/input/input.d.ts +1 -1
- package/2x/cjs/components/input/input.js +1 -3
- package/2x/cjs/components/input/useInputHandleKeyDown.d.ts +1 -3
- package/2x/cjs/components/input/useInputHandleKeyDown.js +1 -12
- package/2x/cjs/components/number-keyboard/number-keyboard.js +21 -12
- package/2x/cjs/components/picker/index.d.ts +4 -2
- package/2x/cjs/components/text-area/text-area.d.ts +1 -1
- package/2x/cjs/components/text-area/text-area.js +6 -7
- package/2x/es/components/ellipsis/useMeasure.js +4 -3
- package/2x/es/components/input/input.d.ts +1 -1
- package/2x/es/components/input/input.js +1 -3
- package/2x/es/components/input/useInputHandleKeyDown.d.ts +1 -3
- package/2x/es/components/input/useInputHandleKeyDown.js +1 -12
- package/2x/es/components/number-keyboard/number-keyboard.js +21 -12
- package/2x/es/components/picker/index.d.ts +4 -2
- package/2x/es/components/text-area/text-area.d.ts +1 -1
- package/2x/es/components/text-area/text-area.js +6 -7
- package/2x/package.json +1 -1
- package/bundle/antd-mobile.cjs.development.js +1346 -1312
- package/bundle/antd-mobile.cjs.js +7 -7
- package/bundle/antd-mobile.compatible.umd.js +1 -1
- package/bundle/antd-mobile.es.development.js +285 -251
- package/bundle/antd-mobile.es.js +3611 -3583
- package/bundle/antd-mobile.umd.development.js +1346 -1312
- package/bundle/antd-mobile.umd.js +7 -7
- package/cjs/components/ellipsis/useMeasure.js +4 -3
- package/cjs/components/input/input.d.ts +1 -1
- package/cjs/components/input/input.js +1 -3
- package/cjs/components/input/useInputHandleKeyDown.d.ts +1 -3
- package/cjs/components/input/useInputHandleKeyDown.js +1 -12
- package/cjs/components/number-keyboard/number-keyboard.js +21 -12
- package/cjs/components/picker/index.d.ts +4 -2
- package/cjs/components/text-area/text-area.d.ts +1 -1
- package/cjs/components/text-area/text-area.js +6 -7
- package/es/components/ellipsis/useMeasure.js +4 -3
- package/es/components/input/input.d.ts +1 -1
- package/es/components/input/input.js +1 -3
- package/es/components/input/useInputHandleKeyDown.d.ts +1 -3
- package/es/components/input/useInputHandleKeyDown.js +1 -12
- package/es/components/number-keyboard/number-keyboard.js +21 -12
- package/es/components/picker/index.d.ts +4 -2
- package/es/components/text-area/text-area.d.ts +1 -1
- package/es/components/text-area/text-area.js +6 -7
- package/package.json +1 -1
- package/umd/antd-mobile.js +1 -1
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = useMeasure;
|
|
7
7
|
var _rcUtil = require("rc-util");
|
|
8
|
+
var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
|
|
8
9
|
var _react = _interopRequireDefault(require("react"));
|
|
9
10
|
var _reactDom = require("react-dom");
|
|
10
11
|
var _runes = _interopRequireDefault(require("runes2"));
|
|
@@ -34,11 +35,11 @@ function useMeasure(containerRef, content, rows, direction, expanded, expandNode
|
|
|
34
35
|
});
|
|
35
36
|
});
|
|
36
37
|
// Initialize
|
|
37
|
-
|
|
38
|
+
(0, _useLayoutEffect.default)(() => {
|
|
38
39
|
startMeasure();
|
|
39
40
|
}, [contentChars, rows]);
|
|
40
41
|
// Measure element height
|
|
41
|
-
|
|
42
|
+
(0, _useLayoutEffect.default)(() => {
|
|
42
43
|
var _a, _b;
|
|
43
44
|
if (status === 1 /* PREPARE */) {
|
|
44
45
|
const fullMeasureHeight = ((_a = fullMeasureRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
|
|
@@ -53,7 +54,7 @@ function useMeasure(containerRef, content, rows, direction, expanded, expandNode
|
|
|
53
54
|
}
|
|
54
55
|
}, [status]);
|
|
55
56
|
// Walking measure
|
|
56
|
-
|
|
57
|
+
(0, _useLayoutEffect.default)(() => {
|
|
57
58
|
var _a;
|
|
58
59
|
if (status === 2 /* MEASURE_WALKING */) {
|
|
59
60
|
const diff = walkingIndexes[1] - walkingIndexes[0];
|
|
@@ -22,7 +22,7 @@ export declare type InputRef = {
|
|
|
22
22
|
blur: () => void;
|
|
23
23
|
nativeElement: HTMLInputElement | null;
|
|
24
24
|
};
|
|
25
|
-
export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "id" | "onClick" | "disabled" | "onPaste" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "type" | "step" | "
|
|
25
|
+
export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "id" | "onClick" | "disabled" | "onPaste" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "type" | "step" | "autoCapitalize" | "autoFocus" | "enterKeyHint" | "autoCorrect" | "inputMode" | "placeholder" | "name" | "readOnly" | "autoComplete" | "maxLength" | "minLength"> & {
|
|
26
26
|
value?: string | undefined;
|
|
27
27
|
defaultValue?: string | undefined;
|
|
28
28
|
onChange?: ((val: string) => void) | undefined;
|
|
@@ -35,9 +35,7 @@ const Input = (0, _react.forwardRef)((props, ref) => {
|
|
|
35
35
|
const nativeInputRef = (0, _react.useRef)(null);
|
|
36
36
|
const handleKeydown = (0, _useInputHandleKeyDown.default)({
|
|
37
37
|
onEnterPress: mergedProps.onEnterPress,
|
|
38
|
-
onKeyDown: mergedProps.onKeyDown
|
|
39
|
-
nativeInputRef,
|
|
40
|
-
enterKeyHint: mergedProps.enterKeyHint
|
|
38
|
+
onKeyDown: mergedProps.onKeyDown
|
|
41
39
|
});
|
|
42
40
|
(0, _react.useImperativeHandle)(ref, () => ({
|
|
43
41
|
clear: () => {
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
interface InputHandleKeyDownType<T> {
|
|
2
2
|
onEnterPress?: (e: React.KeyboardEvent<T>) => void;
|
|
3
3
|
onKeyDown?: (e: React.KeyboardEvent<T>) => void;
|
|
4
|
-
enterKeyHint?: React.InputHTMLAttributes<HTMLInputElement>['enterKeyHint'];
|
|
5
|
-
nativeInputRef: React.RefObject<T>;
|
|
6
4
|
}
|
|
7
|
-
export default function useInputHandleKeyDown<T extends HTMLInputElement | HTMLTextAreaElement>({ onEnterPress, onKeyDown
|
|
5
|
+
export default function useInputHandleKeyDown<T extends HTMLInputElement | HTMLTextAreaElement>({ onEnterPress, onKeyDown }: InputHandleKeyDownType<T>): (e: React.KeyboardEvent<T>) => void;
|
|
8
6
|
export {};
|
|
@@ -4,12 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = useInputHandleKeyDown;
|
|
7
|
-
var _ahooks = require("ahooks");
|
|
8
7
|
function useInputHandleKeyDown({
|
|
9
8
|
onEnterPress,
|
|
10
|
-
onKeyDown
|
|
11
|
-
nativeInputRef,
|
|
12
|
-
enterKeyHint
|
|
9
|
+
onKeyDown
|
|
13
10
|
}) {
|
|
14
11
|
const handleKeydown = e => {
|
|
15
12
|
if (onEnterPress && (e.code === 'Enter' || e.keyCode === 13)) {
|
|
@@ -17,13 +14,5 @@ function useInputHandleKeyDown({
|
|
|
17
14
|
}
|
|
18
15
|
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
|
|
19
16
|
};
|
|
20
|
-
(0, _ahooks.useIsomorphicLayoutEffect)(() => {
|
|
21
|
-
const ele = nativeInputRef.current;
|
|
22
|
-
if (!enterKeyHint || !ele) return;
|
|
23
|
-
ele.setAttribute('enterkeyhint', enterKeyHint);
|
|
24
|
-
return () => {
|
|
25
|
-
ele.removeAttribute('enterkeyhint');
|
|
26
|
-
};
|
|
27
|
-
}, [enterKeyHint]);
|
|
28
17
|
return handleKeydown;
|
|
29
18
|
}
|
|
@@ -117,6 +117,7 @@ const NumberKeyboard = p => {
|
|
|
117
117
|
};
|
|
118
118
|
const renderKey = (key, index) => {
|
|
119
119
|
const isNumberKey = /^\d$/.test(key);
|
|
120
|
+
const isBackspace = key === 'BACKSPACE';
|
|
120
121
|
const className = (0, _classnames.default)(`${classPrefix}-key`, {
|
|
121
122
|
[`${classPrefix}-key-number`]: isNumberKey,
|
|
122
123
|
[`${classPrefix}-key-sign`]: !isNumberKey && key,
|
|
@@ -124,25 +125,29 @@ const NumberKeyboard = p => {
|
|
|
124
125
|
});
|
|
125
126
|
const ariaProps = key ? {
|
|
126
127
|
role: 'button',
|
|
127
|
-
title: key,
|
|
128
|
+
title: isBackspace ? locale.Input.clear : key,
|
|
128
129
|
tabIndex: -1
|
|
129
130
|
} : undefined;
|
|
130
131
|
return _react.default.createElement("div", Object.assign({
|
|
131
132
|
key: key,
|
|
132
133
|
className: className,
|
|
133
|
-
|
|
134
|
+
// 仅为 backspace 绑定,支持长按快速删除
|
|
135
|
+
onTouchStart: isBackspace ? () => {
|
|
136
|
+
stopContinueClear();
|
|
137
|
+
startContinueClear();
|
|
138
|
+
} : undefined,
|
|
139
|
+
onTouchEnd: isBackspace ? e => {
|
|
140
|
+
stopContinueClear();
|
|
141
|
+
onKeyPress(e, key);
|
|
142
|
+
} : undefined,
|
|
143
|
+
// <div role="button" title="1" onTouchEnd={e => {}}>1</div> 安卓上 talback 可读不可点
|
|
144
|
+
// see https://ua-gilded-eef7f9.netlify.app/grid-button-bug.html
|
|
145
|
+
// 所以还是绑定 click,通过 touchEnd 的 preventDefault 防重复触发
|
|
146
|
+
onClick: e => {
|
|
134
147
|
stopContinueClear();
|
|
135
|
-
if (key === 'BACKSPACE') {
|
|
136
|
-
startContinueClear();
|
|
137
|
-
}
|
|
138
|
-
},
|
|
139
|
-
onTouchEnd: e => {
|
|
140
148
|
onKeyPress(e, key);
|
|
141
|
-
if (key === 'BACKSPACE') {
|
|
142
|
-
stopContinueClear();
|
|
143
|
-
}
|
|
144
149
|
}
|
|
145
|
-
}, ariaProps),
|
|
150
|
+
}, ariaProps), isBackspace ? _react.default.createElement(_antdMobileIcons.TextDeletionOutline, null) : key);
|
|
146
151
|
};
|
|
147
152
|
return _react.default.createElement(_popup.default, {
|
|
148
153
|
visible: visible,
|
|
@@ -174,8 +179,12 @@ const NumberKeyboard = p => {
|
|
|
174
179
|
startContinueClear();
|
|
175
180
|
},
|
|
176
181
|
onTouchEnd: e => {
|
|
182
|
+
stopContinueClear();
|
|
177
183
|
onKeyPress(e, 'BACKSPACE');
|
|
184
|
+
},
|
|
185
|
+
onClick: e => {
|
|
178
186
|
stopContinueClear();
|
|
187
|
+
onKeyPress(e, 'BACKSPACE');
|
|
179
188
|
},
|
|
180
189
|
onContextMenu: e => {
|
|
181
190
|
// Long press should not trigger native context menu
|
|
@@ -186,7 +195,7 @@ const NumberKeyboard = p => {
|
|
|
186
195
|
tabIndex: -1
|
|
187
196
|
}, _react.default.createElement(_antdMobileIcons.TextDeletionOutline, null)), _react.default.createElement("div", {
|
|
188
197
|
className: `${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-ok`,
|
|
189
|
-
|
|
198
|
+
onClick: e => onKeyPress(e, 'OK'),
|
|
190
199
|
role: 'button',
|
|
191
200
|
tabIndex: -1,
|
|
192
201
|
"aria-label": confirmText
|
|
@@ -2,7 +2,7 @@ import './picker.less';
|
|
|
2
2
|
import { prompt } from './prompt';
|
|
3
3
|
export type { PickerProps, PickerRef, PickerActions } from './picker';
|
|
4
4
|
export type { PickerValue, PickerColumnItem, PickerColumn, PickerValueExtend, } from '../picker-view';
|
|
5
|
-
declare const _default: import("react").NamedExoticComponent<{
|
|
5
|
+
declare const _default: import("react").NamedExoticComponent<Omit<{
|
|
6
6
|
columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
|
|
7
7
|
value?: import("../picker-view").PickerValue[] | undefined;
|
|
8
8
|
defaultValue?: import("../picker-view").PickerValue[] | undefined;
|
|
@@ -26,7 +26,9 @@ declare const _default: import("react").NamedExoticComponent<{
|
|
|
26
26
|
className?: string | undefined;
|
|
27
27
|
style?: (import("react").CSSProperties & Partial<Record<"--header-button-font-size" | "--title-font-size" | "--item-font-size" | "--item-height", string>>) | undefined;
|
|
28
28
|
tabIndex?: number | undefined;
|
|
29
|
-
} & import("react").AriaAttributes & import("react").RefAttributes<import("./picker").PickerActions
|
|
29
|
+
} & import("react").AriaAttributes & import("react").RefAttributes<import("./picker").PickerActions>, "ref"> & {
|
|
30
|
+
ref?: ((instance: import("./picker").PickerActions | null) => void) | import("react").RefObject<import("./picker").PickerActions> | null | undefined;
|
|
31
|
+
}> & {
|
|
30
32
|
readonly type: import("react").ForwardRefExoticComponent<{
|
|
31
33
|
columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
|
|
32
34
|
value?: import("../picker-view").PickerValue[] | undefined;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import type { ReactNode } from 'react';
|
|
2
|
+
import React from 'react';
|
|
3
3
|
import { NativeProps } from '../../utils/native-props';
|
|
4
4
|
export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'autoFocus' | 'disabled' | 'readOnly' | 'name' | 'onFocus' | 'onBlur' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick' | 'onKeyDown'> & {
|
|
5
5
|
onChange?: (val: string) => void;
|
|
@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.TextArea = void 0;
|
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
8
7
|
var _ahooks = require("ahooks");
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _runes = _interopRequireDefault(require("runes2"));
|
|
10
|
+
var _useInputHandleKeyDown = _interopRequireDefault(require("../../components/input/useInputHandleKeyDown"));
|
|
11
|
+
var _devLog = require("../../utils/dev-log");
|
|
10
12
|
var _nativeProps = require("../../utils/native-props");
|
|
11
13
|
var _usePropsValue = require("../../utils/use-props-value");
|
|
12
14
|
var _withDefaultProps = require("../../utils/with-default-props");
|
|
13
|
-
var _devLog = require("../../utils/dev-log");
|
|
14
|
-
var _useInputHandleKeyDown = _interopRequireDefault(require("../../components/input/useInputHandleKeyDown"));
|
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
16
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
17
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -42,9 +42,7 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
|
|
|
42
42
|
const hiddenTextAreaRef = (0, _react.useRef)(null);
|
|
43
43
|
const handleKeydown = (0, _useInputHandleKeyDown.default)({
|
|
44
44
|
onEnterPress: props.onEnterPress,
|
|
45
|
-
onKeyDown: props.onKeyDown
|
|
46
|
-
nativeInputRef: nativeTextAreaRef,
|
|
47
|
-
enterKeyHint: props.enterKeyHint
|
|
45
|
+
onKeyDown: props.onKeyDown
|
|
48
46
|
});
|
|
49
47
|
(0, _react.useImperativeHandle)(ref, () => ({
|
|
50
48
|
clear: () => {
|
|
@@ -140,7 +138,8 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
|
|
|
140
138
|
onFocus: props.onFocus,
|
|
141
139
|
onBlur: props.onBlur,
|
|
142
140
|
onClick: props.onClick,
|
|
143
|
-
onKeyDown: handleKeydown
|
|
141
|
+
onKeyDown: handleKeydown,
|
|
142
|
+
enterKeyHint: props.enterKeyHint
|
|
144
143
|
}), count, autoSize && _react.default.createElement("textarea", {
|
|
145
144
|
ref: hiddenTextAreaRef,
|
|
146
145
|
className: `${classPrefix}-element ${classPrefix}-element-hidden`,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useEvent } from 'rc-util';
|
|
2
|
+
import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
|
|
2
3
|
import React from 'react';
|
|
3
4
|
import { unstable_batchedUpdates } from 'react-dom';
|
|
4
5
|
import runes from 'runes2';
|
|
@@ -27,11 +28,11 @@ export default function useMeasure(containerRef, content, rows, direction, expan
|
|
|
27
28
|
});
|
|
28
29
|
});
|
|
29
30
|
// Initialize
|
|
30
|
-
|
|
31
|
+
useLayoutEffect(() => {
|
|
31
32
|
startMeasure();
|
|
32
33
|
}, [contentChars, rows]);
|
|
33
34
|
// Measure element height
|
|
34
|
-
|
|
35
|
+
useLayoutEffect(() => {
|
|
35
36
|
var _a, _b;
|
|
36
37
|
if (status === 1 /* PREPARE */) {
|
|
37
38
|
const fullMeasureHeight = ((_a = fullMeasureRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
|
|
@@ -46,7 +47,7 @@ export default function useMeasure(containerRef, content, rows, direction, expan
|
|
|
46
47
|
}
|
|
47
48
|
}, [status]);
|
|
48
49
|
// Walking measure
|
|
49
|
-
|
|
50
|
+
useLayoutEffect(() => {
|
|
50
51
|
var _a;
|
|
51
52
|
if (status === 2 /* MEASURE_WALKING */) {
|
|
52
53
|
const diff = walkingIndexes[1] - walkingIndexes[0];
|
|
@@ -22,7 +22,7 @@ export declare type InputRef = {
|
|
|
22
22
|
blur: () => void;
|
|
23
23
|
nativeElement: HTMLInputElement | null;
|
|
24
24
|
};
|
|
25
|
-
export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "id" | "onClick" | "disabled" | "onPaste" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "type" | "step" | "
|
|
25
|
+
export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "id" | "onClick" | "disabled" | "onPaste" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "type" | "step" | "autoCapitalize" | "autoFocus" | "enterKeyHint" | "autoCorrect" | "inputMode" | "placeholder" | "name" | "readOnly" | "autoComplete" | "maxLength" | "minLength"> & {
|
|
26
26
|
value?: string | undefined;
|
|
27
27
|
defaultValue?: string | undefined;
|
|
28
28
|
onChange?: ((val: string) => void) | undefined;
|
|
@@ -26,9 +26,7 @@ export const Input = forwardRef((props, ref) => {
|
|
|
26
26
|
const nativeInputRef = useRef(null);
|
|
27
27
|
const handleKeydown = useInputHandleKeyDown({
|
|
28
28
|
onEnterPress: mergedProps.onEnterPress,
|
|
29
|
-
onKeyDown: mergedProps.onKeyDown
|
|
30
|
-
nativeInputRef,
|
|
31
|
-
enterKeyHint: mergedProps.enterKeyHint
|
|
29
|
+
onKeyDown: mergedProps.onKeyDown
|
|
32
30
|
});
|
|
33
31
|
useImperativeHandle(ref, () => ({
|
|
34
32
|
clear: () => {
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
interface InputHandleKeyDownType<T> {
|
|
2
2
|
onEnterPress?: (e: React.KeyboardEvent<T>) => void;
|
|
3
3
|
onKeyDown?: (e: React.KeyboardEvent<T>) => void;
|
|
4
|
-
enterKeyHint?: React.InputHTMLAttributes<HTMLInputElement>['enterKeyHint'];
|
|
5
|
-
nativeInputRef: React.RefObject<T>;
|
|
6
4
|
}
|
|
7
|
-
export default function useInputHandleKeyDown<T extends HTMLInputElement | HTMLTextAreaElement>({ onEnterPress, onKeyDown
|
|
5
|
+
export default function useInputHandleKeyDown<T extends HTMLInputElement | HTMLTextAreaElement>({ onEnterPress, onKeyDown }: InputHandleKeyDownType<T>): (e: React.KeyboardEvent<T>) => void;
|
|
8
6
|
export {};
|
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
import { useIsomorphicLayoutEffect } from 'ahooks';
|
|
2
1
|
export default function useInputHandleKeyDown({
|
|
3
2
|
onEnterPress,
|
|
4
|
-
onKeyDown
|
|
5
|
-
nativeInputRef,
|
|
6
|
-
enterKeyHint
|
|
3
|
+
onKeyDown
|
|
7
4
|
}) {
|
|
8
5
|
const handleKeydown = e => {
|
|
9
6
|
if (onEnterPress && (e.code === 'Enter' || e.keyCode === 13)) {
|
|
@@ -11,13 +8,5 @@ export default function useInputHandleKeyDown({
|
|
|
11
8
|
}
|
|
12
9
|
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
|
|
13
10
|
};
|
|
14
|
-
useIsomorphicLayoutEffect(() => {
|
|
15
|
-
const ele = nativeInputRef.current;
|
|
16
|
-
if (!enterKeyHint || !ele) return;
|
|
17
|
-
ele.setAttribute('enterkeyhint', enterKeyHint);
|
|
18
|
-
return () => {
|
|
19
|
-
ele.removeAttribute('enterkeyhint');
|
|
20
|
-
};
|
|
21
|
-
}, [enterKeyHint]);
|
|
22
11
|
return handleKeydown;
|
|
23
12
|
}
|
|
@@ -108,6 +108,7 @@ export const NumberKeyboard = p => {
|
|
|
108
108
|
};
|
|
109
109
|
const renderKey = (key, index) => {
|
|
110
110
|
const isNumberKey = /^\d$/.test(key);
|
|
111
|
+
const isBackspace = key === 'BACKSPACE';
|
|
111
112
|
const className = classNames(`${classPrefix}-key`, {
|
|
112
113
|
[`${classPrefix}-key-number`]: isNumberKey,
|
|
113
114
|
[`${classPrefix}-key-sign`]: !isNumberKey && key,
|
|
@@ -115,25 +116,29 @@ export const NumberKeyboard = p => {
|
|
|
115
116
|
});
|
|
116
117
|
const ariaProps = key ? {
|
|
117
118
|
role: 'button',
|
|
118
|
-
title: key,
|
|
119
|
+
title: isBackspace ? locale.Input.clear : key,
|
|
119
120
|
tabIndex: -1
|
|
120
121
|
} : undefined;
|
|
121
122
|
return React.createElement("div", Object.assign({
|
|
122
123
|
key: key,
|
|
123
124
|
className: className,
|
|
124
|
-
|
|
125
|
+
// 仅为 backspace 绑定,支持长按快速删除
|
|
126
|
+
onTouchStart: isBackspace ? () => {
|
|
127
|
+
stopContinueClear();
|
|
128
|
+
startContinueClear();
|
|
129
|
+
} : undefined,
|
|
130
|
+
onTouchEnd: isBackspace ? e => {
|
|
131
|
+
stopContinueClear();
|
|
132
|
+
onKeyPress(e, key);
|
|
133
|
+
} : undefined,
|
|
134
|
+
// <div role="button" title="1" onTouchEnd={e => {}}>1</div> 安卓上 talback 可读不可点
|
|
135
|
+
// see https://ua-gilded-eef7f9.netlify.app/grid-button-bug.html
|
|
136
|
+
// 所以还是绑定 click,通过 touchEnd 的 preventDefault 防重复触发
|
|
137
|
+
onClick: e => {
|
|
125
138
|
stopContinueClear();
|
|
126
|
-
if (key === 'BACKSPACE') {
|
|
127
|
-
startContinueClear();
|
|
128
|
-
}
|
|
129
|
-
},
|
|
130
|
-
onTouchEnd: e => {
|
|
131
139
|
onKeyPress(e, key);
|
|
132
|
-
if (key === 'BACKSPACE') {
|
|
133
|
-
stopContinueClear();
|
|
134
|
-
}
|
|
135
140
|
}
|
|
136
|
-
}, ariaProps),
|
|
141
|
+
}, ariaProps), isBackspace ? React.createElement(TextDeletionOutline, null) : key);
|
|
137
142
|
};
|
|
138
143
|
return React.createElement(Popup, {
|
|
139
144
|
visible: visible,
|
|
@@ -165,8 +170,12 @@ export const NumberKeyboard = p => {
|
|
|
165
170
|
startContinueClear();
|
|
166
171
|
},
|
|
167
172
|
onTouchEnd: e => {
|
|
173
|
+
stopContinueClear();
|
|
168
174
|
onKeyPress(e, 'BACKSPACE');
|
|
175
|
+
},
|
|
176
|
+
onClick: e => {
|
|
169
177
|
stopContinueClear();
|
|
178
|
+
onKeyPress(e, 'BACKSPACE');
|
|
170
179
|
},
|
|
171
180
|
onContextMenu: e => {
|
|
172
181
|
// Long press should not trigger native context menu
|
|
@@ -177,7 +186,7 @@ export const NumberKeyboard = p => {
|
|
|
177
186
|
tabIndex: -1
|
|
178
187
|
}, React.createElement(TextDeletionOutline, null)), React.createElement("div", {
|
|
179
188
|
className: `${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-ok`,
|
|
180
|
-
|
|
189
|
+
onClick: e => onKeyPress(e, 'OK'),
|
|
181
190
|
role: 'button',
|
|
182
191
|
tabIndex: -1,
|
|
183
192
|
"aria-label": confirmText
|
|
@@ -2,7 +2,7 @@ import './picker.less';
|
|
|
2
2
|
import { prompt } from './prompt';
|
|
3
3
|
export type { PickerProps, PickerRef, PickerActions } from './picker';
|
|
4
4
|
export type { PickerValue, PickerColumnItem, PickerColumn, PickerValueExtend, } from '../picker-view';
|
|
5
|
-
declare const _default: import("react").NamedExoticComponent<{
|
|
5
|
+
declare const _default: import("react").NamedExoticComponent<Omit<{
|
|
6
6
|
columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
|
|
7
7
|
value?: import("../picker-view").PickerValue[] | undefined;
|
|
8
8
|
defaultValue?: import("../picker-view").PickerValue[] | undefined;
|
|
@@ -26,7 +26,9 @@ declare const _default: import("react").NamedExoticComponent<{
|
|
|
26
26
|
className?: string | undefined;
|
|
27
27
|
style?: (import("react").CSSProperties & Partial<Record<"--header-button-font-size" | "--title-font-size" | "--item-font-size" | "--item-height", string>>) | undefined;
|
|
28
28
|
tabIndex?: number | undefined;
|
|
29
|
-
} & import("react").AriaAttributes & import("react").RefAttributes<import("./picker").PickerActions
|
|
29
|
+
} & import("react").AriaAttributes & import("react").RefAttributes<import("./picker").PickerActions>, "ref"> & {
|
|
30
|
+
ref?: ((instance: import("./picker").PickerActions | null) => void) | import("react").RefObject<import("./picker").PickerActions> | null | undefined;
|
|
31
|
+
}> & {
|
|
30
32
|
readonly type: import("react").ForwardRefExoticComponent<{
|
|
31
33
|
columns: import("../picker-view").PickerColumn[] | ((value: import("../picker-view").PickerValue[]) => import("../picker-view").PickerColumn[]);
|
|
32
34
|
value?: import("../picker-view").PickerValue[] | undefined;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import type { ReactNode } from 'react';
|
|
2
|
+
import React from 'react';
|
|
3
3
|
import { NativeProps } from '../../utils/native-props';
|
|
4
4
|
export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'autoFocus' | 'disabled' | 'readOnly' | 'name' | 'onFocus' | 'onBlur' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick' | 'onKeyDown'> & {
|
|
5
5
|
onChange?: (val: string) => void;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
|
|
2
1
|
import { useIsomorphicLayoutEffect } from 'ahooks';
|
|
2
|
+
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
|
|
3
3
|
import runes from 'runes2';
|
|
4
|
+
import useInputHandleKeyDown from '../../components/input/useInputHandleKeyDown';
|
|
5
|
+
import { devError } from '../../utils/dev-log';
|
|
4
6
|
import { withNativeProps } from '../../utils/native-props';
|
|
5
7
|
import { usePropsValue } from '../../utils/use-props-value';
|
|
6
8
|
import { mergeProps } from '../../utils/with-default-props';
|
|
7
|
-
import { devError } from '../../utils/dev-log';
|
|
8
|
-
import useInputHandleKeyDown from '../../components/input/useInputHandleKeyDown';
|
|
9
9
|
const classPrefix = 'adm-text-area';
|
|
10
10
|
const defaultProps = {
|
|
11
11
|
rows: 2,
|
|
@@ -33,9 +33,7 @@ export const TextArea = forwardRef((p, ref) => {
|
|
|
33
33
|
const hiddenTextAreaRef = useRef(null);
|
|
34
34
|
const handleKeydown = useInputHandleKeyDown({
|
|
35
35
|
onEnterPress: props.onEnterPress,
|
|
36
|
-
onKeyDown: props.onKeyDown
|
|
37
|
-
nativeInputRef: nativeTextAreaRef,
|
|
38
|
-
enterKeyHint: props.enterKeyHint
|
|
36
|
+
onKeyDown: props.onKeyDown
|
|
39
37
|
});
|
|
40
38
|
useImperativeHandle(ref, () => ({
|
|
41
39
|
clear: () => {
|
|
@@ -131,7 +129,8 @@ export const TextArea = forwardRef((p, ref) => {
|
|
|
131
129
|
onFocus: props.onFocus,
|
|
132
130
|
onBlur: props.onBlur,
|
|
133
131
|
onClick: props.onClick,
|
|
134
|
-
onKeyDown: handleKeydown
|
|
132
|
+
onKeyDown: handleKeydown,
|
|
133
|
+
enterKeyHint: props.enterKeyHint
|
|
135
134
|
}), count, autoSize && React.createElement("textarea", {
|
|
136
135
|
ref: hiddenTextAreaRef,
|
|
137
136
|
className: `${classPrefix}-element ${classPrefix}-element-hidden`,
|
package/2x/package.json
CHANGED