From dffa11959ab335a2e40731216e9dc83dd07570a0 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Fri, 9 Oct 2020 20:51:55 +0800
Subject: [PATCH] chore(NavBar): use tsx

---
 src/composition/use-placeholder.tsx |  4 ++--
 src/nav-bar/{index.js => index.tsx} | 12 ++++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)
 rename src/nav-bar/{index.js => index.tsx} (88%)

diff --git a/src/composition/use-placeholder.tsx b/src/composition/use-placeholder.tsx
index 8361023b5..330c0c9d3 100644
--- a/src/composition/use-placeholder.tsx
+++ b/src/composition/use-placeholder.tsx
@@ -1,11 +1,11 @@
 import { useHeight } from './use-height';
-import type { Ref, VNode } from 'vue';
+import type { Ref } from 'vue';
 import type { BEM } from '../utils/create/bem';
 
 export function usePlaceholder(contentRef: Ref<Element>, bem: BEM) {
   const height = useHeight(contentRef);
 
-  return (renderContent: () => VNode) => (
+  return (renderContent: () => JSX.Element) => (
     <div
       class={bem('placeholder')}
       style={{ height: height.value ? `${height.value}px` : undefined }}
diff --git a/src/nav-bar/index.js b/src/nav-bar/index.tsx
similarity index 88%
rename from src/nav-bar/index.js
rename to src/nav-bar/index.tsx
index 43ccee331..0c009fba9 100644
--- a/src/nav-bar/index.js
+++ b/src/nav-bar/index.tsx
@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { ref, CSSProperties } from 'vue';
 
 // Utils
 import { createNamespace } from '../utils';
@@ -33,11 +33,11 @@ export default createComponent({
     const navBarRef = ref();
     const renderPlaceholder = usePlaceholder(navBarRef, bem);
 
-    const onClickLeft = (event) => {
+    const onClickLeft = (event: MouseEvent) => {
       emit('click-left', event);
     };
 
-    const onClickRight = (event) => {
+    const onClickRight = (event: MouseEvent) => {
       emit('click-right', event);
     };
 
@@ -64,10 +64,14 @@ export default createComponent({
 
     const renderNavBar = () => {
       const { title, fixed, border, zIndex } = props;
+      const style: CSSProperties = {
+        zIndex: zIndex !== undefined ? +zIndex : undefined,
+      };
+
       return (
         <div
           ref={navBarRef}
-          style={{ zIndex }}
+          style={style}
           class={[bem({ fixed }), { [BORDER_BOTTOM]: border }]}
         >
           <div class={bem('left')} onClick={onClickLeft}>