From cb992ce97966aa902223571467a0a94254cf89c9 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Wed, 23 May 2018 11:01:27 +0800
Subject: [PATCH]  [Improvement] Popup: support lazy render (#1138)

---
 packages/address-edit/index.vue               |   2 +-
 packages/contact-card/demo/index.vue          |   4 +-
 packages/coupon-list/demo/index.vue           |   2 +-
 packages/mixins/popup/index.js                |   6 +-
 packages/mixins/popup/manager.js              |   1 +
 packages/popup/en-US.md                       |   1 +
 packages/popup/index.vue                      |  18 ++-
 .../test/__snapshots__/demo.spec.js.snap      |  40 +-----
 .../test/__snapshots__/index.spec.js.snap     |   3 +
 packages/popup/test/index.spec.js             | 126 ++++++++++++++++++
 packages/popup/zh-CN.md                       |   1 +
 .../sku/test/__snapshots__/demo.spec.js.snap  |  26 +++-
 packages/tab/index.vue                        |   8 +-
 test/touch-utils.js                           |  34 +++++
 14 files changed, 223 insertions(+), 49 deletions(-)
 create mode 100644 packages/popup/test/__snapshots__/index.spec.js.snap
 create mode 100644 packages/popup/test/index.spec.js
 create mode 100644 test/touch-utils.js

diff --git a/packages/address-edit/index.vue b/packages/address-edit/index.vue
index b99a7548b..db43ab9a8 100644
--- a/packages/address-edit/index.vue
+++ b/packages/address-edit/index.vue
@@ -65,7 +65,7 @@
         {{ $t('deleteAddress') }}
       </van-button>
     </div>
-    <popup v-model="showArea" position="bottom">
+    <popup v-model="showArea" position="bottom" :lazy-render="false">
       <van-area
         ref="area"
         :loading="!areaListLoaded"
diff --git a/packages/contact-card/demo/index.vue b/packages/contact-card/demo/index.vue
index 39220cc3d..a3835dfcf 100644
--- a/packages/contact-card/demo/index.vue
+++ b/packages/contact-card/demo/index.vue
@@ -8,7 +8,7 @@
         @click="showList = true"
       />
 
-      <van-popup v-model="showList" position="bottom">
+      <van-popup v-model="showList" position="bottom" :lazy-render="false">
         <van-contact-list
           v-model="chosenContactId"
           :list="list"
@@ -18,7 +18,7 @@
         />
       </van-popup>
 
-      <van-popup v-model="showEdit" position="bottom">
+      <van-popup v-model="showEdit" position="bottom" :lazy-render="false">
         <van-contact-edit
           :contact-info="editingContact"
           :is-edit="isEdit"
diff --git a/packages/coupon-list/demo/index.vue b/packages/coupon-list/demo/index.vue
index d42f0ecc0..2524b3943 100644
--- a/packages/coupon-list/demo/index.vue
+++ b/packages/coupon-list/demo/index.vue
@@ -7,7 +7,7 @@
         @click="showList = true"
       />
 
-      <van-popup v-model="showList" position="bottom">
+      <van-popup v-model="showList" position="bottom" :lazy-render="false">
         <van-coupon-list
           :coupons="coupons"
           :chosen-coupon="chosenCoupon"
diff --git a/packages/mixins/popup/index.js b/packages/mixins/popup/index.js
index bbcf15459..51eda97d1 100644
--- a/packages/mixins/popup/index.js
+++ b/packages/mixins/popup/index.js
@@ -119,7 +119,6 @@ export default {
     move() {
       if (this.getContainer) {
         this.getContainer().appendChild(this.$el);
-      /* istanbul ignore if */
       } else if (this.$parent) {
         this.$parent.$el.appendChild(this.$el);
       }
@@ -160,7 +159,10 @@ export default {
       } else {
         manager.close(this._popupId);
       }
-      this.$el.style.zIndex = context.plusKey('zIndex');
+
+      this.$nextTick(() => {
+        this.$el.style.zIndex = context.plusKey('zIndex');
+      });
     }
   }
 };
diff --git a/packages/mixins/popup/manager.js b/packages/mixins/popup/manager.js
index 68649bb8a..0dc93b53a 100644
--- a/packages/mixins/popup/manager.js
+++ b/packages/mixins/popup/manager.js
@@ -61,6 +61,7 @@ export default {
 
   // close popup when click modal && closeOnClickOverlay is true
   onClick() {
+    /* istanbul ignore else */
     if (context.top) {
       const { vm } = context.top;
       vm.$emit('click-overlay');
diff --git a/packages/popup/en-US.md b/packages/popup/en-US.md
index fe6012540..29265a2cf 100644
--- a/packages/popup/en-US.md
+++ b/packages/popup/en-US.md
@@ -47,6 +47,7 @@ Use `position` prop to set popup display position
 | close-on-click-overlay | Close popup when click overlay | `Boolean` | `true` |
 | transition | Transition | `String` | `popup-slide` |
 | lock-scroll | Whether to lock background scroll | `Boolean` | `true` |
+| lazy-render | Whether to lazy render util appeared | `Boolean` | `true` |
 | get-container | Return the mount node for Popup | `() => HTMLElement` | - |
 
 ### Event
diff --git a/packages/popup/index.vue b/packages/popup/index.vue
index 74d2733a2..3fdc494a3 100644
--- a/packages/popup/index.vue
+++ b/packages/popup/index.vue
@@ -1,6 +1,6 @@
 <template>
   <transition :name="currentTransition">
-    <div v-show="value" :class="b({ [position]: position })">
+    <div v-if="inited || !lazyRender" v-show="value" :class="b({ [position]: position })">
       <slot />
     </div>
   </transition>
@@ -17,6 +17,10 @@ export default create({
 
   props: {
     transition: String,
+    lazyRender: {
+      type: Boolean,
+      default: true
+    },
     overlay: {
       type: Boolean,
       default: true
@@ -31,10 +35,22 @@ export default create({
     }
   },
 
+  data() {
+    return {
+      inited: this.value
+    };
+  },
+
   computed: {
     currentTransition() {
       return this.transition || (this.position === '' ? 'van-fade' : `popup-slide-${this.position}`);
     }
+  },
+
+  watch: {
+    value() {
+      this.inited = this.inited || this.value;
+    }
   }
 });
 </script>
diff --git a/packages/popup/test/__snapshots__/demo.spec.js.snap b/packages/popup/test/__snapshots__/demo.spec.js.snap
index 09b0a357f..4a3766382 100644
--- a/packages/popup/test/__snapshots__/demo.spec.js.snap
+++ b/packages/popup/test/__snapshots__/demo.spec.js.snap
@@ -5,50 +5,18 @@ exports[`renders demo correctly 1`] = `
   <div>
     <button class="van-button van-button--default van-button--normal">
       <!----><span class="van-button__text">弹出 Popup</span></button>
-    <div class="van-popup" style="display:none;">内容</div>
+    <!---->
   </div>
   <div>
     <button class="van-button van-button--default van-button--normal">
       <!----><span class="van-button__text">底部弹出</span></button>
-    <div class="van-popup van-popup--bottom" style="display:none;">
-      <div class="van-picker">
-        <div class="van-hairline--top-bottom van-picker__toolbar">
-          <div class="van-picker__cancel">取消</div>
-          <!---->
-          <div class="van-picker__confirm">确认</div>
-        </div>
-        <!---->
-        <div class="van-picker__columns" style="height:220px;">
-          <div class="van-picker-column" style="height:220px;">
-            <ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
-              <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">杭州</li>
-              <li class="van-ellipsis van-picker-column__item">宁波</li>
-              <li class="van-ellipsis van-picker-column__item">温州</li>
-              <li class="van-ellipsis van-picker-column__item">嘉兴</li>
-              <li class="van-ellipsis van-picker-column__item">湖州</li>
-            </ul>
-          </div>
-          <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
-        </div>
-      </div>
-    </div>
+    <!---->
     <button class="van-button van-button--default van-button--normal">
       <!----><span class="van-button__text">顶部弹出</span></button>
-    <div class="van-popup van-popup--top" style="display:none;">
-      内容
-    </div>
+    <!---->
     <button class="van-button van-button--default van-button--normal">
       <!----><span class="van-button__text">右侧弹出</span></button>
-    <div class="van-popup van-popup--right" style="display:none;">
-      <button class="van-button van-button--default van-button--normal">
-        <!----><span class="van-button__text">关闭弹层</span></button>
-      <button class="van-button van-button--default van-button--normal">
-        <!----><span class="van-button__text">右侧弹出</span></button>
-      <div class="van-popup van-popup--right" style="display:none;">
-        <button class="van-button van-button--default van-button--normal">
-          <!----><span class="van-button__text">关闭弹层</span></button>
-      </div>
-    </div>
+    <!---->
   </div>
 </div>
 `;
diff --git a/packages/popup/test/__snapshots__/index.spec.js.snap b/packages/popup/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..27fb27639
--- /dev/null
+++ b/packages/popup/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`reset z-index 1`] = `<div class="van-popup" name="van-fade"></div>`;
diff --git a/packages/popup/test/index.spec.js b/packages/popup/test/index.spec.js
new file mode 100644
index 000000000..7f45eec3f
--- /dev/null
+++ b/packages/popup/test/index.spec.js
@@ -0,0 +1,126 @@
+import Vue from 'vue';
+import Popup from '../';
+import { mount, TransitionStub } from '@vue/test-utils';
+import { triggerDrag } from '../../../test/touch-utils';
+
+Vue.component('transition', TransitionStub);
+
+let wrapper;
+afterEach(() => {
+  wrapper.vm.$destroy();
+});
+
+test('lazy render', () => {
+  wrapper = mount(Popup);
+  expect(wrapper.vm.$el.tagName).toBeFalsy();
+  wrapper.vm.value = true;
+  expect(wrapper.vm.$el.tagName).toBeTruthy();
+});
+
+test('reset z-index', () => {
+  wrapper = mount(Popup, {
+    propsData: {
+      value: true,
+      zIndex: 10,
+      lockScroll: false
+    }
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('popup lock scroll', () => {
+  const wrapper1 = mount(Popup, {
+    propsData: {
+      value: true
+    }
+  });
+  expect(document.body.classList.contains('van-overflow-hidden')).toBeTruthy();
+  triggerDrag(document, 0, 100);
+  triggerDrag(document, 0, -150);
+
+  const wrapper2 = mount(Popup, {
+    propsData: {
+      value: true
+    }
+  });
+  wrapper1.vm.$destroy();
+  expect(document.body.classList.contains('van-overflow-hidden')).toBeTruthy();
+
+  wrapper2.vm.$destroy();
+  expect(document.body.classList.contains('van-overflow-hidden')).toBeFalsy();
+});
+
+test('get container with parent', () => {
+  const div1 = document.createElement('div');
+  const div2 = document.createElement('div');
+  wrapper = mount({
+    template: `
+      <div>
+        <popup :value="true" :get-container="getContainer" />
+      </div>
+    `,
+    components: {
+      Popup
+    },
+    data() {
+      return {
+        getContainer: () => div1
+      };
+    }
+  });
+  const popup = wrapper.find('.van-popup').element;
+
+  expect(popup.parentNode).toEqual(div1);
+  wrapper.vm.getContainer = () => div2;
+  expect(popup.parentNode).toEqual(div2);
+  wrapper.vm.getContainer = null;
+  expect(popup.parentNode).toEqual(wrapper.element);
+});
+
+test('get container without parent', () => {
+  const div = document.createElement('div');
+  wrapper = mount(Popup, {
+    propsData: {
+      getContainer: () => div
+    }
+  });
+  const popup = wrapper.element;
+  expect(popup.parentNode).toEqual(div);
+  wrapper.vm.getContainer = null;
+  expect(popup.parentNode).toEqual(div);
+});
+
+test('render overlay', () => {
+  const div = document.createElement('div');
+  wrapper = mount(Popup, {
+    propsData: {
+      value: true,
+      overlay: false,
+      getContainer: () => div
+    }
+  });
+
+  expect(div.querySelector('.van-modal')).toBeFalsy();
+  wrapper.vm.overlay = true;
+  expect(div.querySelector('.van-modal')).toBeTruthy();
+});
+
+test('close on click modal', () => {
+  const div = document.createElement('div');
+  wrapper = mount(Popup, {
+    propsData: {
+      value: true,
+      getContainer: () => div
+    }
+  });
+
+  wrapper.vm.$on('input', val => {
+    wrapper.vm.value = val;
+  });
+
+  const modal = div.querySelector('.van-modal');
+  triggerDrag(modal, 0, -30);
+  modal.click();
+  expect(wrapper.vm.value).toBeFalsy();
+});
diff --git a/packages/popup/zh-CN.md b/packages/popup/zh-CN.md
index 56380fb8e..8b87ba822 100644
--- a/packages/popup/zh-CN.md
+++ b/packages/popup/zh-CN.md
@@ -47,6 +47,7 @@ export default {
 | overlay-style | 自定义蒙层样式 | `Object` | `` |
 | close-on-click-overlay | 点击蒙层是否关闭 Popup | `Boolean` | `true` |
 | transition | transition 名称 | `String` | `popup-slide` |
+| lazy-render | 是否在首次显示弹层时才渲染 DOM 节点 | `Boolean` | `true` |
 | get-container | 指定弹出层挂载的 HTML 节点 | `() => HTMLElement` | - |
 
 ### Event
diff --git a/packages/sku/test/__snapshots__/demo.spec.js.snap b/packages/sku/test/__snapshots__/demo.spec.js.snap
index 3fad684eb..1a6785772 100644
--- a/packages/sku/test/__snapshots__/demo.spec.js.snap
+++ b/packages/sku/test/__snapshots__/demo.spec.js.snap
@@ -1,3 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders demo correctly 1`] = `""`;
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="sku-container">
+      <!---->
+      <button class="van-button van-button--primary van-button--normal van-button--block">
+        <!----><span class="van-button__text">基础用法</span></button>
+    </div>
+  </div>
+  <div>
+    <div class="sku-container">
+      <!---->
+      <button class="van-button van-button--primary van-button--normal van-button--block">
+        <!----><span class="van-button__text">自定义步进器相关配置</span></button>
+    </div>
+  </div>
+  <div>
+    <div class="sku-container">
+      <!---->
+      <button class="van-button van-button--primary van-button--normal van-button--block">
+        <!----><span class="van-button__text">高级用法</span></button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/tab/index.vue b/packages/tab/index.vue
index 40c891511..83ca2f06a 100644
--- a/packages/tab/index.vue
+++ b/packages/tab/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="b('pane')" v-show="isSelected">
-    <slot v-if="slotInited" />
+    <slot v-if="inited" />
   </div>
 </template>
 
@@ -20,7 +20,7 @@ export default create({
 
   data() {
     return {
-      slotInited: false
+      inited: false
     };
   },
 
@@ -36,9 +36,7 @@ export default create({
 
   watch: {
     'parent.curActive'() {
-      if (this.isSelected) {
-        this.slotInited = true;
-      }
+      this.inited = this.inited || this.isSelected;
     }
   },
 
diff --git a/test/touch-utils.js b/test/touch-utils.js
new file mode 100644
index 000000000..1b742289d
--- /dev/null
+++ b/test/touch-utils.js
@@ -0,0 +1,34 @@
+// Trigger touch event
+export function triggerTouch(wrapper, eventName, x = 0, y = 0) {
+  const el = wrapper.element ? wrapper.element : wrapper;
+  const touch = {
+    identifier: Date.now(),
+    target: el,
+    pageX: x,
+    pageY: y,
+    clientX: x,
+    clientY: y,
+    radiusX: 2.5,
+    radiusY: 2.5,
+    rotationAngle: 10,
+    force: 0.5
+  };
+
+  const event = document.createEvent('CustomEvent');
+  event.initCustomEvent(eventName, true, true, {});
+  event.touches = [touch];
+  event.targetTouches = [touch];
+  event.changedTouches = [touch];
+
+  el.dispatchEvent(event);
+}
+
+// simulate drag gesture
+export function triggerDrag(el, x = 0, y = 0) {
+  triggerTouch(el, 'touchstart', 0, 0);
+  triggerTouch(el, 'touchmove', x / 4, y / 4);
+  triggerTouch(el, 'touchmove', x / 3, y / 3);
+  triggerTouch(el, 'touchmove', x / 2, y / 2);
+  triggerTouch(el, 'touchmove', x, y);
+  triggerTouch(el, 'touchend', x, y);
+}