From c85e10083d4621251e8d46d6b916a1c742a30305 Mon Sep 17 00:00:00 2001
From: yiminghe <yiminghe@gmail.com>
Date: Wed, 8 Jul 2015 19:47:45 +0800
Subject: [PATCH] add switch

---
 components/form/demo/mix.md     |  3 +-
 components/switch/demo/basic.md | 18 +++++++
 components/switch/index.jsx     | 15 ++++++
 components/switch/index.md      | 10 ++++
 index.js                        |  3 +-
 package.json                    |  1 +
 style/components/index.less     |  1 +
 style/components/switch.less    | 94 +++++++++++++++++++++++++++++++++
 8 files changed, 143 insertions(+), 2 deletions(-)
 create mode 100644 components/switch/demo/basic.md
 create mode 100644 style/components/switch.less

diff --git a/components/form/demo/mix.md b/components/form/demo/mix.md
index 08384b7f54..2f2e0269ae 100644
--- a/components/form/demo/mix.md
+++ b/components/form/demo/mix.md
@@ -11,6 +11,7 @@ var Select = antd.Select;
 var Option = Select.Option;
 var InputNumber = antd.InputNumber;
 var Datepicker = antd.Datepicker;
+var Switch = antd.Switch;
 
 
 function handleSelectChange(value) {
@@ -44,7 +45,7 @@ React.render(
     <div className="ant-form-item">
       <label for="" className="col-6" required>Switch 开关:</label>
       <div className="col-10">
-        <p className="ant-form-text">请填写 switch</p>
+        <Switch />
       </div>
     </div>
     <div className="ant-form-item">
diff --git a/components/switch/demo/basic.md b/components/switch/demo/basic.md
new file mode 100644
index 0000000000..c369d0afb0
--- /dev/null
+++ b/components/switch/demo/basic.md
@@ -0,0 +1,18 @@
+# 基本用法
+
+- order: 0
+
+简单的 switch。
+
+---
+
+````jsx
+var Switch = antd.Switch;
+var container = document.getElementById('components-switch-demo-basic');
+
+function onChange(checked){
+  console.log('switch to ' + checked);
+}
+
+React.render(<Switch defaultChecked={false} onChange={onChange}/>, container);
+````
diff --git a/components/switch/index.jsx b/components/switch/index.jsx
index e69de29bb2..b4e8f54d99 100644
--- a/components/switch/index.jsx
+++ b/components/switch/index.jsx
@@ -0,0 +1,15 @@
+var Switch = require('rc-switch');
+var React = require('react');
+
+var AntSwitch = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-switch'
+    };
+  },
+  render() {
+    return <Switch {...this.props}/>;
+  }
+});
+
+module.exports = AntSwitch;
diff --git a/components/switch/index.md b/components/switch/index.md
index 9e78b5da82..73647b67e6 100644
--- a/components/switch/index.md
+++ b/components/switch/index.md
@@ -11,3 +11,13 @@
 
 - 需要表示开关状态/两种状态之间的切换时；
 - 和 `checkbox `的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
+
+## API
+
+### Switch
+
+| 参数      | 说明                                     | 类型       |  可选值 |默认值 |
+|-----------|------------------------------------------|------------|-------|--------|
+|  checked | 指定当前是否选中 | boolean  |   | false    |
+|  defaultChecked | 初始是否选中 | boolean |  | false |
+|  onChange | 变化时回调函数 | Function(checked:boolean) |  |  |
\ No newline at end of file
diff --git a/index.js b/index.js
index 5e640ea77e..b469467007 100644
--- a/index.js
+++ b/index.js
@@ -14,7 +14,8 @@ var antd = {
   Popconfirm: require('./components/popconfirm'),
   confirm: require('./components/modal/confirm'),
   Steps: require('./components/steps'),
-  InputNumber: require('./components/input-number')
+  InputNumber: require('./components/input-number'),
+  Switch: require('./components/switch')
 };
 
 module.exports = antd;
diff --git a/package.json b/package.json
index 4019050ab2..0330ab204e 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "rc-progress": "~1.0.0",
     "rc-select": "~4.0.0",
     "rc-steps": "~1.1.3",
+    "rc-switch": "~1.1.0",
     "rc-tabs": "~5.1.0",
     "rc-tooltip": "~2.3.0"
   },
diff --git a/style/components/index.less b/style/components/index.less
index 5729dcb2f9..2b88bf6cae 100644
--- a/style/components/index.less
+++ b/style/components/index.less
@@ -1,4 +1,5 @@
 @import "button";
+@import "switch";
 @import "dropdown";
 @import "progress";
 @import "select";
diff --git a/style/components/switch.less b/style/components/switch.less
new file mode 100644
index 0000000000..21a61b80e9
--- /dev/null
+++ b/style/components/switch.less
@@ -0,0 +1,94 @@
+@switchPrefixCls:ant-switch;
+
+.@{switchPrefixCls}{
+  position: relative;
+  display: inline-block;
+  width: 38px;
+  height: 20px;
+  line-height: 20px;
+  vertical-align: middle;
+  border-radius: 20px 20px;
+  border: 1px solid #bcbcbc;
+  background-color: #bcbcbc;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+
+  &:after{
+    display: block;
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50% 50%;
+    background-color: #ffffff;
+    content: " ";
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
+    transform: scale(1);
+    transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+    animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
+    animation-duration: 0.3s;
+    animation-name: rcSwitchOff;
+  }
+
+  &:hover:after{
+    transform: scale(1.1);
+    animation-name: rcSwitchOn;
+  }
+
+  &-checked{
+    border: 1px solid #64b6f7;
+    background-color: #64b6f7;
+
+    &:after{
+      left: 18px;
+    }
+  }
+
+  &-disabled{
+    cursor: no-drop;
+
+    &:after{
+      background: #9e9e9e;
+      animation-name: none;
+      cursor: no-drop;
+    }
+
+    &:hover:after{
+      transform: scale(1);
+      animation-name: none;
+    }
+  }
+
+  &-label {
+    display: inline-block;
+    line-height: 20px;
+    font-size: 14px;
+    padding-left: 10px;
+    vertical-align: middle;
+    white-space: normal;
+    pointer-events: none;
+    user-select: text;
+  }
+}
+
+@keyframes rcSwitchOn {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1.1);
+  }
+}
+@keyframes rcSwitchOff {
+  0% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}