From b8e196d06f707b2a79de4cfcd092218d0381a38f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E9=9C=9E=E7=8E=89?= Date: Thu, 24 Oct 2024 16:57:47 +0800 Subject: [PATCH] feat: cr --- .../components/steps/README.en-US.md | 1 + .../arcodesign/components/steps/README.md | 1 + .../components/steps/__ast__/index.ast.json | 17 +++++++ .../components/steps/demo/reverse.md | 34 ++++++++++++++ .../components/steps/demo/style/mobile.less | 4 +- .../arcodesign/components/steps/index.tsx | 13 +++-- .../components/steps/style/index.less | 47 ++++++++++++++++--- packages/arcodesign/components/steps/type.ts | 5 ++ packages/arcodesign/package.json | 6 +-- packages/common-widgets/package.json | 4 +- packages/common-widgets/style/mixin.less | 29 ++++++++++++ 11 files changed, 145 insertions(+), 16 deletions(-) create mode 100644 packages/arcodesign/components/steps/demo/reverse.md diff --git a/packages/arcodesign/components/steps/README.en-US.md b/packages/arcodesign/components/steps/README.en-US.md index 4f19fda1..a3a543c1 100644 --- a/packages/arcodesign/components/steps/README.en-US.md +++ b/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"| diff --git a/packages/arcodesign/components/steps/README.md b/packages/arcodesign/components/steps/README.md index f9aa1b8c..a1ee4dd4 100644 --- a/packages/arcodesign/components/steps/README.md +++ b/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"| diff --git a/packages/arcodesign/components/steps/__ast__/index.ast.json b/packages/arcodesign/components/steps/__ast__/index.ast.json index b62489ab..3424c236 100644 --- a/packages/arcodesign/components/steps/__ast__/index.ast.json +++ b/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 )'", diff --git a/packages/arcodesign/components/steps/demo/reverse.md b/packages/arcodesign/components/steps/demo/reverse.md new file mode 100644 index 00000000..6fea4f50 --- /dev/null +++ b/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 ( +
+ + + + + + +
+ + + + + + +
+ ); +} +``` + +```less +.divide { + .rem(height, 8); + .use-var(background, card-background-color); +} +``` diff --git a/packages/arcodesign/components/steps/demo/style/mobile.less b/packages/arcodesign/components/steps/demo/style/mobile.less index a69b8028..44e5a17a 100644 --- a/packages/arcodesign/components/steps/demo/style/mobile.less +++ b/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; } } diff --git a/packages/arcodesign/components/steps/index.tsx b/packages/arcodesign/components/steps/index.tsx index feeed844..2b090a9e 100644 --- a/packages/arcodesign/components/steps/index.tsx +++ b/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 & { + Pick & { index?: number; changeIndex: (newIndex: number) => void; } @@ -36,6 +36,7 @@ const Steps = forwardRef((props: StepsProps, ref: Ref) => { defaultIndex = 0, status = 'process', items, + reverseOrder = false, onClick, onChange, } = props; @@ -72,6 +73,7 @@ const Steps = forwardRef((props: StepsProps, ref: Ref) => { index, status: activeIndex === index ? status : void 0, align, + reverseOrder, changeIndex, }} key={index} @@ -86,7 +88,12 @@ const Steps = forwardRef((props: StepsProps, ref: Ref) => { {({ prefixCls }) => (
diff --git a/packages/arcodesign/components/steps/style/index.less b/packages/arcodesign/components/steps/style/index.less index 94c14fae..be38e9cc 100644 --- a/packages/arcodesign/components/steps/style/index.less +++ b/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); diff --git a/packages/arcodesign/components/steps/type.ts b/packages/arcodesign/components/steps/type.ts index 838b8070..aed1b09f 100644 --- a/packages/arcodesign/components/steps/type.ts +++ b/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)' diff --git a/packages/arcodesign/package.json b/packages/arcodesign/package.json index fc4f6000..53e8dc2a 100644 --- a/packages/arcodesign/package.json +++ b/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" } diff --git a/packages/common-widgets/package.json b/packages/common-widgets/package.json index 54bf757f..a64db265 100644 --- a/packages/common-widgets/package.json +++ b/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" }, diff --git a/packages/common-widgets/style/mixin.less b/packages/common-widgets/style/mixin.less index 3ac60ffc..6ee2a1b7 100644 --- a/packages/common-widgets/style/mixin.less +++ b/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; + } +}