[improvement] Radio: jsx (#2617)

packages/address-list/test/__snapshots__/demo.spec.js.snap

@@ -7,13 +7,13 @@ exports[`renders demo correctly 1`] = `
       <div class="van-radio-group">
         <div class="van-cell van-cell--clickable van-address-item">
           <div class="van-cell__value van-cell__value--alone">
-            <div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"><!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div><div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
+            <div class="van-radio"><span class="van-radio__input"><input type="radio" checked="checked" class="van-radio__control"><i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div><div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
           </div><i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
             <!----></i>
         </div>
         <div class="van-cell van-cell--clickable van-address-item">
           <div class="van-cell__value van-cell__value--alone">
-            <div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">李四，1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span></div>
+            <div class="van-radio"><span class="van-radio__input"><input type="radio" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label"><div class="van-address-item__name">李四，1310000000</div><div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span></div>
           </div><i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
             <!----></i>
         </div>
@@ -21,7 +21,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-address-list__disabled-text">以下地址超出配送范围</div>
       <div class="van-cell van-address-item van-address-item--disabled van-address-item--unswitchable">
         <div class="van-cell__value van-cell__value--alone">
-          <div class="van-radio"><span class="van-radio__input"><input type="radio" value="3" class="van-radio__control"> <i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">王五，1320000000</div><div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div></span></div>
+          <div class="van-radio"><span class="van-radio__input"><input type="radio" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label"><div class="van-address-item__name">王五，1320000000</div><div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div></span></div>
         </div><i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
           <!----></i>
       </div><button class="van-button van-button--danger van-button--large van-button--square van-address-list__add"><span class="van-button__text">新增地址</span></button>

packages/contact-card/test/__snapshots__/demo.spec.js.snap

@@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-radio-group">
           <div class="van-cell van-cell--clickable">
             <div class="van-cell__value van-cell__value--alone">
-              <div class="van-radio"><span class="van-radio__input"><input type="radio" value="0" class="van-radio__control"> <i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span> <span class="van-radio__label"><div class="van-contact-list__name">张三，13000000000</div></span></div>
+              <div class="van-radio"><span class="van-radio__input"><input type="radio" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label"><div class="van-contact-list__name">张三，13000000000</div></span></div>
             </div><i class="van-icon van-icon-edit van-contact-list__edit" style="color:undefined;font-size:undefined;">
               <!----></i>
           </div>

packages/radio/index.js

@@ -0,0 +1,77 @@
+import { use } from '../utils';
+import Icon from '../icon';
+import findParent from '../mixins/find-parent';
+
+const [sfc, bem] = use('radio');
+
+export default sfc({
+  mixins: [findParent],
+
+  props: {
+    name: null,
+    value: null,
+    disabled: Boolean,
+    checkedColor: String,
+    labelPosition: String,
+    labelDisabled: Boolean
+  },
+
+  computed: {
+    currentValue: {
+      get() {
+        return this.parent ? this.parent.value : this.value;
+      },
+
+      set(val) {
+        (this.parent || this).$emit('input', val);
+      }
+    },
+
+    isDisabled() {
+      return this.parent ? this.parent.disabled || this.disabled : this.disabled;
+    }
+  },
+
+  created() {
+    this.findParent('van-radio-group');
+  },
+
+  methods: {
+    onClickLabel() {
+      if (!this.isDisabled && !this.labelDisabled) {
+        this.currentValue = this.name;
+      }
+    }
+  },
+
+  render(h) {
+    const checked = this.currentValue === this.name;
+    const { isDisabled, checkedColor } = this;
+    const iconStyle = checkedColor && checked && !isDisabled && { color: checkedColor };
+
+    return (
+      <div
+        class={bem({ disabled: isDisabled })}
+        onClick={() => {
+          this.$emit('click');
+        }}
+      >
+        <span class={bem('input')}>
+          <input
+            vModel={this.currentValue}
+            type="radio"
+            class={bem('control')}
+            value={this.name}
+            disabled={isDisabled}
+          />
+          <Icon style={iconStyle} name={checked ? 'checked' : 'circle'} />
+        </span>
+        {this.$slots.default && (
+          <span class={bem('label', this.labelPosition)} onClick={this.onClickLabel}>
+            {this.$slots.default}
+          </span>
+        )}
+      </div>
+    );
+  }
+});

packages/radio/index.vue

@@ -1,90 +0,0 @@
-<template>
-  <div
-    :class="b({ disabled: isDisabled })"
-    @click="$emit('click')"
-  >
-    <span :class="b('input')">
-      <input
-        v-model="currentValue"
-        type="radio"
-        :value="name"
-        :class="b('control')"
-        :disabled="isDisabled"
-      >
-      <icon
-        :style="iconStyle"
-        :name="checked ? 'checked' : 'circle'"
-      />
-    </span>
-    <span
-      v-if="$slots.default"
-      :class="b('label', labelPosition)"
-      @click="onClickLabel"
-    >
-      <slot />
-    </span>
-  </div>
-</template>
-
-<script>
-import create from '../utils/create';
-import findParent from '../mixins/find-parent';
-
-export default create({
-  name: 'radio',
-
-  mixins: [findParent],
-
-  props: {
-    name: null,
-    value: null,
-    disabled: Boolean,
-    checkedColor: String,
-    labelPosition: String,
-    labelDisabled: Boolean
-  },
-
-  computed: {
-    currentValue: {
-      get() {
-        return this.parent ? this.parent.value : this.value;
-      },
-
-      set(val) {
-        (this.parent || this).$emit('input', val);
-      }
-    },
-
-    checked() {
-      return this.currentValue === this.name;
-    },
-
-    isDisabled() {
-      return this.parent
-        ? this.parent.disabled || this.disabled
-        : this.disabled;
-    },
-
-    iconStyle() {
-      const { checkedColor } = this;
-      if (checkedColor && this.checked && !this.isDisabled) {
-        return {
-          color: checkedColor
-        };
-      }
-    }
-  },
-
-  created() {
-    this.findParent('van-radio-group');
-  },
-
-  methods: {
-    onClickLabel() {
-      if (!this.isDisabled && !this.labelDisabled) {
-        this.currentValue = this.name;
-      }
-    }
-  }
-});
-</script>

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

@@ -4,18 +4,18 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="demo-radio-group van-radio-group">
-      <div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"><!----></i></span> <span class="van-radio__label">单选框 1</span></div>
+      <div class="van-radio"><span class="van-radio__input"><input type="radio" checked="checked" class="van-radio__control"><i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label">单选框 1</span></div>
-      <div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span> <span class="van-radio__label">单选框 2</span></div>
+      <div class="van-radio"><span class="van-radio__input"><input type="radio" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label">单选框 2</span></div>
     </div>
   </div>
   <div>
     <div class="demo-radio-group van-radio-group">
-      <div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" value="1" class="van-radio__control"> <i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span> <span class="van-radio__label">单选框 1</span></div>
+      <div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label">单选框 1</span></div>
-      <div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" value="2" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"><!----></i></span> <span class="van-radio__label">单选框 2</span></div>
+      <div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" checked="checked" class="van-radio__control"><i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"><!----></i></span><span class="van-radio__label">单选框 2</span></div>
     </div>
   </div>
   <div>
-    <div class="demo-radio-group van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:#07c160;font-size:undefined;"><!----></i></span> <span class="van-radio__label">
+    <div class="demo-radio-group van-radio"><span class="van-radio__input"><input type="radio" checked="checked" class="van-radio__control"><i class="van-icon van-icon-checked" style="color:#07c160;font-size:undefined;"><!----></i></span><span class="van-radio__label">
       单选框
     </span></div>
   </div>
@@ -25,17 +25,13 @@ exports[`renders demo correctly 1`] = `
         <div class="van-cell van-cell--clickable">
           <div class="van-cell__title"><span>单选框1</span></div>
           <div class="van-cell__value">
-            <div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"><!----></i></span>
+            <div class="van-radio"><span class="van-radio__input"><input type="radio" checked="checked" class="van-radio__control"><i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"><!----></i></span></div>
-              <!---->
-            </div>
           </div>
         </div>
         <div class="van-cell van-cell--clickable">
           <div class="van-cell__title"><span>单选框2</span></div>
           <div class="van-cell__value">
-            <div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span>
+            <div class="van-radio"><span class="van-radio__input"><input type="radio" class="van-radio__control"><i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"><!----></i></span></div>
-              <!---->
-            </div>
           </div>
         </div>
       </div>