refactor(Popup): create overlay for every popup (#6357)

src/dropdown-menu/test/__snapshots__/index.spec.js.snap

@@ -343,30 +343,3 @@ exports[`title slot 1`] = `
   </div>
 </div>
 `;
-
-exports[`toggle method 1`] = `
-<div class="van-dropdown-menu">
-  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
-    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis"></div></span></div>
-  </div>
-  <div>
-    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
-      <div class="van-overlay" style="z-index: 2017; animation-duration: 0s; position: absolute;" name="van-fade"></div>
-      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018;" name="van-popup-slide-top"></div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`toggle method 2`] = `
-<div class="van-dropdown-menu">
-  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
-    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
-  </div>
-  <div>
-    <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
-      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018; display: none;" name="van-popup-slide-top"></div>
-    </div>
-  </div>
-</div>
-`;

src/dropdown-menu/test/index.spec.js

@@ -224,12 +224,14 @@ test('toggle method', async (done) => {
       // show
       this.$refs.item.toggle(true, { immediate: true });
       await later();
-      expect(wrapper).toMatchSnapshot();
+
+      const content = wrapper.find('.van-dropdown-item__content');
+      expect(content.element.style.display).toEqual('');
 
       // hide
       this.$refs.item.toggle(false, { immediate: true });
       await later();
-      expect(wrapper).toMatchSnapshot();
+      expect(content.element.style.display).toEqual('none');
 
       done();
     },

src/mixins/popup/context.ts

@@ -2,6 +2,7 @@ import { OverlayConfig } from './overlay';
 
 export type StackItem = {
   vm: any;
+  overlay: any;
   config: OverlayConfig;
 };
 
@@ -9,8 +10,7 @@ export const context = {
   zIndex: 2000,
   lockCount: 0,
   stack: [] as StackItem[],
-
-  get top(): StackItem {
-    return this.stack[this.stack.length - 1];
+  find(vm: any): StackItem | undefined {
+    return this.stack.filter((item) => item.vm === vm)[0];
   },
 };

src/mixins/popup/index.js

@@ -1,6 +1,11 @@
 // Context
 import { context } from './context';
-import { openOverlay, closeOverlay, updateOverlay } from './overlay';
+import {
+  openOverlay,
+  closeOverlay,
+  updateOverlay,
+  removeOverlay,
+} from './overlay';
 
 // Utils
 import { on, off, preventDefault } from '../../utils/dom/event';
@@ -94,7 +99,8 @@ export function PopupMixin(options = {}) {
     },
 
     beforeDestroy() {
-      this.close();
+      this.removeLock();
+      removeOverlay(this);
 
       if (this.getContainer) {
         removeNode(this.$el);
@@ -123,7 +129,10 @@ export function PopupMixin(options = {}) {
 
         this.opened = true;
         this.renderOverlay();
+        this.addLock();
+      },
 
+      addLock() {
         if (this.lockScroll) {
           on(document, 'touchstart', this.touchStart);
           on(document, 'touchmove', this.onTouchMove);
@@ -135,11 +144,7 @@ export function PopupMixin(options = {}) {
         }
       },
 
-      close() {
-        if (!this.opened) {
-          return;
-        }
-
+      removeLock() {
         if (this.lockScroll) {
           context.lockCount--;
           off(document, 'touchstart', this.touchStart);
@@ -149,9 +154,16 @@ export function PopupMixin(options = {}) {
             document.body.classList.remove('van-overflow-hidden');
           }
         }
+      },
+
+      close() {
+        if (!this.opened) {
+          return;
+        }
 
-        this.opened = false;
         closeOverlay(this);
+        this.opened = false;
+        this.removeLock();
         this.$emit('input', false);
       },
 

src/mixins/popup/overlay.ts

@@ -1,6 +1,7 @@
 import Overlay from '../../overlay';
 import { context } from './context';
 import { mount } from '../../utils/functional';
+import { removeNode } from '../../utils/dom/node';
 
 export type OverlayConfig = {
   zIndex?: number;
@@ -13,71 +14,61 @@ const defaultConfig: OverlayConfig = {
   customStyle: {},
 };
 
-let overlay: any;
-
-// close popup when click overlay && closeOnClickOverlay is true
-function onClickOverlay(): void {
-  if (context.top) {
-    const { vm } = context.top;
-    vm.$emit('click-overlay');
-
-    if (vm.closeOnClickOverlay) {
-      if (vm.onClickOverlay) {
-        vm.onClickOverlay();
-      } else {
-        vm.close();
-      }
-    }
-  }
-}
-
-function mountOverlay() {
-  overlay = mount(Overlay, {
+function mountOverlay(vm: any) {
+  return mount(Overlay, {
     on: {
-      click: onClickOverlay,
+      // close popup when overlay clicked & closeOnClickOverlay is true
+      click() {
+        vm.$emit('click-overlay');
+
+        if (vm.closeOnClickOverlay) {
+          if (vm.onClickOverlay) {
+            vm.onClickOverlay();
+          } else {
+            vm.close();
+          }
+        }
+      },
     },
   });
 }
 
-export function updateOverlay(): void {
-  if (!overlay) {
-    mountOverlay();
-  }
-
-  if (context.top) {
-    const { vm, config } = context.top;
+export function updateOverlay(vm: any): void {
+  const item = context.find(vm);
 
+  if (item) {
     const el = vm.$el;
+    const { config, overlay } = item;
+
     if (el && el.parentNode) {
       el.parentNode.insertBefore(overlay.$el, el);
-    } else {
-      document.body.appendChild(overlay.$el);
     }
 
     Object.assign(overlay, defaultConfig, config, {
       show: true,
     });
-  } else {
-    overlay.show = false;
   }
 }
 
 export function openOverlay(vm: any, config: OverlayConfig): void {
-  if (!context.stack.some((item) => item.vm === vm)) {
-    context.stack.push({ vm, config });
-    updateOverlay();
+  if (!context.find(vm)) {
+    const overlay = mountOverlay(vm);
+    context.stack.push({ vm, config, overlay });
   }
+
+  updateOverlay(vm);
 }
 
 export function closeOverlay(vm: any): void {
-  const { stack } = context;
-
-  if (stack.length) {
-    if (context.top.vm === vm) {
-      stack.pop();
-      updateOverlay();
-    } else {
-      context.stack = stack.filter((item) => item.vm !== vm);
-    }
+  const item = context.find(vm);
+  if (item) {
+    item.overlay.show = false;
+  }
+}
+
+export function removeOverlay(vm: any) {
+  const item = context.find(vm);
+  if (item) {
+    removeNode(item.overlay.$el);
   }
 }