@arco-design/mobile-react 2.21.3 → 2.22.0

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);
@@ -8282,7 +8366,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 +14547,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);
@@ -16768,14 +16852,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 +18717,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 +19468,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 +19913,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 +19939,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 +19954,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 +19979,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 +20028,7 @@
           var el = getVerticalScrollContainer();
           el && el.addEventListener('scroll', handleScrollBody);
         } else if (clickOtherToClose) {
-          document.body.addEventListener('click', handleClickBody);
+          document.body.addEventListener('click', handleClickBody, true);
         }
       };
       /**
@@ -23092,6 +23169,7 @@
 
       var dampRateRef = useLatestRef(dampRate);
       var forbidClick = React.useRef(false);
+      var scrollingRef = React.useRef(null);
 
       var _j = useRefState(false),
           moving = _j[0],
@@ -23106,6 +23184,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 +23195,7 @@
 
       function resetMoveData() {
         startX.current = 0;
+        startY.current = 0;
         slideX.current = 0;
       }
 
@@ -23127,19 +23207,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);