feat: Steps source支持动态获取value status (#6370)

docs/zh-CN/components/steps.md

@@ -282,7 +282,9 @@ order: 68
         "title": "Last",
         "value": "last"
       }
-    ]
+    ],
+    "value": "secord",
+    "status": "error"
   }
 }
 ```

mock/cfc/mock/steps/steps.json

@@ -1,23 +1,24 @@
 {
-    "status": 0,
-    "msg": "",
-    "data": {
-        "steps": [
-            {
-                "title": "First",
-                "subTitle": "this is sub title",
-                "value": "first"
-            },
-            {
-                "title": "Secord",
-                "description": "this is description",
-                "value": "secord"
-            },
-            {
-                "title": "Last",
-                "value": "last"
-            }
-        ],
-        "current": "secord"
-    }
+  "status": 0,
+  "msg": "",
+  "data": {
+    "steps": [
+      {
+        "title": "First",
+        "subTitle": "this is sub title",
+        "value": "first"
+      },
+      {
+        "title": "Secord",
+        "description": "this is description",
+        "value": "secord"
+      },
+      {
+        "title": "Last",
+        "value": "last"
+      }
+    ],
+    "value": "secord",
+    "status": "error"
+  }
 }

packages/amis-ui/scss/components/_steps.scss

@@ -14,7 +14,7 @@
       &Icon {
         vertical-align: top;
         display: inline-block;
-        padding-right: px2rem(10px);
+        margin-right: px2rem(10px);
         .#{$ns}StepsItem-icon {
           display: inline-block;
           width: px2rem(30px);
@@ -26,7 +26,7 @@
           .icon {
             width: px2rem(9px);
             height: px2rem(9px);
-            position: relative; 
+            position: relative;
             top: 0;
           }
         }
@@ -77,7 +77,7 @@
             white-space: nowrap;
             position: relative;
             bottom: px2rem(20px);
-            >span {
+            > span {
               color: var(--Steps-description-title-color);
               font-size: var(--Steps-description-title-fontsize);
             }
@@ -102,15 +102,19 @@
       min-height: 75px;
       overflow: hidden !important;
       &-container {
-        &Icon:after {
-          content: '';
-          position: absolute;
-          right: 0;
-          top: px2rem(36px);
-          height: 9999px;
-          left: px2rem(11px);
-          width: 1px;
-          background-color: var(--Steps-line-bg);
+        &Icon {
+          position: relative;
+          &:after {
+            content: '';
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            right: 0;
+            top: px2rem(36px);
+            height: 9999px;
+            width: 1px;
+            background-color: var(--Steps-line-bg);
+          }
         }
         &Wrapper > .#{$ns}StepsItem-body > .#{$ns}StepsItem-title {
           &:after {
@@ -321,14 +325,14 @@
       border: 1px solid var(--Steps-bg);
     }
     .#{$ns}StepsItem-title,
-      .#{$ns}StepsItem-subTitle,
-      .#{$ns}StepsItem-description {
-        color: var(--Steps-status-wait);
-      }
+    .#{$ns}StepsItem-subTitle,
+    .#{$ns}StepsItem-description {
+      color: var(--Steps-status-wait);
+    }
   }
   .#{$ns}StepsItem.is-error {
     .#{$ns}StepsItem-icon {
-        background-color: var(--Steps-status-error);
+      background-color: var(--Steps-status-error);
       color: var(--white);
       border: 1px solid var(--Steps-status-error);
     }

packages/amis/__tests__/renderers/Steps.test.tsx

@@ -50,7 +50,6 @@ test('Renderer:steps status', async () => {
     amisRender(
       {
         type: 'steps',
-        value: 3,
         className: 'className',
         status: {
           a: 'finish',
@@ -93,7 +92,6 @@ test('Renderer:steps labelPlacement', async () => {
     amisRender(
       {
         type: 'steps',
-        value: 'b',
         labelPlacement: 'vertical',
         className: 'className',
         steps: [
@@ -129,7 +127,6 @@ test('Renderer:steps progressDot', async () => {
     amisRender(
       {
         type: 'steps',
-        value: 'b',
         className: 'className',
         progressDot: true,
         steps: [
@@ -163,7 +160,6 @@ test('Renderer:steps with vertical mode', async () => {
   const {container} = render(
     amisRender({
       type: 'steps',
-      value: 'b',
       className: 'className',
       progressDot: true,
       mode: 'vertical',

packages/amis/__tests__/renderers/__snapshots__/Steps.test.tsx.snap

@@ -310,7 +310,7 @@ exports[`Renderer:steps labelPlacement 1`] = `
     class="cxd-Steps cxd-Steps--Placement-vertical cxd-Steps-- cxd-Steps--horizontal className"
   >
     <li
-      class="cxd-StepsItem is-wait cxd-StepsItem-"
+      class="cxd-StepsItem is-process cxd-StepsItem-"
     >
       <div
         class="cxd-StepsItem-container"
@@ -459,7 +459,7 @@ exports[`Renderer:steps progressDot 1`] = `
     class="cxd-Steps cxd-Steps--Placement-vertical cxd-Steps--ProgressDot cxd-Steps--horizontal className"
   >
     <li
-      class="cxd-StepsItem is-wait cxd-StepsItem-ProgressDot"
+      class="cxd-StepsItem is-process cxd-StepsItem-ProgressDot"
     >
       <div
         class="cxd-StepsItem-container"
@@ -599,15 +599,12 @@ exports[`Renderer:steps status 1`] = `
           class="cxd-StepsItem-containerTail"
         />
         <div
-          class="cxd-StepsItem-containerIcon is-success"
+          class="cxd-StepsItem-containerIcon"
         >
           <span
             class="cxd-StepsItem-icon"
           >
-            <icon-mock
-              classname="icon icon-check"
-              icon="check"
-            />
+            1
           </span>
         </div>
         <div
@@ -617,7 +614,7 @@ exports[`Renderer:steps status 1`] = `
             class="cxd-StepsItem-body"
           >
             <div
-              class="cxd-StepsItem-title cxd-StepsItem- is-success"
+              class="cxd-StepsItem-title cxd-StepsItem-"
             >
               <span
                 class="cxd-StepsItem-ellText"
@@ -646,15 +643,12 @@ exports[`Renderer:steps status 1`] = `
           class="cxd-StepsItem-containerTail"
         />
         <div
-          class="cxd-StepsItem-containerIcon is-success"
+          class="cxd-StepsItem-containerIcon"
         >
           <span
             class="cxd-StepsItem-icon"
           >
-            <icon-mock
-              classname="icon icon-check"
-              icon="check"
-            />
+            2
           </span>
         </div>
         <div
@@ -664,7 +658,7 @@ exports[`Renderer:steps status 1`] = `
             class="cxd-StepsItem-body"
           >
             <div
-              class="cxd-StepsItem-title cxd-StepsItem- is-success"
+              class="cxd-StepsItem-title cxd-StepsItem-"
             >
               <span
                 class="cxd-StepsItem-ellText"
@@ -701,15 +695,12 @@ exports[`Renderer:steps status 1`] = `
           class="cxd-StepsItem-containerTail"
         />
         <div
-          class="cxd-StepsItem-containerIcon is-success"
+          class="cxd-StepsItem-containerIcon"
         >
           <span
             class="cxd-StepsItem-icon"
           >
-            <icon-mock
-              classname="icon icon-check"
-              icon="check"
-            />
+            3
           </span>
         </div>
         <div
@@ -719,7 +710,7 @@ exports[`Renderer:steps status 1`] = `
             class="cxd-StepsItem-body"
           >
             <div
-              class="cxd-StepsItem-title cxd-StepsItem- is-success"
+              class="cxd-StepsItem-title cxd-StepsItem-"
             >
               <span
                 class="cxd-StepsItem-ellText"
@@ -748,7 +739,7 @@ exports[`Renderer:steps with vertical mode 1`] = `
     class="cxd-Steps cxd-Steps--Placement-vertical cxd-Steps--ProgressDot cxd-Steps--vertical className"
   >
     <li
-      class="cxd-StepsItem is-wait cxd-StepsItem-ProgressDot"
+      class="cxd-StepsItem is-process cxd-StepsItem-ProgressDot"
     >
       <div
         class="cxd-StepsItem-container"

packages/amis/src/renderers/Steps.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
-import {Renderer, RendererProps} from 'amis-core';
-import {BaseSchema, SchemaCollection} from '../Schema';
-import {Steps} from 'amis-ui';
-import {RemoteOptionsProps, withRemoteConfig} from 'amis-ui';
 import {
+  Renderer,
+  RendererProps,
   isPureVariable,
   resolveVariable,
-  resolveVariableAndFilter
+  resolveVariableAndFilter,
+  filter,
+  getPropValue
 } from 'amis-core';
-import {filter} from 'amis-core';
-import {getPropValue} from 'amis-core';
-import {StepStatus} from 'amis-ui';
-
+import {Steps, StepStatus, RemoteOptionsProps, withRemoteConfig} from 'amis-ui';
+import {BaseSchema, SchemaCollection} from '../Schema';
+import isPlainObject from 'lodash/isPlainObject';
 import type {SchemaExpression} from 'amis-core';
 
 export type StepSchema = {
@@ -102,7 +101,6 @@ export function StepsCmpt(props: StepsProps) {
     progressDot,
     data,
     source,
-    config,
     render,
     useMobileUI
   } = props;
@@ -113,10 +111,7 @@ export function StepsCmpt(props: StepsProps) {
   ) as Array<StepSchema>;
   /** 步骤数据源 */
   const stepsRow: Array<StepSchema> =
-    (Array.isArray(sourceResult) ? sourceResult : undefined) ||
-    config ||
-    steps ||
-    [];
+    (Array.isArray(sourceResult) ? sourceResult : undefined) || steps || [];
   /** 状态数据源 */
   const statusValue = isPureVariable(status)
     ? resolveVariableAndFilter(status, data, '| raw')
@@ -127,7 +122,7 @@ export function StepsCmpt(props: StepsProps) {
   const value = getPropValue(props) ?? 0;
   const resolveValue =
     typeof value === 'string' && isNaN(+value)
-      ? +(resolveVariable(value, data) as string) || +value
+      ? resolveVariable(value, data) || value
       : +value;
   const valueIndex = stepsRow.findIndex(
     item => item.value && item.value === resolveValue
@@ -174,15 +169,15 @@ export function StepsCmpt(props: StepsProps) {
   );
 }
 
-const StepsWithRemoteConfig = withRemoteConfig({
-  adaptor: data => data.steps || data
-})(
+const StepsWithRemoteConfig = withRemoteConfig()(
   class extends React.Component<
     RemoteOptionsProps & React.ComponentProps<typeof StepsCmpt>
   > {
     render() {
       const {config, deferLoad, loading, updateConfig, ...rest} = this.props;
-      return <StepsCmpt config={config} {...rest} />;
+      const sourceConfig = isPlainObject(config) ? config : null;
+
+      return <StepsCmpt {...rest} {...sourceConfig} />;
     }
   }
 );