@arco-design/mobile-react 2.29.0 → 2.29.2

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.29.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.29.1...@arco-design/mobile-react@2.29.2) (2023-08-28)
+
+
+### Bug Fixes
+
+* `LoadMore` support the prop "disabled" ([b1881b2](https://github.com/arco-design/arco-design-mobile/commit/b1881b2821debb3b94c66285d712e8f7522e6be7))
+* `Tabs` the prop "tabBarFixed" supports passing in specific fixed values ([ae3158f](https://github.com/arco-design/arco-design-mobile/commit/ae3158f7f7d5d1eebca8921d6d4802aa53b31fbe))
+
+
+
+
+
+## [2.29.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.29.0...@arco-design/mobile-react@2.29.1) (2023-08-21)
+
+
+### Bug Fixes
+
+* fix wrong logic after click clear icon of `Input`, `Textarea` and `SearchBar` ([#156](https://github.com/arco-design/arco-design-mobile/issues/156)) ([b741263](https://github.com/arco-design/arco-design-mobile/commit/b741263fd1a1b9c3da9c106f7487714e33e042f2))
+
+
+
+
+
 # [2.29.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.28.2...@arco-design/mobile-react@2.29.0) (2023-08-17)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.28.2/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.28.2/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.1/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.29.1/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.28.2/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.28.2/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.29.1/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.29.1/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/input/hooks.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.useInputLogic = useInputLogic;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _mobileUtils = require("@arco-design/mobile-utils");
@@ -62,23 +64,6 @@ function useInputLogic(props, inputRef) {
       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],
@@ -178,28 +163,24 @@ function useInputLogic(props, inputRef) {
   }
 
   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) {
@@ -230,10 +211,17 @@ 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();
+        (0, _mobileUtils.nextTick)(function () {
+          inputRef.current && inputRef.current.focus();
+        });
       }
     });
   }
@@ -243,6 +231,12 @@ 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.default.createElement("div", {
       role: "search",
       className: prefixCls + "-container all-border-box " + (className || ''),
@@ -262,10 +256,9 @@ function useInputLogic(props, inputRef) {
       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/cjs/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/cjs/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/cjs/load-more/index.js

@@ -31,6 +31,7 @@ var LoadMore = /*#__PURE__*/(0, _react.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,
@@ -65,11 +66,16 @@ var LoadMore = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   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;
     }
@@ -94,12 +100,12 @@ var LoadMore = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }, [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);
 
@@ -120,7 +126,7 @@ var LoadMore = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     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) {
@@ -134,7 +140,7 @@ var LoadMore = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         binded.removeEventListener('scroll', scrollFunc);
       }
     };
-  }, [trigger, getScrollContainer, handleContainerScroll, throttle]);
+  }, [trigger, disabled, getScrollContainer, handleContainerScroll, throttle]);
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       dom: domRef.current,
@@ -187,11 +193,13 @@ var LoadMore = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
 
   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/cjs/tabs/tab-cell.js

@@ -378,7 +378,8 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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/cjs/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/dist/index.js

@@ -941,7 +941,7 @@
       try {
         var u = navigator.userAgent;
         var android = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
-        var ios = u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) || u.indexOf('Mac OS X') > -1;
+        var ios = u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
         var pc = !android && !ios;
         var system = android ? 'android' : 'ios';
         return pc ? 'pc' : system;
@@ -4307,7 +4307,8 @@
           fixed: tabBarFixed
         }, {
           'has-divider': hasDivider
-        })
+        }),
+        style: typeof tabBarFixed === 'object' ? tabBarFixed : {}
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: cls(prefix + "-container", tabDirection, "pos-" + tabBarPosition, "arrange-" + (originArrange || tabBarArrange), "type-" + type, {
           overflow: hasOverflow
@@ -5842,6 +5843,7 @@
       var _a = props.className,
           className = _a === void 0 ? '' : _a,
           style = props.style,
+          disabled = props.disabled,
           beforeReadyArea = props.beforeReadyArea,
           loadingArea = props.loadingArea,
           noMoreArea = props.noMoreArea,
@@ -5876,11 +5878,16 @@
       var lastScrollEndRef = React.useRef(false);
       var nowStatus = status || innerStatus;
       var statusRef = React.useRef(nowStatus);
+      var disabledRef = useLatestRef(disabled);
       var changeStatus = React.useCallback(function (st, scene) {
         setInnerStatus(st);
         onStatusChange && onStatusChange(st, scene);
       }, [onStatusChange]);
       var triggerGetData = React.useCallback(function (scene) {
+        if (disabledRef.current) {
+          return;
+        }
+
         if (blockWhenLoading && statusRef.current === 'loading') {
           return;
         }
@@ -5905,12 +5912,12 @@
         }
       }, [nowStatus]);
       React.useEffect(function () {
-        if (requestAtFirst) {
+        if (requestAtFirst && !disabled) {
           if (statusRef.current === 'prepare') {
             triggerGetData('requestAtFirst');
           }
         }
-      }, [trigger]);
+      }, [trigger, disabled]);
       var handleContainerScroll = React.useCallback(function () {
         var scrollTop = getScrollContainerAttribute('scrollTop', getScrollContainer);
 
@@ -5931,7 +5938,7 @@
         var binded = null;
         var scrollFunc = throttle ? lodash_throttle(handleContainerScroll, throttle) : handleContainerScroll;
 
-        if (trigger === 'scroll') {
+        if (trigger === 'scroll' && !disabled) {
           var container = getValidScrollContainer(getScrollContainer);
 
           if (container) {
@@ -5945,7 +5952,7 @@
             binded.removeEventListener('scroll', scrollFunc);
           }
         };
-      }, [trigger, getScrollContainer, handleContainerScroll, throttle]);
+      }, [trigger, disabled, getScrollContainer, handleContainerScroll, throttle]);
       React.useImperativeHandle(ref, function () {
         return {
           dom: domRef.current,
@@ -5998,11 +6005,13 @@
       }
 
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
+        var _b;
+
         var prefixCls = _a.prefixCls,
-            _b = _a.locale,
-            locale = _b === void 0 ? defaultLocale : _b;
+            _c = _a.locale,
+            locale = _c === void 0 ? defaultLocale : _c;
         return /*#__PURE__*/React__default["default"].createElement("div", {
-          className: prefixCls + "-load-more status-" + nowStatus + " " + className,
+          className: cls(prefixCls + "-load-more status-" + nowStatus, className, (_b = {}, _b[prefixCls + "-load-more-disabled"] = disabled, _b)),
           ref: domRef,
           style: style,
           onClick: handleClick
@@ -17316,7 +17325,7 @@
     var index$h = componentWrapper(ImagePicker, 'ImagePicker');
 
     /*!
-    * @arco-design/transformable v1.0.2
+    * @arco-design/transformable v1.0.1
     * (c) 2022 ludan.kibbon
     */
     function _defineProperty(obj, key, value) {
@@ -21029,23 +21038,6 @@
           toggleClear = _f[1];
 
       var compositingRef = 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 _g = React.useState(false),
           isFocusing = _g[0],
@@ -21145,28 +21137,24 @@
       }
 
       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) {
@@ -21197,10 +21185,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();
+            nextTick(function () {
+              inputRef.current && inputRef.current.focus();
+            });
           }
         });
       }
@@ -21210,6 +21205,12 @@
       }
 
       function renderWrapper(prefixCls, type, children) {
+        var _a; // 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 = (_a = {}, _a[system === 'pc' ? 'onMouseDown' : 'onTouchEnd'] = handleClear, _a);
         return /*#__PURE__*/React__default["default"].createElement("div", {
           role: "search",
           className: prefixCls + "-container all-border-box " + (className || ''),
@@ -21229,10 +21230,9 @@
           className: cls(prefixCls + "-label", {
             required: required
           })
-        }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/React__default["default"].createElement("div", {
-          className: prefixCls + "-clear",
-          onClick: handleClear
-        }, clearIcon) : null, suffix ? /*#__PURE__*/React__default["default"].createElement("div", {
+        }, label) : prefix) : null, children, clearable && showClear ? /*#__PURE__*/React__default["default"].createElement("div", __assign$2({
+          className: prefixCls + "-clear"
+        }, clearEvent), clearIcon) : null, suffix ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: prefixCls + "-suffix"
         }, suffix) : null), renderPendNode(append));
       }