@arco-design/mobile-react 2.29.0 → 2.29.2

package/esm/input/hooks.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useState, useEffect, useRef } from 'react';
 import { cls, nextTick } from '@arco-design/mobile-utils';
 import IconClear from '../icon/IconClear';
@@ -47,23 +48,6 @@ export function useInputLogic(props, inputRef) {
       toggleClear = _useState2[1];
 
   var compositingRef = useRef(false);
-  /**
-   * clear相关问题背景
-   * 如果点击clear按钮之前已经是focusing状态了，那么在点完clear按钮之后会手动聚焦一下
-   * 该行为将导致onClear事件触发时，也会触发一次onBlur和onFocus事件，可能影响一些组件外的代码逻辑
-   *
-   * e.g. 假设input按钮右侧有一个按钮仅在聚焦时展示
-   * 实现代码大致是：onBlur设置其visible为false，onFocus设置其visible为true
-   * 那么这个按钮就会因为clear的点击造成一瞬的闪烁
-   *
-   * 解决思路
-   * 先来看一下，在输入框已激活的状态时，点击清除按钮后，组件的一些事件的触发顺序
-   * handleBlur -> handleClear -> handleFocus -> onBlur(外部回调) -> onFocus(外部回调)
-   * 可以看到外部的onBlur和onFocus回调都是在handleClear函数之后被调用
-   * 因此可以在handleClear中设置一个shouldPreventEvent的boolean标志
-   * 如果这个标志为true，则跳过调用外部的onBlur和onFocus，并在最后再将标志置回false
-   *
-   */
 
   var _useState3 = useState(false),
       isFocusing = _useState3[0],
@@ -163,28 +147,24 @@ export function useInputLogic(props, inputRef) {
   }
 
   function handleFocus(e) {
-    nextTick(function () {
-      if (preventEventWhenClearing && shouldPreventEvent.current) {
-        shouldPreventEvent.current = false;
-        return;
-      }
+    if (preventEventWhenClearing && shouldPreventEvent.current) {
+      shouldPreventEvent.current = false;
+      return;
+    }
 
-      setIsFocusing(true);
-      clearShowType === 'focus' && toggleClear(true);
-      onFocus && onFocus(e);
-    });
+    setIsFocusing(true);
+    clearShowType === 'focus' && toggleClear(true);
+    onFocus && onFocus(e);
   }
 
   function handleBlur(e) {
-    nextTick(function () {
-      if (preventEventWhenClearing && shouldPreventEvent.current) {
-        return;
-      }
+    if (preventEventWhenClearing && shouldPreventEvent.current) {
+      return;
+    }
 
-      setIsFocusing(false);
-      clearShowType === 'focus' && toggleClear(false);
-      onBlur && onBlur(e);
-    });
+    setIsFocusing(false);
+    clearShowType === 'focus' && toggleClear(false);
+    onBlur && onBlur(e);
   }
 
   function handleClick(e) {
@@ -215,10 +195,17 @@ export function useInputLogic(props, inputRef) {
 
       if (isFocusing) {
         if (preventEventWhenClearing) {
-          shouldPreventEvent.current = true;
+          shouldPreventEvent.current = true; // 一段时间未执行blur或focus则重置，避免对下次事件循环造成影响
+          // @en If blur or focus is not executed for a period of time, it will be reset to avoid affecting the next event loop
+
+          setTimeout(function () {
+            shouldPreventEvent.current = false;
+          }, 200);
         }
 
-        inputRef.current && inputRef.current.focus();
+        nextTick(function () {
+          inputRef.current && inputRef.current.focus();
+        });
       }
     });
   }
@@ -228,6 +215,12 @@ export function useInputLogic(props, inputRef) {
   }
 
   function renderWrapper(prefixCls, type, children) {
+    var _clearEvent;
+
+    // handleClear必须早于handleBlur执行，pc端仅mousedown事件触发早于blur，移动端touch相关事件均早于blur
+    // @en handleClear must be executed earlier than handleBlur
+    // @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
+    var clearEvent = (_clearEvent = {}, _clearEvent[system === 'pc' ? 'onMouseDown' : 'onTouchEnd'] = handleClear, _clearEvent);
     return /*#__PURE__*/React.createElement("div", {
       role: "search",
       className: prefixCls + "-container all-border-box " + (className || ''),
@@ -247,10 +240,9 @@ export function useInputLogic(props, inputRef) {
       className: cls(prefixCls + "-label", {
         required: required
       })
-    }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/React.createElement("div", {
-      className: prefixCls + "-clear",
-      onClick: handleClear
-    }, clearIcon) : null, suffix ? /*#__PURE__*/React.createElement("div", {
+    }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/React.createElement("div", _extends({
+      className: prefixCls + "-clear"
+    }, clearEvent), clearIcon) : null, suffix ? /*#__PURE__*/React.createElement("div", {
       className: prefixCls + "-suffix"
     }, suffix) : null), renderPendNode(append));
   }

package/esm/input/props.d.ts

@@ -124,7 +124,7 @@ export interface BasicInputProps<T = HTMLInputElement> {
      * 按下清除按钮回调
      * @en Callback when clear button is pressed
      */
-    onClear?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onClear?: (e: React.TouchEvent<HTMLElement>) => void;
     /**
      * 输入框前置内容，在输入框内部，也可自定义
      * @en The prefix of the input box, inside the input box, can also be customized

package/esm/load-more/index.d.ts

@@ -11,6 +11,11 @@ export interface LoadMoreProps {
      * @en Custom classname
      */
     className?: string;
+    /**
+     * 是否禁用加载能力
+     * @en Whether to disable the loading capability
+     */
+    disabled?: boolean;
     /**
      * 组件加载但尚未启用状态下的内容
      * @en Content when the component is loaded but not yet enabled

package/esm/load-more/index.js

@@ -1,8 +1,8 @@
 import React, { useRef, forwardRef, useImperativeHandle, useEffect, useCallback, useState } from 'react';
 import lodashThrottle from 'lodash.throttle';
-import { getScrollContainerAttribute, getValidScrollContainer, defaultLocale } from '@arco-design/mobile-utils';
+import { getScrollContainerAttribute, getValidScrollContainer, defaultLocale, cls } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
-import { useUpdateEffect } from '../_helpers';
+import { useLatestRef, useUpdateEffect } from '../_helpers';
 
 /**
  * 上拉加载组件，支持`scroll`和`click`两种触发加载方式，支持滚动监听。支持受控与不受控两种形式。<br>如果引入组件后发现仅触发了初始的`getData`，请确认是否在`getData`方法内没有调用`callback`移除 loading 状态，且未设置`blockWhenLoading`属性为 false。
@@ -16,6 +16,7 @@ var LoadMore = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$className = props.className,
       className = _props$className === void 0 ? '' : _props$className,
       style = props.style,
+      disabled = props.disabled,
       beforeReadyArea = props.beforeReadyArea,
       loadingArea = props.loadingArea,
       noMoreArea = props.noMoreArea,
@@ -50,11 +51,16 @@ var LoadMore = /*#__PURE__*/forwardRef(function (props, ref) {
   var lastScrollEndRef = useRef(false);
   var nowStatus = status || innerStatus;
   var statusRef = useRef(nowStatus);
+  var disabledRef = useLatestRef(disabled);
   var changeStatus = useCallback(function (st, scene) {
     setInnerStatus(st);
     onStatusChange && onStatusChange(st, scene);
   }, [onStatusChange]);
   var triggerGetData = useCallback(function (scene) {
+    if (disabledRef.current) {
+      return;
+    }
+
     if (blockWhenLoading && statusRef.current === 'loading') {
       return;
     }
@@ -79,12 +85,12 @@ var LoadMore = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, [nowStatus]);
   useEffect(function () {
-    if (requestAtFirst) {
+    if (requestAtFirst && !disabled) {
       if (statusRef.current === 'prepare') {
         triggerGetData('requestAtFirst');
       }
     }
-  }, [trigger]);
+  }, [trigger, disabled]);
   var handleContainerScroll = useCallback(function () {
     var scrollTop = getScrollContainerAttribute('scrollTop', getScrollContainer);
 
@@ -105,7 +111,7 @@ var LoadMore = /*#__PURE__*/forwardRef(function (props, ref) {
     var binded = null;
     var scrollFunc = throttle ? lodashThrottle(handleContainerScroll, throttle) : handleContainerScroll;
 
-    if (trigger === 'scroll') {
+    if (trigger === 'scroll' && !disabled) {
       var container = getValidScrollContainer(getScrollContainer);
 
       if (container) {
@@ -119,7 +125,7 @@ var LoadMore = /*#__PURE__*/forwardRef(function (props, ref) {
         binded.removeEventListener('scroll', scrollFunc);
       }
     };
-  }, [trigger, getScrollContainer, handleContainerScroll, throttle]);
+  }, [trigger, disabled, getScrollContainer, handleContainerScroll, throttle]);
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current,
@@ -172,11 +178,13 @@ var LoadMore = /*#__PURE__*/forwardRef(function (props, ref) {
   }
 
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
+    var _cls;
+
     var prefixCls = _ref.prefixCls,
         _ref$locale = _ref.locale,
         locale = _ref$locale === void 0 ? defaultLocale : _ref$locale;
     return /*#__PURE__*/React.createElement("div", {
-      className: prefixCls + "-load-more status-" + nowStatus + " " + className,
+      className: cls(prefixCls + "-load-more status-" + nowStatus, className, (_cls = {}, _cls[prefixCls + "-load-more-disabled"] = disabled, _cls)),
       ref: domRef,
       style: style,
       onClick: handleClick

package/esm/tabs/tab-cell.js

@@ -360,7 +360,8 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
       fixed: tabBarFixed
     }, {
       'has-divider': hasDivider
-    })
+    }),
+    style: typeof tabBarFixed === 'object' ? tabBarFixed : {}
   }, /*#__PURE__*/React.createElement("div", {
     className: cls(prefix + "-container", tabDirection, "pos-" + tabBarPosition, "arrange-" + (originArrange || tabBarArrange), "type-" + type, {
       overflow: hasOverflow

package/esm/tabs/type.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ReactNodeArray } from 'react';
+import { CSSProperties, ReactNode, ReactNodeArray } from 'react';
 export declare type TabData = string | {
     title: ReactNode;
     [x: string]: any;
@@ -71,10 +71,10 @@ export interface TabsProps {
      */
     tabBarScroll?: boolean;
     /**
-     * TabBar是否顶部固定
-     * @en Whether the TabBar is fixed on the top
+     * TabBar是否顶部/底部固定（含 placeholder），可传入具体固定的值
+     * @en Whether the TabBar is fixed on the top or bottom (including placeholder), a specific fixed value can be passed in
      */
-    tabBarFixed?: boolean;
+    tabBarFixed?: boolean | Pick<CSSProperties, 'top' | 'bottom'>;
     /**
      * tabBar额外渲染内容
      * @en TabBar extra render content

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.29.0",
+    "version": "2.29.2",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "2.16.3",
+        "@arco-design/mobile-utils": "2.16.5",
         "@arco-design/transformable": "^1.0.0",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -49,5 +49,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "8fbc59117b0d240f4faeee45daca1489803ab78a"
+    "gitHead": "4a5d755078afe28a84d559c9c71a8eec4eab497e"
 }

package/umd/input/hooks.js

@@ -1,22 +1,23 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "@arco-design/mobile-utils", "../icon/IconClear", "../_helpers"], factory);
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../icon/IconClear", "../_helpers"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("@arco-design/mobile-utils"), require("../icon/IconClear"), require("../_helpers"));
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../icon/IconClear"), require("../_helpers"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.mobileUtils, global.IconClear, global._helpers);
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.IconClear, global._helpers);
     global.hooks = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _mobileUtils, _IconClear, _helpers) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _IconClear, _helpers) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
   _exports.__esModule = true;
   _exports.useInputLogic = useInputLogic;
+  _extends2 = _interopRequireDefault(_extends2);
   _react = _interopRequireWildcard(_react);
   _IconClear = _interopRequireDefault(_IconClear);
 
@@ -69,23 +70,6 @@
         toggleClear = _useState2[1];
 
     var compositingRef = (0, _react.useRef)(false);
-    /**
-     * clear相关问题背景
-     * 如果点击clear按钮之前已经是focusing状态了，那么在点完clear按钮之后会手动聚焦一下
-     * 该行为将导致onClear事件触发时，也会触发一次onBlur和onFocus事件，可能影响一些组件外的代码逻辑
-     *
-     * e.g. 假设input按钮右侧有一个按钮仅在聚焦时展示
-     * 实现代码大致是：onBlur设置其visible为false，onFocus设置其visible为true
-     * 那么这个按钮就会因为clear的点击造成一瞬的闪烁
-     *
-     * 解决思路
-     * 先来看一下，在输入框已激活的状态时，点击清除按钮后，组件的一些事件的触发顺序
-     * handleBlur -> handleClear -> handleFocus -> onBlur(外部回调) -> onFocus(外部回调)
-     * 可以看到外部的onBlur和onFocus回调都是在handleClear函数之后被调用
-     * 因此可以在handleClear中设置一个shouldPreventEvent的boolean标志
-     * 如果这个标志为true，则跳过调用外部的onBlur和onFocus，并在最后再将标志置回false
-     *
-     */
 
     var _useState3 = (0, _react.useState)(false),
         isFocusing = _useState3[0],
@@ -185,28 +169,24 @@
     }
 
     function handleFocus(e) {
-      (0, _mobileUtils.nextTick)(function () {
-        if (preventEventWhenClearing && shouldPreventEvent.current) {
-          shouldPreventEvent.current = false;
-          return;
-        }
+      if (preventEventWhenClearing && shouldPreventEvent.current) {
+        shouldPreventEvent.current = false;
+        return;
+      }
 
-        setIsFocusing(true);
-        clearShowType === 'focus' && toggleClear(true);
-        onFocus && onFocus(e);
-      });
+      setIsFocusing(true);
+      clearShowType === 'focus' && toggleClear(true);
+      onFocus && onFocus(e);
     }
 
     function handleBlur(e) {
-      (0, _mobileUtils.nextTick)(function () {
-        if (preventEventWhenClearing && shouldPreventEvent.current) {
-          return;
-        }
+      if (preventEventWhenClearing && shouldPreventEvent.current) {
+        return;
+      }
 
-        setIsFocusing(false);
-        clearShowType === 'focus' && toggleClear(false);
-        onBlur && onBlur(e);
-      });
+      setIsFocusing(false);
+      clearShowType === 'focus' && toggleClear(false);
+      onBlur && onBlur(e);
     }
 
     function handleClick(e) {
@@ -237,10 +217,17 @@
 
         if (isFocusing) {
           if (preventEventWhenClearing) {
-            shouldPreventEvent.current = true;
+            shouldPreventEvent.current = true; // 一段时间未执行blur或focus则重置，避免对下次事件循环造成影响
+            // @en If blur or focus is not executed for a period of time, it will be reset to avoid affecting the next event loop
+
+            setTimeout(function () {
+              shouldPreventEvent.current = false;
+            }, 200);
           }
 
-          inputRef.current && inputRef.current.focus();
+          (0, _mobileUtils.nextTick)(function () {
+            inputRef.current && inputRef.current.focus();
+          });
         }
       });
     }
@@ -250,6 +237,12 @@
     }
 
     function renderWrapper(prefixCls, type, children) {
+      var _clearEvent;
+
+      // handleClear必须早于handleBlur执行，pc端仅mousedown事件触发早于blur，移动端touch相关事件均早于blur
+      // @en handleClear must be executed earlier than handleBlur
+      // @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
+      var clearEvent = (_clearEvent = {}, _clearEvent[system === 'pc' ? 'onMouseDown' : 'onTouchEnd'] = handleClear, _clearEvent);
       return /*#__PURE__*/_react.default.createElement("div", {
         role: "search",
         className: prefixCls + "-container all-border-box " + (className || ''),
@@ -269,10 +262,9 @@
         className: (0, _mobileUtils.cls)(prefixCls + "-label", {
           required: required
         })
-      }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/_react.default.createElement("div", {
-        className: prefixCls + "-clear",
-        onClick: handleClear
-      }, clearIcon) : null, suffix ? /*#__PURE__*/_react.default.createElement("div", {
+      }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+        className: prefixCls + "-clear"
+      }, clearEvent), clearIcon) : null, suffix ? /*#__PURE__*/_react.default.createElement("div", {
         className: prefixCls + "-suffix"
       }, suffix) : null), renderPendNode(append));
     }

package/umd/input/props.d.ts

@@ -124,7 +124,7 @@ export interface BasicInputProps<T = HTMLInputElement> {
      * 按下清除按钮回调
      * @en Callback when clear button is pressed
      */
-    onClear?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onClear?: (e: React.TouchEvent<HTMLElement>) => void;
     /**
      * 输入框前置内容，在输入框内部，也可自定义
      * @en The prefix of the input box, inside the input box, can also be customized

package/umd/load-more/index.d.ts

@@ -11,6 +11,11 @@ export interface LoadMoreProps {
      * @en Custom classname
      */
     className?: string;
+    /**
+     * 是否禁用加载能力
+     * @en Whether to disable the loading capability
+     */
+    disabled?: boolean;
     /**
      * 组件加载但尚未启用状态下的内容
      * @en Content when the component is loaded but not yet enabled

package/umd/load-more/index.js

@@ -36,6 +36,7 @@
     var _props$className = props.className,
         className = _props$className === void 0 ? '' : _props$className,
         style = props.style,
+        disabled = props.disabled,
         beforeReadyArea = props.beforeReadyArea,
         loadingArea = props.loadingArea,
         noMoreArea = props.noMoreArea,
@@ -70,11 +71,16 @@
     var lastScrollEndRef = (0, _react.useRef)(false);
     var nowStatus = status || innerStatus;
     var statusRef = (0, _react.useRef)(nowStatus);
+    var disabledRef = (0, _helpers.useLatestRef)(disabled);
     var changeStatus = (0, _react.useCallback)(function (st, scene) {
       setInnerStatus(st);
       onStatusChange && onStatusChange(st, scene);
     }, [onStatusChange]);
     var triggerGetData = (0, _react.useCallback)(function (scene) {
+      if (disabledRef.current) {
+        return;
+      }
+
       if (blockWhenLoading && statusRef.current === 'loading') {
         return;
       }
@@ -99,12 +105,12 @@
       }
     }, [nowStatus]);
     (0, _react.useEffect)(function () {
-      if (requestAtFirst) {
+      if (requestAtFirst && !disabled) {
         if (statusRef.current === 'prepare') {
           triggerGetData('requestAtFirst');
         }
       }
-    }, [trigger]);
+    }, [trigger, disabled]);
     var handleContainerScroll = (0, _react.useCallback)(function () {
       var scrollTop = (0, _mobileUtils.getScrollContainerAttribute)('scrollTop', getScrollContainer);
 
@@ -125,7 +131,7 @@
       var binded = null;
       var scrollFunc = throttle ? (0, _lodash.default)(handleContainerScroll, throttle) : handleContainerScroll;
 
-      if (trigger === 'scroll') {
+      if (trigger === 'scroll' && !disabled) {
         var container = (0, _mobileUtils.getValidScrollContainer)(getScrollContainer);
 
         if (container) {
@@ -139,7 +145,7 @@
           binded.removeEventListener('scroll', scrollFunc);
         }
       };
-    }, [trigger, getScrollContainer, handleContainerScroll, throttle]);
+    }, [trigger, disabled, getScrollContainer, handleContainerScroll, throttle]);
     (0, _react.useImperativeHandle)(ref, function () {
       return {
         dom: domRef.current,
@@ -192,11 +198,13 @@
     }
 
     return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+      var _cls;
+
       var prefixCls = _ref.prefixCls,
           _ref$locale = _ref.locale,
           locale = _ref$locale === void 0 ? _mobileUtils.defaultLocale : _ref$locale;
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: prefixCls + "-load-more status-" + nowStatus + " " + className,
+        className: (0, _mobileUtils.cls)(prefixCls + "-load-more status-" + nowStatus, className, (_cls = {}, _cls[prefixCls + "-load-more-disabled"] = disabled, _cls)),
         ref: domRef,
         style: style,
         onClick: handleClick

package/umd/tabs/tab-cell.js

@@ -382,7 +382,8 @@
         fixed: tabBarFixed
       }, {
         'has-divider': hasDivider
-      })
+      }),
+      style: typeof tabBarFixed === 'object' ? tabBarFixed : {}
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefix + "-container", tabDirection, "pos-" + tabBarPosition, "arrange-" + (originArrange || tabBarArrange), "type-" + type, {
         overflow: hasOverflow

package/umd/tabs/type.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ReactNodeArray } from 'react';
+import { CSSProperties, ReactNode, ReactNodeArray } from 'react';
 export declare type TabData = string | {
     title: ReactNode;
     [x: string]: any;
@@ -71,10 +71,10 @@ export interface TabsProps {
      */
     tabBarScroll?: boolean;
     /**
-     * TabBar是否顶部固定
-     * @en Whether the TabBar is fixed on the top
+     * TabBar是否顶部/底部固定（含 placeholder），可传入具体固定的值
+     * @en Whether the TabBar is fixed on the top or bottom (including placeholder), a specific fixed value can be passed in
      */
-    tabBarFixed?: boolean;
+    tabBarFixed?: boolean | Pick<CSSProperties, 'top' | 'bottom'>;
     /**
      * tabBar额外渲染内容
      * @en TabBar extra render content