From 1bad0062f977b1ff4dba82394e29fae7c00a88f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BE=BD=E8=88=AA?= <geyuhang.pt@alibaba-inc.com>
Date: Fri, 26 Jun 2015 10:43:01 +0800
Subject: [PATCH] support ant-design prefix class and prefixCls property

---
 components/steps/index.jsx  | 20 +++++++++++-
 package.json                |  2 +-
 style/components/steps.less | 65 +++++++++++++++++++------------------
 3 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/components/steps/index.jsx b/components/steps/index.jsx
index 64361e183f..bc100e863c 100644
--- a/components/steps/index.jsx
+++ b/components/steps/index.jsx
@@ -1,3 +1,21 @@
 'use strict';
 
-module.exports = require('rc-steps');
+var React = require('react');
+var Steps = require('rc-steps');
+
+var AntSteps = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant',
+      size: 'default'
+    };
+  },
+  render() {
+    return (<Steps size={this.props.size} prefixCls={this.props.prefixCls}>
+      {this.props.children}
+    </Steps>);
+  }
+});
+AntSteps.Step = Steps.Step;
+
+module.exports = AntSteps;
diff --git a/package.json b/package.json
index d2d6b14a76..8c85ff3cb2 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "rc-select": "~4.0.0",
     "rc-tabs": "~5.1.0",
     "rc-tooltip": "~2.1.1",
-    "rc-steps": "~1.0.2"
+    "rc-steps": "~1.0.3"
   },
   "devDependencies": {
     "babel-core": "~5.4.7",
diff --git a/style/components/steps.less b/style/components/steps.less
index 87a6c257a5..31e3014094 100644
--- a/style/components/steps.less
+++ b/style/components/steps.less
@@ -1,3 +1,6 @@
+@import "../mixins/index";
+@stepsPrefixClass: ~"@{css-prefix}steps";
+
 @active-color: #3fc7fa;
 @wait-color: #e9e9e9;
 
@@ -7,52 +10,52 @@
   transition: @transition;
 }
 
-.rc-steps {
+.@{stepsPrefixClass} {
   font-size: 0;
   width: 100%;
   line-height: 1.5;
 
-  .rc-steps-item {
+  .@{stepsPrefixClass}-item {
     position: relative;
     display: inline-block;
 
-    &.rc-steps-status-wait {
-      .rc-steps-head {
+    &.@{stepsPrefixClass}-status-wait {
+      .@{stepsPrefixClass}-head {
         border-color: @wait-color;
         background-color: #fff;
 
-        > .rc-steps-icon {
+        > .@{stepsPrefixClass}-icon {
           color: @wait-color;
         }
       }
     }
-    &.rc-steps-status-process {
-      .rc-steps-head {
+    &.@{stepsPrefixClass}-status-process {
+      .@{stepsPrefixClass}-head {
         border-color: @active-color;
         background-color: @active-color;
 
-        > .rc-steps-icon {
+        > .@{stepsPrefixClass}-icon {
           color: #fff;
         }
       }
     }
-    &.rc-steps-status-finish {
-      .rc-steps-head {
+    &.@{stepsPrefixClass}-status-finish {
+      .@{stepsPrefixClass}-head {
         border-color: @active-color;
         background-color: #fff;
-        > .rc-steps-icon {
+        > .@{stepsPrefixClass}-icon {
           color: @active-color;
         }
       }
     }
 
-    &.rc-steps-custom {
-      .rc-steps-head {
+    &.@{stepsPrefixClass}-custom {
+      .@{stepsPrefixClass}-head {
         background: none;
         border: 0;
       }
-      &.rc-steps-status-process {
-        .rc-steps-title {
+      &.@{stepsPrefixClass}-status-process {
+        .@{stepsPrefixClass}-title {
           color: @active-color;
         }
       }
@@ -60,12 +63,12 @@
 
   }
 
-  .rc-steps-head, .rc-steps-main, .rc-steps-tail {
+  .@{stepsPrefixClass}-head, .@{stepsPrefixClass}-main, .@{stepsPrefixClass}-tail {
     display: inline-block;
     vertical-align: top;
 
   }
-  .rc-steps-head {
+  .@{stepsPrefixClass}-head {
     border:2px solid @wait-color;
     width: 24px;
     height: 24px;
@@ -77,7 +80,7 @@
     .transition(background-color 0.1s ease);
     .transition(border-color 0.1s ease);
 
-    > .rc-steps-icon {
+    > .@{stepsPrefixClass}-icon {
       line-height: 1;
       display: inline-block;
       vertical-align: text-top;
@@ -85,21 +88,21 @@
       position: relative;
     }
   }
-  .rc-steps-main {
+  .@{stepsPrefixClass}-main {
     max-width: 75px;
     margin-top: 3px;
   }
-  .rc-steps-title {
+  .@{stepsPrefixClass}-title {
     font-size: 14px;
     margin-bottom: 4px;
     color: #666;
     font-weight: bold;
   }
-  .rc-steps-description {
+  .@{stepsPrefixClass}-description {
     font-size: 12px;
     color: #999;
   }
-  .rc-steps-tail {
+  .@{stepsPrefixClass}-tail {
     width: 0;
     position: relative;
     top: 12px;
@@ -113,8 +116,8 @@
     }
   }
 
-  &.rc-steps-small {
-    .rc-steps-head {
+  &.@{stepsPrefixClass}-small {
+    .@{stepsPrefixClass}-head {
       border:1px solid @wait-color;
       width: 18px;
       height: 18px;
@@ -125,21 +128,21 @@
       margin-right: 10px;
 
     }
-    .rc-steps-main {
+    .@{stepsPrefixClass}-main {
       max-width: 75px;
       margin-top: 0;
     }
-    .rc-steps-title {
+    .@{stepsPrefixClass}-title {
       font-size: 12px;
       margin-bottom: 4px;
       color: #666;
       font-weight: bold;
     }
-    .rc-steps-description {
+    .@{stepsPrefixClass}-description {
       font-size: 10px;
       color: #999;
     }
-    .rc-steps-tail {
+    .@{stepsPrefixClass}-tail {
       top: 8px;
       padding:0 8px;
       > i {
@@ -150,13 +153,13 @@
     }
   }
 
-  &.rc-steps-init, &.rc-steps-init.rc-steps-small {
-    .rc-steps-tail {
+  &.@{stepsPrefixClass}-init, &.@{stepsPrefixClass}-init.@{stepsPrefixClass}-small {
+    .@{stepsPrefixClass}-tail {
       padding: 0;
     }
   }
 
-  &.rc-steps-small .rc-steps-item.rc-steps-custom .rc-steps-head, .rc-steps-item.rc-steps-custom .rc-steps-head {
+  &.@{stepsPrefixClass}-small .@{stepsPrefixClass}-item.@{stepsPrefixClass}-custom .@{stepsPrefixClass}-head, .@{stepsPrefixClass}-item.@{stepsPrefixClass}-custom .@{stepsPrefixClass}-head {
     width: inherit;
     height: inherit;
     line-height: inherit;