From 5497eef5efa80cfaf3e4ec94d383085258252815 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Mon, 26 Mar 2018 21:20:00 +0800
Subject: [PATCH] [Improvement] optimize find parent mixin (#781)

---
 packages/actionsheet/index.vue        |  8 +++---
 packages/checkbox/index.vue           | 39 +++++++++++++--------------
 packages/collapse-item/index.vue      | 18 ++++++-------
 packages/collapse/index.vue           | 11 +++-----
 packages/contact-edit/index.vue       | 29 ++++++++------------
 packages/field/index.vue              |  4 ++-
 packages/mixins/find-parent.js        | 28 ++++++++++---------
 packages/radio/index.vue              | 27 +++++++------------
 packages/tab/index.vue                | 10 +++----
 packages/vant-css/src/actionsheet.css |  8 +-----
 test/specs/actionsheet.spec.js        |  1 -
 test/specs/contact.spec.js            |  2 +-
 test/specs/field.spec.js              |  2 +-
 13 files changed, 82 insertions(+), 105 deletions(-)

diff --git a/packages/actionsheet/index.vue b/packages/actionsheet/index.vue
index 79fb9ec4f..57510a86e 100644
--- a/packages/actionsheet/index.vue
+++ b/packages/actionsheet/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <transition name="van-actionsheet-float">
+  <transition name="van-slide-bottom">
     <div class="van-actionsheet" :class="{ 'van-actionsheet--withtitle': title }" v-show="value">
       <div class="van-actionsheet__header van-hairline--top-bottom" v-if="title">
         <div v-text="title" />
-        <icon name="close" @click.stop="$emit('input', false)" />
+        <icon name="close" @click="$emit('input', false)" />
       </div>
-      <ul v-if="!title" class="van-actionsheet__list van-hairline--bottom">
+      <ul v-else class="van-hairline--bottom">
         <li
           v-for="(item, index) in actions"
           :key="index"
@@ -24,7 +24,7 @@
         v-if="cancelText"
         v-text="cancelText"
         class="van-actionsheet__item van-actionsheet__cancel van-hairline--top"
-        @click.stop="$emit('input', false)"
+        @click="$emit('input', false)"
       />
       <div v-else class="van-actionsheet__content">
         <slot />
diff --git a/packages/checkbox/index.vue b/packages/checkbox/index.vue
index 8114179f8..9835ef96a 100644
--- a/packages/checkbox/index.vue
+++ b/packages/checkbox/index.vue
@@ -40,44 +40,33 @@ export default create({
     }
   },
 
-  watch: {
-    value(val) {
-      this.$emit('change', val);
-    }
-  },
-
-  data() {
-    this.findParentByName('van-checkbox-group');
-    return {};
-  },
-
   computed: {
     currentValue: {
       get() {
-        return this.parentGroup
-          ? this.parentGroup.value.indexOf(this.name) !== -1
+        return this.parent
+          ? this.parent.value.indexOf(this.name) !== -1
           : this.value;
       },
 
       set(val) {
-        const { parentGroup } = this;
-        if (parentGroup) {
-          const parentValue = this.parentGroup.value.slice();
+        const { parent } = this;
+        if (parent) {
+          const parentValue = this.parent.value.slice();
           if (val) {
-            if (parentGroup.max && parentValue.length >= parentGroup.max) {
+            if (parent.max && parentValue.length >= parent.max) {
               return;
             }
             /* istanbul ignore else */
             if (parentValue.indexOf(this.name) === -1) {
               parentValue.push(this.name);
-              parentGroup.$emit('input', parentValue);
+              parent.$emit('input', parentValue);
             }
           } else {
             const index = parentValue.indexOf(this.name);
             /* istanbul ignore else */
             if (index !== -1) {
               parentValue.splice(index, 1);
-              parentGroup.$emit('input', parentValue);
+              parent.$emit('input', parentValue);
             }
           }
         } else {
@@ -96,10 +85,20 @@ export default create({
     },
 
     isDisabled() {
-      return (this.parentGroup && this.parentGroup.disabled) || this.disabled;
+      return (this.parent && this.parent.disabled) || this.disabled;
     }
   },
 
+  watch: {
+    value(val) {
+      this.$emit('change', val);
+    }
+  },
+
+  created() {
+    this.findParent('van-checkbox-group');
+  },
+
   methods: {
     onClick(target) {
       if (!this.isDisabled && !(target === 'label' && this.labelDisabled)) {
diff --git a/packages/collapse-item/index.vue b/packages/collapse-item/index.vue
index bcd41ed17..9697e94b9 100644
--- a/packages/collapse-item/index.vue
+++ b/packages/collapse-item/index.vue
@@ -32,7 +32,7 @@ export default create({
 
   computed: {
     items() {
-      return this.parentGroup.items;
+      return this.parent.items;
     },
 
     index() {
@@ -44,15 +44,15 @@ export default create({
     },
 
     expanded() {
-      const { activeNames } = this.parentGroup;
-      return this.parentGroup.accordion
-        ? activeNames === this.currentName
-        : activeNames.some(name => name === this.currentName);
+      const { value } = this.parent;
+      return this.parent.accordion
+        ? value === this.currentName
+        : value.some(name => name === this.currentName);
     }
   },
 
   created() {
-    this.findParentByName('van-collapse');
+    this.findParent('van-collapse');
     this.items.push(this);
   },
 
@@ -62,9 +62,9 @@ export default create({
 
   methods: {
     onClick() {
-      const { parentGroup } = this;
-      const name = parentGroup.accordion && this.currentName === parentGroup.activeNames ? '' : this.currentName;
-      this.parentGroup.switch(name, !this.expanded);
+      const { parent } = this;
+      const name = parent.accordion && this.currentName === parent.value ? '' : this.currentName;
+      this.parent.switch(name, !this.expanded);
     }
   }
 });
diff --git a/packages/collapse/index.vue b/packages/collapse/index.vue
index 104c88a20..9b495dd14 100644
--- a/packages/collapse/index.vue
+++ b/packages/collapse/index.vue
@@ -10,13 +10,9 @@ import create from '../utils/create';
 export default create({
   name: 'collapse',
 
-  model: {
-    prop: 'activeNames'
-  },
-
   props: {
     accordion: Boolean,
-    activeNames: [String, Number, Array]
+    value: [String, Number, Array]
   },
 
   data() {
@@ -27,11 +23,10 @@ export default create({
 
   methods: {
     switch(name, expanded) {
-      const { activeNames } = this;
       if (!this.accordion) {
         name = expanded
-          ? activeNames.concat(name)
-          : activeNames.filter(activeName => activeName !== name);
+          ? this.value.concat(name)
+          : this.value.filter(activeName => activeName !== name);
       }
       this.$emit('change', name);
       this.$emit('input', name);
diff --git a/packages/contact-edit/index.vue b/packages/contact-edit/index.vue
index b98e11e38..2bf76fcab 100644
--- a/packages/contact-edit/index.vue
+++ b/packages/contact-edit/index.vue
@@ -19,8 +19,8 @@
       />
     </cell-group>
     <div class="van-contact-edit__buttons">
-      <van-button block :loading="isSaving" @click="onSaveContact" type="primary">{{ $t('save') }}</van-button>
-      <van-button block :loading="isDeleting" @click="onDeleteContact" v-if="isEdit">{{ $t('delete') }}</van-button>
+      <van-button block :loading="isSaving" @click="onSave" type="primary">{{ $t('save') }}</van-button>
+      <van-button block :loading="isDeleting" @click="onDelete" v-if="isEdit">{{ $t('delete') }}</van-button>
     </div>
   </div>
 </template>
@@ -90,13 +90,8 @@ export default create({
       }
     },
 
-    onSaveContact() {
-      const items = [
-        'name',
-        'tel'
-      ];
-
-      const isValid = items.every(item => {
+    onSave() {
+      const isValid = ['name', 'tel'].every(item => {
         const msg = this.getErrorMessageByKey(item);
         if (msg) {
           this.errorInfo[item] = true;
@@ -110,16 +105,14 @@ export default create({
       }
     },
 
-    onDeleteContact() {
-      if (this.isDeleting) {
-        return;
+    onDelete() {
+      if (!this.isDeleting) {
+        Dialog.confirm({
+          message: this.$t('confirmDelete')
+        }).then(() => {
+          this.$emit('delete', this.data);
+        });
       }
-
-      Dialog.confirm({
-        message: this.$t('confirmDelete')
-      }).then(() => {
-        this.$emit('delete', this.data);
-      });
     }
   }
 });
diff --git a/packages/field/index.vue b/packages/field/index.vue
index 81ab0b345..342d46bbc 100644
--- a/packages/field/index.vue
+++ b/packages/field/index.vue
@@ -146,7 +146,9 @@ export default create({
         }
       }
 
-      el.style.height = height + 'px';
+      if (height) {
+        el.style.height = height + 'px';
+      }
     }
   }
 });
diff --git a/packages/mixins/find-parent.js b/packages/mixins/find-parent.js
index a48dfe0e9..da858e413 100644
--- a/packages/mixins/find-parent.js
+++ b/packages/mixins/find-parent.js
@@ -3,20 +3,22 @@
  */
 
 export default {
-  methods: {
-    findParentByName(name) {
-      if (!this.parentGroup) {
-        let parent = this.$parent;
-        while (parent) {
-          if (parent.$options.name === name) {
-            this.parentGroup = parent;
-            break;
-          }
-          parent = parent.$parent;
-        }
-      }
+  data() {
+    return {
+      parent: null
+    };
+  },
 
-      return this.parentGroup;
+  methods: {
+    findParent(name) {
+      let parent = this.$parent;
+      while (parent) {
+        if (parent.$options.name === name) {
+          this.parent = parent;
+          break;
+        }
+        parent = parent.$parent;
+      }
     }
   }
 };
diff --git a/packages/radio/index.vue b/packages/radio/index.vue
index 4c911ae80..bd7846344 100644
--- a/packages/radio/index.vue
+++ b/packages/radio/index.vue
@@ -36,39 +36,32 @@ export default create({
   },
 
   computed: {
-    isGroup() {
-      return !!this.findParentByName('van-radio-group');
-    },
-
     currentValue: {
       get() {
-        return this.isGroup && this.parentGroup
-          ? this.parentGroup.value
-          : this.value;
+        return this.parent ? this.parent.value : this.value;
       },
 
       set(val) {
-        if (this.isGroup && this.parentGroup) {
-          this.parentGroup.$emit('input', val);
-        } else {
-          this.$emit('input', val);
-        }
+        (this.parent || this).$emit('input', val);
       }
     },
 
     isDisabled() {
-      return this.isGroup && this.parentGroup
-        ? this.parentGroup.disabled || this.disabled
+      return this.parent
+        ? this.parent.disabled || this.disabled
         : this.disabled;
     }
   },
 
+  created() {
+    this.findParent('van-radio-group');
+  },
+
   methods: {
     onClickLabel() {
-      if (this.isDisabled) {
-        return;
+      if (!this.isDisabled) {
+        this.currentValue = this.name;
       }
-      this.currentValue = this.name;
     }
   }
 });
diff --git a/packages/tab/index.vue b/packages/tab/index.vue
index 59e78d2c3..45eed1fbd 100644
--- a/packages/tab/index.vue
+++ b/packages/tab/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="van-tab__pane" :class="{ 'van-tab__pane--select': index === parentGroup.curActive }">
+  <div class="van-tab__pane" :class="{ 'van-tab__pane--select': index === parent.curActive }">
     <slot />
   </div>
 </template>
@@ -20,17 +20,17 @@ export default create({
 
   computed: {
     index() {
-      return this.parentGroup.tabs.indexOf(this);
+      return this.parent.tabs.indexOf(this);
     }
   },
 
   created() {
-    this.findParentByName('van-tabs');
-    this.parentGroup.tabs.push(this);
+    this.findParent('van-tabs');
+    this.parent.tabs.push(this);
   },
 
   destroyed() {
-    this.parentGroup.tabs.splice(this.index, 1);
+    this.parent.tabs.splice(this.index, 1);
   }
 });
 </script>
diff --git a/packages/vant-css/src/actionsheet.css b/packages/vant-css/src/actionsheet.css
index acb3fd704..e87607ac5 100644
--- a/packages/vant-css/src/actionsheet.css
+++ b/packages/vant-css/src/actionsheet.css
@@ -6,11 +6,10 @@
   right: 0;
   bottom: 0;
   color: $text-color;
-  transition: .2s ease-out;
-  background-color: $background-color;
   max-height: 90%;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
+  background-color: $background-color;
 
   &--withtitle {
     background-color: $white;
@@ -56,9 +55,4 @@
       line-height: inherit;
     }
   }
-
-  &-float-enter,
-  &-float-leave-active {
-    transform: translate3d(0, 100%, 0);
-  }
 }
diff --git a/test/specs/actionsheet.spec.js b/test/specs/actionsheet.spec.js
index cd6a1d942..bd6aaf59b 100644
--- a/test/specs/actionsheet.spec.js
+++ b/test/specs/actionsheet.spec.js
@@ -14,7 +14,6 @@ describe('ActionSheet', () => {
     });
 
     expect(wrapper.hasClass('van-actionsheet')).to.be.true;
-    expect(wrapper.contains('.van-actionsheet__list')).to.be.true;
     expect(wrapper.instance().actions.length).to.equal(0);
     expect(wrapper.instance().overlay).to.be.true;
     expect(wrapper.instance().closeOnClickOverlay).to.be.true;
diff --git a/test/specs/contact.spec.js b/test/specs/contact.spec.js
index 7e8cc20d0..1cd74d096 100644
--- a/test/specs/contact.spec.js
+++ b/test/specs/contact.spec.js
@@ -229,7 +229,7 @@ describe('ContactEdit', () => {
 
     const deleteButton = wrapper.find('.van-button')[1];
     deleteButton.trigger('click');
-    wrapper.vm.onDeleteContact();
+    wrapper.vm.onDelete();
 
     setTimeout(() => {
       wrapper.vm.isDeleting = false;
diff --git a/test/specs/field.spec.js b/test/specs/field.spec.js
index 5a0495401..6bd97e56c 100644
--- a/test/specs/field.spec.js
+++ b/test/specs/field.spec.js
@@ -69,6 +69,7 @@ describe('Field', () => {
 
   it('create a autosize textarea field', (done) => {
     wrapper = mount(Field, {
+      attachToDocument: true,
       propsData: {
         type: 'textarea',
         autosize: {}
@@ -88,7 +89,6 @@ describe('Field', () => {
     textareaElement.value = longText;
     textarea.trigger('input');
 
-    wrapper.update();
     setTimeout(() => {
       expect(wrapper.find('.van-field__control')[0].element.value).to.equal(longText);
       expect(textareaElement.style.height).to.equal((textareaElement.scrollHeight - textAreaDiff) + 'px');