@arco-design/mobile-react 2.27.1 → 2.27.3

package/esm/tabs/tab-pane.js

@@ -34,6 +34,7 @@ var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
       translateZ = props.translateZ,
       fullScreen = props.fullScreen,
       autoHeight = props.autoHeight,
+      swipeEnergySaving = props.swipeEnergySaving,
       changeIndex = props.changeIndex,
       onScroll = props.onScroll;
   var domRef = useRef(null);
@@ -45,12 +46,16 @@ var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
       shownIndexes = _useState[0],
       setShownIndexes = _useState[1];
 
+  var _useState2 = useState(activeIndex),
+      shownActiveIndex = _useState2[0],
+      setShownActiveIndex = _useState2[1];
+
   var prefix = prefixCls + "-tab-pane";
   var handleTouchEnd = swipeable ? handlePaneTouchEnd : void 0;
 
-  var _useState2 = useState('auto'),
-      currentPaneHeight = _useState2[0],
-      setCurrentPaneHeight = _useState2[1];
+  var _useState3 = useState('auto'),
+      currentPaneHeight = _useState3[0],
+      setCurrentPaneHeight = _useState3[1];
 
   useImperativeHandle(ref, function () {
     return {
@@ -136,6 +141,8 @@ var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
   }
 
   function calcShownIndexes() {
+    setShownActiveIndex(activeIndex);
+
     if (typeof lazyloadCount === 'number') {
       setShownIndexes([activeIndex - lazyloadCount, activeIndex + lazyloadCount]);
       return;
@@ -236,11 +243,35 @@ var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
     var heightStyle = currentPaneHeight && currentPaneHeight !== 'auto' ? {
       height: currentPaneHeight
     } : {};
-    return getStyleWithVendor(_extends({}, sizeStyle, {
+    return getStyleWithVendor(_extends({}, swipeEnergySaving ? {} : sizeStyle, {
       transitionDuration: getTransition() + "ms"
     }, heightStyle, commonStyle));
   }
 
+  function getEnergySavingPaneStyle(index) {
+    if (mode === 'scroll' || !swipeEnergySaving) {
+      return undefined;
+    }
+
+    if (index !== shownActiveIndex) {
+      return {
+        position: 'absolute',
+        left: '-100%',
+        top: '-100%'
+      };
+    }
+
+    var translateStr = translateZ ? ' translateZ(0)' : '';
+    var sizeStyle = tabDirection === 'vertical' ? {
+      transform: "translateX(" + (distance - wrapWidth * (activeIndex - index)) + "px)" + translateStr
+    } : {
+      transform: "translateY(" + (distance - wrapHeight * (activeIndex - index)) + "px)" + translateStr
+    };
+    return getStyleWithVendor(_extends({}, sizeStyle, {
+      transitionDuration: getTransition() + "ms"
+    }));
+  }
+
   function renderContent(pane, index) {
     var contentProps = {
       key: index,
@@ -250,32 +281,39 @@ var TabPane = /*#__PURE__*/forwardRef(function (props, ref) {
       ref: function ref(r) {
         return panesRef.current[index] = r;
       }
-    }; // 是滚动模式或在加载范围内，直接渲染
+    };
+    var energySavingStyle = getEnergySavingPaneStyle(index); // 是滚动模式或在加载范围内，直接渲染
     // @en Render directly when in scroll mode or in loading scope
 
     if (mode === 'scroll' || index >= shownIndexes[0] && index <= shownIndexes[1]) {
-      return /*#__PURE__*/React.createElement("div", contentProps, pane);
-    } // 不在加载范围内，视renderHideContent和hideContentStyle情况而定
+      return /*#__PURE__*/React.createElement("div", _extends({}, contentProps, {
+        style: energySavingStyle
+      }), pane);
+    }
+
+    var energySavingHideStyle = _extends({}, energySavingStyle, hideContentStyle || {}); // 不在加载范围内，视renderHideContent和hideContentStyle情况而定
     // @en Not in the loading range, depending on renderHideContent and hideContentStyle
 
 
     if (renderHideContent) {
       return /*#__PURE__*/React.createElement("div", _extends({}, contentProps, {
-        style: hideContentStyle || {}
+        style: energySavingHideStyle
       }), renderHideContent(index, pane));
     }
 
     if (hideContentStyle === null) {
-      return /*#__PURE__*/React.createElement("div", contentProps);
+      return /*#__PURE__*/React.createElement("div", _extends({}, contentProps, {
+        style: energySavingStyle
+      }));
     }
 
     return /*#__PURE__*/React.createElement("div", _extends({}, contentProps, {
-      style: hideContentStyle
+      style: energySavingHideStyle
     }), pane);
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: cls(prefix + "-container", tabDirection, "mode-" + mode, tabPaneClass, {
+    className: cls(prefix + "-container", tabDirection, swipeEnergySaving ? "mode-" + mode + "-energy-saving" : "mode-" + mode, tabPaneClass, {
       'full-screen': fullScreen
     }, (_cls = {}, _cls["mode-scroll-" + (scrollVertical ? 'vertical' : 'horizontal')] = mode === 'scroll', _cls)),
     style: getPaneStyle(),

package/esm/tabs/type.d.ts

@@ -322,6 +322,12 @@ export interface TabsProps {
      * @default true
      */
     translateZ?: boolean;
+    /**
+     * 是否启用滑动节能模式，开启后TabPane外层容器不会随panes数量撑开并提升为合成层，仅滑动当前选中的pane，其他pane在选中前将被隐藏
+     * @en Whether to enable the energy-saving sliding mode. After opening, the outer container of the TabPane will not expand with the number of panes and be promoted to a composite layer. Only the currently selected pane will be slid, and other panes will be hidden before being selected.
+     * @default false
+     */
+    swipeEnergySaving?: boolean;
     /**
      * 当滑到第一页或最后一页，还想再滑动时触发
      * @en Triggered when swiping to the first or last page and want to swipe again
@@ -560,7 +566,7 @@ export interface TabCellRef {
      */
     resetUnderlineStyle: () => void;
 }
-export interface TabPaneProps extends Pick<TabsProps, 'duration' | 'transitionDuration' | 'lazyloadCount' | 'hideContentStyle' | 'renderHideContent' | 'mode' | 'tabPaneClass' | 'tabPaneStyle' | 'tabPaneExtra' | 'getScrollContainer' | 'scrollThrottle' | 'scrollOffset' | 'goLastWhenScrollBottom' | 'scrollVertical' | 'translateZ' | 'fullScreen' | 'autoHeight' | 'onScroll'> {
+export interface TabPaneProps extends Pick<TabsProps, 'duration' | 'transitionDuration' | 'lazyloadCount' | 'hideContentStyle' | 'renderHideContent' | 'mode' | 'tabPaneClass' | 'tabPaneStyle' | 'tabPaneExtra' | 'getScrollContainer' | 'scrollThrottle' | 'scrollOffset' | 'goLastWhenScrollBottom' | 'scrollVertical' | 'translateZ' | 'fullScreen' | 'autoHeight' | 'onScroll' | 'swipeEnergySaving'> {
     prefixCls?: string;
     panes: ReactNodeArray;
     activeIndex: number;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.27.1",
+    "version": "2.27.3",
     "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.15.1",
+        "@arco-design/mobile-utils": "2.15.3",
         "@arco-design/transformable": "^1.0.0",
         "lodash.throttle": "^4.1.1",
         "resize-observer-polyfill": "^1.5.1"
@@ -35,5 +35,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "9c06acb2cc9341ee12843d1720e9b796cbbc2ac5"
+    "gitHead": "0898d28c77d803b648e4c4e48ac7c9969ad161f0"
 }

package/umd/_helpers/index.d.ts

@@ -7,6 +7,7 @@ export * from './hooks';
 export * from './type';
 export * from './react-dom';
 export declare function getStyleWithVendor(style: CSSProperties): CSSProperties;
+export declare function setStyleWithVendor(dom: HTMLElement, style: CSSProperties): void;
 /**
  * 计算默认值，仅未定义时使用默认值
  * @desc {en} Calculate the default value, use default value only if undefined

package/umd/_helpers/index.js

@@ -18,10 +18,12 @@
   _exports.__esModule = true;
   var _exportNames = {
     getStyleWithVendor: true,
+    setStyleWithVendor: true,
     getDefaultValue: true
   };
   _exports.getDefaultValue = void 0;
   _exports.getStyleWithVendor = getStyleWithVendor;
+  _exports.setStyleWithVendor = setStyleWithVendor;
   _extends3 = _interopRequireDefault(_extends3);
   Object.keys(_hooks).forEach(function (key) {
     if (key === "default" || key === "__esModule") return;
@@ -58,6 +60,14 @@
     }, {});
     return newStyle;
   }
+
+  function setStyleWithVendor(dom, style) {
+    var vendorStyle = getStyleWithVendor(style);
+
+    for (var key in vendorStyle) {
+      dom.style[key] = vendorStyle[key];
+    }
+  }
   /**
    * 计算默认值，仅未定义时使用默认值
    * @desc {en} Calculate the default value, use default value only if undefined

package/umd/index-bar/type.d.ts

@@ -9,7 +9,7 @@ export interface IndexBarBaseData {
      */
     content: ReactNode;
 }
-interface IndexBarGroupItem<Data extends IndexBarBaseData> {
+interface IndexBarGroupItem<Data extends IndexBarBaseData = IndexBarBaseData> {
     /**
      * IndexBarGroup对应的索引
      * @en Index corresponding to IndexBarGroup
@@ -39,7 +39,7 @@ export interface IndexBarSideBarProps {
     renderSideBar?: (Content: ReactNode) => ReactElement;
     renderTip?: (index: IndexBarIndexType) => ReactNode;
 }
-export interface IndexBarGroupProps<Data extends IndexBarBaseData> extends IndexBarGroupItem<Data> {
+export interface IndexBarGroupProps<Data extends IndexBarBaseData = IndexBarBaseData> extends IndexBarGroupItem<Data> {
     /**
      * 自定义类名
      * @en Custom classname
@@ -78,7 +78,7 @@ export interface IndexBarGroupProps<Data extends IndexBarBaseData> extends Index
 }
 export interface IndexBarGroupRef extends BaseRef {
 }
-export interface IndexBarProps<Data extends IndexBarBaseData> {
+export interface IndexBarProps<Data extends IndexBarBaseData = IndexBarBaseData> {
     /**
      * 自定义类名
      * @en Custom classname

package/umd/load-more/index.js

@@ -80,11 +80,14 @@
 
       changeStatus('loading', scene);
       getData == null ? void 0 : getData(function (st) {
-        lastScrollEndRef.current = false;
         changeStatus(st, 'manual');
       });
     }, [blockWhenLoading, changeStatus, getData]);
     (0, _react.useEffect)(function () {
+      if (!blockWhenLoading || nowStatus !== 'loading') {
+        lastScrollEndRef.current = false;
+      }
+
       statusRef.current = nowStatus;
     }, [nowStatus]);
     (0, _helpers.useUpdateEffect)(function () {

package/umd/nav-bar/index.js

@@ -150,7 +150,7 @@
         ref: navBarRef,
         className: (0, _mobileUtils.cls)(wrapClass, prefixCls + "-nav-bar", (_cls = {}, _cls[prefixCls + "-nav-bar-fixed"] = fixed, _cls[prefixCls + "-nav-bar-float"] = !placeholder, _cls[prefixCls + "-nav-bar-hide"] = scrollToggleHide, _cls)),
         style: (0, _extends2.default)({
-          paddingTop: fixed && statusBarHeight ? statusBarHeight + "px" : ''
+          paddingTop: fixed && statusBarHeight ? statusBarHeight + "px" : '0px'
         }, style || {}, relBackground ? {
           background: relBackground
         } : {}),
@@ -159,7 +159,7 @@
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _mobileUtils.cls)(className, system, prefixCls + "-nav-bar-wrapper", (_cls2 = {}, _cls2[prefixCls + "-nav-bar-wrapper-fixed"] = fixed, _cls2[prefixCls + "-nav-bar-wrapper-border"] = hasBottomLine, _cls2)),
         style: (0, _extends2.default)({
-          paddingTop: statusBarHeight ? statusBarHeight + "px" : ''
+          paddingTop: statusBarHeight ? statusBarHeight + "px" : '0px'
         }, customStyle)
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: prefixCls + "-nav-bar-inner all-border-box"

package/umd/show-monitor/index.js

@@ -38,6 +38,18 @@
 
   var listeners = {};
   var onOnceEmittedListeners = {};
+  /**
+   * Intersection Observer 同一 root 节点下的监听队列
+   * @en Intersection Observer Listening queue under the same root node
+   */
+
+  var ioListeners = [];
+  /**
+   * Intersection Observer 监听 visible 状态队列
+   * @en Intersection Observer listens to the visible status queue
+   */
+
+  var ioVisibleList = [];
   var throttlingVisibleChange;
   /**
    * 通过滚动事件监测 children 是否进入视口或离开视口。
@@ -85,12 +97,6 @@
      */
 
     var domRefParent = (0, _react.useRef)(null);
-    /**
-     * 当前元素是否在可视区域内
-     * @en Whether the current element is in the visible area
-     */
-
-    var isVisible = (0, _react.useRef)(false);
     /**
      * 保存当前节点信息，类似于 class component 中 this
      * @en Save current node information, similar to this in class component
@@ -137,10 +143,8 @@
          * @en Reset the initial visible state of the element to false, and re-detect the visibility of the element, the priority is lower than 'disabled'(Usually used to re-listen when elements inside ShowMonitor change)
          */
         flushVisibleStatus: function flushVisibleStatus() {
-          isVisible.current = false;
-
-          if (isSupportNativeApi && io.current && domRef.current) {
-            disabled ? io.current.unobserve(domRef.current) : io.current.observe(domRef.current);
+          if (isSupportNativeApi) {
+            disabled ? ioUnobserve() : ioObserve();
           } else if (listener.current) {
             var _key = wrapperKey.current;
 
@@ -204,7 +208,7 @@
        */
 
 
-      curVisible !== preVisible.current && handleCheckChildrenExist() && onCompVisibleChange(curVisible, node);
+      curVisible !== preVisible && handleCheckChildrenExist() && onCompVisibleChange(curVisible, node);
       var key = wrapperKey.current;
       /**
        * 监听一次后加入 pendingList 队列，随后被 listeners 过滤掉
@@ -220,8 +224,7 @@
        */
 
 
-      curVisible && !preVisible.current && compOnce && onOnceEmittedListeners[key].push(component);
-      preVisible.current = curVisible;
+      curVisible && !preVisible && compOnce && onOnceEmittedListeners[key].push(component);
     }
 
     var checkVisibleHandler = (0, _react.useCallback)(function () {
@@ -241,22 +244,98 @@
     }
 
     function handleObserverStatusChange(entries) {
-      var _io$current;
+      entries.forEach(function (entry) {
+        var isIntersecting = entry.isIntersecting,
+            target = entry.target;
+        var visibleItem = ioVisibleList.find(function (item) {
+          return item.node === target;
+        });
 
-      var isIntersecting = entries[0].isIntersecting;
-      /**
-       * 当前元素 visible 对比之前发生改变，触发回调函数
-       * @en Callback when the visible status of current element changes before the comparison
-       */
+        if (visibleItem) {
+          var curVisible = visibleItem.isVisible,
+              onCompVisibleChange = visibleItem.onVisibleChange,
+              onceEmit = visibleItem.once;
+          /**
+           * 当前元素 visible 对比之前发生改变，触发回调函数
+           * @en Callback when the visible status of current element changes before the comparison
+           */
+
+          isIntersecting !== curVisible && handleCheckChildrenExist() && onCompVisibleChange(isIntersecting, target);
+          /**
+           * 当前元素状态由不可见变为可见，且只触发一次
+           * @en The current element is invisible -> visible, and once, triggers the callback
+           */
+
+          isIntersecting && !curVisible && onceEmit && target && ioUnobserve(target);
+          visibleItem.isVisible = isIntersecting;
+        }
+      });
+    }
+    /**
+     * 获取 io 单例
+     * @en Get the io singleton
+     */
 
-      isIntersecting !== isVisible.current && handleCheckChildrenExist() && onVisibleChange(isIntersecting, domRef.current);
-      /**
-       * 当前元素不可见 -> 可见，且 once, 触发回调函数
-       * @en The current element is invisible -> visible, and once, triggers the callback
-       */
 
-      isIntersecting && !isVisible.current && once && domRef.current && ((_io$current = io.current) == null ? void 0 : _io$current.unobserve(domRef.current));
-      isVisible.current = isIntersecting;
+    function getIOSingleton(ioOptions) {
+      var root = ioOptions.root,
+          rootMargin = ioOptions.rootMargin,
+          ioThreshold = ioOptions.threshold;
+      var ioKey = JSON.stringify({
+        rootMargin: rootMargin,
+        threshold: ioThreshold
+      });
+
+      var _ioListener = ioListeners.find(function (ioListener) {
+        return ioListener.root === root && ioListener.key === ioKey;
+      });
+
+      if (!_ioListener) {
+        ioListeners.push({
+          root: root,
+          key: ioKey,
+          listener: io.current = new IntersectionObserver(handleObserverStatusChange, ioOptions)
+        });
+      } else {
+        io.current = _ioListener.listener;
+      }
+    }
+
+    function ioObserve() {
+      if (domRef.current && io.current) {
+        var curIdx = ioVisibleList.findIndex(function (ioVisibleItem) {
+          return ioVisibleItem.node === domRef.current;
+        });
+
+        if (curIdx !== -1) {
+          ioVisibleList[curIdx].isVisible = false;
+        } else {
+          ioVisibleList.push({
+            node: domRef.current,
+            isVisible: false,
+            once: once,
+            onVisibleChange: onVisibleChange
+          });
+        }
+
+        io.current.observe(domRef.current);
+      }
+    }
+
+    function ioUnobserve(target) {
+      var targetNode = target || domRef.current;
+
+      if (io.current && targetNode) {
+        var curIdx = ioVisibleList.findIndex(function (ioVisibleItem) {
+          return ioVisibleItem.node === targetNode;
+        });
+
+        if (curIdx !== -1) {
+          ioVisibleList.splice(curIdx, 1);
+        }
+
+        io.current.unobserve(targetNode);
+      }
     }
     /**
      * 非首次下disabled变化时，重新监听元素
@@ -266,14 +345,11 @@
 
     (0, _react.useEffect)(function () {
       if (isSupportNativeApi) {
-        // 非首次下
+        // 非首次 render 下
         // @en Not for the first time
-        if (io.current && domRef.current) {
-          // 禁用监听 || 监听
-          disabled ? io.current.unobserve(domRef.current) : io.current.observe(domRef.current);
-        }
+        disabled ? ioUnobserve() : ioObserve();
       } else {
-        // 非首次下
+        // 非首次 render 下
         // @en Not for the first time
         if (wrapperKey.current !== -1 && listener.current && listeners[wrapperKey.current]) {
           // 禁用监听，找到对应listener并删除
@@ -337,12 +413,12 @@
             rootMargin = offset + "px";
           }
 
-          io.current = new IntersectionObserver(handleObserverStatusChange, {
+          getIOSingleton({
             root: root,
             rootMargin: rootMargin,
             threshold: threshold
           });
-          !disabled && io.current.observe(domRef.current);
+          !disabled && ioObserve();
         }
       } else {
         // 节流后回调函数
@@ -386,7 +462,7 @@
 
         listener.current = {
           node: domRef.current,
-          isVisible: isVisible,
+          isVisible: false,
           overflow: overflow,
           once: once,
           offset: offset,
@@ -403,9 +479,7 @@
     (0, _react.useEffect)(function () {
       return function () {
         if (isSupportNativeApi) {
-          var _io$current2;
-
-          domRef.current && ((_io$current2 = io.current) == null ? void 0 : _io$current2.unobserve(domRef.current));
+          ioUnobserve();
         } else {
           if (overflow) {
             var parent = domRefParent.current;

package/umd/swipe-load/demo/style/css/mobile.css

@@ -2,6 +2,9 @@
   width: 100%;
   background:  #e5e6eb ;
 }
+#demo-swipe-load .list-container::-webkit-scrollbar {
+  display: none;
+}
 #demo-swipe-load .course-list {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;

package/umd/swipe-load/demo/style/mobile.less

@@ -4,36 +4,47 @@
     .list-container {
         width: 100%;
         .use-var(background, line-color);
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
     }
+
     .course-list {
         display: inline-flex;
         align-items: flex-start;
         padding: 12px 0;
     }
+
     .list-item,
     .list-item-color {
         height: 72px;
         margin-right: 10px;
         .use-var(background, background-color);
     }
+
     .list-item-color {
         .use-var(background, primary-disabled-color);
     }
+
     .mylabel-start,
     .mylabel-end {
         width: 100px;
         height: 96px;
         transition: background 0.2s;
         .use-var(background, background-color);
+
         &.end {
             .use-var(background, line-color);
         }
     }
+
     .mylabel-single {
         width: 100px;
         height: 88px;
         .use-var(background, primary-disabled-color);
     }
+
     .single-element {
         height: 88px;
         .use-var(background, primary-disabled-color);