From 4ee45827104abac63fd19073fe068f06c4fd8ea2 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 18 Jan 2021 14:36:53 +0800
Subject: [PATCH] refactor(affix): tsx

---
 src/affix/index.ts                     |  2 +-
 src/affix/src/{Affix.vue => Affix.tsx} | 49 ++++++++++++--------------
 2 files changed, 24 insertions(+), 27 deletions(-)
 rename src/affix/src/{Affix.vue => Affix.tsx} (88%)

diff --git a/src/affix/index.ts b/src/affix/index.ts
index 956a5a708..168f765e5 100644
--- a/src/affix/index.ts
+++ b/src/affix/index.ts
@@ -1,2 +1,2 @@
 /* istanbul ignore file */
-export { default as NAffix } from './src/Affix.vue'
+export { default as NAffix } from './src/Affix'
diff --git a/src/affix/src/Affix.vue b/src/affix/src/Affix.tsx
similarity index 88%
rename from src/affix/src/Affix.vue
rename to src/affix/src/Affix.tsx
index a7f0ed220..5f3bca014 100644
--- a/src/affix/src/Affix.vue
+++ b/src/affix/src/Affix.tsx
@@ -1,18 +1,3 @@
-<template>
-  <div
-    ref="selfRef"
-    class="n-affix"
-    :class="{
-      [`n-affix--affixed`]: affixed,
-      [`n-affix--absolute-positioned`]: position === 'absolute'
-    }"
-    :style="mergedstyle"
-  >
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
 import {
   ref,
   computed,
@@ -20,10 +5,12 @@ import {
   onBeforeUnmount,
   defineComponent,
   CSSProperties,
-  PropType
+  PropType,
+  h,
+  renderSlot
 } from 'vue'
 import { getScrollParent, unwrapElement } from 'seemly'
-import { useConfig, useStyle } from '../../_mixins'
+import { useStyle } from '../../_mixins'
 import { warn } from '../../_utils'
 import style from './styles/index.cssr'
 
@@ -91,7 +78,7 @@ export default defineComponent({
       return offsetBottom === undefined ? bottom : offsetBottom
     })
     const selfRef = ref<Element | null>(null)
-    const init = () => {
+    const init = (): void => {
       const { target: getScrollTarget, listenTo } = props
       let scrollElement
       if (getScrollTarget) {
@@ -112,7 +99,7 @@ export default defineComponent({
         handleScroll()
       }
     }
-    const handleScroll = () => {
+    const handleScroll = (): void => {
       const { value: containerEl } = scrollElementRef
       const { value: selfEl } = selfRef
       if (!containerEl || !selfEl) return
@@ -169,13 +156,7 @@ export default defineComponent({
       }
     })
     return {
-      ...useConfig(props),
       selfRef,
-      scrollElement: scrollElementRef,
-      stickToTop: stickToTopRef,
-      stickToBottom: stickToBottomRef,
-      bottomAffixedTriggerScrollTop: bottomAffixedTriggerScrollTopRef,
-      topAffixedTriggerScrollTop: topAffixedTriggerScrollTopRef,
       affixed: affixedRef,
       mergedstyle: computed<CSSProperties>(() => {
         const style: CSSProperties = {}
@@ -191,6 +172,22 @@ export default defineComponent({
         return style
       })
     }
+  },
+  render () {
+    return (
+      <div
+        ref="selfRef"
+        class={[
+          'n-affix',
+          {
+            'n-affix--affixed': this.affixed,
+            'n-affix--absolute-positioned': this.position === 'absolute'
+          }
+        ]}
+        style={this.mergedstyle}
+      >
+        {renderSlot(this.$slots, 'default')}
+      </div>
+    )
   }
 })
-</script>