@arco-design/mobile-react 2.27.0 → 2.27.2

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.27.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.27.1...@arco-design/mobile-react@2.27.2) (2023-05-10)
+
+
+### Bug Fixes
+
+* `LoadMore` status reset time for controlled mode ([#121](https://github.com/arco-design/arco-design-mobile/issues/121)) ([f141e7f](https://github.com/arco-design/arco-design-mobile/commit/f141e7f8e91944f5d68bb5fbf59238d5d48b8eda))
+* `NavBar` fix warning in nextjs ssr ([#118](https://github.com/arco-design/arco-design-mobile/issues/118)) ([57c2838](https://github.com/arco-design/arco-design-mobile/commit/57c283852f26e06fb4d38dc8753cff7a34232a98))
+* `ShowMonitor` support observer singleton ([#113](https://github.com/arco-design/arco-design-mobile/issues/113)) ([7099b30](https://github.com/arco-design/arco-design-mobile/commit/7099b307935357e496b902f6148ea0854da2912a))
+* `SwipeLoad` support bounce animate ([#29](https://github.com/arco-design/arco-design-mobile/issues/29)) ([cad1a6b](https://github.com/arco-design/arco-design-mobile/commit/cad1a6ba19e6d45a33233281fba863434f553ce2))
+* `Tabs` enable auto scroll when activeTab changed in scroll mode ([#116](https://github.com/arco-design/arco-design-mobile/issues/116)) ([07374f1](https://github.com/arco-design/arco-design-mobile/commit/07374f105f99418d447fc494c90d99d876601f9b))
+
+
+
+
+
+## [2.27.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.27.0...@arco-design/mobile-react@2.27.1) (2023-04-26)
+
+
+### Bug Fixes
+
+* `IndexBar` modify utils deps ([#115](https://github.com/arco-design/arco-design-mobile/issues/115)) ([b322d71](https://github.com/arco-design/arco-design-mobile/commit/b322d716e8dc6a107afb2a8b84edfcc0f5daddc2))
+
+
+
+
+
 # [2.27.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.26.0...@arco-design/mobile-react@2.27.0) (2023-04-25)
 
 

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.26.0/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.26.0/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.27.1/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.27.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.26.0/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.26.0/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.27.1/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.27.1/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/_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/cjs/_helpers/index.js

@@ -5,10 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 var _exportNames = {
   getStyleWithVendor: true,
+  setStyleWithVendor: true,
   getDefaultValue: true
 };
 exports.getDefaultValue = void 0;
 exports.getStyleWithVendor = getStyleWithVendor;
+exports.setStyleWithVendor = setStyleWithVendor;
 
 var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -55,6 +57,14 @@ function getStyleWithVendor(style) {
   }, {});
   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/cjs/index-bar/index.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _mobileUtils = require("@arco-design/mobile-utils");
 
-var _utils = require("@arco-design/mobile-utils/utils");
-
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -21,7 +19,7 @@ var _group = require("./group");
 
 var _sideBar = require("./side-bar");
 
-var _utils2 = require("./utils");
+var _utils = require("./utils");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -56,7 +54,7 @@ var IndexBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var containerRef = (0, _react.useRef)(null); // 过滤掉jsx写法中，奇怪的child
 
-  var formatChildren = (0, _utils2.filterValidIndexBarChild)(children); // 所有的索引内容，优先从props.groups中获取，再从formatChildren中获取
+  var formatChildren = (0, _utils.filterValidIndexBarChild)(children); // 所有的索引内容，优先从props.groups中获取，再从formatChildren中获取
 
   var indexes = (0, _react.useMemo)(function () {
     if (groups.length) {
@@ -95,7 +93,7 @@ var IndexBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var handleChangeActiveIndex = function handleChangeActiveIndex(index, type) {
     setActiveIndex(function (oldActiveIndex) {
-      var newActiveIndex = (0, _utils2.getFormatIndex)(index, oldActiveIndex); // 和上一次激活的acitveIndex不同，再触发onChange事件
+      var newActiveIndex = (0, _utils.getFormatIndex)(index, oldActiveIndex); // 和上一次激活的acitveIndex不同，再触发onChange事件
 
       if (newActiveIndex !== oldActiveIndex) {
         onChange == null ? void 0 : onChange(newActiveIndex, type);
@@ -115,12 +113,12 @@ var IndexBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var formatIndex = index != null ? index : indexes == null ? void 0 : indexes[0];
     var containerDom = containerRef.current;
 
-    if (!(0, _utils2.isValidIndex)(index) || !containerDom) {
+    if (!(0, _utils.isValidIndex)(index) || !containerDom) {
       return;
     } // 寻找Index对应的groupDom
 
 
-    var groupDom = (0, _utils2.getGroupDomFromIndex)(containerDom, formatIndex);
+    var groupDom = (0, _utils.getGroupDomFromIndex)(containerDom, formatIndex);
 
     if (groupDom) {
       handleChangeActiveIndex(formatIndex, type);
@@ -136,7 +134,7 @@ var IndexBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       }
 
       if (duration > 0) {
-        (0, _utils.scrollWithAnimation)(containerDom.scrollTop, targetScrollTop, function (top) {
+        (0, _mobileUtils.scrollWithAnimation)(containerDom.scrollTop, targetScrollTop, function (top) {
           return containerDom.scrollTop = top;
         }, duration, scrollBezier);
       } else {
@@ -149,7 +147,7 @@ var IndexBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return {
       dom: domRef.current,
       scrollToIndex: function scrollToIndex(index, rightNow) {
-        if ((0, _utils2.isValidIndex)(index)) {
+        if ((0, _utils.isValidIndex)(index)) {
           handleScrollIntoIndex({
             index: index,
             rightNow: rightNow,

package/cjs/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/cjs/load-more/index.js

@@ -75,11 +75,14 @@ var LoadMore = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
     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/cjs/nav-bar/index.js

@@ -146,7 +146,7 @@ var NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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
       } : {}),
@@ -155,7 +155,7 @@ var NavBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, /*#__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/cjs/show-monitor/index.js

@@ -31,6 +31,18 @@ var wrapperNodeList = [];
 
 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 是否进入视口或离开视口。
@@ -78,12 +90,6 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
    */
 
   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
@@ -130,10 +136,8 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
        * @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;
 
@@ -197,7 +201,7 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
      */
 
 
-    curVisible !== preVisible.current && handleCheckChildrenExist() && onCompVisibleChange(curVisible, node);
+    curVisible !== preVisible && handleCheckChildrenExist() && onCompVisibleChange(curVisible, node);
     var key = wrapperKey.current;
     /**
      * 监听一次后加入 pendingList 队列，随后被 listeners 过滤掉
@@ -213,8 +217,7 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
      */
 
 
-    curVisible && !preVisible.current && compOnce && onOnceEmittedListeners[key].push(component);
-    preVisible.current = curVisible;
+    curVisible && !preVisible && compOnce && onOnceEmittedListeners[key].push(component);
   }
 
   var checkVisibleHandler = (0, _react.useCallback)(function () {
@@ -234,22 +237,98 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
 
   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变化时，重新监听元素
@@ -259,14 +338,11 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   (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并删除
@@ -330,12 +406,12 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           rootMargin = offset + "px";
         }
 
-        io.current = new IntersectionObserver(handleObserverStatusChange, {
+        getIOSingleton({
           root: root,
           rootMargin: rootMargin,
           threshold: threshold
         });
-        !disabled && io.current.observe(domRef.current);
+        !disabled && ioObserve();
       }
     } else {
       // 节流后回调函数
@@ -379,7 +455,7 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
       listener.current = {
         node: domRef.current,
-        isVisible: isVisible,
+        isVisible: false,
         overflow: overflow,
         once: once,
         offset: offset,
@@ -396,9 +472,7 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (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/cjs/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/cjs/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);