From 5e0a7cbea416e25fce13922b95d9b606fae98ee5 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Thu, 1 Nov 2018 19:58:17 +0800
Subject: [PATCH] [improvement] Switch: add active-color prop (#845)

---
 example/pages/switch/index.js   | 12 +++++-------
 example/pages/switch/index.json |  3 ++-
 example/pages/switch/index.wxml |  4 ++++
 packages/switch/README.md       | 11 ++++++++++-
 packages/switch/index.less      |  9 +++++----
 packages/switch/index.ts        | 16 ++++++++++++++++
 packages/switch/index.wxml      |  4 ++--
 7 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/example/pages/switch/index.js b/example/pages/switch/index.js
index 598eb515..aa0d59fb 100644
--- a/example/pages/switch/index.js
+++ b/example/pages/switch/index.js
@@ -1,4 +1,5 @@
 import Page from '../../common/page';
+import Dialog from '../../dist/dialog/dialog';
 
 Page({
   data: {
@@ -11,14 +12,11 @@ Page({
   },
 
   onChange2({ detail }) {
-    wx.showModal({
+    Dialog.confirm({
       title: '提示',
-      content: '是否切换开关？',
-      success: res => {
-        if (res.confirm) {
-          this.setData({ checked2: detail });
-        }
-      }
+      message: '是否切换开关？'
+    }).then((res) => {
+      this.setData({ checked2: detail });
     });
   }
 });
diff --git a/example/pages/switch/index.json b/example/pages/switch/index.json
index c3007790..55656a98 100644
--- a/example/pages/switch/index.json
+++ b/example/pages/switch/index.json
@@ -2,6 +2,7 @@
   "navigationBarTitleText": "Switch 开关",
   "usingComponents": {
     "demo-block": "../../components/demo-block/index",
-    "van-switch": "../../dist/switch/index"
+    "van-switch": "../../dist/switch/index",
+    "van-dialog": "../../dist/dialog/index"
   }
 }
diff --git a/example/pages/switch/index.wxml b/example/pages/switch/index.wxml
index 19e53b5e..fb342d70 100644
--- a/example/pages/switch/index.wxml
+++ b/example/pages/switch/index.wxml
@@ -25,6 +25,10 @@
   <van-switch
     checked="{{ checked2 }}"
     size="36px"
+    active-color="#4b0"
+    inactive-color="#f44"
     bind:change="onChange2"
   />
 </demo-block>
+
+<van-dialog id="van-dialog" />
diff --git a/packages/switch/README.md b/packages/switch/README.md
index 5acf1196..d606d005 100644
--- a/packages/switch/README.md
+++ b/packages/switch/README.md
@@ -1,6 +1,7 @@
 ## Switch 开关
 
 ### 使用指南
+
 在 index.json 中引入组件
 ```json
 "usingComponents": {
@@ -11,6 +12,7 @@
 ### 代码演示
 
 #### 基础用法
+
 ```html
 <van-switch checked="{{ checked }}" bind:change="onChange" />
 ```
@@ -29,20 +31,25 @@ Page({
 ```
 
 #### 禁用状态
+
 ```html
 <van-switch checked="{{ checked }}" disabled />
 ```
 
 #### 加载状态
+
 ```html
-<van-switch checked="{{ checked }}" loading  />
+<van-switch checked="{{ checked }}" loading />
 ```
 
 #### 高级用法
+
 ```html
 <van-switch
   size="36px"
   checked="{{ checked }}"
+  active-color="#4b0"
+  inactive-color="#f44"
   bind:change="onChange"
 />
 ```
@@ -76,6 +83,8 @@ Page({
 | loading | 是否为加载状态 | `Boolean` | `false` |
 | disabled | 是否为禁用状态 | `Boolean` | `false` |
 | size | 开关尺寸 | `String` | `30px` |
+| active-color | 打开时的背景色 | `String` | `#1989fa` |
+| inactive-color | 关闭时的背景色 | `String` | `#fff` |
 
 ### Event
 
diff --git a/packages/switch/index.less b/packages/switch/index.less
index 1c77ec29..77cce551 100644
--- a/packages/switch/index.less
+++ b/packages/switch/index.less
@@ -2,13 +2,14 @@
 
 .van-switch {
   height: 1em;
-  width: 1.6em;
+  width: 1.8em;
   display: inline-block;
   position: relative;
-  background: @white;
+  border-radius: 1em;
   box-sizing: content-box;
   border: 1px solid rgba(0, 0, 0, .1);
-  border-radius: 1em;
+  background-color: @white;
+  transition: background-color .3s;
 
   &__node {
     top: 0;
@@ -35,7 +36,7 @@
     background-color: @blue;
 
     .van-switch__node {
-      transform: translateX(.6em);
+      transform: translateX(.8em);
     }
   }
 
diff --git a/packages/switch/index.ts b/packages/switch/index.ts
index e7ac1bcc..f068743c 100644
--- a/packages/switch/index.ts
+++ b/packages/switch/index.ts
@@ -9,6 +9,8 @@ VantComponent({
     checked: Boolean,
     loading: Boolean,
     disabled: Boolean,
+    activeColor: String,
+    inactiveColor: String,
     size: {
       type: String,
       value: '30px'
@@ -21,6 +23,20 @@ VantComponent({
     }
   },
 
+  computed: {
+    classes(): string {
+      return this.classNames('custom-class', 'van-switch', {
+        'van-switch--on': this.data.checked,
+        'van-switch--disabled': this.data.disabled
+      });
+    },
+
+    style() {
+      const backgroundColor = this.data.checked ? this.data.activeColor : this.data.inactiveColor;
+      return `font-size: ${this.data.size}; ${ backgroundColor ? `background-color: ${backgroundColor}` : '' }`
+    }
+  },
+
   created() {
     this.setData({ value: this.data.checked });
   },
diff --git a/packages/switch/index.wxml b/packages/switch/index.wxml
index 4b719f1d..cae37436 100644
--- a/packages/switch/index.wxml
+++ b/packages/switch/index.wxml
@@ -1,6 +1,6 @@
 <view
-  class="van-switch custom-class {{ checked ? 'van-switch--on' : '' }} {{ disabled ? 'van-switch--disabled' : '' }}"
-  style="font-size: {{ size }};"
+  style="{{ style }}"
+  class="{{ classes }}"
   bind:tap="onClick"
 >
   <view class="van-switch__node node-class">