@arco-design/mobile-react 2.21.3 → 2.22.2

package/dist/index.js

@@ -60,7 +60,7 @@
     function isArray(obj) {
       return opt.call(obj) === '[object Array]';
     }
-    function isObject$1(obj) {
+    function isObject$2(obj) {
       return opt.call(obj) === '[object Object]';
     }
     function isString(obj) {
@@ -91,7 +91,7 @@
           classNames.push(v);
         } else if (isArray(v)) {
           classNames = classNames.concat(v);
-        } else if (isObject$1(v)) {
+        } else if (isObject$2(v)) {
           Object.keys(v).forEach(function (k) {
             if (v[k]) {
               classNames.push(k);
@@ -2494,6 +2494,64 @@
       };
     }
 
+    var _a;
+
+    function isObject$1(obj) {
+      return Object.prototype.toString.call(obj) === '[object Object]';
+    }
+
+    var __SECRET_INTERNALS__ = '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED';
+    var CopyReactDOM = ReactDOM__default["default"];
+    var copyRender;
+    var isReact18 = Number((_a = CopyReactDOM.version) === null || _a === void 0 ? void 0 : _a.split('.')[0]) > 17;
+
+    var updateUsingClientEntryPoint = function updateUsingClientEntryPoint(skipWarning) {
+      // https://github.com/facebook/react/blob/17806594cc28284fe195f918e8d77de3516848ec/packages/react-dom/npm/client.js#L10
+      // Avoid console warning
+      if (isObject$1(CopyReactDOM[__SECRET_INTERNALS__])) {
+        CopyReactDOM[__SECRET_INTERNALS__].usingClientEntryPoint = skipWarning;
+      }
+    };
+
+    var createRoot;
+
+    try {
+      createRoot = CopyReactDOM.createRoot;
+    } catch (_) {}
+
+    if (isReact18 && createRoot) {
+      copyRender = function copyRender(app, container) {
+        updateUsingClientEntryPoint(true);
+        var root = createRoot(container);
+        updateUsingClientEntryPoint(false);
+        root.render(app);
+
+        root._unmount = function () {
+          setTimeout(function () {
+            var _a;
+
+            (_a = root === null || root === void 0 ? void 0 : root.unmount) === null || _a === void 0 ? void 0 : _a.call(root);
+          });
+        };
+
+        return root;
+      };
+    } else {
+      copyRender = function copyRender(app, container) {
+        CopyReactDOM.render(app, container);
+        return {
+          render: function render(comment) {
+            CopyReactDOM.render(comment, container);
+          },
+          _unmount: function _unmount() {
+            CopyReactDOM.unmountComponentAtNode(container);
+          }
+        };
+      };
+    }
+
+    var render = copyRender;
+
     function getStyleWithVendor(style) {
       var allowReg = /(transform|transition|animation)/i;
       var newStyle = Object.keys(style).reduce(function (acc, key) {
@@ -2515,6 +2573,36 @@
       return value === void 0 ? defaultValue : value;
     };
 
+    var ReactDOMRender =
+    /** @class */
+    function () {
+      function ReactDOMRender(app, container) {
+        var _this = this;
+
+        this.render = function (props) {
+          var CustomApp = _this.app;
+
+          if (_this.root) {
+            _this.root.render( /*#__PURE__*/React__default["default"].createElement(CustomApp, __assign({}, props)));
+          } else {
+            _this.root = render( /*#__PURE__*/React__default["default"].createElement(CustomApp, __assign({}, props)), _this.container);
+          }
+        };
+
+        this.unmount = function () {
+          var _a;
+
+          (_a = _this.root) === null || _a === void 0 ? void 0 : _a._unmount();
+          _this.root = undefined;
+        };
+
+        this.app = app;
+        this.container = container;
+      }
+
+      return ReactDOMRender;
+    }();
+
     function getOpenMethod(Component, containerId, normalize) {
       if (normalize === void 0) {
         normalize = function normalize(config) {
@@ -2536,14 +2624,7 @@
         var id = "_" + (containerId || 'ARCO_MASKING') + "_DIV_" + (config.key || '') + "_";
         var div = appendElementById(id, baseProps.getContainer).child;
         var leaving = false;
-
-        function render(props) {
-          ReactDOM__default["default"].render( /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, props, {
-            getContainer: function getContainer() {
-              return div;
-            }
-          })), div);
-        }
+        var render = new ReactDOMRender(Component, div).render;
 
         function update(newConfig) {
           dynamicProps = __assign(__assign({}, dynamicProps), normalize(newConfig));
@@ -5203,16 +5284,16 @@
         var div = document.createElement('div');
         document.body.appendChild(div);
 
-        function render(props) {
-          ReactDOM__default["default"].render( /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, props)), div);
-        }
+        var _a = new ReactDOMRender(Component, div),
+            render = _a.render,
+            unmount = _a.unmount;
 
-        function destory() {
+        function destroy() {
           var onClose = config.onClose;
           onClose && onClose();
-          var unmountResult = ReactDOM__default["default"].unmountComponentAtNode(div);
+          unmount();
 
-          if (unmountResult && div.parentNode) {
+          if (div.parentNode) {
             div.parentNode.removeChild(div);
           }
         }
@@ -5222,7 +5303,7 @@
           getContainer: function getContainer() {
             return div;
           },
-          onClose: destory,
+          onClose: destroy,
           visible: false
         });
 
@@ -6788,7 +6869,8 @@
           renderTabBarInner = props.renderTabBarInner,
           tabBarStyle = props.tabBarStyle,
           tabBarClass = props.tabBarClass,
-          translateZ = props.translateZ;
+          translateZ = props.translateZ,
+          tabBarStopPropagation = props.tabBarStopPropagation;
       var prefix = prefixCls + "-tab-cell";
       var domRef = React.useRef(null);
       var underlineRef = React.useRef(null);
@@ -6880,13 +6962,13 @@
           return e.stopPropagation();
         };
 
-        if (isVertical && hasOverflow && domRef.current) {
+        if (isVertical && hasOverflow && domRef.current && tabBarStopPropagation) {
           domRef.current.addEventListener('touchstart', stopFunc);
           domRef.current.addEventListener('touchmove', stopFunc);
         }
 
         return function () {
-          if (isVertical && hasOverflow && domRef.current) {
+          if (isVertical && hasOverflow && domRef.current && tabBarStopPropagation) {
             domRef.current.removeEventListener('touchstart', stopFunc);
             domRef.current.removeEventListener('touchmove', stopFunc);
           }
@@ -7929,44 +8011,46 @@
           _4 = props.translateZ,
           translateZ = _4 === void 0 ? true : _4,
           fullScreen = props.fullScreen,
-          autoHeight = props.autoHeight;
+          autoHeight = props.autoHeight,
+          _5 = props.tabBarStopPropagation,
+          tabBarStopPropagation = _5 === void 0 ? true : _5;
       var domRef = React.useRef(null);
       var cellRef = React.useRef(null);
       var paneRef = React.useRef(null);
 
-      var _5 = React.useState(defaultActiveTab),
-          innerIndex = _5[0],
-          setInnerIndex = _5[1];
-
-      var _6 = React.useState(0),
-          jumpingDis = _6[0],
-          setJumpingDis = _6[1];
+      var _6 = React.useState(defaultActiveTab),
+          innerIndex = _6[0],
+          setInnerIndex = _6[1];
 
       var _7 = React.useState(0),
-          wrapWidth = _7[0],
-          setWrapWidth = _7[1];
+          jumpingDis = _7[0],
+          setJumpingDis = _7[1];
 
       var _8 = React.useState(0),
-          wrapHeight = _8[0],
-          setWrapHeight = _8[1];
+          wrapWidth = _8[0],
+          setWrapWidth = _8[1];
 
-      var _9 = React.useState(false),
-          cellTrans = _9[0],
-          setCellTrans = _9[1];
+      var _9 = React.useState(0),
+          wrapHeight = _9[0],
+          setWrapHeight = _9[1];
 
       var _10 = React.useState(false),
-          paneTrans = _10[0],
-          setPaneTrans = _10[1];
+          cellTrans = _10[0],
+          setCellTrans = _10[1];
+
+      var _11 = React.useState(false),
+          paneTrans = _11[0],
+          setPaneTrans = _11[1];
 
-      var _11 = useRefState(activeTab === void 0 ? innerIndex : activeTab),
-          activeIndex = _11[0],
-          activeIndexRef = _11[1],
-          setActiveIndex = _11[2];
+      var _12 = useRefState(activeTab === void 0 ? innerIndex : activeTab),
+          activeIndex = _12[0],
+          activeIndexRef = _12[1],
+          setActiveIndex = _12[2];
 
-      var _12 = useRefState(0),
-          distance = _12[0],
-          distanceRef = _12[1],
-          setDistance = _12[2];
+      var _13 = useRefState(0),
+          distance = _13[0],
+          distanceRef = _13[1],
+          setDistance = _13[2];
 
       var posAdjustingRef = React.useRef(false);
       var touchStartedRef = React.useRef(false);
@@ -7977,6 +8061,7 @@
       var touchStoppedRef = React.useRef(false);
       var changeFromRef = React.useRef('');
       var touchMoveBarScrollRef = React.useRef(false);
+      var system = useSystem();
       var allPanes = getAllPanes();
       var tabDirection = ['top', 'bottom'].indexOf(tabBarPosition) !== -1 ? 'vertical' : 'horizontal';
       var canSwipe = mode === 'swipe' && !disabled && swipeable && tabDirection === 'vertical' && tabs.length > 1;
@@ -8089,10 +8174,10 @@
 
         var evt = e.changedTouches[0];
         var touchMoveX = evt.clientX || 0;
-        var touchMoveY = evt.clientY || 0; // bugfix: 兼容safari在右滑返回上一页时clientX为负值的情况
+        var touchMoveY = evt.clientY || 0; // bugfix: 兼容safari在右滑返回上一页时clientX为负值的情况，安卓有折叠屏，触点会有超出屏幕(clientX < 0)的情况，因此这里限定ios系统
         // @en bugfix: bugfix: Compatible with the case in safari where clientX is negative when swiping right back to the previous page
 
-        var posDisX = touchMoveX < 0 ? 0 : touchMoveX - touchStartXRef.current;
+        var posDisX = system === 'ios' && touchMoveX < 0 ? 0 : touchMoveX - touchStartXRef.current;
         var posDisY = touchMoveY - touchStartYRef.current;
         var absDisX = Math.abs(posDisX);
         var absDisY = Math.abs(posDisY);
@@ -8282,7 +8367,8 @@
           renderTabBarItem: renderTabBarItem,
           renderTabBarInner: renderTabBarInner,
           tabBarStyle: tabBarStyle,
-          tabBarClass: tabBarClass
+          tabBarClass: tabBarClass,
+          tabBarStopPropagation: tabBarStopPropagation
         }, commonProps);
 
         var CellComp = /*#__PURE__*/React__default["default"].createElement(TabCell, __assign({}, cellProps));
@@ -14462,7 +14548,6 @@
       var timeOutEvent;
 
       var handleTouchStart = function handleTouchStart(e, image, index) {
-        e.preventDefault();
         timeOutEvent = setTimeout(function () {
           timeOutEvent = 0;
           onLongPress === null || onLongPress === void 0 ? void 0 : onLongPress(e, image, index);
@@ -14597,7 +14682,7 @@
     });
 
     /*!
-    * @arco-design/transformable v1.0.1
+    * @arco-design/transformable v1.0.2
     * (c) 2022 ludan.kibbon
     */
     function _defineProperty(obj, key, value) {
@@ -16768,14 +16853,7 @@
         var id = "_ARCO_IMAGE_PREVIEW_DIV_" + (baseProps.key || '') + "_";
         var div = appendElementById(id, baseProps.getContainer).child;
         var leaving = false;
-
-        function render(props) {
-          ReactDOM__default["default"].render( /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, props, {
-            getContainer: function getContainer() {
-              return div;
-            }
-          })), div);
-        }
+        var render = new ReactDOMRender(Component, div).render;
 
         function update(newConfig) {
           dynamicProps = __assign(__assign({}, dynamicProps), newConfig || {});
@@ -18640,16 +18718,16 @@
           document.body.appendChild(div);
         }
 
-        function render(props) {
-          ReactDOM__default["default"].render( /*#__PURE__*/React__default["default"].createElement(Component, __assign({}, props)), div);
-        }
+        var _a = new ReactDOMRender(Component, div),
+            render = _a.render,
+            unmount = _a.unmount;
 
         function destroy() {
           var onClose = config.onClose;
           onClose && onClose();
-          var unmountResult = ReactDOM__default["default"].unmountComponentAtNode(div);
+          unmount();
 
-          if (unmountResult && div.parentNode) {
+          if (div.parentNode) {
             div.parentNode.removeChild(div);
           }
         }
@@ -19391,10 +19469,10 @@
           setDirectionState = _k[2];
 
       var getOffset = React.useCallback(function (dir) {
-        return getDefaultValue(isObject$1(edgeOffset) ? edgeOffset[dir] : edgeOffset, defaultEdgeOffset[dir]);
+        return getDefaultValue(isObject$2(edgeOffset) ? edgeOffset[dir] : edgeOffset, defaultEdgeOffset[dir]);
       }, [edgeOffset]);
       var getAutoDirection = React.useCallback(function (dir) {
-        return getDefaultValue(isObject$1(useAutoDirection) ? useAutoDirection[dir] : useAutoDirection, defaultAutoDirection);
+        return getDefaultValue(isObject$2(useAutoDirection) ? useAutoDirection[dir] : useAutoDirection, defaultAutoDirection);
       }, [useAutoDirection]);
       React.useEffect(function () {
         setDirectionState(direction);
@@ -19836,12 +19914,13 @@
       var closeTimer = React.useRef(0);
       /** 垂直方向自适应 */
 
-      var autoVerticalDirection = getDefaultValue(isObject$1(useAutoDirection) ? useAutoDirection.vertical : useAutoDirection, defaultAutoDirection);
+      var autoVerticalDirection = getDefaultValue(isObject$2(useAutoDirection) ? useAutoDirection.vertical : useAutoDirection, defaultAutoDirection);
 
       var popoverDisappear = function popoverDisappear() {
         onVisibleChange(false);
         window.clearTimeout(closeTimer.current);
         closeTimer.current = 0;
+        mayRemoveEventListenerOnBody();
       };
 
       var throttleHandleVerticalScroll = React.useMemo(function () {
@@ -19861,7 +19940,7 @@
         };
       }, [throttleHandleVerticalScroll, getVerticalScrollContainer, autoVerticalDirection, visibleRef]);
       var mayRemoveEventListenerOnBody = React.useCallback(function () {
-        document.body.removeEventListener('click', handleClickBody);
+        document.body.removeEventListener('click', handleClickBody, true);
         document.body.removeEventListener('touchstart', handleTouchBody);
         var el = getVerticalScrollContainer();
 
@@ -19876,7 +19955,6 @@
 
 
         if (!isContains(wrapperRef.current, e.target) && !isContains(((_a = popoverInnerRef.current) === null || _a === void 0 ? void 0 : _a.dom) || null, e.target)) {
-          // TODO: 这里仅阻止了react事件，react 18 将不再在document上挂事件，这里的stop会失效
           if (preventBodyClick) {
             e.stopPropagation();
             e.preventDefault();
@@ -19902,13 +19980,13 @@
         var handle = function handle(e) {
           e.stopPropagation();
           e.preventDefault();
-          document.body.removeEventListener('click', handle);
+          document.body.removeEventListener('click', handle, true);
           clearTimeout(preventRecentClickTimer);
         };
 
-        document.body.addEventListener('click', handle);
+        document.body.addEventListener('click', handle, true);
         preventRecentClickTimer = window.setTimeout(function () {
-          document.body.removeEventListener('click', handle);
+          document.body.removeEventListener('click', handle, true);
         }, 500);
       };
 
@@ -19951,7 +20029,7 @@
           var el = getVerticalScrollContainer();
           el && el.addEventListener('scroll', handleScrollBody);
         } else if (clickOtherToClose) {
-          document.body.addEventListener('click', handleClickBody);
+          document.body.addEventListener('click', handleClickBody, true);
         }
       };
       /**
@@ -20754,6 +20832,7 @@
 
       var animationRef = React.useRef(0);
       var className = props.className,
+          style = props.style,
           children = props.children,
           _d = props.loadingText,
           loadingText = _d === void 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -20929,9 +21008,9 @@
           'is-disabled': disabled || !touching && useHideAsNestedScroll
         }),
         ref: domRef,
-        style: contentHeight > 0 ? {
+        style: contentHeight > 0 ? __assign({
           height: contentHeight
-        } : {}
+        }, style || {}) : style
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: cls(prefixCls + "-pull-refresh-content-wrapper")
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -20961,6 +21040,7 @@
           locale = _c === void 0 ? defaultLocale : _c;
 
       var className = props.className,
+          style = props.style,
           children = props.children,
           _d = props.loosingText,
           loosingText = _d === void 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -21195,6 +21275,7 @@
         className: cls(prefixCls + "-pull-refresh all-border-box is-android", className, {
           'is-disabled': (disabled || !touching && useHideAsNestedScroll) && status !== PullRefreshStatus.Loading
         }),
+        style: style,
         ref: domRef
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: cls(prefixCls + "-pull-refresh-place"),
@@ -22664,9 +22745,11 @@
           _b = _a.index,
           index = _b === void 0 ? 0 : _b,
           contextStatus = _a.status,
+          contextAlign = _a.align,
           changeIndex = _a.changeIndex;
 
       var status = props.status || contextStatus;
+      var align = props.align || contextAlign;
       var domRef = React.useRef(null);
       React.useImperativeHandle(ref, function () {
         return {
@@ -22705,12 +22788,12 @@
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement("div", {
           ref: domRef,
-          className: cls(prefixCls + "-steps-item", currentStatus, direction, iconType),
+          className: cls(prefixCls + "-steps-item", prefixCls + "-steps-item-align-" + align, currentStatus, direction, iconType),
           onClick: function onClick() {
             return changeIndex(index);
           }
         }, /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefixCls + "-steps-item-tail", currentStatus + "-tail-color-with-config")
+          className: cls(prefixCls + "-steps-item-tail", prefixCls + "-steps-item-tail-status-" + currentStatus, prefixCls + "-steps-item-tail-align-" + align, currentStatus + "-tail-color-with-config")
         }), icon ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefixCls + "-steps-item-custom-icon", currentStatus + "-custom-icon-bg-color-with-config")
         }, icon) : /*#__PURE__*/React__default["default"].createElement("div", {
@@ -22718,7 +22801,7 @@
         }, iconType === 'number' ? renderNumIcon(prefixCls) : /*#__PURE__*/React__default["default"].createElement("span", {
           className: cls(prefixCls + "-steps-item-icon-dot")
         })), title || description ? /*#__PURE__*/React__default["default"].createElement("div", {
-          className: cls(prefixCls + "-steps-item-content")
+          className: cls(prefixCls + "-steps-item-content", prefixCls + "-steps-item-content-align-" + align)
         }, title ? /*#__PURE__*/React__default["default"].createElement("div", {
           className: cls(prefixCls + "-steps-item-title", currentStatus + "-title-color-with-config")
         }, title) : null, description ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -22737,6 +22820,7 @@
           children = props.children,
           _b = props.direction,
           direction = _b === void 0 ? 'horizontal' : _b,
+          userSetAlign = props.align,
           _c = props.iconType,
           iconType = _c === void 0 ? 'number' : _c,
           current = props.current,
@@ -22747,6 +22831,8 @@
           items = props.items,
           onClick = props.onClick,
           onChange = props.onChange;
+      var defaultAlign = direction === 'vertical' ? 'start' : 'center';
+      var align = userSetAlign !== void 0 ? userSetAlign : defaultAlign;
 
       var _f = React.useState(Number(defaultIndex)),
           innerIndex = _f[0],
@@ -22782,11 +22868,12 @@
             direction: direction,
             index: index,
             status: activeIndex === index ? status : void 0,
+            align: align,
             changeIndex: changeIndex
           },
           key: index
         }, child);
-      }, [iconType, activeIndex, direction]);
+      }, [iconType, activeIndex, direction, align]);
       return /*#__PURE__*/React__default["default"].createElement(ContextLayout, null, function (_a) {
         var prefixCls = _a.prefixCls;
         return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -23092,6 +23179,7 @@
 
       var dampRateRef = useLatestRef(dampRate);
       var forbidClick = React.useRef(false);
+      var scrollingRef = React.useRef(null);
 
       var _j = useRefState(false),
           moving = _j[0],
@@ -23106,6 +23194,7 @@
       var prefixCls = React.useContext(GlobalContext).prefixCls;
       var startRef = React.useRef(0);
       var startX = React.useRef(0);
+      var startY = React.useRef(0);
       var slideX = React.useRef(0);
       var isLayer = openStyleType === 'layer';
       var transitionStyle = React.useMemo(function () {
@@ -23116,6 +23205,7 @@
 
       function resetMoveData() {
         startX.current = 0;
+        startY.current = 0;
         slideX.current = 0;
       }
 
@@ -23127,19 +23217,34 @@
       function touchstart(e) {
         startRef.current = offsetRef.current;
         resetMoveData();
+        scrollingRef.current = null;
         startX.current = e.touches[0].pageX;
+        startY.current = e.touches[0].pageY;
       }
 
       function touchmove(e) {
-        e.preventDefault();
-        slideX.current = e.touches[0].pageX - startX.current;
+        var x = e.changedTouches[0].pageX - startX.current;
+        var y = e.changedTouches[0].pageY - startY.current;
+
+        if (scrollingRef.current === null) {
+          scrollingRef.current = Math.abs(x) < Math.abs(y);
+        }
+
+        if (scrollingRef.current) {
+          setMoving(false);
+          setOffset(0);
+          return;
+        }
+
+        e.cancelable && e.preventDefault();
+        slideX.current = x;
         forbidClick.current = true;
         setMoving(true);
         setOffset(getMenuCurrentWidth(slideX.current + startRef.current, -rightMenuWidthRef.current, leftMenuWidthRef.current));
       }
 
       function touchend() {
-        if (movingRef.current) {
+        if (movingRef.current && !scrollingRef.current) {
           var currentMenu = offsetRef.current > 0 ? 'left' : 'right';
           changeMenu(currentMenu);
           setMoving(false);