[improvement] Checkbox: jsx (#2497)

packages/checkbox/index.js

@@ -1,36 +1,10 @@
-<template>
+import { use } from '../utils';
-  <div :class="b()">
+import Icon from '../icon';
-    <div
-      :class="b('icon', [shape, { disabled: isDisabled, checked }])"
-      @click="toggle"
-    >
-      <slot
-        name="icon"
-        :checked="checked"
-      >
-        <icon
-          name="success"
-          :style="iconStyle"
-        />
-      </slot>
-    </div>
-    <span
-      v-if="$slots.default"
-      :class="b('label', [labelPosition, { disabled: isDisabled }])"
-      @click="toggle('label')"
-    >
-      <slot />
-    </span>
-  </div>
-</template>
-
-<script>
-import create from '../utils/create';
 import findParent from '../mixins/find-parent';
 
-export default create({
+const [sfc, bem] = use('checkbox');
-  name: 'checkbox',
 
+export default sfc({
   mixins: [findParent],
 
   props: {
@@ -49,9 +23,7 @@ export default create({
   computed: {
     checked: {
       get() {
-        return this.parent
+        return this.parent ? this.parent.value.indexOf(this.name) !== -1 : this.value;
-          ? this.parent.value.indexOf(this.name) !== -1
-          : this.value;
       },
 
       set(val) {
@@ -119,6 +91,36 @@ export default create({
         }
       }
     }
+  },
+
+  render(h) {
+    const CheckIcon = this.$scopedSlots.icon ? (
+      this.$scopedSlots.icon({ checked: this.checked })
+    ) : (
+      <Icon name="success" style={this.iconStyle} />
+    );
+
+    const Label = this.$slots.default && (
+      <span
+        class={bem('label', [this.labelPosition, { disabled: this.isDisabled }])}
+        onClick={() => {
+          this.toggle('label');
+        }}
+      >
+        {this.$slots.default}
+      </span>
+    );
+
+    return (
+      <div class={bem()}>
+        <div
+          class={bem('icon', [this.shape, { disabled: this.isDisabled, checked: this.checked }])}
+          onClick={this.toggle}
+        >
+          {CheckIcon}
+        </div>
+        {Label}
+      </div>
+    );
   }
 });
-</script>

packages/checkbox/test/__snapshots__/demo.spec.js.snap

@@ -6,21 +6,24 @@ exports[`renders demo correctly 1`] = `
     <div class="van-checkbox">
       <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
           <!---->
-          <!----></i></div> <span class="van-checkbox__label">复选框</span>
+          <!----></i></div>
+      <span class="van-checkbox__label">复选框</span>
     </div>
   </div>
   <div>
     <div class="van-checkbox">
       <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
           <!---->
-          <!----></i></div> <span class="van-checkbox__label van-checkbox__label--disabled">
+          <!----></i></div>
+      <span class="van-checkbox__label van-checkbox__label--disabled">
       复选框
     </span>
     </div>
     <div class="van-checkbox">
       <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
           <!---->
-          <!----></i></div> <span class="van-checkbox__label van-checkbox__label--disabled">
+          <!----></i></div>
+      <span class="van-checkbox__label van-checkbox__label--disabled">
       复选框
     </span>
     </div>
@@ -29,14 +32,16 @@ exports[`renders demo correctly 1`] = `
     <div class="van-checkbox">
       <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;border-color:#07c160;background-color:#07c160;">
           <!---->
-          <!----></i></div> <span class="van-checkbox__label">
+          <!----></i></div>
+      <span class="van-checkbox__label">
       自定义颜色
     </span>
     </div>
   </div>
   <div>
     <div class="van-checkbox">
-      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><img src="https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png"></div> <span class="van-checkbox__label">
+      <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><img src="https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png"></div>
+      <span class="van-checkbox__label">
       自定义图标
       </span>
     </div>
@@ -46,21 +51,24 @@ exports[`renders demo correctly 1`] = `
       <div class="van-checkbox">
         <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
             <!---->
-            <!----></i></div> <span class="van-checkbox__label">
+            <!----></i></div>
+        <span class="van-checkbox__label">
         复选框 a
       </span>
       </div>
       <div class="van-checkbox">
         <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
             <!---->
-            <!----></i></div> <span class="van-checkbox__label">
+            <!----></i></div>
+        <span class="van-checkbox__label">
         复选框 b
       </span>
       </div>
       <div class="van-checkbox">
         <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
             <!---->
-            <!----></i></div> <span class="van-checkbox__label">
+            <!----></i></div>
+        <span class="van-checkbox__label">
         复选框 c
       </span>
       </div>
@@ -71,21 +79,24 @@ exports[`renders demo correctly 1`] = `
       <div class="van-checkbox">
         <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
             <!---->
-            <!----></i></div> <span class="van-checkbox__label">
+            <!----></i></div>
+        <span class="van-checkbox__label">
         复选框 a
       </span>
       </div>
       <div class="van-checkbox">
         <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
             <!---->
-            <!----></i></div> <span class="van-checkbox__label">
+            <!----></i></div>
+        <span class="van-checkbox__label">
         复选框 b
       </span>
       </div>
       <div class="van-checkbox">
         <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
             <!---->
-            <!----></i></div> <span class="van-checkbox__label">
+            <!----></i></div>
+        <span class="van-checkbox__label">
         复选框 c
       </span>
       </div>
@@ -102,7 +113,6 @@ exports[`renders demo correctly 1`] = `
               <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
                   <!---->
                   <!----></i></div>
-              <!---->
             </div>
           </div>
 
@@ -115,7 +125,6 @@ exports[`renders demo correctly 1`] = `
               <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
                   <!---->
                   <!----></i></div>
-              <!---->
             </div>
           </div>
 
@@ -128,7 +137,6 @@ exports[`renders demo correctly 1`] = `
               <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
                   <!---->
                   <!----></i></div>
-              <!---->
             </div>
           </div>
 

packages/coupon-list/test/__snapshots__/index.spec.js.snap

@@ -72,7 +72,6 @@ exports[`render coupon list 1`] = `
                   <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
                       <!---->
                       <!----></i></div>
-                  <!---->
                 </div>
               </div>
             </div>

packages/submit-bar/test/__snapshots__/demo.spec.js.snap

@@ -41,7 +41,8 @@ exports[`renders demo correctly 1`] = `
         <div class="van-checkbox">
           <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
               <!---->
-              <!----></i></div> <span class="van-checkbox__label">全选</span>
+              <!----></i></div>
+          <span class="van-checkbox__label">全选</span>
         </div>
         <div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 30.50</span></div> <button class="van-button van-button--danger van-button--large van-button--square"><span class="van-button__text">提交订单</span></button>
       </div>