@arco-design/mobile-react 2.21.3 → 2.22.2

package/cjs/steps/step.js

@@ -29,9 +29,11 @@ var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       _useContext$index = _useContext.index,
       index = _useContext$index === void 0 ? 0 : _useContext$index,
       contextStatus = _useContext.status,
+      contextAlign = _useContext.align,
       changeIndex = _useContext.changeIndex;
 
   var status = props.status || contextStatus;
+  var align = props.align || contextAlign;
   var domRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, function () {
     return {
@@ -70,12 +72,12 @@ var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: domRef,
-      className: (0, _mobileUtils.cls)(prefixCls + "-steps-item", currentStatus, direction, iconType),
+      className: (0, _mobileUtils.cls)(prefixCls + "-steps-item", prefixCls + "-steps-item-align-" + align, currentStatus, direction, iconType),
       onClick: function onClick() {
         return changeIndex(index);
       }
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-tail", currentStatus + "-tail-color-with-config")
+      className: (0, _mobileUtils.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.createElement("div", {
       className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-custom-icon", currentStatus + "-custom-icon-bg-color-with-config")
     }, icon) : /*#__PURE__*/_react.default.createElement("div", {
@@ -83,7 +85,7 @@ var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, iconType === 'number' ? renderNumIcon(prefixCls) : /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-icon-dot")
     })), title || description ? /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-content")
+      className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-content", prefixCls + "-steps-item-content-align-" + align)
     }, title ? /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-title", currentStatus + "-title-color-with-config")
     }, title) : null, description ? /*#__PURE__*/_react.default.createElement("div", {

package/cjs/steps/style/css/index.css

@@ -18,17 +18,23 @@
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
           flex-direction: column;
+}
+.arco-steps-item-align-center {
   -webkit-box-align: center;
   -webkit-align-items: center;
           align-items: center;
 }
-.arco-steps-item.vertical {
+.arco-steps-item-align-start {
   -webkit-box-align: start;
   -webkit-align-items: flex-start;
           align-items: flex-start;
 }
-.arco-steps-item:last-child .arco-steps-item-tail:after {
-  display: none;
+.arco-steps-item-align-center.vertical {
+  padding-bottom:  0.5rem ;
+}
+.arco-steps-item:first-child .arco-steps-item-tail::before,
+.arco-steps-item:last-child .arco-steps-item-tail::after {
+  visibility: hidden;
 }
 .arco-steps-item-tail {
   position: absolute;
@@ -44,33 +50,81 @@
 }
 .horizontal .arco-steps-item-tail {
   width: 100%;
-  left: 50%;
   height:  18PX ;
-  padding:  0 0.36rem ;
 }
-.horizontal .arco-steps-item-tail:after {
+.horizontal .arco-steps-item-tail::before,
+.horizontal .arco-steps-item-tail::after {
+  height:  1PX ;
+}
+.horizontal .arco-steps-item-tail-align-start {
+  left:  9PX ;
+  padding:  0 18PX ;
+}
+.horizontal .arco-steps-item-tail-align-start::after {
   content: "";
-  display: inline-block;
   width: 100%;
-  height:  1PX ;
-  background:  #e5e6eb ;
-  border-radius: 0.04rem;
+  border-radius:  2PX ;
+}
+.horizontal .arco-steps-item-tail-align-center::before,
+.horizontal .arco-steps-item-tail-align-center::after {
+  content: "";
+  width: 50%;
+}
+.horizontal .arco-steps-item-tail-align-center::before {
+  margin-right:  18PX ;
+  border-top-right-radius:  2PX ;
+  border-bottom-right-radius:  2PX ;
+}
+.horizontal .arco-steps-item-tail-align-center::after {
+  margin-left:  18PX ;
+  border-top-left-radius:  2PX ;
+  border-bottom-left-radius:  2PX ;
 }
 .vertical .arco-steps-item-tail {
   height: 100%;
   width:  18PX ;
-  top:  0.18rem ;
-  padding:  0.28rem 0 ;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
 }
-.vertical .arco-steps-item-tail:after {
+.vertical .arco-steps-item-tail::before,
+.vertical .arco-steps-item-tail::after {
+  width:  1PX ;
+}
+.vertical .arco-steps-item-tail-align-start {
+  top:  9PX ;
+  padding:  14PX 0 ;
+}
+.vertical .arco-steps-item-tail-align-start::after {
   content: "";
-  display: inline-block;
   height: 100%;
-  width:  1PX ;
+  border-radius:  2PX ;
+}
+.vertical .arco-steps-item-tail-align-center::before,
+.vertical .arco-steps-item-tail-align-center::after {
+  content: "";
+  height: 50%;
+}
+.vertical .arco-steps-item-tail-align-center::before {
+  margin-bottom:  14PX ;
+  border-bottom-left-radius:  2PX ;
+  border-bottom-right-radius:  2PX ;
+}
+.vertical .arco-steps-item-tail-align-center::after {
+  margin-top:  14PX ;
+  border-top-left-radius:  2PX ;
+  border-top-right-radius:  2PX ;
+}
+.arco-steps-item-tail::after,
+.arco-steps-item-tail::before {
+  display: inline-block;
   background:  #e5e6eb ;
-  border-radius: 0.04rem;
 }
-.finish .arco-steps-item-tail:after {
+.arco-steps-item-tail-status-finish::before,
+.arco-steps-item-tail-status-finish::after,
+.arco-steps-item-tail-align-center.arco-steps-item-tail-status-process::before,
+.arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::before {
   background:  #165dff ;
 }
 .arco-steps-item-custom-icon,
@@ -122,8 +176,8 @@
 .arco-steps-item-icon-num.android,
 .arco-steps-item-icon-num.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #86909c;
-  text-stroke: 0.3PX #86909c;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .process .arco-steps-item-icon-num {
   color:  #FFFFFF ;
@@ -147,18 +201,19 @@
   border: none;
   background:  #165dff ;
 }
-.arco-steps-item-content {
-  text-align: center;
-}
 .horizontal .arco-steps-item-content {
   margin-top:  0.1rem ;
 }
+.horizontal .arco-steps-item-content-align-center {
+  text-align: center;
+}
 .vertical .arco-steps-item-content {
   margin-left:  0.26rem ;
-  text-align: left;
   -webkit-box-flex: 1;
   -webkit-flex: 1;
           flex: 1;
+}
+.vertical .arco-steps-item-content-align-start {
   padding-bottom:  0.5rem ;
 }
 .arco-steps-item-title {

package/cjs/steps/style/index.less

@@ -11,15 +11,23 @@
 
         &.horizontal {
             flex-direction: column;
+        }
+
+        &-align-center {
             align-items: center;
         }
 
-        &.vertical {
+        &-align-start {
             align-items: flex-start;
         }
 
-        &:last-child &-tail:after {
-            display: none;
+        &-align-center.vertical {
+            .use-var(padding-bottom, steps-vertical-content-padding-bottom);
+        }
+
+        &:first-child &-tail::before,
+        &:last-child &-tail::after {
+            visibility: hidden;
         }
 
         &-tail {
@@ -30,37 +38,93 @@
 
             .horizontal & {
                 width: 100%;
-                left: 50%;
                 .use-var(height, steps-icon-height);
-                .use-var(padding, steps-tail-horizontal-padding);
 
-                &:after {
-                    content: "";
-                    display: inline-block;
-                    width: 100%;
+                &::before,
+                &::after {
                     .use-var(height, steps-tail-standard-size);
-                    .use-var(background, steps-tail-standard-background);
-                    .rem(border-radius, 2);
+                }
+
+                &-align-start {
+                    .use-var(left, steps-tail-horizontal-left);
+                    .use-var(padding, steps-tail-horizontal-padding);
+
+                    &::after {
+                        content: "";
+                        width: 100%;
+                        .use-var(border-radius, steps-tail-border-radius);
+                    }
+                }
+
+                &-align-center {
+                    &::before,
+                    &::after {
+                        content: "";
+                        width: 50%;
+                    }
+                    &::before {
+                        .use-var(margin-right, steps-tail-horizontal-gutter);
+                        .use-var(border-top-right-radius, steps-tail-border-radius);
+                        .use-var(border-bottom-right-radius, steps-tail-border-radius);
+                    }
+                    &::after {
+                        .use-var(margin-left, steps-tail-horizontal-gutter);
+                        .use-var(border-top-left-radius, steps-tail-border-radius);
+                        .use-var(border-bottom-left-radius, steps-tail-border-radius);
+                    }
                 }
             }
 
             .vertical & {
                 height: 100%;
                 .use-var(width, steps-icon-width);
-                .use-var(top, steps-tail-vertical-top);
-                .use-var(padding, steps-tail-vertical-padding);
+                flex-direction: column;
 
-                &:after {
-                    content: "";
-                    display: inline-block;
-                    height: 100%;
+                &::before,
+                &::after {
                     .use-var(width, steps-tail-standard-size);
-                    .use-var(background, steps-tail-standard-background);
-                    .rem(border-radius, 2);
                 }
+
+                &-align-start {
+                    .use-var(top, steps-tail-vertical-top);
+                    .use-var(padding, steps-tail-vertical-padding);
+
+                    &::after {
+                        content: "";
+                        height: 100%;
+                        .use-var(border-radius, steps-tail-border-radius);
+                    }
+                }
+
+                &-align-center {
+                    &::before,
+                    &::after {
+                        content: "";
+                        height: 50%;
+                    }
+                    &::before {
+                        .use-var(margin-bottom, steps-tail-vertical-gutter);
+                        .use-var(border-bottom-left-radius, steps-tail-border-radius);
+                        .use-var(border-bottom-right-radius, steps-tail-border-radius);
+                    }
+                    &::after {
+                        .use-var(margin-top, steps-tail-vertical-gutter);
+                        .use-var(border-top-left-radius, steps-tail-border-radius);
+                        .use-var(border-top-right-radius, steps-tail-border-radius);
+                    }
+                }
+            }
+
+            &::after,
+            &::before {
+                display: inline-block;
+                .use-var(background, steps-tail-standard-background);
             }
 
-            .finish &:after {
+            &-status-finish::before,
+            &-status-finish::after,
+            &-align-center&-status-process::before,
+            &-align-center&-status-error::before {
                 .use-var(background, steps-tail-finish-background);
             }
         }
@@ -110,7 +174,7 @@
                 .use-var(font-size, steps-icon-num-font-size);
                 .use-var(line-height, steps-icon-num-line-height);
                 .use-var(color, steps-icon-num-color);
-                .text-medium-var(steps-icon-num-color);
+                .text-medium();
 
                 .process & {
                     .use-var(color, steps-process-icon-num-color);
@@ -142,17 +206,21 @@
         }
 
         &-content {
-            text-align: center;
 
             .horizontal & {
                 .use-var(margin-top, steps-horizontal-content-margin-top);
+                &-align-center {
+                    text-align: center;
+                }
             }
 
             .vertical & {
                 .use-var(margin-left, steps-vertical-content-margin-left);
-                text-align: left;
                 flex: 1;
-                .use-var(padding-bottom, steps-vertical-content-padding-bottom);
+
+                &-align-start {
+                    .use-var(padding-bottom, steps-vertical-content-padding-bottom);
+                }
             }
         }
 

package/cjs/steps/type.d.ts

@@ -20,6 +20,11 @@ export interface StepProps {
      * @en Specify the step status. When this item is not input, the status will be automatically specified according to the current property of steps
      */
     status?: 'finish' | 'error' | 'wait' | 'process';
+    /**
+     * 指定对齐方式，不配置该项时，会跟随 Steps 的 align 属性值
+     * @en Specify the step alignment. When this item is not input, it will be automatically specified according to the align property of steps
+     */
+    align?: 'center' | 'start';
 }
 export interface StepsProps {
     /**
@@ -38,6 +43,13 @@ export interface StepsProps {
      * @default horizontal
      */
     direction?: 'vertical' | 'horizontal';
+    /**
+     * 步骤条对齐方式
+     * @en Step alignment
+     * @default direction="horizontal" 时默认为 "center"，direction="vertical" 时默认为 "start"
+     * @default_en "center" when direction="horizontal" and "start" when direction="vertical"
+     */
+    align?: 'center' | 'start';
     /**
      * 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态，传入则受控
      * @en Specify the current step, counting from 0. In the step children elements, the status can be overwritten through the status, and it is controlled if it is input

package/cjs/swipe-action/index.js

@@ -67,6 +67,7 @@ var SwipeAction = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var dampRateRef = (0, _helpers.useLatestRef)(dampRate);
   var forbidClick = (0, _react.useRef)(false);
+  var scrollingRef = (0, _react.useRef)(null);
 
   var _useRefState = (0, _helpers.useRefState)(false),
       moving = _useRefState[0],
@@ -83,6 +84,7 @@ var SwipeAction = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var startRef = (0, _react.useRef)(0);
   var startX = (0, _react.useRef)(0);
+  var startY = (0, _react.useRef)(0);
   var slideX = (0, _react.useRef)(0);
   var isLayer = openStyleType === 'layer';
   var transitionStyle = (0, _react.useMemo)(function () {
@@ -93,6 +95,7 @@ var SwipeAction = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   function resetMoveData() {
     startX.current = 0;
+    startY.current = 0;
     slideX.current = 0;
   }
 
@@ -104,19 +107,34 @@ var SwipeAction = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   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);

package/cjs/tabs/index.js

@@ -143,7 +143,9 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       _props$translateZ = props.translateZ,
       translateZ = _props$translateZ === void 0 ? true : _props$translateZ,
       fullScreen = props.fullScreen,
-      autoHeight = props.autoHeight;
+      autoHeight = props.autoHeight,
+      _props$tabBarStopProp = props.tabBarStopPropagation,
+      tabBarStopPropagation = _props$tabBarStopProp === void 0 ? true : _props$tabBarStopProp;
   var domRef = (0, _react.useRef)(null);
   var cellRef = (0, _react.useRef)(null);
   var paneRef = (0, _react.useRef)(null);
@@ -191,6 +193,7 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var touchStoppedRef = (0, _react.useRef)(false);
   var changeFromRef = (0, _react.useRef)('');
   var touchMoveBarScrollRef = (0, _react.useRef)(false);
+  var system = (0, _helpers.useSystem)();
   var allPanes = getAllPanes();
   var tabDirection = ['top', 'bottom'].indexOf(tabBarPosition) !== -1 ? 'vertical' : 'horizontal';
   var canSwipe = mode === 'swipe' && !disabled && swipeable && tabDirection === 'vertical' && tabs.length > 1;
@@ -305,10 +308,10 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
     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);
@@ -497,7 +500,8 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       renderTabBarItem: renderTabBarItem,
       renderTabBarInner: renderTabBarInner,
       tabBarStyle: tabBarStyle,
-      tabBarClass: tabBarClass
+      tabBarClass: tabBarClass,
+      tabBarStopPropagation: tabBarStopPropagation
     }, commonProps);
 
     var CellComp = /*#__PURE__*/_react.default.createElement(_tabCell.default, cellProps);

package/cjs/tabs/style/css/index.css

@@ -386,8 +386,8 @@
 .arco-tab-cell.vertical:not(.custom).line.active.system-android,
 .arco-tab-cell.vertical:not(.custom).line-divide.active.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #165dff;
-  text-stroke: 0.3PX #165dff;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-tab-cell.vertical:not(.custom).card {
   color:  #165dff ;
@@ -401,8 +401,8 @@
 .arco-tab-cell.vertical:not(.custom).card.active.android,
 .arco-tab-cell.vertical:not(.custom).card.active.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #ffffff;
-  text-stroke: 0.3PX #ffffff;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-tab-cell.vertical:not(.custom).card:not(:last-child) {
   border-right: 1PX solid #165dff ;
@@ -444,8 +444,8 @@
 .arco-tab-cell.vertical:not(.custom).tag.active.system-android,
 .arco-tab-cell.vertical:not(.custom).tag-divide.active.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #ffffff;
-  text-stroke: 0.3PX #ffffff;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-tab-cell.horizontal {
   height:  1.08rem ;
@@ -458,8 +458,8 @@
 .arco-tab-cell.horizontal.active.android,
 .arco-tab-cell.horizontal.active.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #165dff;
-  text-stroke: 0.3PX #165dff;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-tab-pane-container.mode-swipe {
   display: -webkit-box;

package/cjs/tabs/style/index.less

@@ -322,7 +322,7 @@
             &.line-divide {
 
                 &.active {
-                    .text-medium-var(tabs-tab-bar-line-active-color);
+                    .text-medium();
                     .use-var(color, tabs-tab-bar-line-active-color);
                 }
             }
@@ -333,7 +333,7 @@
                 &.active {
                     .use-var(background, tabs-tab-bar-card-color);
                     .use-var(color, tabs-tab-bar-card-text-color);
-                    .text-medium-var(tabs-tab-bar-card-text-color);
+                    .text-medium();
                 }
 
                 &:not(:last-child) {
@@ -374,7 +374,7 @@
                 &.active {
                     .use-var(background, tabs-tab-bar-tag-active-background);
                     .use-var(color, tabs-tab-bar-tag-active-text-color);
-                    .text-medium-var(tabs-tab-bar-tag-active-text-color);
+                    .text-medium();
                 }
             }
         }
@@ -384,7 +384,7 @@
         .use-var(height, tabs-tab-bar-horizontal-height);
 
         &.active {
-            .text-medium-var(tabs-tab-bar-line-active-color);
+            .text-medium();
             .use-var(color, tabs-tab-bar-line-active-color);
         }
     }

package/cjs/tabs/tab-cell.js

@@ -64,7 +64,8 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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 = (0, _react.useRef)(null);
   var underlineRef = (0, _react.useRef)(null);
@@ -156,13 +157,13 @@ var TabCell = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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);
       }

package/cjs/tabs/type.d.ts

@@ -421,6 +421,12 @@ export interface TabsProps {
      * @en Tabbar underline inner style, applied to tab-cell-underline-inner
      */
     underlineInnerStyle?: React.CSSProperties;
+    /**
+     * 当前 TabBar 的触摸事件是否需要 stopPropagation
+     * @en Does the touch event of the current TabBar require stopPropagation
+     * @default true
+     */
+    tabBarStopPropagation?: boolean;
 }
 export interface TabsRef {
     /**
@@ -510,6 +516,11 @@ export interface TabCellProps extends Pick<TabsProps, 'tabs' | 'type' | 'onTabCl
      * @en The distance the underline has been swiped
      */
     jumpingDis: number;
+    /**
+     * 当前 TabBar 的触摸事件是否需要 stopPropagation
+     * @en Does the touch event of the current TabBar require stopPropagation
+     */
+    tabBarStopPropagation: boolean;
 }
 export interface TabCellRef {
     /**

package/cjs/toast/methods.js

@@ -7,12 +7,10 @@ exports.toast = toast;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _mobileUtils = require("@arco-design/mobile-utils");
 
+var _render = require("../_helpers/render");
+
 function toast(Component, type) {
   return function (originConfig) {
     var config = typeof originConfig === 'string' ? {
@@ -28,17 +26,16 @@ function toast(Component, type) {
     var div = document.createElement('div');
     document.body.appendChild(div);
 
-    function render(props) {
-      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(Component, props), div);
-    }
+    var _ReactDOMRender = new _render.ReactDOMRender(Component, div),
+        render = _ReactDOMRender.render,
+        unmount = _ReactDOMRender.unmount;
 
-    function destory() {
+    function destroy() {
       var onClose = config.onClose;
       onClose && onClose();
+      unmount();
 
-      var unmountResult = _reactDom.default.unmountComponentAtNode(div);
-
-      if (unmountResult && div.parentNode) {
+      if (div.parentNode) {
         div.parentNode.removeChild(div);
       }
     }
@@ -48,7 +45,7 @@ function toast(Component, type) {
       getContainer: function getContainer() {
         return div;
       },
-      onClose: destory,
+      onClose: destroy,
       visible: false
     });
     var leaving = false;