[improvement] Overlay: functional & tsx (#2822)

packages/mixins/popup/manager.js

@@ -1,6 +1,6 @@
-import Vue from 'vue';
 import context from './context';
 import Overlay from '../../overlay';
+import { mount } from '../../utils/functional';
 
 const defaultConfig = {
   className: '',
@@ -35,10 +35,11 @@ export default {
     let { modal } = context;
 
     if (!modal) {
-      modal = new (Vue.extend(Overlay))({
+      modal = mount(Overlay, {
-        el: document.createElement('div')
+        on: {
+          click: this.onClick
+        }
       });
-      modal.$on('click', this.onClick);
 
       context.modal = modal;
     }

packages/overlay/index.js

@@ -1,36 +0,0 @@
-import { use } from '../utils';
-
-const [sfc, bem] = use('overlay');
-
-export default sfc({
-  props: {
-    zIndex: Number,
-    className: null,
-    visible: Boolean,
-    customStyle: Object
-  },
-
-  render(h) {
-    const style = {
-      zIndex: this.zIndex,
-      ...this.customStyle
-    };
-
-    return (
-      <transition name="van-fade">
-        <div
-          vShow={this.visible}
-          style={style}
-          class={[bem(), this.className]}
-          onTouchmove={event => {
-            event.preventDefault();
-            event.stopPropagation();
-          }}
-          onClick={event => {
-            this.$emit('click', event);
-          }}
-        />
-      </transition>
-    );
-  }
-});

packages/overlay/index.tsx

@@ -0,0 +1,58 @@
+import { use } from '../utils';
+import { emit, inherit } from '../utils/functional';
+
+// Types
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../utils/use/sfc';
+
+export type OverlayProps = {
+  zIndex?: number;
+  className?: any;
+  visible?: boolean;
+  customStyle?: object;
+};
+
+export type OverlayEvents = {
+  click(event: Event): void;
+};
+
+const [sfc, bem] = use('overlay');
+
+function Overlay(
+  h: CreateElement,
+  props: OverlayProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<OverlayProps>
+) {
+  const style = {
+    zIndex: props.zIndex,
+    ...props.customStyle
+  };
+
+  return (
+    <transition name="van-fade">
+      <div
+        vShow={props.visible}
+        style={style}
+        class={[bem(), props.className]}
+        onTouchmove={(event: TouchEvent) => {
+          event.preventDefault();
+          event.stopPropagation();
+        }}
+        onClick={(event: Event) => {
+          emit(ctx, 'click', event);
+        }}
+        {...inherit(ctx, true)}
+      />
+    </transition>
+  );
+}
+
+Overlay.props = {
+  zIndex: Number,
+  className: null as any,
+  visible: Boolean,
+  customStyle: Object
+};
+
+export default sfc<OverlayProps, OverlayEvents>(Overlay);

packages/utils/functional.ts

@@ -58,12 +58,15 @@ export function emit(context: Context, eventName: string, ...args: any[]) {
 }
 
 // mount functional component
-export function mount(Component: any) {
+export function mount(Component: any, data?: VNodeData) {
   const instance = new Vue({
     el: document.createElement('div'),
     props: Component.props,
     render(h) {
-      return h(Component, { props: this.$props });
+      return h(Component, {
+        props: this.$props,
+        ...data
+      });
     }
   });