From ee794b07fd48820bd308166c839d7188793ced0e Mon Sep 17 00:00:00 2001
From: Lindy <33708359+Lindysen@users.noreply.github.com>
Date: Fri, 13 Dec 2019 10:38:25 +0800
Subject: [PATCH] feat(Steps):  add inactive-color feature (#2497)

* feat(Steps): add inactive-color new feature

* feat(Steps): add inactive-color new feature
---
 packages/steps/README.md  | 1 +
 packages/steps/index.ts   | 6 +++++-
 packages/steps/index.wxml | 9 +++++----
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/steps/README.md b/packages/steps/README.md
index 1d88daef..52c2d816 100644
--- a/packages/steps/README.md
+++ b/packages/steps/README.md
@@ -79,6 +79,7 @@ Page({
 | active | 当前步骤 | *number* | 0 | - |
 | direction | 显示方向，可选值为 `horizontal` `vertical` | *string* | `horizontal` | - |
 | active-color | 激活状态颜色 | *string* | `#07c160` | - |
+| inactive-color | 未激活状态颜色 | *string* | `#969799` | - |
 | active-icon | 激活状态底部图标，可选值见 [Icon 组件](#/icon) | *string* | `checked` | - |
 | inactive-icon | 未激活状态底部图标，可选值见 [Icon 组件](#/icon) | *string* | - | - |
 
diff --git a/packages/steps/index.ts b/packages/steps/index.ts
index 75c06b9b..8cc20f58 100644
--- a/packages/steps/index.ts
+++ b/packages/steps/index.ts
@@ -1,5 +1,5 @@
 import { VantComponent } from '../common/component';
-import { GREEN } from '../common/color';
+import { GREEN, GRAY_DARK } from '../common/color';
 
 VantComponent({
   props: {
@@ -14,6 +14,10 @@ VantComponent({
       type: String,
       value: GREEN
     },
+    inactiveColor: {
+      type: String,
+      value: GRAY_DARK
+    },
     activeIcon: {
       type: String,
       value: 'checked'
diff --git a/packages/steps/index.wxml b/packages/steps/index.wxml
index 9e280d87..08a5f2d6 100644
--- a/packages/steps/index.wxml
+++ b/packages/steps/index.wxml
@@ -6,6 +6,7 @@
       wx:for="{{ steps }}"
       wx:key="index"
       class="{{ utils.bem('step', [direction, status(index, active)]) }} van-hairline"
+      style="{{ status(index, active) === 'inactive' ? 'color: ' + inactiveColor: '' }}"
     >
       <view class="van-step__title" style="{{ index === active ? 'color: ' + activeColor : '' }}">
         <view>{{ item.text }}</view>
@@ -15,14 +16,14 @@
         <block wx:if="{{ index !== active }}">
           <van-icon
             wx:if="{{ inactiveIcon }}"
-            color="#969799"
+            color="{{ status(index, active) === 'inactive' ? inactiveColor: activeColor }}"
             name="{{ inactiveIcon }}"
             custom-class="van-step__icon"
           />
           <view
             wx:else
             class="van-step__circle"
-            style="{{ index < active ? 'background-color: ' + activeColor : '' }}"
+            style="{{ 'background-color: ' + (index < active ? activeColor : inactiveColor) }}"
           />
         </block>
 
@@ -30,7 +31,7 @@
       </view>
       <view
         wx:if="{{ index !== steps.length - 1 }}"
-        class="van-step__line" style="{{ index < active ? 'background-color: ' + activeColor : '' }}"
+        class="van-step__line" style="{{ 'background-color: ' + (index < active ? activeColor : inactiveColor) }}"
       />
     </view>
   </view>
@@ -44,7 +45,7 @@ function get(index, active) {
     return 'process';
   }
 
-  return '';
+  return 'inactive';
 }
 
 module.exports = get;