From 6319d44423c78b1ef31e9fd25a2503aa53a51e06 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Fri, 9 Oct 2020 20:56:32 +0800
Subject: [PATCH] chore(Overlay): use tsx

---
 src/composition/use-lazy-render.ts  |  6 +++---
 src/overlay/demo/index.vue          |  1 +
 src/overlay/{index.js => index.tsx} | 10 +++++-----
 3 files changed, 9 insertions(+), 8 deletions(-)
 rename src/overlay/{index.js => index.tsx} (79%)

diff --git a/src/composition/use-lazy-render.ts b/src/composition/use-lazy-render.ts
index dcecc2771..992df2d45 100644
--- a/src/composition/use-lazy-render.ts
+++ b/src/composition/use-lazy-render.ts
@@ -1,6 +1,6 @@
-import { ref, watch, WatchSource, VNode } from 'vue';
+import { ref, watch, WatchSource } from 'vue';
 
-export function useLazyRender(show: WatchSource<boolean>) {
+export function useLazyRender(show: WatchSource<boolean | undefined>) {
   const inited = ref(false);
 
   watch(
@@ -13,5 +13,5 @@ export function useLazyRender(show: WatchSource<boolean>) {
     { immediate: true }
   );
 
-  return (render: () => VNode) => () => (inited.value ? render() : null);
+  return (render: () => JSX.Element) => () => (inited.value ? render() : null);
 }
diff --git a/src/overlay/demo/index.vue b/src/overlay/demo/index.vue
index a919f4f8c..d98f1cf6d 100644
--- a/src/overlay/demo/index.vue
+++ b/src/overlay/demo/index.vue
@@ -67,6 +67,7 @@ export default {
     width: 120px;
     height: 120px;
     background-color: @white;
+    border-radius: 4px;
   }
 }
 </style>
diff --git a/src/overlay/index.js b/src/overlay/index.tsx
similarity index 79%
rename from src/overlay/index.js
rename to src/overlay/index.tsx
index 6f39949f4..c5df5b85e 100644
--- a/src/overlay/index.js
+++ b/src/overlay/index.tsx
@@ -1,4 +1,4 @@
-import { Transition } from 'vue';
+import { PropType, Transition, CSSProperties } from 'vue';
 import { noop, isDef, preventDefault, createNamespace } from '../utils';
 import { useLazyRender } from '../composition/use-lazy-render';
 
@@ -10,7 +10,7 @@ export default createComponent({
     zIndex: [Number, String],
     duration: [Number, String],
     className: null,
-    customStyle: Object,
+    customStyle: Object as PropType<CSSProperties>,
     lockScroll: {
       type: Boolean,
       default: true,
@@ -20,13 +20,13 @@ export default createComponent({
   setup(props, { slots }) {
     const lazyRender = useLazyRender(() => props.show);
 
-    const preventTouchMove = (event) => {
+    const preventTouchMove = (event: TouchEvent) => {
       preventDefault(event, true);
     };
 
     const renderOverlay = lazyRender(() => {
-      const style = {
-        zIndex: props.zIndex,
+      const style: CSSProperties = {
+        zIndex: props.zIndex !== undefined ? +props.zIndex : undefined,
         ...props.customStyle,
       };