[improvement] SwitchCell: jsx (#2656)

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