From fb89ac9dfb75713e44e97d0ee054d70e182535f1 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Sat, 12 Jan 2019 15:40:34 +0800
Subject: [PATCH] [improvement] ContactEdit: jsx (#2508)

---
 .../test/__snapshots__/demo.spec.js.snap      |  36 +++--
 packages/contact-edit/index.js                | 130 +++++++++++++++++
 packages/contact-edit/index.vue               | 134 ------------------
 3 files changed, 146 insertions(+), 154 deletions(-)
 create mode 100644 packages/contact-edit/index.js
 delete mode 100644 packages/contact-edit/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 c9e7c8315..1d272fb1f 100644
--- a/packages/contact-card/test/__snapshots__/demo.spec.js.snap
+++ b/packages/contact-card/test/__snapshots__/demo.spec.js.snap
@@ -27,33 +27,29 @@ exports[`renders demo correctly 1`] = `
     </div>
     <div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
       <div class="van-contact-edit">
-        <div class="van-cell-group van-hairline--top-bottom">
-          <div maxlength="30" placeholder="请填写姓名" class="van-cell van-field">
-            <div class="van-cell__title"><span>张三</span></div>
-            <div class="van-cell__value">
-              <div class="van-field__body"><input type="text" maxlength="30" placeholder="请填写姓名" class="van-field__control">
-                <!---->
-                <!---->
-                <!---->
-              </div>
+        <div maxlength="30" placeholder="请填写姓名" class="van-cell van-field">
+          <div class="van-cell__title"><span>张三</span></div>
+          <div class="van-cell__value">
+            <div class="van-field__body"><input type="text" maxlength="30" placeholder="请填写姓名" value="" class="van-field__control">
+              <!---->
+              <!---->
               <!---->
             </div>
+            <!---->
           </div>
-          <div placeholder="请填写电话" class="van-cell van-field">
-            <div class="van-cell__title"><span>电话</span></div>
-            <div class="van-cell__value">
-              <div class="van-field__body"><input type="tel" placeholder="请填写电话" class="van-field__control">
-                <!---->
-                <!---->
-                <!---->
-              </div>
+        </div>
+        <div placeholder="请填写电话" class="van-cell van-field">
+          <div class="van-cell__title"><span>电话</span></div>
+          <div class="van-cell__value">
+            <div class="van-field__body"><input type="tel" placeholder="请填写电话" value="" class="van-field__control">
+              <!---->
+              <!---->
               <!---->
             </div>
+            <!---->
           </div>
         </div>
-        <div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button>
-          <!---->
-        </div>
+        <div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button></div>
       </div>
     </div>
   </div>
diff --git a/packages/contact-edit/index.js b/packages/contact-edit/index.js
new file mode 100644
index 000000000..6f18b888e
--- /dev/null
+++ b/packages/contact-edit/index.js
@@ -0,0 +1,130 @@
+import { use } from '../utils';
+import Button from '../button';
+import Field from '../field';
+import Toast from '../toast';
+import Dialog from '../dialog';
+import validateMobile from '../utils/validate/mobile';
+
+const [sfc, bem, t] = use('contact-edit');
+
+const defaultContact = {
+  tel: '',
+  name: ''
+};
+
+export default sfc({
+  props: {
+    isEdit: Boolean,
+    isSaving: Boolean,
+    isDeleting: Boolean,
+    contactInfo: {
+      type: Object,
+      default: () => ({ ...defaultContact })
+    },
+    telValidator: {
+      type: Function,
+      default: validateMobile
+    }
+  },
+
+  data() {
+    return {
+      data: {
+        ...defaultContact,
+        ...this.contactInfo
+      },
+      errorInfo: {
+        name: false,
+        tel: false
+      }
+    };
+  },
+
+  watch: {
+    contactInfo(val) {
+      this.data = {
+        ...defaultContact,
+        ...val
+      };
+    }
+  },
+
+  methods: {
+    onFocus(key) {
+      this.errorInfo[key] = false;
+    },
+
+    getErrorMessageByKey(key) {
+      const value = this.data[key].trim();
+      switch (key) {
+        case 'name':
+          return value ? '' : t('nameEmpty');
+        case 'tel':
+          return this.telValidator(value) ? '' : t('telInvalid');
+      }
+    },
+
+    onSave() {
+      const isValid = ['name', 'tel'].every(item => {
+        const msg = this.getErrorMessageByKey(item);
+        if (msg) {
+          this.errorInfo[item] = true;
+          Toast(msg);
+        }
+        return !msg;
+      });
+
+      if (isValid && !this.isSaving) {
+        this.$emit('save', this.data);
+      }
+    },
+
+    onDelete() {
+      Dialog.confirm({
+        message: t('confirmDelete')
+      }).then(() => {
+        this.$emit('delete', this.data);
+      });
+    }
+  },
+
+  render(h) {
+    const { data, errorInfo } = this;
+    const onFocus = name => () => this.onFocus(name);
+
+    return (
+      <div class={bem()}>
+        <Field
+          v-model={data.name}
+          clearable
+          maxlength="30"
+          label={t('name')}
+          placeholder={t('nameEmpty')}
+          error={errorInfo.name}
+          onFocus={onFocus('name')}
+        />
+        <Field
+          v-model={data.tel}
+          clearable
+          type="tel"
+          label={t('tel')}
+          placeholder={t('telEmpty')}
+          error={errorInfo.tel}
+          onFocus={onFocus('tel')}
+        />
+        <div class={bem('buttons')}>
+          <Button
+            block
+            type="danger"
+            text={t('save')}
+            loading={this.isSaving}
+            onClick={this.onSave}
+          />
+          {this.isEdit && (
+            <Button block text={t('delete')} loading={this.isDeleting} onClick={this.onDelete} />
+          )}
+        </div>
+      </div>
+    );
+  }
+});
diff --git a/packages/contact-edit/index.vue b/packages/contact-edit/index.vue
deleted file mode 100644
index e5c597013..000000000
--- a/packages/contact-edit/index.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-<template>
-  <div :class="b()">
-    <cell-group>
-      <field
-        v-model="data.name"
-        maxlength="30"
-        :label="$t('name')"
-        :placeholder="$t('nameEmpty')"
-        :error="errorInfo.name"
-        @focus="onFocus('name')"
-      />
-      <field
-        v-model="data.tel"
-        type="tel"
-        :label="$t('tel')"
-        :placeholder="$t('telEmpty')"
-        :error="errorInfo.tel"
-        @focus="onFocus('tel')"
-      />
-    </cell-group>
-    <div :class="b('buttons')">
-      <van-button
-        block
-        type="danger"
-        :text="$t('save')"
-        :loading="isSaving"
-        @click="onSave"
-      />
-      <van-button
-        v-if="isEdit"
-        block
-        :text="$t('delete')"
-        :loading="isDeleting"
-        @click="onDelete"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import Field from '../field';
-import VanButton from '../button';
-import Toast from '../toast';
-import Dialog from '../dialog';
-import validateMobile from '../utils/validate/mobile';
-import create from '../utils/create';
-
-const defaultContact = {
-  id: '',
-  tel: '',
-  name: ''
-};
-
-export default create({
-  name: 'contact-edit',
-
-  components: {
-    Field,
-    VanButton
-  },
-
-  props: {
-    isEdit: Boolean,
-    isSaving: Boolean,
-    isDeleting: Boolean,
-    contactInfo: {
-      type: Object,
-      default: () => ({ ...defaultContact })
-    },
-    telValidator: {
-      type: Function,
-      default: validateMobile
-    }
-  },
-
-  data() {
-    return {
-      data: {
-        ...this.defaultContact,
-        ...this.contactInfo
-      },
-      errorInfo: {
-        name: false,
-        tel: false
-      }
-    };
-  },
-
-  watch: {
-    contactInfo(val) {
-      this.data = val;
-    }
-  },
-
-  methods: {
-    onFocus(key) {
-      this.errorInfo[key] = false;
-    },
-
-    getErrorMessageByKey(key) {
-      const value = this.data[key].trim();
-      switch (key) {
-        case 'name':
-          return value ? '' : this.$t('nameEmpty');
-        case 'tel':
-          return this.telValidator(value) ? '' : this.$t('telInvalid');
-      }
-    },
-
-    onSave() {
-      const isValid = ['name', 'tel'].every(item => {
-        const msg = this.getErrorMessageByKey(item);
-        if (msg) {
-          this.errorInfo[item] = true;
-          Toast(msg);
-        }
-        return !msg;
-      });
-
-      if (isValid && !this.isSaving) {
-        this.$emit('save', this.data);
-      }
-    },
-
-    onDelete() {
-      Dialog.confirm({
-        message: this.$t('confirmDelete')
-      }).then(() => {
-        this.$emit('delete', this.data);
-      });
-    }
-  }
-});
-</script>