[Improvement] AddressEdit: configure button text (#1287)

packages/address-edit/Detail.vue

@@ -1,35 +1,33 @@
 <template>
-  <div ref="root">
+  <div>
     <field
+      v-on="$listeners"
+      ref="field"
+      rows="1"
+      autosize
+      type="textarea"
+      maxlength="200"
+      :value="value"
+      :error="error"
       :label="$t('label')"
       :placeholder="$t('placeholder')"
-      maxlength="200"
-      type="textarea"
-      autosize
-      rows="1"
-      :value="value"
-      :error="isError"
-      @click-icon="onIconClick"
-      @input="$emit('input', $event)"
-      @focus="onFocus"
-      @blur="onBlur"
+      @click-icon="onClickIcon"
     >
       <div slot="icon">
         <span v-if="showIcon && isAndroid" :class="b('finish')">{{ $t('complete') }}</span>
         <icon v-else-if="showIcon" name="clear" />
       </div>
     </field>
-    <cell-group :border="false" v-if="showSearchList">
-      <cell
-        v-for="express in searchResult"
-        :key="express.name + express.address"
-        :title="express.name"
-        :label="express.address"
-        icon="location"
-        clickable
-        @click="onSelect(express)"
-      />
-    </cell-group>
+    <cell
+      v-if="showSearchList"
+      v-for="express in searchResult"
+      :key="express.name + express.address"
+      :title="express.name"
+      :label="express.address"
+      icon="location"
+      clickable
+      @click="onSelect(express)"
+    />
   </div>
 </template>
 
@@ -46,52 +44,31 @@ export default create({
   },
 
   props: {
-    value: {},
-    isError: Boolean,
+    value: String,
+    error: Boolean,
+    focused: Boolean,
     searchResult: Array,
     showSearchResult: Boolean
   },
 
-  data() {
-    return {
-      isAndroid: isAndroid(),
-      isFocused: false
-    };
+  created() {
+    this.isAndroid = isAndroid();
   },
 
   computed: {
     showSearchList() {
-      return this.showSearchResult && this.isFocused && this.searchResult.length > 0;
+      return this.showSearchResult && this.focused && this.searchResult.length;
     },
 
     showIcon() {
-      return this.value && this.isFocused;
+      return this.value && this.focused;
     }
   },
 
   methods: {
-    onFocus(e) {
-      this.isFocused = true;
-      this.$emit('focus', e);
-
-      const { root } = this.$refs;
-      /* istanbul ignore if */
-      if (root && root.scrollIntoView) {
-        root.scrollIntoView();
-      }
-    },
-
-    onBlur(e) {
-      // wait for click event finished
-      setTimeout(() => {
-        this.isFocused = false;
-        this.$emit('blur', e);
-      }, 100);
-    },
-
-    onIconClick() {
+    onClickIcon() {
       if (this.isAndroid) {
-        this.$refs.root.querySelector('.van-field__control').blur();
+        this.$refs.field.blur();
       } else {
         this.$emit('input', '');
       }

packages/address-edit/en-US.md

@@ -68,6 +68,8 @@ export default {
 | show-delete | Whether to show delete button | `Boolean` | `false` |
 | show-set-default | Whether to show default address switch | `Boolean` | `false` |
 | show-search-result | Whether to show address search result | `Boolean` | `false` |
+| save-button-text | Save button text | `String` | `Save` |
+| delete-button-text | Delete button text | `String` | `Delete` |
 | is-saving | Whether to show save button loading status | `Boolean` | `false` |
 | is-deleting | Whether to show delete button loading status | `Boolean` | `false` |
 | tel-validator | The method to validate tel | `(tel: string) => boolean` | - |

packages/address-edit/index.vue

@@ -10,10 +10,10 @@
         @focus="onFocus('name')"
       />
       <field
+        v-model="data.tel"
         type="tel"
         :label="$t('tel')"
         :placeholder="$t('telPlaceholder')"
-        v-model="data.tel"
         :error="errorInfo.tel"
         @focus="onFocus('tel')"
       />
@@ -25,10 +25,11 @@
         @click="showArea = true"
       />
       <address-edit-detail
+        :focused="detailFocused"
         :value="data.address_detail"
-        :is-error="errorInfo.address_detail"
-        :show-search-result="showSearchResult"
+        :error="errorInfo.address_detail"
         :search-result="searchResult"
+        :show-search-result="showSearchResult"
         @focus="onFocus('address_detail')"
         @blur="detailFocused = false"
         @input="onChangeDetail"
@@ -37,12 +38,12 @@
       <field
         v-if="showPostal"
         v-show="!hideBottomFields"
-        type="tel"
-        :label="$t('postal')"
-        :placeholder="$t('postal')"
         v-model="data.postal_code"
+        type="tel"
         maxlength="6"
         class="van-hairline--top"
+        :label="$t('postal')"
+        :placeholder="$t('postal')"
         :error="errorInfo.postal_code"
         @focus="onFocus('postal_code')"
       />
@@ -54,14 +55,16 @@
         :title="$t('defaultAddress')"
       />
     </cell-group>
+
     <div v-show="!hideBottomFields" :class="b('buttons')">
       <van-button block :loading="isSaving" @click="onSave" type="primary">
-        {{ $t('save') }}
+        {{ saveButtonText || $t('save') }}
       </van-button>
       <van-button block :loading="isDeleting" @click="onDelete" v-if="isEdit">
-        {{ $t('delete') }}
+        {{ deleteButtonText || $t('delete') }}
       </van-button>
     </div>
+
     <popup v-model="showArea" position="bottom" :lazy-render="false" :get-container="getAreaContainer">
       <van-area
         ref="area"
@@ -89,7 +92,7 @@ import AddressEditDetail from './Detail';
 import SwitchCell from '../switch-cell';
 import validateMobile from '../utils/validate/mobile';
 
-const defaultAddress = {
+const defaultData = {
   name: '',
   tel: '',
   province: '',
@@ -114,16 +117,18 @@ export default create({
   },
 
   props: {
+    areaList: Object,
     isSaving: Boolean,
     isDeleting: Boolean,
-    areaList: Object,
     showDelete: Boolean,
     showPostal: Boolean,
     showSetDefault: Boolean,
     showSearchResult: Boolean,
+    saveButtonText: String,
+    deleteButtonText: String,
     addressInfo: {
       type: Object,
-      default: () => ({ ...defaultAddress })
+      default: () => ({ ...defaultData })
     },
     searchResult: {
       type: Array,
@@ -137,17 +142,14 @@ export default create({
 
   data() {
     return {
+      data: {},
       showArea: false,
-      data: {
-        ...defaultAddress,
-        ...this.addressInfo
-      },
       detailFocused: false,
       errorInfo: {
-        name: false,
         tel: false,
-        address_detail: false,
-        postal_code: false
+        name: false,
+        postal_code: false,
+        address_detail: false
       }
     };
   },
@@ -168,10 +170,9 @@ export default create({
 
     areaText() {
       const { province, city, county, area_code } = this.data;
-      if (province && city && county && area_code) {
-        return `${province} ${city} ${county}`;
-      }
-      return '';
+      return province && city && county && area_code
+        ? `${province} ${city} ${county}`
+        : '';
     }
   },
 
@@ -179,13 +180,14 @@ export default create({
     addressInfo: {
       handler(val) {
         this.data = {
-          ...defaultAddress,
+          ...defaultData,
           ...val
         };
 
         this.setAreaCode(val.area_code);
       },
-      deep: true
+      deep: true,
+      immediate: true
     },
 
     areaList() {
@@ -193,10 +195,6 @@ export default create({
     }
   },
 
-  created() {
-    this.setAreaCode(this.data.area_code);
-  },
-
   methods: {
     onFocus(key) {
       this.errorInfo[key] = false;
@@ -210,29 +208,22 @@ export default create({
     },
 
     onAreaConfirm(values) {
+      this.showArea = false;
       this.data.area_code = values[2].code;
       this.assignAreaValues(values);
-      this.showArea = false;
       this.$emit('change-area', values);
     },
 
     assignAreaValues(values) {
-      if (values.length >= 3) {
-        Object.assign(this.data, {
-          province: values[0].name,
-          city: values[1].name,
-          county: values[2].name
-        });
-      }
+      Object.assign(this.data, {
+        province: values[0].name,
+        city: values[1].name,
+        county: values[2].name
+      });
     },
 
     onSave() {
-      const items = [
-        'name',
-        'tel',
-        'area_code',
-        'address_detail'
-      ];
+      const items = ['name', 'tel', 'area_code', 'address_detail'];
 
       if (this.showPostal) {
         items.push('postal_code');
@@ -273,11 +264,13 @@ export default create({
     onDelete() {
       Dialog.confirm({
         title: this.$t('confirmDelete')
-      }).then(() => {
-        this.$emit('delete', this.data);
-      }).catch(() => {
-        this.$emit('cancel-delete', this.data);
-      });
+      })
+        .then(() => {
+          this.$emit('delete', this.data);
+        })
+        .catch(() => {
+          this.$emit('cancel-delete', this.data);
+        });
     },
 
     // get values of area component

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

@@ -45,13 +45,13 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </div>
         <div>
-          <div placeholder="如街道、楼层、门牌号等" maxlength="200" rows="1" class="van-cell van-hairline van-field van-field--has-icon">
+          <div rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-cell van-hairline van-field van-field--has-icon">
             <!---->
             <div class="van-cell__title"><span>详细地址</span>
               <!---->
             </div>
             <div class="van-cell__value">
-              <textarea placeholder="如街道、楼层、门牌号等" maxlength="200" rows="1" class="van-field__control"></textarea>
+              <textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control"></textarea>
               <!---->
               <div class="van-field__icon">
                 <div>
@@ -62,15 +62,14 @@ exports[`renders demo correctly 1`] = `
             </div>
             <!---->
           </div>
-          <!---->
         </div>
-        <div placeholder="邮政编码" maxlength="6" class="van-hairline--top van-cell van-hairline van-field">
+        <div maxlength="6" placeholder="邮政编码" class="van-hairline--top van-cell van-hairline van-field">
           <!---->
           <div class="van-cell__title"><span>邮政编码</span>
             <!---->
           </div>
           <div class="van-cell__value">
-            <input type="tel" placeholder="邮政编码" maxlength="6" value="" class="van-field__control">
+            <input type="tel" maxlength="6" placeholder="邮政编码" value="" class="van-field__control">
             <!---->
             <!---->
             <!---->

packages/address-edit/test/__snapshots__/index.spec.js.snap

@@ -43,13 +43,13 @@ exports[`create a AddressEdit 1`] = `
       <!---->
     </div>
     <div>
-      <div placeholder="如街道、楼层、门牌号等" maxlength="200" rows="1" class="van-cell van-hairline van-field van-field--has-icon">
+      <div rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-cell van-hairline van-field van-field--has-icon">
         <!---->
         <div class="van-cell__title"><span>详细地址</span>
           <!---->
         </div>
         <div class="van-cell__value">
-          <textarea placeholder="如街道、楼层、门牌号等" maxlength="200" rows="1" class="van-field__control"></textarea>
+          <textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control"></textarea>
           <!---->
           <div class="van-field__icon">
             <div>
@@ -60,7 +60,6 @@ exports[`create a AddressEdit 1`] = `
         </div>
         <!---->
       </div>
-      <!---->
     </div>
     <!---->
     <!---->
@@ -133,13 +132,13 @@ exports[`create a AddressEdit with props 1`] = `
       <!---->
     </div>
     <div>
-      <div placeholder="如街道、楼层、门牌号等" maxlength="200" rows="1" class="van-cell van-hairline van-field van-field--has-icon">
+      <div rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-cell van-hairline van-field van-field--has-icon">
         <!---->
         <div class="van-cell__title"><span>详细地址</span>
           <!---->
         </div>
         <div class="van-cell__value">
-          <textarea placeholder="如街道、楼层、门牌号等" maxlength="200" rows="1" class="van-field__control">详细地址</textarea>
+          <textarea rows="1" maxlength="200" placeholder="如街道、楼层、门牌号等" class="van-field__control">详细地址</textarea>
           <!---->
           <div class="van-field__icon">
             <div>
@@ -150,15 +149,14 @@ exports[`create a AddressEdit with props 1`] = `
         </div>
         <!---->
       </div>
-      <!---->
     </div>
-    <div placeholder="邮政编码" maxlength="6" class="van-hairline--top van-cell van-hairline van-field">
+    <div maxlength="6" placeholder="邮政编码" class="van-hairline--top van-cell van-hairline van-field">
       <!---->
       <div class="van-cell__title"><span>邮政编码</span>
         <!---->
       </div>
       <div class="van-cell__value">
-        <input type="tel" placeholder="邮政编码" maxlength="6" value="10000" class="van-field__control">
+        <input type="tel" maxlength="6" placeholder="邮政编码" value="10000" class="van-field__control">
         <!---->
         <!---->
         <!---->

packages/address-edit/zh-CN.md

@@ -66,6 +66,8 @@ export default {
 | show-delete | 是否显示删除按钮 | `Boolean` | `false` |
 | show-set-default | 是否显示默认地址栏 | `Boolean` | `false` |
 | show-search-result | 是否显示搜索结果 | `Boolean` | `false` |
+| save-button-text | 保存按钮文字 | `String` | `保存` |
+| delete-button-text | 删除按钮文字 | `String` | `删除` |
 | is-saving | 是否显示保存按钮加载动画 | `Boolean` | `false` |
 | is-deleting | 是否显示删除按钮加载动画 | `Boolean` | `false` |
 | tel-validator | 手机号格式校验函数 | `(tel: string) => boolean` | - |