@arco-design/mobile-react 2.29.0 → 2.29.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/CHANGELOG.md +23 -0
- package/README.en-US.md +2 -2
- package/README.md +2 -2
- package/cjs/input/hooks.js +33 -40
- package/cjs/input/props.d.ts +1 -1
- package/cjs/load-more/index.d.ts +5 -0
- package/cjs/load-more/index.js +13 -5
- package/cjs/tabs/tab-cell.js +2 -1
- package/cjs/tabs/type.d.ts +4 -4
- package/dist/index.js +50 -50
- package/dist/index.min.js +4 -4
- package/esm/input/hooks.js +32 -40
- package/esm/input/props.d.ts +1 -1
- package/esm/load-more/index.d.ts +5 -0
- package/esm/load-more/index.js +15 -7
- package/esm/tabs/tab-cell.js +2 -1
- package/esm/tabs/type.d.ts +4 -4
- package/package.json +3 -3
- package/umd/input/hooks.js +36 -44
- package/umd/input/props.d.ts +1 -1
- package/umd/load-more/index.d.ts +5 -0
- package/umd/load-more/index.js +13 -5
- package/umd/tabs/tab-cell.js +2 -1
- package/umd/tabs/type.d.ts +4 -4
package/esm/input/hooks.js
CHANGED
@@ -1,3 +1,4 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
1
2
|
import React, { useState, useEffect, useRef } from 'react';
|
2
3
|
import { cls, nextTick } from '@arco-design/mobile-utils';
|
3
4
|
import IconClear from '../icon/IconClear';
|
@@ -47,23 +48,6 @@ export function useInputLogic(props, inputRef) {
|
|
47
48
|
toggleClear = _useState2[1];
|
48
49
|
|
49
50
|
var compositingRef = useRef(false);
|
50
|
-
/**
|
51
|
-
* clear相关问题背景
|
52
|
-
* 如果点击clear按钮之前已经是focusing状态了,那么在点完clear按钮之后会手动聚焦一下
|
53
|
-
* 该行为将导致onClear事件触发时,也会触发一次onBlur和onFocus事件,可能影响一些组件外的代码逻辑
|
54
|
-
*
|
55
|
-
* e.g. 假设input按钮右侧有一个按钮仅在聚焦时展示
|
56
|
-
* 实现代码大致是:onBlur设置其visible为false,onFocus设置其visible为true
|
57
|
-
* 那么这个按钮就会因为clear的点击造成一瞬的闪烁
|
58
|
-
*
|
59
|
-
* 解决思路
|
60
|
-
* 先来看一下,在输入框已激活的状态时,点击清除按钮后,组件的一些事件的触发顺序
|
61
|
-
* handleBlur -> handleClear -> handleFocus -> onBlur(外部回调) -> onFocus(外部回调)
|
62
|
-
* 可以看到外部的onBlur和onFocus回调都是在handleClear函数之后被调用
|
63
|
-
* 因此可以在handleClear中设置一个shouldPreventEvent的boolean标志
|
64
|
-
* 如果这个标志为true,则跳过调用外部的onBlur和onFocus,并在最后再将标志置回false
|
65
|
-
*
|
66
|
-
*/
|
67
51
|
|
68
52
|
var _useState3 = useState(false),
|
69
53
|
isFocusing = _useState3[0],
|
@@ -163,28 +147,24 @@ export function useInputLogic(props, inputRef) {
|
|
163
147
|
}
|
164
148
|
|
165
149
|
function handleFocus(e) {
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
}
|
150
|
+
if (preventEventWhenClearing && shouldPreventEvent.current) {
|
151
|
+
shouldPreventEvent.current = false;
|
152
|
+
return;
|
153
|
+
}
|
171
154
|
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
});
|
155
|
+
setIsFocusing(true);
|
156
|
+
clearShowType === 'focus' && toggleClear(true);
|
157
|
+
onFocus && onFocus(e);
|
176
158
|
}
|
177
159
|
|
178
160
|
function handleBlur(e) {
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
}
|
161
|
+
if (preventEventWhenClearing && shouldPreventEvent.current) {
|
162
|
+
return;
|
163
|
+
}
|
183
164
|
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
});
|
165
|
+
setIsFocusing(false);
|
166
|
+
clearShowType === 'focus' && toggleClear(false);
|
167
|
+
onBlur && onBlur(e);
|
188
168
|
}
|
189
169
|
|
190
170
|
function handleClick(e) {
|
@@ -215,10 +195,17 @@ export function useInputLogic(props, inputRef) {
|
|
215
195
|
|
216
196
|
if (isFocusing) {
|
217
197
|
if (preventEventWhenClearing) {
|
218
|
-
shouldPreventEvent.current = true;
|
198
|
+
shouldPreventEvent.current = true; // 一段时间未执行blur或focus则重置,避免对下次事件循环造成影响
|
199
|
+
// @en If blur or focus is not executed for a period of time, it will be reset to avoid affecting the next event loop
|
200
|
+
|
201
|
+
setTimeout(function () {
|
202
|
+
shouldPreventEvent.current = false;
|
203
|
+
}, 200);
|
219
204
|
}
|
220
205
|
|
221
|
-
|
206
|
+
nextTick(function () {
|
207
|
+
inputRef.current && inputRef.current.focus();
|
208
|
+
});
|
222
209
|
}
|
223
210
|
});
|
224
211
|
}
|
@@ -228,6 +215,12 @@ export function useInputLogic(props, inputRef) {
|
|
228
215
|
}
|
229
216
|
|
230
217
|
function renderWrapper(prefixCls, type, children) {
|
218
|
+
var _clearEvent;
|
219
|
+
|
220
|
+
// handleClear必须早于handleBlur执行,pc端仅mousedown事件触发早于blur,移动端touch相关事件均早于blur
|
221
|
+
// @en handleClear must be executed earlier than handleBlur
|
222
|
+
// @en only the mousedown event on the PC side is triggered earlier than blur, and the touch-related events on the mobile side are all earlier than blur
|
223
|
+
var clearEvent = (_clearEvent = {}, _clearEvent[system === 'pc' ? 'onMouseDown' : 'onTouchEnd'] = handleClear, _clearEvent);
|
231
224
|
return /*#__PURE__*/React.createElement("div", {
|
232
225
|
role: "search",
|
233
226
|
className: prefixCls + "-container all-border-box " + (className || ''),
|
@@ -247,10 +240,9 @@ export function useInputLogic(props, inputRef) {
|
|
247
240
|
className: cls(prefixCls + "-label", {
|
248
241
|
required: required
|
249
242
|
})
|
250
|
-
}, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/React.createElement("div", {
|
251
|
-
className: prefixCls + "-clear"
|
252
|
-
|
253
|
-
}, clearIcon) : null, suffix ? /*#__PURE__*/React.createElement("div", {
|
243
|
+
}, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/React.createElement("div", _extends({
|
244
|
+
className: prefixCls + "-clear"
|
245
|
+
}, clearEvent), clearIcon) : null, suffix ? /*#__PURE__*/React.createElement("div", {
|
254
246
|
className: prefixCls + "-suffix"
|
255
247
|
}, suffix) : null), renderPendNode(append));
|
256
248
|
}
|
package/esm/input/props.d.ts
CHANGED
@@ -124,7 +124,7 @@ export interface BasicInputProps<T = HTMLInputElement> {
|
|
124
124
|
* 按下清除按钮回调
|
125
125
|
* @en Callback when clear button is pressed
|
126
126
|
*/
|
127
|
-
onClear?: (e: React.
|
127
|
+
onClear?: (e: React.TouchEvent<HTMLElement>) => void;
|
128
128
|
/**
|
129
129
|
* 输入框前置内容,在输入框内部,也可自定义
|
130
130
|
* @en The prefix of the input box, inside the input box, can also be customized
|
package/esm/load-more/index.d.ts
CHANGED
@@ -11,6 +11,11 @@ export interface LoadMoreProps {
|
|
11
11
|
* @en Custom classname
|
12
12
|
*/
|
13
13
|
className?: string;
|
14
|
+
/**
|
15
|
+
* 是否禁用加载能力
|
16
|
+
* @en Whether to disable the loading capability
|
17
|
+
*/
|
18
|
+
disabled?: boolean;
|
14
19
|
/**
|
15
20
|
* 组件加载但尚未启用状态下的内容
|
16
21
|
* @en Content when the component is loaded but not yet enabled
|
package/esm/load-more/index.js
CHANGED
@@ -1,8 +1,8 @@
|
|
1
1
|
import React, { useRef, forwardRef, useImperativeHandle, useEffect, useCallback, useState } from 'react';
|
2
2
|
import lodashThrottle from 'lodash.throttle';
|
3
|
-
import { getScrollContainerAttribute, getValidScrollContainer, defaultLocale } from '@arco-design/mobile-utils';
|
3
|
+
import { getScrollContainerAttribute, getValidScrollContainer, defaultLocale, cls } from '@arco-design/mobile-utils';
|
4
4
|
import { ContextLayout } from '../context-provider';
|
5
|
-
import { useUpdateEffect } from '../_helpers';
|
5
|
+
import { useLatestRef, useUpdateEffect } from '../_helpers';
|
6
6
|
|
7
7
|
/**
|
8
8
|
* 上拉加载组件,支持`scroll`和`click`两种触发加载方式,支持滚动监听。支持受控与不受控两种形式。<br>如果引入组件后发现仅触发了初始的`getData`,请确认是否在`getData`方法内没有调用`callback`移除 loading 状态,且未设置`blockWhenLoading`属性为 false。
|
@@ -16,6 +16,7 @@ var LoadMore = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
16
16
|
var _props$className = props.className,
|
17
17
|
className = _props$className === void 0 ? '' : _props$className,
|
18
18
|
style = props.style,
|
19
|
+
disabled = props.disabled,
|
19
20
|
beforeReadyArea = props.beforeReadyArea,
|
20
21
|
loadingArea = props.loadingArea,
|
21
22
|
noMoreArea = props.noMoreArea,
|
@@ -50,11 +51,16 @@ var LoadMore = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
50
51
|
var lastScrollEndRef = useRef(false);
|
51
52
|
var nowStatus = status || innerStatus;
|
52
53
|
var statusRef = useRef(nowStatus);
|
54
|
+
var disabledRef = useLatestRef(disabled);
|
53
55
|
var changeStatus = useCallback(function (st, scene) {
|
54
56
|
setInnerStatus(st);
|
55
57
|
onStatusChange && onStatusChange(st, scene);
|
56
58
|
}, [onStatusChange]);
|
57
59
|
var triggerGetData = useCallback(function (scene) {
|
60
|
+
if (disabledRef.current) {
|
61
|
+
return;
|
62
|
+
}
|
63
|
+
|
58
64
|
if (blockWhenLoading && statusRef.current === 'loading') {
|
59
65
|
return;
|
60
66
|
}
|
@@ -79,12 +85,12 @@ var LoadMore = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
79
85
|
}
|
80
86
|
}, [nowStatus]);
|
81
87
|
useEffect(function () {
|
82
|
-
if (requestAtFirst) {
|
88
|
+
if (requestAtFirst && !disabled) {
|
83
89
|
if (statusRef.current === 'prepare') {
|
84
90
|
triggerGetData('requestAtFirst');
|
85
91
|
}
|
86
92
|
}
|
87
|
-
}, [trigger]);
|
93
|
+
}, [trigger, disabled]);
|
88
94
|
var handleContainerScroll = useCallback(function () {
|
89
95
|
var scrollTop = getScrollContainerAttribute('scrollTop', getScrollContainer);
|
90
96
|
|
@@ -105,7 +111,7 @@ var LoadMore = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
105
111
|
var binded = null;
|
106
112
|
var scrollFunc = throttle ? lodashThrottle(handleContainerScroll, throttle) : handleContainerScroll;
|
107
113
|
|
108
|
-
if (trigger === 'scroll') {
|
114
|
+
if (trigger === 'scroll' && !disabled) {
|
109
115
|
var container = getValidScrollContainer(getScrollContainer);
|
110
116
|
|
111
117
|
if (container) {
|
@@ -119,7 +125,7 @@ var LoadMore = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
119
125
|
binded.removeEventListener('scroll', scrollFunc);
|
120
126
|
}
|
121
127
|
};
|
122
|
-
}, [trigger, getScrollContainer, handleContainerScroll, throttle]);
|
128
|
+
}, [trigger, disabled, getScrollContainer, handleContainerScroll, throttle]);
|
123
129
|
useImperativeHandle(ref, function () {
|
124
130
|
return {
|
125
131
|
dom: domRef.current,
|
@@ -172,11 +178,13 @@ var LoadMore = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
172
178
|
}
|
173
179
|
|
174
180
|
return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
|
181
|
+
var _cls;
|
182
|
+
|
175
183
|
var prefixCls = _ref.prefixCls,
|
176
184
|
_ref$locale = _ref.locale,
|
177
185
|
locale = _ref$locale === void 0 ? defaultLocale : _ref$locale;
|
178
186
|
return /*#__PURE__*/React.createElement("div", {
|
179
|
-
className: prefixCls + "-load-more status-" + nowStatus + "
|
187
|
+
className: cls(prefixCls + "-load-more status-" + nowStatus, className, (_cls = {}, _cls[prefixCls + "-load-more-disabled"] = disabled, _cls)),
|
180
188
|
ref: domRef,
|
181
189
|
style: style,
|
182
190
|
onClick: handleClick
|
package/esm/tabs/tab-cell.js
CHANGED
@@ -360,7 +360,8 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
360
360
|
fixed: tabBarFixed
|
361
361
|
}, {
|
362
362
|
'has-divider': hasDivider
|
363
|
-
})
|
363
|
+
}),
|
364
|
+
style: typeof tabBarFixed === 'object' ? tabBarFixed : {}
|
364
365
|
}, /*#__PURE__*/React.createElement("div", {
|
365
366
|
className: cls(prefix + "-container", tabDirection, "pos-" + tabBarPosition, "arrange-" + (originArrange || tabBarArrange), "type-" + type, {
|
366
367
|
overflow: hasOverflow
|
package/esm/tabs/type.d.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import { ReactNode, ReactNodeArray } from 'react';
|
1
|
+
import { CSSProperties, ReactNode, ReactNodeArray } from 'react';
|
2
2
|
export declare type TabData = string | {
|
3
3
|
title: ReactNode;
|
4
4
|
[x: string]: any;
|
@@ -71,10 +71,10 @@ export interface TabsProps {
|
|
71
71
|
*/
|
72
72
|
tabBarScroll?: boolean;
|
73
73
|
/**
|
74
|
-
* TabBar
|
75
|
-
* @en Whether the TabBar is fixed on the top
|
74
|
+
* TabBar是否顶部/底部固定(含 placeholder),可传入具体固定的值
|
75
|
+
* @en Whether the TabBar is fixed on the top or bottom (including placeholder), a specific fixed value can be passed in
|
76
76
|
*/
|
77
|
-
tabBarFixed?: boolean
|
77
|
+
tabBarFixed?: boolean | Pick<CSSProperties, 'top' | 'bottom'>;
|
78
78
|
/**
|
79
79
|
* tabBar额外渲染内容
|
80
80
|
* @en TabBar extra render content
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@arco-design/mobile-react",
|
3
|
-
"version": "2.29.
|
3
|
+
"version": "2.29.2",
|
4
4
|
"description": "",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "esm/index.js",
|
@@ -15,7 +15,7 @@
|
|
15
15
|
"author": "taoyiyue@bytedance.com",
|
16
16
|
"license": "ISC",
|
17
17
|
"dependencies": {
|
18
|
-
"@arco-design/mobile-utils": "2.16.
|
18
|
+
"@arco-design/mobile-utils": "2.16.5",
|
19
19
|
"@arco-design/transformable": "^1.0.0",
|
20
20
|
"lodash.throttle": "^4.1.1",
|
21
21
|
"resize-observer-polyfill": "^1.5.1"
|
@@ -49,5 +49,5 @@
|
|
49
49
|
"publishConfig": {
|
50
50
|
"access": "public"
|
51
51
|
},
|
52
|
-
"gitHead": "
|
52
|
+
"gitHead": "4a5d755078afe28a84d559c9c71a8eec4eab497e"
|
53
53
|
}
|
package/umd/input/hooks.js
CHANGED
@@ -1,22 +1,23 @@
|
|
1
1
|
(function (global, factory) {
|
2
2
|
if (typeof define === "function" && define.amd) {
|
3
|
-
define(["exports", "react", "@arco-design/mobile-utils", "../icon/IconClear", "../_helpers"], factory);
|
3
|
+
define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../icon/IconClear", "../_helpers"], factory);
|
4
4
|
} else if (typeof exports !== "undefined") {
|
5
|
-
factory(exports, require("react"), require("@arco-design/mobile-utils"), require("../icon/IconClear"), require("../_helpers"));
|
5
|
+
factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../icon/IconClear"), require("../_helpers"));
|
6
6
|
} else {
|
7
7
|
var mod = {
|
8
8
|
exports: {}
|
9
9
|
};
|
10
|
-
factory(mod.exports, global.react, global.mobileUtils, global.IconClear, global._helpers);
|
10
|
+
factory(mod.exports, global._extends, global.react, global.mobileUtils, global.IconClear, global._helpers);
|
11
11
|
global.hooks = mod.exports;
|
12
12
|
}
|
13
|
-
})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _mobileUtils, _IconClear, _helpers) {
|
13
|
+
})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _IconClear, _helpers) {
|
14
14
|
"use strict";
|
15
15
|
|
16
16
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
17
17
|
|
18
18
|
_exports.__esModule = true;
|
19
19
|
_exports.useInputLogic = useInputLogic;
|
20
|
+
_extends2 = _interopRequireDefault(_extends2);
|
20
21
|
_react = _interopRequireWildcard(_react);
|
21
22
|
_IconClear = _interopRequireDefault(_IconClear);
|
22
23
|
|
@@ -69,23 +70,6 @@
|
|
69
70
|
toggleClear = _useState2[1];
|
70
71
|
|
71
72
|
var compositingRef = (0, _react.useRef)(false);
|
72
|
-
/**
|
73
|
-
* clear相关问题背景
|
74
|
-
* 如果点击clear按钮之前已经是focusing状态了,那么在点完clear按钮之后会手动聚焦一下
|
75
|
-
* 该行为将导致onClear事件触发时,也会触发一次onBlur和onFocus事件,可能影响一些组件外的代码逻辑
|
76
|
-
*
|
77
|
-
* e.g. 假设input按钮右侧有一个按钮仅在聚焦时展示
|
78
|
-
* 实现代码大致是:onBlur设置其visible为false,onFocus设置其visible为true
|
79
|
-
* 那么这个按钮就会因为clear的点击造成一瞬的闪烁
|
80
|
-
*
|
81
|
-
* 解决思路
|
82
|
-
* 先来看一下,在输入框已激活的状态时,点击清除按钮后,组件的一些事件的触发顺序
|
83
|
-
* handleBlur -> handleClear -> handleFocus -> onBlur(外部回调) -> onFocus(外部回调)
|
84
|
-
* 可以看到外部的onBlur和onFocus回调都是在handleClear函数之后被调用
|
85
|
-
* 因此可以在handleClear中设置一个shouldPreventEvent的boolean标志
|
86
|
-
* 如果这个标志为true,则跳过调用外部的onBlur和onFocus,并在最后再将标志置回false
|
87
|
-
*
|
88
|
-
*/
|
89
73
|
|
90
74
|
var _useState3 = (0, _react.useState)(false),
|
91
75
|
isFocusing = _useState3[0],
|
@@ -185,28 +169,24 @@
|
|
185
169
|
}
|
186
170
|
|
187
171
|
function handleFocus(e) {
|
188
|
-
(
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
}
|
172
|
+
if (preventEventWhenClearing && shouldPreventEvent.current) {
|
173
|
+
shouldPreventEvent.current = false;
|
174
|
+
return;
|
175
|
+
}
|
193
176
|
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
});
|
177
|
+
setIsFocusing(true);
|
178
|
+
clearShowType === 'focus' && toggleClear(true);
|
179
|
+
onFocus && onFocus(e);
|
198
180
|
}
|
199
181
|
|
200
182
|
function handleBlur(e) {
|
201
|
-
(
|
202
|
-
|
203
|
-
|
204
|
-
}
|
183
|
+
if (preventEventWhenClearing && shouldPreventEvent.current) {
|
184
|
+
return;
|
185
|
+
}
|
205
186
|
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
});
|
187
|
+
setIsFocusing(false);
|
188
|
+
clearShowType === 'focus' && toggleClear(false);
|
189
|
+
onBlur && onBlur(e);
|
210
190
|
}
|
211
191
|
|
212
192
|
function handleClick(e) {
|
@@ -237,10 +217,17 @@
|
|
237
217
|
|
238
218
|
if (isFocusing) {
|
239
219
|
if (preventEventWhenClearing) {
|
240
|
-
shouldPreventEvent.current = true;
|
220
|
+
shouldPreventEvent.current = true; // 一段时间未执行blur或focus则重置,避免对下次事件循环造成影响
|
221
|
+
// @en If blur or focus is not executed for a period of time, it will be reset to avoid affecting the next event loop
|
222
|
+
|
223
|
+
setTimeout(function () {
|
224
|
+
shouldPreventEvent.current = false;
|
225
|
+
}, 200);
|
241
226
|
}
|
242
227
|
|
243
|
-
|
228
|
+
(0, _mobileUtils.nextTick)(function () {
|
229
|
+
inputRef.current && inputRef.current.focus();
|
230
|
+
});
|
244
231
|
}
|
245
232
|
});
|
246
233
|
}
|
@@ -250,6 +237,12 @@
|
|
250
237
|
}
|
251
238
|
|
252
239
|
function renderWrapper(prefixCls, type, children) {
|
240
|
+
var _clearEvent;
|
241
|
+
|
242
|
+
// handleClear必须早于handleBlur执行,pc端仅mousedown事件触发早于blur,移动端touch相关事件均早于blur
|
243
|
+
// @en handleClear must be executed earlier than handleBlur
|
244
|
+
// @en only the mousedown event on the PC side is triggered earlier than blur, and the touch-related events on the mobile side are all earlier than blur
|
245
|
+
var clearEvent = (_clearEvent = {}, _clearEvent[system === 'pc' ? 'onMouseDown' : 'onTouchEnd'] = handleClear, _clearEvent);
|
253
246
|
return /*#__PURE__*/_react.default.createElement("div", {
|
254
247
|
role: "search",
|
255
248
|
className: prefixCls + "-container all-border-box " + (className || ''),
|
@@ -269,10 +262,9 @@
|
|
269
262
|
className: (0, _mobileUtils.cls)(prefixCls + "-label", {
|
270
263
|
required: required
|
271
264
|
})
|
272
|
-
}, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/_react.default.createElement("div", {
|
273
|
-
className: prefixCls + "-clear"
|
274
|
-
|
275
|
-
}, clearIcon) : null, suffix ? /*#__PURE__*/_react.default.createElement("div", {
|
265
|
+
}, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
266
|
+
className: prefixCls + "-clear"
|
267
|
+
}, clearEvent), clearIcon) : null, suffix ? /*#__PURE__*/_react.default.createElement("div", {
|
276
268
|
className: prefixCls + "-suffix"
|
277
269
|
}, suffix) : null), renderPendNode(append));
|
278
270
|
}
|
package/umd/input/props.d.ts
CHANGED
@@ -124,7 +124,7 @@ export interface BasicInputProps<T = HTMLInputElement> {
|
|
124
124
|
* 按下清除按钮回调
|
125
125
|
* @en Callback when clear button is pressed
|
126
126
|
*/
|
127
|
-
onClear?: (e: React.
|
127
|
+
onClear?: (e: React.TouchEvent<HTMLElement>) => void;
|
128
128
|
/**
|
129
129
|
* 输入框前置内容,在输入框内部,也可自定义
|
130
130
|
* @en The prefix of the input box, inside the input box, can also be customized
|
package/umd/load-more/index.d.ts
CHANGED
@@ -11,6 +11,11 @@ export interface LoadMoreProps {
|
|
11
11
|
* @en Custom classname
|
12
12
|
*/
|
13
13
|
className?: string;
|
14
|
+
/**
|
15
|
+
* 是否禁用加载能力
|
16
|
+
* @en Whether to disable the loading capability
|
17
|
+
*/
|
18
|
+
disabled?: boolean;
|
14
19
|
/**
|
15
20
|
* 组件加载但尚未启用状态下的内容
|
16
21
|
* @en Content when the component is loaded but not yet enabled
|
package/umd/load-more/index.js
CHANGED
@@ -36,6 +36,7 @@
|
|
36
36
|
var _props$className = props.className,
|
37
37
|
className = _props$className === void 0 ? '' : _props$className,
|
38
38
|
style = props.style,
|
39
|
+
disabled = props.disabled,
|
39
40
|
beforeReadyArea = props.beforeReadyArea,
|
40
41
|
loadingArea = props.loadingArea,
|
41
42
|
noMoreArea = props.noMoreArea,
|
@@ -70,11 +71,16 @@
|
|
70
71
|
var lastScrollEndRef = (0, _react.useRef)(false);
|
71
72
|
var nowStatus = status || innerStatus;
|
72
73
|
var statusRef = (0, _react.useRef)(nowStatus);
|
74
|
+
var disabledRef = (0, _helpers.useLatestRef)(disabled);
|
73
75
|
var changeStatus = (0, _react.useCallback)(function (st, scene) {
|
74
76
|
setInnerStatus(st);
|
75
77
|
onStatusChange && onStatusChange(st, scene);
|
76
78
|
}, [onStatusChange]);
|
77
79
|
var triggerGetData = (0, _react.useCallback)(function (scene) {
|
80
|
+
if (disabledRef.current) {
|
81
|
+
return;
|
82
|
+
}
|
83
|
+
|
78
84
|
if (blockWhenLoading && statusRef.current === 'loading') {
|
79
85
|
return;
|
80
86
|
}
|
@@ -99,12 +105,12 @@
|
|
99
105
|
}
|
100
106
|
}, [nowStatus]);
|
101
107
|
(0, _react.useEffect)(function () {
|
102
|
-
if (requestAtFirst) {
|
108
|
+
if (requestAtFirst && !disabled) {
|
103
109
|
if (statusRef.current === 'prepare') {
|
104
110
|
triggerGetData('requestAtFirst');
|
105
111
|
}
|
106
112
|
}
|
107
|
-
}, [trigger]);
|
113
|
+
}, [trigger, disabled]);
|
108
114
|
var handleContainerScroll = (0, _react.useCallback)(function () {
|
109
115
|
var scrollTop = (0, _mobileUtils.getScrollContainerAttribute)('scrollTop', getScrollContainer);
|
110
116
|
|
@@ -125,7 +131,7 @@
|
|
125
131
|
var binded = null;
|
126
132
|
var scrollFunc = throttle ? (0, _lodash.default)(handleContainerScroll, throttle) : handleContainerScroll;
|
127
133
|
|
128
|
-
if (trigger === 'scroll') {
|
134
|
+
if (trigger === 'scroll' && !disabled) {
|
129
135
|
var container = (0, _mobileUtils.getValidScrollContainer)(getScrollContainer);
|
130
136
|
|
131
137
|
if (container) {
|
@@ -139,7 +145,7 @@
|
|
139
145
|
binded.removeEventListener('scroll', scrollFunc);
|
140
146
|
}
|
141
147
|
};
|
142
|
-
}, [trigger, getScrollContainer, handleContainerScroll, throttle]);
|
148
|
+
}, [trigger, disabled, getScrollContainer, handleContainerScroll, throttle]);
|
143
149
|
(0, _react.useImperativeHandle)(ref, function () {
|
144
150
|
return {
|
145
151
|
dom: domRef.current,
|
@@ -192,11 +198,13 @@
|
|
192
198
|
}
|
193
199
|
|
194
200
|
return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
|
201
|
+
var _cls;
|
202
|
+
|
195
203
|
var prefixCls = _ref.prefixCls,
|
196
204
|
_ref$locale = _ref.locale,
|
197
205
|
locale = _ref$locale === void 0 ? _mobileUtils.defaultLocale : _ref$locale;
|
198
206
|
return /*#__PURE__*/_react.default.createElement("div", {
|
199
|
-
className: prefixCls + "-load-more status-" + nowStatus + "
|
207
|
+
className: (0, _mobileUtils.cls)(prefixCls + "-load-more status-" + nowStatus, className, (_cls = {}, _cls[prefixCls + "-load-more-disabled"] = disabled, _cls)),
|
200
208
|
ref: domRef,
|
201
209
|
style: style,
|
202
210
|
onClick: handleClick
|
package/umd/tabs/tab-cell.js
CHANGED
@@ -382,7 +382,8 @@
|
|
382
382
|
fixed: tabBarFixed
|
383
383
|
}, {
|
384
384
|
'has-divider': hasDivider
|
385
|
-
})
|
385
|
+
}),
|
386
|
+
style: typeof tabBarFixed === 'object' ? tabBarFixed : {}
|
386
387
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
387
388
|
className: (0, _mobileUtils.cls)(prefix + "-container", tabDirection, "pos-" + tabBarPosition, "arrange-" + (originArrange || tabBarArrange), "type-" + type, {
|
388
389
|
overflow: hasOverflow
|
package/umd/tabs/type.d.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import { ReactNode, ReactNodeArray } from 'react';
|
1
|
+
import { CSSProperties, ReactNode, ReactNodeArray } from 'react';
|
2
2
|
export declare type TabData = string | {
|
3
3
|
title: ReactNode;
|
4
4
|
[x: string]: any;
|
@@ -71,10 +71,10 @@ export interface TabsProps {
|
|
71
71
|
*/
|
72
72
|
tabBarScroll?: boolean;
|
73
73
|
/**
|
74
|
-
* TabBar
|
75
|
-
* @en Whether the TabBar is fixed on the top
|
74
|
+
* TabBar是否顶部/底部固定(含 placeholder),可传入具体固定的值
|
75
|
+
* @en Whether the TabBar is fixed on the top or bottom (including placeholder), a specific fixed value can be passed in
|
76
76
|
*/
|
77
|
-
tabBarFixed?: boolean
|
77
|
+
tabBarFixed?: boolean | Pick<CSSProperties, 'top' | 'bottom'>;
|
78
78
|
/**
|
79
79
|
* tabBar额外渲染内容
|
80
80
|
* @en TabBar extra render content
|