@arco-design/mobile-react 2.22.0 → 2.22.2

package/esm/steps/index.js

@@ -15,6 +15,7 @@ var Steps = /*#__PURE__*/forwardRef(function (props, ref) {
       children = props.children,
       _props$direction = props.direction,
       direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
+      userSetAlign = props.align,
       _props$iconType = props.iconType,
       iconType = _props$iconType === void 0 ? 'number' : _props$iconType,
       current = props.current,
@@ -25,6 +26,8 @@ var Steps = /*#__PURE__*/forwardRef(function (props, ref) {
       items = props.items,
       onClick = props.onClick,
       onChange = props.onChange;
+  var defaultAlign = direction === 'vertical' ? 'start' : 'center';
+  var align = userSetAlign !== void 0 ? userSetAlign : defaultAlign;
 
   var _useState = useState(Number(defaultIndex)),
       innerIndex = _useState[0],
@@ -60,11 +63,12 @@ var Steps = /*#__PURE__*/forwardRef(function (props, ref) {
         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.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement("div", {

package/esm/steps/step.js

@@ -15,9 +15,11 @@ var Step = /*#__PURE__*/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 = useRef(null);
   useImperativeHandle(ref, function () {
     return {
@@ -56,12 +58,12 @@ var Step = /*#__PURE__*/forwardRef(function (props, ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.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.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.createElement("div", {
       className: cls(prefixCls + "-steps-item-custom-icon", currentStatus + "-custom-icon-bg-color-with-config")
     }, icon) : /*#__PURE__*/React.createElement("div", {
@@ -69,7 +71,7 @@ var Step = /*#__PURE__*/forwardRef(function (props, ref) {
     }, iconType === 'number' ? renderNumIcon(prefixCls) : /*#__PURE__*/React.createElement("span", {
       className: cls(prefixCls + "-steps-item-icon-dot")
     })), title || description ? /*#__PURE__*/React.createElement("div", {
-      className: cls(prefixCls + "-steps-item-content")
+      className: cls(prefixCls + "-steps-item-content", prefixCls + "-steps-item-content-align-" + align)
     }, title ? /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-steps-item-title", currentStatus + "-title-color-with-config")
     }, title) : null, description ? /*#__PURE__*/React.createElement("div", {

package/esm/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/esm/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/esm/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/esm/tabs/index.js

@@ -4,7 +4,7 @@ import { cls, nextTick } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
 import TabCell from './tab-cell';
 import TabPane from './tab-pane';
-import { useRefState, useListenResize, useUpdateEffect, useSwiperInnerScroll } from '../_helpers';
+import { useRefState, useListenResize, useUpdateEffect, useSwiperInnerScroll, useSystem } from '../_helpers';
 export * from './type';
 /**
  * 用于让用户在不同的视图中进行切换。为优化移动端渲染性能，如有替换DOM、发请求更新数据等操作，请在`onAfterChange`而非`onChange`回调中进行。
@@ -167,6 +167,7 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
   var touchStoppedRef = useRef(false);
   var changeFromRef = useRef('');
   var touchMoveBarScrollRef = 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;
@@ -281,10 +282,10 @@ var Tabs = /*#__PURE__*/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);

package/esm/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/esm/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.22.0",
+    "version": "2.22.2",
     "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.12.4",
+        "@arco-design/mobile-utils": "^2.12.6",
         "@arco-design/transformable": "^1.0.0",
         "es6-promise": "^4.2.8",
         "lodash.throttle": "^4.1.1",
@@ -36,5 +36,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "00c2641c2230e9115db0af84f0b16545b6c8b8e3"
+    "gitHead": "52a29775d16e5e7d2b7645086644cf03aac6d71f"
 }

package/tokens/app/arcodesign/default/css-variables.less

@@ -517,9 +517,13 @@
     --notify-font-size: ~`pxtorem(14)`;
     --notify-min-height: ~`pxtorem(36)`;
     --steps-padding: ~`pxtorem(16)` 0;
-    --steps-tail-horizontal-padding: 0 ~`pxtorem(18)`;
-    --steps-tail-vertical-padding: ~`pxtorem(14)` 0;
-    --steps-tail-vertical-top: ~`pxtorem(9)`;
+    --steps-tail-border-radius: 2PX;
+    --steps-tail-horizontal-gutter: 18PX;
+    --steps-tail-vertical-gutter: 14PX;
+    --steps-tail-horizontal-padding: 0 var(--steps-tail-horizontal-gutter);
+    --steps-tail-vertical-padding: var(--steps-tail-vertical-gutter) 0;
+    --steps-tail-horizontal-left: 9PX;
+    --steps-tail-vertical-top: 9PX;
     --steps-tail-standard-size: 1PX;
     --steps-tail-standard-background: var(--line-color);
     --steps-tail-finish-background: var(--primary-color);

package/tokens/app/arcodesign/default/index.d.ts

@@ -516,8 +516,12 @@ export interface ArcodesignToken extends Record<string, string> {
     'notify-font-size': string;
     'notify-min-height': string;
     'steps-padding': string;
+    'steps-tail-border-radius': string;
+    'steps-tail-horizontal-gutter': string;
+    'steps-tail-vertical-gutter': string;
     'steps-tail-horizontal-padding': string;
     'steps-tail-vertical-padding': string;
+    'steps-tail-horizontal-left': string;
     'steps-tail-vertical-top': string;
     'steps-tail-standard-size': string;
     'steps-tail-standard-background': string;

package/tokens/app/arcodesign/default/index.js

@@ -528,9 +528,13 @@ var tokens = {
   "notify-font-size": "0.28rem",
   "notify-min-height": "0.72rem",
   "steps-padding": "0.32rem 0",
-  "steps-tail-horizontal-padding": "0 0.36rem",
-  "steps-tail-vertical-padding": "0.28rem 0",
-  "steps-tail-vertical-top": "0.18rem",
+  "steps-tail-border-radius": "2PX",
+  "steps-tail-horizontal-gutter": "18PX",
+  "steps-tail-vertical-gutter": "14PX",
+  "steps-tail-horizontal-padding": "0 18PX",
+  "steps-tail-vertical-padding": "14PX 0",
+  "steps-tail-horizontal-left": "9PX",
+  "steps-tail-vertical-top": "9PX",
   "steps-tail-standard-size": "1PX",
   "steps-tail-standard-background": "#e5e6eb",
   "steps-tail-finish-background": "#165dff",