feat: cr

packages/arcodesign/components/steps/README.en-US.md

@@ -11,6 +11,7 @@ Display the progress of a task, or guide users to complete a complex task.
 |Property|Description|Type|DefaultValue|
 |----------|-------------|------|------|
 |className|Custom classname|string|-|
+|reverseOrder|reverse the order from right to left and from bottom to top|boolean|-|
 |style|Custom stylesheet\. If want to use CSS to control icon color, use public mixin '\.set\-steps\-color(|CSSProperties|-|
 |direction|Step bar direction|"vertical" \| "horizontal"|horizontal|
 |align|Step alignment|"center" \| "start"|"center" when direction="horizontal" and "start" when direction="vertical"|

packages/arcodesign/components/steps/README.md

@@ -11,6 +11,7 @@
 |参数|描述|类型|默认值|
 |----------|-------------|------|------|
 |className|自定义类名|string|-|
+|reverseOrder|顺序反转，设置为true后，顺序将从右到左，从下到上|boolean|-|
 |style|自定义样式，如果想用 css 控制 icon 颜色，可使用公共 mixin '\.set\-steps\-color(@color)'|CSSProperties|-|
 |direction|步骤条方向|"vertical" \| "horizontal"|horizontal|
 |align|步骤条对齐方式|"center" \| "start"|direction="horizontal" 时默认为 "center"，direction="vertical" 时默认为 "start"|

packages/arcodesign/components/steps/__ast__/index.ast.json

@@ -27,6 +27,23 @@
                 "name": "string"
             }
         },
+        "reverseOrder": {
+            "defaultValue": null,
+            "description": "顺序反转，设置为true后，顺序将从右到左，从下到上\n@en reverse the order from right to left and from bottom to top",
+            "name": "reverseOrder",
+            "tags": {
+                "en": "reverse the order from right to left and from bottom to top"
+            },
+            "descWithTags": "顺序反转，设置为true后，顺序将从右到左，从下到上",
+            "parent": {
+                "fileName": "arcom-github/packages/arcodesign/components/steps/type.ts",
+                "name": "StepsProps"
+            },
+            "required": false,
+            "type": {
+                "name": "boolean"
+            }
+        },
         "style": {
             "defaultValue": null,
             "description": "自定义样式，如果想用 css 控制 icon 颜色，可使用公共 mixin '.set-steps-color(@color)'\n@en Custom stylesheet. If want to use CSS to control icon color, use public mixin '.set-steps-color(\n@color )'",

packages/arcodesign/components/steps/demo/reverse.md

@@ -0,0 +1,34 @@
+## 顺序反转 @en{Reverse Order}
+
+#### 9
+
+```js
+import { Steps } from '@arco-design/mobile-react';
+
+export default function StepsDemo() {
+    return (
+        <div>
+            <Steps reverseOrder current={1}>
+                <Steps.Step title="Start" description="Details" />
+                <Steps.Step title="Step 2" description="Details" />
+                <Steps.Step title="Step 3" description="Details" />
+                <Steps.Step title="Finish" description="Details" />
+            </Steps>
+            <div className="divide" />
+            <Steps reverseOrder current={1} direction="vertical" iconType="dot">
+                <Steps.Step title="Start" description="Details" />
+                <Steps.Step title="Step 2" description="Details" />
+                <Steps.Step title="Step 3" description="Details" />
+                <Steps.Step title="Finish" description="Details" />
+            </Steps>
+        </div>
+    );
+}
+```
+
+```less
+.divide {
+    .rem(height, 8);
+    .use-var(background, card-background-color);
+}
+```

packages/arcodesign/components/steps/demo/style/mobile.less

@@ -1,4 +1,4 @@
-@import "../../../../style/mixin.less";
+@import '../../../../style/mixin.less';
 
 #demo-steps {
     .@{prefix}-steps-item-custom-icon {
@@ -9,6 +9,6 @@
     }
 
     .arcodesign-mobile-demo-content {
-        padding: 0!important;
+        padding: 0 !important;
     }
 }

packages/arcodesign/components/steps/index.tsx

@@ -9,7 +9,7 @@ import React, {
     useState,
     useEffect,
 } from 'react';
-import { componentWrapper } from '@arco-design/mobile-utils';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
 import Step from './step';
 import { useSystem, useRefState } from '../_helpers';
@@ -18,7 +18,7 @@ import { StepsProps, StepsRef } from './type';
 export * from './type';
 
 export const StepsContext = createContext<
-    Pick<StepsProps, 'iconType' | 'current' | 'direction' | 'status' | 'align'> & {
+    Pick<StepsProps, 'iconType' | 'current' | 'direction' | 'status' | 'align' | 'reverseOrder'> & {
         index?: number;
         changeIndex: (newIndex: number) => void;
     }
@@ -36,6 +36,7 @@ const Steps = forwardRef((props: StepsProps, ref: Ref<StepsRef>) => {
         defaultIndex = 0,
         status = 'process',
         items,
+        reverseOrder = false,
         onClick,
         onChange,
     } = props;
@@ -72,6 +73,7 @@ const Steps = forwardRef((props: StepsProps, ref: Ref<StepsRef>) => {
                     index,
                     status: activeIndex === index ? status : void 0,
                     align,
+                    reverseOrder,
                     changeIndex,
                 }}
                 key={index}
@@ -86,7 +88,12 @@ const Steps = forwardRef((props: StepsProps, ref: Ref<StepsRef>) => {
         <ContextLayout>
             {({ prefixCls }) => (
                 <div
-                    className={`${prefixCls}-steps all-border-box ${className} ${direction} ${system}`}
+                    className={cls(
+                        `${prefixCls}-steps all-border-box ${className} ${direction} ${system}`,
+                        {
+                            'reverse-order': reverseOrder,
+                        },
+                    )}
                     style={style}
                     ref={domRef}
                 >

packages/arcodesign/components/steps/style/index.less

@@ -1,9 +1,13 @@
-@import "../../../style/mixin.less";
+@import '../../../style/mixin.less';
 
 .@{prefix}-steps {
     display: flex;
     .use-var(padding, steps-padding);
 
+    &.reverse-order {
+        flex-direction: row-reverse;
+    }
+
     &-item {
         position: relative;
         display: flex;
@@ -30,6 +34,20 @@
             visibility: hidden;
         }
 
+        &:first-child &-tail::after,
+        &:last-child &-tail::before {
+            .reverse-order & {
+                visibility: hidden;
+            }
+        }
+
+        &:first-child &-tail::before,
+        &:last-child &-tail::after {
+            .reverse-order & {
+                visibility: visible;
+            }
+        }
+
         &-tail {
             position: absolute;
             display: flex;
@@ -50,7 +68,7 @@
                     .use-var(padding, steps-tail-horizontal-padding);
 
                     &::after {
-                        content: "";
+                        content: '';
                         width: 100%;
                         .use-var(border-radius, steps-tail-border-radius);
                     }
@@ -59,7 +77,7 @@
                 &-align-center {
                     &::before,
                     &::after {
-                        content: "";
+                        content: '';
                         width: 50%;
                     }
                     &::before {
@@ -90,7 +108,7 @@
                     .use-var(padding, steps-tail-vertical-padding);
 
                     &::after {
-                        content: "";
+                        content: '';
                         height: 100%;
                         .use-var(border-radius, steps-tail-border-radius);
                     }
@@ -99,7 +117,7 @@
                 &-align-center {
                     &::before,
                     &::after {
-                        content: "";
+                        content: '';
                         height: 50%;
                     }
                     &::before {
@@ -127,6 +145,20 @@
             &-align-center&-status-error::before {
                 .use-var(background, steps-tail-finish-background);
             }
+
+            &-status-finish::before,
+            &-status-process::after,
+            &-align-center&-status-error::after {
+                .reverse-order & {
+                    .use-var(background, steps-tail-finish-background);
+                }
+            }
+            &-status-process::before,
+            &-align-center&-status-error::before {
+                .reverse-order & {
+                    .use-var(background, steps-tail-standard-background);
+                }
+            }
         }
 
         &-custom-icon,
@@ -206,7 +238,6 @@
         }
 
         &-content {
-
             .horizontal & {
                 .use-var(margin-top, steps-horizontal-content-margin-top);
                 &-align-center {
@@ -262,6 +293,10 @@
     }
 
     &.vertical {
+        &.reverse-order {
+            flex-direction: column-reverse;
+        }
+
         flex-direction: column;
         .use-var(padding-bottom, steps-vertical-padding-bottom);
         .use-var-with-rtl(padding-left, steps-vertical-padding-left);

packages/arcodesign/components/steps/type.ts

@@ -32,6 +32,11 @@ export interface StepsProps {
      * @en Custom classname
      */
     className?: string;
+    /**
+     *  顺序反转，设置为true后，顺序将从右到左，从下到上
+     * @en reverse the order from right to left and from bottom to top
+     */
+    reverseOrder?: boolean;
     /**
      * 自定义样式，如果想用 css 控制 icon 颜色，可使用公共 mixin '.set-steps-color(@color)'
      * @en Custom stylesheet. If want to use CSS to control icon color, use public mixin '.set-steps-color(@color)'

packages/arcodesign/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.32.0",
+    "version": "2.32.1-3e0ba9e.5+3e0ba9ec",
     "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.19.0",
+        "@arco-design/mobile-utils": "2.19.1-3e0ba9e.5+3e0ba9ec",
         "@arco-design/transformable": "^1.0.0",
         "@babel/runtime": "^7",
         "lodash.throttle": "^4.1.1",
@@ -47,5 +47,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "72f78e976347aa9f57858d414aba6063e7de62f6"
+    "gitHead": "3e0ba9ec98601318ffc48a3fd40a5fd8511c61af"
 }

packages/common-widgets/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-utils",
-    "version": "2.19.0",
+    "version": "2.19.1-3e0ba9e.5+3e0ba9ec",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -13,7 +13,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "72f78e976347aa9f57858d414aba6063e7de62f6",
+    "gitHead": "3e0ba9ec98601318ffc48a3fd40a5fd8511c61af",
     "dependencies": {
         "es6-promise": "^4.2.8"
     },

packages/common-widgets/style/mixin.less

@@ -558,3 +558,32 @@
         background: @color;
     }
 }
+
+.set-steps-color-reverse(@color, @finish-color: fade(@color, 10%)) {
+    .process-bg-color-with-config,
+    .process-custom-icon-bg-color-with-config {
+        background: @color;
+        .use-var(color, steps-process-with-config-item-icon-color);
+    }
+    .finish-bg-color-with-config,
+    .finish-custom-icon-bg-color-with-config {
+        background: @finish-color;
+        color: @color;
+        svg {
+            color: inherit;
+        }
+    }
+    .wait-custom-icon-bg-color-with-config {
+        .use-var(background, steps-wait-icon-num-background);
+        .use-var(color, sub-info-font-color);
+    }
+    .process-title-color-with-config {
+        color: @color;
+    }
+    .finish-tail-color-with-config::before,
+    .finish-tail-color-with-config::after,
+    .process-tail-color-with-config::after,
+    .error-tail-color-with-config::before {
+        background: @color;
+    }
+}