[improvement] SwitchCell: jsx (#2656)

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" style="font-size:24px;background-color:undefined;">
-            <div class="van-switch__node">
+            <div class="van-switch__node"></div>
-              <!---->
-            </div>
           </div>
         </div>
       </div>

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 van-switch--on" style="font-size:24px;background-color:undefined;">
-        <div class="van-switch__node">
+        <div class="van-switch__node"></div>
-          <!---->
-        </div>
       </div>
     </div>
   </div>

packages/checkbox/index.js

@@ -4,12 +4,7 @@ import CheckboxMixin from '../mixins/checkbox';
 const [sfc, bem] = use('checkbox');
 
 export default sfc({
-  mixins: [
+  mixins: [CheckboxMixin('van-checkbox-group', bem)],
-    CheckboxMixin({
-      bem,
-      parent: 'van-checkbox-group'
-    })
-  ],
 
   computed: {
     checked: {

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: {

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'
+    }
+  }
+};

packages/radio/index.js

@@ -4,12 +4,7 @@ import CheckboxMixin from '../mixins/checkbox';
 const [sfc, bem] = use('radio');
 
 export default sfc({
-  mixins: [
+  mixins: [CheckboxMixin('van-radio-group', bem)],
-    CheckboxMixin({
-      bem,
-      parent: 'van-radio-group'
-    })
-  ],
 
   computed: {
     currentValue: {

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>
+    );
+  }
+});

packages/switch-cell/index.vue

@@ -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>

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 van-switch--on" style="font-size:24px;background-color:undefined;">
-            <div class="van-switch__node">
+            <div class="van-switch__node"></div>
-              <!---->
-            </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 van-switch--on van-switch--disabled" style="font-size:24px;background-color:undefined;">
-            <div class="van-switch__node">
+            <div class="van-switch__node"></div>
-              <!---->
-            </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>

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: {
+  mixins: [SwitchMixin],
-    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'
-    }
-  },
 
   methods: {
     onClick() {

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 class="van-switch__node"></div>
-        <!---->
-      </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 class="van-switch__node"></div>
-        <!---->
-      </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 class="van-switch__node"></div>
-        <!---->
-      </div>
     </div>
   </div>
   <div>
     <div class="van-switch van-switch--on" style="font-size:30px;background-color:#07c160;">
-      <div class="van-switch__node">
+      <div class="van-switch__node"></div>
-        <!---->
-      </div>
     </div>
   </div>
   <div>
     <div class="van-switch van-switch--on" style="font-size:30px;background-color:undefined;">
-      <div class="van-switch__node">
+      <div class="van-switch__node"></div>
-        <!---->
-      </div>
     </div>
   </div>
 </div>