refactor: list - SFC to TSX (#1437)

* refactor: list - SFC to TSX

* fix: update onScroll func signature

* refactor: replace TNode with useContent

* fix: useTNodeJSX instead

* fix: update test snapshot

* fix: delete 'span' wrapper

src/list/__test__/__snapshots__/demo.test.jsx.snap

@@ -7,10 +7,12 @@ exports[`List > List baseVue demo works fine 1`] = `
   <!---->
   
   
+  
+  
   <div
     class="t-list__loading--wrapper"
   >
-    <!--v-if-->
+    <!---->
   </div>
   <!---->
 </div>
@@ -23,14 +25,14 @@ exports[`List > List errTipVue demo works fine 1`] = `
   <!---->
   
   
+  
+  
   <div
     class="t-list__loading--wrapper"
   >
-    <!--v-if-->
+    <!---->
   </div>
-  
-  <!--v-if-->
-  
+  <!---->
 </div>
 `;
 
@@ -162,10 +164,12 @@ exports[`List > List pullRefreshVue demo works fine 1`] = `
       <!---->
       
       
+      
+      
       <div
         class="t-list__loading--wrapper"
       >
-        <!--v-if-->
+        <!---->
       </div>
       <!---->
     </div>

src/list/__test__/__snapshots__/index.test.jsx.snap

@@ -470,7 +470,7 @@ exports[`list > event > : load-more 1`] = `
   <div
     class="t-list__loading--wrapper"
   >
-    <!--v-if-->
+    <!---->
   </div>
   <!---->
 </div>

src/list/__test__/index.test.jsx

@@ -1,7 +1,7 @@
 import { ref } from 'vue';
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import List from '../list.vue';
+import List from '../list';
 import TLoading from '../../loading/loading';
 import TCell from '../../cell/index';
 

src/list/index.ts

@@ -1,4 +1,4 @@
-import List from './list.vue';
+import List from './list';
 import { withInstall, WithInstallType } from '../shared';
 
 import { TdListProps } from './type';

src/list/list.en-US.md

@@ -9,11 +9,11 @@ asyncLoading | String / Slot / Function | - | Typescript：`string | TNode`。[s
 footer | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 header | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 onLoadMore | Function |  | Typescript：`() => void`<br/> | N
-onScroll | Function |  | Typescript：`(scrollTop: number) => void`<br/> | N
+onScroll | Function |  | Typescript：`(bottomDistance:number, scrollTop: number)=> void`<br/> | N
 
 ### List Events
 
 name | params | description
 -- | -- | --
 load-more | \- | \-
-scroll | `(scrollTop: number)` | \-
+scroll | `((bottomDistance:number, scrollTop: number)` | \-

src/list/list.md

@@ -9,7 +9,7 @@ asyncLoading | String / Slot / Function | - | 自定义加载中。值为空不
 footer | String / Slot / Function | - | 底部。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 header | String / Slot / Function | - | 头部。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 onLoadMore | Function |  | TS 类型：`() => void`<br/>点击加载更多时触发 | N
-onScroll | Function |  | TS 类型：`(scrollTop: number) => void`<br/>列表滚动时触发，scrollTop 表示顶部滚动距离 | N
+onScroll | Function |  | TS 类型：`(bottomDistance:number, scrollTop: number) => void`<br/>列表滚动时触发，scrollTop 表示顶部滚动距离 | N
 
 ### List Events
 

src/list/list.vue → src/list/list.tsx

@@ -1,63 +1,40 @@
-<template>
-  <div ref="root" :class="name" @scroll="handleScroll">
-    <t-node :content="headerContent" />
-    <slot />
-    <div :class="`${name}__loading--wrapper`" @click.stop="onLoadMore">
-      <t-loading
-        v-if="typeof asyncLoading === 'string' && ['loading', 'load-more'].includes(asyncLoading)"
-        :indicator="asyncLoading === 'loading'"
-        :text="typeof asyncLoading === 'string' ? LOADING_TEXT_MAP[asyncLoading] : ''"
-        :class="`${name}__loading`"
-      />
-    </div>
-    <t-node :content="footerContent" />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, computed, getCurrentInstance } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { useWindowSize, useEventListener } from '@vueuse/core';
+import { useTNodeJSX } from '../hooks/tnode';
 import TLoading from '../loading';
 import config from '../config';
 import ListProps from './props';
-import { renderTNode, TNode, useScrollParent } from '../shared';
+import { useScrollParent } from '../shared';
 import { useConfig } from '../config-provider/useConfig';
 
 const { prefix } = config;
-
 const name = `${prefix}-list`;
 
 export default defineComponent({
   name,
   components: {
     TLoading,
-    TNode,
   },
   props: ListProps,
   emits: ['load-more', 'scroll'],
-  setup(props, context) {
+  setup(props, { slots }) {
     const { globalConfig } = useConfig('list');
+    const renderTNodeJSX = useTNodeJSX();
 
     const LOADING_TEXT_MAP = {
       loading: globalConfig.value.loading,
       'load-more': globalConfig.value.loadingMoreText,
     };
 
     const root = ref<HTMLElement>();
-    const empty = ref<HTMLElement>();
     const scrollParent = useScrollParent(root);
     const { height } = useWindowSize();
-    const internalInstance = getCurrentInstance();
-
-    const headerContent = computed(() => renderTNode(internalInstance, 'header'));
-    const footerContent = computed(() => renderTNode(internalInstance, 'footer'));
 
     const onLoadMore = (e: MouseEvent) => {
       if (props.asyncLoading === 'load-more') {
         props.onLoadMore?.();
       }
     };
-
     const handleScroll = (e: WheelEvent | Event) => {
       const scrollHeight =
         (e.target as HTMLElement).scrollHeight ||
@@ -70,17 +47,25 @@ export default defineComponent({
     };
 
     useEventListener(scrollParent, 'scroll', handleScroll);
-
-    return {
-      name,
-      root,
-      empty,
-      onLoadMore,
-      handleScroll,
-      headerContent,
-      footerContent,
-      LOADING_TEXT_MAP,
+    return () => {
+      const headerContent = renderTNodeJSX('header');
+      const footerContent = renderTNodeJSX('footer');
+      return (
+        <div ref={root} class={name} onScroll={handleScroll}>
+          {headerContent}
+          {slots.default && slots.default()}
+          <div class={`${name}__loading--wrapper`} onClick={onLoadMore}>
+            {typeof props.asyncLoading === 'string' && ['loading', 'load-more'].includes(props.asyncLoading) && (
+              <TLoading
+                indicator={props.asyncLoading === 'loading'}
+                text={typeof props.asyncLoading === 'string' ? LOADING_TEXT_MAP[props.asyncLoading] : ''}
+                class={`${name}__loading`}
+              />
+            )}
+          </div>
+          {footerContent}
+        </div>
+      );
     };
   },
 });
-</script>

src/list/pull-refresh.vue → src/list/pull-refresh.tsx

@@ -1,25 +1,3 @@
-<template>
-  <div :class="name">
-    <div
-      :class="`${name}__track`"
-      :style="trackStyle"
-      @touchstart.stop="onTouchStart"
-      @touchmove.stop="onTouchMove"
-      @touchend.stop="onTouchEnd"
-      @touchcancel.stop="onTouchEnd"
-    >
-      <div :class="`${name}__head`">
-        <div v-if="SHOW_TEXT_LIST.includes(state.status)">{{ TEXT_MAP[state.status] }}</div>
-        <div v-if="state.status === 'loading'">
-          <t-loading :text="globalConfig.loading" />
-        </div>
-      </div>
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
 import { defineComponent, nextTick, reactive, ref, computed, watch } from 'vue';
 import { preventDefault } from '../shared/dom';
 import config from '../config';
@@ -79,6 +57,7 @@ function isElement(node: Element) {
   const ELEMENT_NODE_TYPE = 1;
   return node.tagName !== 'HTML' && node.tagName !== 'BODY' && node.nodeType === ELEMENT_NODE_TYPE;
 }
+
 const getScrollParent = (node: Element) => {
   let res = node;
   while (res && isElement(res)) {
@@ -94,7 +73,7 @@ export default defineComponent({
   components: { TLoading },
   props: PullRefreshProps,
   emits: ['refresh', 'update:modelValue'],
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const state = reactive({
       status: 'normal' as PullRefreshStatus,
       distance: 0,
@@ -175,17 +154,23 @@ export default defineComponent({
       },
     );
 
-    return {
-      name,
-      state,
-      trackStyle,
-      globalConfig,
-      TEXT_MAP,
-      SHOW_TEXT_LIST,
-      onTouchStart,
-      onTouchMove,
-      onTouchEnd,
-    };
+    return () => (
+      <div class={name}>
+        <div
+          class={`${name}__track`}
+          style={trackStyle.value}
+          onTouchstart={onTouchStart}
+          onTouchmove={onTouchMove}
+          onTouchend={onTouchEnd}
+          onTouchcancel={onTouchEnd}
+        >
+          <div class={`${name}__head`}>
+            {SHOW_TEXT_LIST.includes(state.status) && <div>{TEXT_MAP[state.status]}</div>}
+            {state.status === 'loading' && <TLoading text={globalConfig.value.loading} />}
+          </div>
+          {slots.default && slots.default()}
+        </div>
+      </div>
+    );
   },
 });
-</script>

src/list/type.ts

@@ -26,5 +26,5 @@ export interface TdListProps {
   /**
    * 列表滚动时触发，scrollTop 表示顶部滚动距离
    */
-  onScroll?: (scrollTop: number) => void;
+  onScroll?: (bottomDistance: number, scrollTop: number) => void;
 }