From 2eccc06a2ad267b772eedf11a4fe4ff35a265e8f Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Sat, 12 Jan 2019 16:40:13 +0800
Subject: [PATCH] [improvement] ContactList: jsx (#2509)

---
 .../test/__snapshots__/demo.spec.js.snap      | 16 +++--
 .../test/__snapshots__/index.spec.js.snap     |  4 +-
 packages/contact-list/index.js                | 60 +++++++++++++++++++
 packages/contact-list/index.vue               | 60 -------------------
 4 files changed, 68 insertions(+), 72 deletions(-)
 create mode 100644 packages/contact-list/index.js
 delete mode 100644 packages/contact-list/index.vue

diff --git a/packages/contact-card/test/__snapshots__/demo.spec.js.snap b/packages/contact-card/test/__snapshots__/demo.spec.js.snap
index 1d272fb1f..f4aef550e 100644
--- a/packages/contact-card/test/__snapshots__/demo.spec.js.snap
+++ b/packages/contact-card/test/__snapshots__/demo.spec.js.snap
@@ -13,16 +13,14 @@ exports[`renders demo correctly 1`] = `
     <div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
       <div class="van-contact-list">
         <div class="van-radio-group">
-          <div class="van-cell-group van-hairline--top-bottom">
-            <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><i class="van-icon van-icon-edit van-contact-list__edit" style="color:undefined;font-size:undefined;">
-                <!---->
-                <!----></i>
-            </div>
+          <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><i class="van-icon van-icon-edit van-contact-list__edit" style="color:undefined;font-size:undefined;">
+              <!---->
+              <!----></i>
           </div>
-        </div> <button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button>
+        </div><button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button>
       </div>
     </div>
     <div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
diff --git a/packages/contact-card/test/__snapshots__/index.spec.js.snap b/packages/contact-card/test/__snapshots__/index.spec.js.snap
index 52d0a85f8..929f11e43 100644
--- a/packages/contact-card/test/__snapshots__/index.spec.js.snap
+++ b/packages/contact-card/test/__snapshots__/index.spec.js.snap
@@ -2,8 +2,6 @@
 
 exports[`ContactList render 1`] = `
 <div class="van-contact-list">
-  <div class="van-radio-group">
-    <div class="van-cell-group van-hairline--top-bottom"></div>
-  </div> <button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button>
+  <div class="van-radio-group"></div><button class="van-button van-button--danger van-button--large van-button--square van-contact-list__add"><span class="van-button__text">新建联系人</span></button>
 </div>
 `;
diff --git a/packages/contact-list/index.js b/packages/contact-list/index.js
new file mode 100644
index 000000000..c16d40ffb
--- /dev/null
+++ b/packages/contact-list/index.js
@@ -0,0 +1,60 @@
+import { use } from '../utils';
+import Icon from '../icon';
+import Cell from '../cell';
+import Button from '../button';
+import Radio from '../radio';
+import RadioGroup from '../radio-group';
+
+const [sfc, bem, t] = use('contact-list');
+
+export default sfc({
+  props: {
+    value: null,
+    list: Array,
+    addText: String
+  },
+
+  render(h) {
+    return (
+      <div class={bem()}>
+        <RadioGroup
+          value={this.value}
+          onInput={event => {
+            this.$emit('input', event);
+          }}
+        >
+          {this.list.map((item, index) => (
+            <Cell key={item.id} isLink>
+              <Radio
+                name={item.id}
+                onClick={() => {
+                  this.$emit('select', item, index);
+                }}
+              >
+                <div class={bem('name')}>{`${item.name}，${item.tel}`}</div>
+              </Radio>
+              <Icon
+                slot="right-icon"
+                name="edit"
+                class={bem('edit')}
+                onClick={() => {
+                  this.$emit('edit', item, index);
+                }}
+              />
+            </Cell>
+          ))}
+        </RadioGroup>
+        <Button
+          square
+          size="large"
+          type="danger"
+          class={bem('add')}
+          text={this.addText || t('addText')}
+          onClick={() => {
+            this.$emit('add');
+          }}
+        />
+      </div>
+    );
+  }
+});
diff --git a/packages/contact-list/index.vue b/packages/contact-list/index.vue
deleted file mode 100644
index 651dee795..000000000
--- a/packages/contact-list/index.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <div :class="b()">
-    <radio-group
-      :value="value"
-      @input="$emit('input', $event)"
-    >
-      <cell-group>
-        <cell
-          v-for="(item, index) in list"
-          :key="item.id"
-          is-link
-        >
-          <radio
-            :name="item.id"
-            @click="$emit('select', item, index)"
-          >
-            <div :class="b('name')">{{ item.name }}，{{ item.tel }}</div>
-          </radio>
-          <icon
-            slot="right-icon"
-            name="edit"
-            :class="b('edit')"
-            @click="$emit('edit', item, index)"
-          />
-        </cell>
-      </cell-group>
-    </radio-group>
-    <van-button
-      square
-      size="large"
-      type="danger"
-      :class="b('add')"
-      :text="addText || $t('addText')"
-      @click="$emit('add')"
-    />
-  </div>
-</template>
-
-<script>
-import Radio from '../radio';
-import VanButton from '../button';
-import RadioGroup from '../radio-group';
-import create from '../utils/create';
-
-export default create({
-  name: 'contact-list',
-
-  components: {
-    Radio,
-    VanButton,
-    RadioGroup
-  },
-
-  props: {
-    value: null,
-    list: Array,
-    addText: String
-  }
-});
-</script>