From 9183849e6af540cea73efc150a14b4320a33e985 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Thu, 31 Jan 2019 14:37:24 +0800
Subject: [PATCH] [improvement] SwitchCell: jsx (#2656)

---
 .../test/__snapshots__/demo.spec.js.snap      |  6 +--
 .../test/__snapshots__/index.spec.js.snap     |  6 +--
 packages/checkbox/index.js                    |  7 +--
 packages/mixins/checkbox.js                   |  2 +-
 packages/mixins/switch.js                     | 25 +++++++++
 packages/radio/index.js                       |  7 +--
 packages/switch-cell/index.js                 | 38 +++++++++++++
 packages/switch-cell/index.vue                | 54 -------------------
 .../test/__snapshots__/demo.spec.js.snap      | 14 ++---
 packages/switch/index.js                      | 21 +-------
 .../test/__snapshots__/demo.spec.js.snap      | 20 ++-----
 11 files changed, 82 insertions(+), 118 deletions(-)
 create mode 100644 packages/mixins/switch.js
 create mode 100644 packages/switch-cell/index.js
 delete mode 100644 packages/switch-cell/index.vue

diff --git a/packages/address-edit/test/__snapshots__/demo.spec.js.snap b/packages/address-edit/test/__snapshots__/demo.spec.js.snap
index 4eec3ec1f..3fd527023 100644
--- a/packages/address-edit/test/__snapshots__/demo.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/demo.spec.js.snap
@@ -41,10 +41,8 @@ exports[`renders demo correctly 1`] = `
       <div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
         <div class="van-cell__title"><span>设为默认收货地址</span></div>
         <div class="van-cell__value">
-          <div title="设为默认收货地址" class="van-switch" style="font-size:24px;background-color:undefined;">
-            <div class="van-switch__node">
-              <!---->
-            </div>
+          <div class="van-switch" style="font-size:24px;background-color:undefined;">
+            <div class="van-switch__node"></div>
           </div>
         </div>
       </div>
diff --git a/packages/address-edit/test/__snapshots__/index.spec.js.snap b/packages/address-edit/test/__snapshots__/index.spec.js.snap
index a2a322fad..654db7ce2 100644
--- a/packages/address-edit/test/__snapshots__/index.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/index.spec.js.snap
@@ -96,10 +96,8 @@ exports[`create a AddressEdit with props 1`] = `
   <div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
     <div class="van-cell__title"><span>设为默认收货地址</span></div>
     <div class="van-cell__value">
-      <div title="设为默认收货地址" class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
-        <div class="van-switch__node">
-          <!---->
-        </div>
+      <div class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
+        <div class="van-switch__node"></div>
       </div>
     </div>
   </div>
diff --git a/packages/checkbox/index.js b/packages/checkbox/index.js
index 994eb4c59..ad7ff179e 100644
--- a/packages/checkbox/index.js
+++ b/packages/checkbox/index.js
@@ -4,12 +4,7 @@ import CheckboxMixin from '../mixins/checkbox';
 const [sfc, bem] = use('checkbox');
 
 export default sfc({
-  mixins: [
-    CheckboxMixin({
-      bem,
-      parent: 'van-checkbox-group'
-    })
-  ],
+  mixins: [CheckboxMixin('van-checkbox-group', bem)],
 
   computed: {
     checked: {
diff --git a/packages/mixins/checkbox.js b/packages/mixins/checkbox.js
index e3cb4b9d7..94ea5dc23 100644
--- a/packages/mixins/checkbox.js
+++ b/packages/mixins/checkbox.js
@@ -4,7 +4,7 @@
 import Icon from '../icon';
 import findParent from './find-parent';
 
-export default ({ parent, bem }) => ({
+export default (parent, bem) => ({
   mixins: [findParent],
 
   props: {
diff --git a/packages/mixins/switch.js b/packages/mixins/switch.js
new file mode 100644
index 000000000..303279521
--- /dev/null
+++ b/packages/mixins/switch.js
@@ -0,0 +1,25 @@
+/**
+ * Common Switch Props
+ */
+
+export default {
+  props: {
+    value: null,
+    loading: Boolean,
+    disabled: Boolean,
+    activeColor: String,
+    inactiveColor: String,
+    activeValue: {
+      type: null,
+      default: true
+    },
+    inactiveValue: {
+      type: null,
+      default: false
+    },
+    size: {
+      type: String,
+      default: '30px'
+    }
+  }
+};
diff --git a/packages/radio/index.js b/packages/radio/index.js
index 8552690fc..f9705e710 100644
--- a/packages/radio/index.js
+++ b/packages/radio/index.js
@@ -4,12 +4,7 @@ import CheckboxMixin from '../mixins/checkbox';
 const [sfc, bem] = use('radio');
 
 export default sfc({
-  mixins: [
-    CheckboxMixin({
-      bem,
-      parent: 'van-radio-group'
-    })
-  ],
+  mixins: [CheckboxMixin('van-radio-group', bem)],
 
   computed: {
     currentValue: {
diff --git a/packages/switch-cell/index.js b/packages/switch-cell/index.js
new file mode 100644
index 000000000..770f6cb49
--- /dev/null
+++ b/packages/switch-cell/index.js
@@ -0,0 +1,38 @@
+import { use } from '../utils';
+import Cell from '../cell';
+import Switch from '../switch';
+import SwitchMixin from '../mixins/switch';
+
+const [sfc, bem] = use('switch-cell');
+
+export default sfc({
+  mixins: [SwitchMixin],
+
+  props: {
+    title: String,
+    border: Boolean,
+    size: {
+      type: String,
+      default: '24px'
+    }
+  },
+
+  watch: {
+    value() {
+      this.$emit('change', this.value);
+    }
+  },
+
+  render(h) {
+    return (
+      <Cell center title={this.title} border={this.border} class={bem()}>
+        <Switch
+          {...{ props: this.$props }}
+          onInput={value => {
+            this.$emit('input', value);
+          }}
+        />
+      </Cell>
+    );
+  }
+});
diff --git a/packages/switch-cell/index.vue b/packages/switch-cell/index.vue
deleted file mode 100644
index 433d5e651..000000000
--- a/packages/switch-cell/index.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <cell
-    center
-    :title="title"
-    :border="border"
-    :class="b()"
-  >
-    <van-switch
-      v-bind="$props"
-      @input="$emit('input', $event)"
-    />
-  </cell>
-</template>
-
-<script>
-import VanSwitch from '../switch';
-import create from '../utils/create';
-
-export default create({
-  name: 'switch-cell',
-
-  components: {
-    VanSwitch
-  },
-
-  props: {
-    value: null,
-    title: String,
-    border: Boolean,
-    loading: Boolean,
-    disabled: Boolean,
-    activeColor: String,
-    inactiveColor: String,
-    activeValue: {
-      type: null,
-      default: true
-    },
-    inactiveValue: {
-      type: null,
-      default: false
-    },
-    size: {
-      type: String,
-      default: '24px'
-    }
-  },
-
-  watch: {
-    value() {
-      this.$emit('change', this.value);
-    }
-  }
-});
-</script>
diff --git a/packages/switch-cell/test/__snapshots__/demo.spec.js.snap b/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
index e312caf1a..ffa1b34de 100644
--- a/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
+++ b/packages/switch-cell/test/__snapshots__/demo.spec.js.snap
@@ -7,10 +7,8 @@ exports[`renders demo correctly 1`] = `
       <div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
         <div class="van-cell__title"><span>标题</span></div>
         <div class="van-cell__value">
-          <div title="标题" class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
-            <div class="van-switch__node">
-              <!---->
-            </div>
+          <div class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
+            <div class="van-switch__node"></div>
           </div>
         </div>
       </div>
@@ -21,10 +19,8 @@ exports[`renders demo correctly 1`] = `
       <div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
         <div class="van-cell__title"><span>标题</span></div>
         <div class="van-cell__value">
-          <div title="标题" class="van-switch van-switch--on van-switch--disabled" style="font-size:24px;background-color:undefined;">
-            <div class="van-switch__node">
-              <!---->
-            </div>
+          <div class="van-switch van-switch--on van-switch--disabled" style="font-size:24px;background-color:undefined;">
+            <div class="van-switch__node"></div>
           </div>
         </div>
       </div>
@@ -35,7 +31,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-cell van-cell--center van-cell--borderless van-switch-cell">
         <div class="van-cell__title"><span>标题</span></div>
         <div class="van-cell__value">
-          <div title="标题" class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
+          <div class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
             <div class="van-switch__node">
               <div class="van-loading van-loading--circular van-loading van-switch__loading" style="color:#c9c9c9;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
             </div>
diff --git a/packages/switch/index.js b/packages/switch/index.js
index e6c033fda..07815f6dd 100644
--- a/packages/switch/index.js
+++ b/packages/switch/index.js
@@ -1,28 +1,11 @@
 import { use } from '../utils';
 import Loading from '../loading';
+import SwitchMixin from '../mixins/switch';
 
 const [sfc, bem] = use('switch');
 
 export default sfc({
-  props: {
-    value: null,
-    loading: Boolean,
-    disabled: Boolean,
-    activeColor: String,
-    inactiveColor: String,
-    activeValue: {
-      type: null,
-      default: true
-    },
-    inactiveValue: {
-      type: null,
-      default: false
-    },
-    size: {
-      type: String,
-      default: '30px'
-    }
-  },
+  mixins: [SwitchMixin],
 
   methods: {
     onClick() {
diff --git a/packages/switch/test/__snapshots__/demo.spec.js.snap b/packages/switch/test/__snapshots__/demo.spec.js.snap
index 95434edef..a236fe2a7 100644
--- a/packages/switch/test/__snapshots__/demo.spec.js.snap
+++ b/packages/switch/test/__snapshots__/demo.spec.js.snap
@@ -4,16 +4,12 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-switch van-switch--on" style="font-size:30px;background-color:undefined;">
-      <div class="van-switch__node">
-        <!---->
-      </div>
+      <div class="van-switch__node"></div>
     </div>
   </div>
   <div>
     <div class="van-switch van-switch--on van-switch--disabled" style="font-size:30px;background-color:undefined;">
-      <div class="van-switch__node">
-        <!---->
-      </div>
+      <div class="van-switch__node"></div>
     </div>
   </div>
   <div>
@@ -25,23 +21,17 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
-      <div class="van-switch__node">
-        <!---->
-      </div>
+      <div class="van-switch__node"></div>
     </div>
   </div>
   <div>
     <div class="van-switch van-switch--on" style="font-size:30px;background-color:#07c160;">
-      <div class="van-switch__node">
-        <!---->
-      </div>
+      <div class="van-switch__node"></div>
     </div>
   </div>
   <div>
     <div class="van-switch van-switch--on" style="font-size:30px;background-color:undefined;">
-      <div class="van-switch__node">
-        <!---->
-      </div>
+      <div class="van-switch__node"></div>
     </div>
   </div>
 </div>