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

2019-02-22 09:27:00 +08:00
parent ea36edbd1a
commit 91a9345a7d
4 changed files with 68 additions and 42 deletions
@@ -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>
-    );
-  }
-});
@@ -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);