From 5cdcc89e219e1a2b26df9bc8ead63570010eaf8d Mon Sep 17 00:00:00 2001
From: liweijie0812 <674416404@qq.com>
Date: Mon, 22 Apr 2024 11:33:23 +0800
Subject: [PATCH] refactor(indexes): sfc to tsx (#1327)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor(indexes): sfc to tsx

* refactor(indexes): sfc to tsx

* test: 临时屏蔽toMatchSnapshot

* chore: test update
---
 .../__test__/__snapshots__/demo.test.jsx.snap | 91 +++++++++----------
 .../__snapshots__/index.test.jsx.snap         | 49 +++++-----
 src/indexes/index.ts                          |  4 +-
 src/indexes/indexes-anchor.tsx                | 30 ++++++
 src/indexes/indexes-anchor.vue                | 32 -------
 src/indexes/indexes.en-US.md                  |  5 +-
 src/indexes/indexes.md                        | 10 +-
 src/indexes/{indexes.vue => indexes.tsx}      | 79 ++++++++--------
 8 files changed, 139 insertions(+), 161 deletions(-)
 create mode 100644 src/indexes/indexes-anchor.tsx
 delete mode 100644 src/indexes/indexes-anchor.vue
 rename src/indexes/{indexes.vue => indexes.tsx} (81%)

diff --git a/src/indexes/__test__/__snapshots__/demo.test.jsx.snap b/src/indexes/__test__/__snapshots__/demo.test.jsx.snap
index 99ca4fc79..b4696bb79 100644
--- a/src/indexes/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/indexes/__test__/__snapshots__/demo.test.jsx.snap
@@ -15,64 +15,64 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         class="t-indexes__sidebar-item"
         data-index="A"
       >
-        A 
-        <!--v-if-->
+        A
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="B"
       >
-        B 
-        <!--v-if-->
+        B
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="C"
       >
-        C 
-        <!--v-if-->
+        C
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="D"
       >
-        D 
-        <!--v-if-->
+        D
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="E"
       >
-        E 
-        <!--v-if-->
+        E
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="F"
       >
-        F 
-        <!--v-if-->
+        F
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="G"
       >
-        G 
-        <!--v-if-->
+        G
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="J"
       >
-        J 
-        <!--v-if-->
+        J
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="K"
       >
-        K 
-        <!--v-if-->
+        K
+        <!---->
       </div>
       
     </div>
@@ -89,8 +89,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -293,8 +292,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -592,8 +590,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -986,8 +983,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -1266,8 +1262,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -1356,8 +1351,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -1522,8 +1516,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -1745,8 +1738,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -1987,8 +1979,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -2106,50 +2097,50 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
         class="t-indexes__sidebar-item"
         data-index="1"
       >
-        1 
-        <!--v-if-->
+        1
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="3"
       >
-        3 
-        <!--v-if-->
+        3
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="5"
       >
-        5 
-        <!--v-if-->
+        5
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="7"
       >
-        7 
-        <!--v-if-->
+        7
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="8"
       >
-        8 
-        <!--v-if-->
+        8
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="10"
       >
-        10 
-        <!--v-if-->
+        10
+        <!---->
       </div>
       <div
         class="t-indexes__sidebar-item"
         data-index="#"
       >
-        # 
-        <!--v-if-->
+        #
+        <!---->
       </div>
       
     </div>
diff --git a/src/indexes/__test__/__snapshots__/index.test.jsx.snap b/src/indexes/__test__/__snapshots__/index.test.jsx.snap
index 9523fbd05..0b128cb56 100644
--- a/src/indexes/__test__/__snapshots__/index.test.jsx.snap
+++ b/src/indexes/__test__/__snapshots__/index.test.jsx.snap
@@ -12,50 +12,50 @@ exports[`Indexes & IndexesAnchor > render 1`] = `
       class="t-indexes__sidebar-item"
       data-index="1"
     >
-      1 
-      <!--v-if-->
+      1
+      <!---->
     </div>
     <div
       class="t-indexes__sidebar-item"
       data-index="3"
     >
-      3 
-      <!--v-if-->
+      3
+      <!---->
     </div>
     <div
       class="t-indexes__sidebar-item"
       data-index="5"
     >
-      5 
-      <!--v-if-->
+      5
+      <!---->
     </div>
     <div
       class="t-indexes__sidebar-item"
       data-index="7"
     >
-      7 
-      <!--v-if-->
+      7
+      <!---->
     </div>
     <div
       class="t-indexes__sidebar-item"
       data-index="8"
     >
-      8 
-      <!--v-if-->
+      8
+      <!---->
     </div>
     <div
       class="t-indexes__sidebar-item"
       data-index="10"
     >
-      10 
-      <!--v-if-->
+      10
+      <!---->
     </div>
     <div
       class="t-indexes__sidebar-item"
       data-index="#"
     >
-      # 
-      <!--v-if-->
+      #
+      <!---->
     </div>
     
   </div>
@@ -71,8 +71,7 @@ exports[`Indexes & IndexesAnchor > render 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -190,8 +189,7 @@ exports[`Indexes & IndexesAnchor > render 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -309,8 +307,7 @@ exports[`Indexes & IndexesAnchor > render 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -428,8 +425,7 @@ exports[`Indexes & IndexesAnchor > render 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -547,8 +543,7 @@ exports[`Indexes & IndexesAnchor > render 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -666,8 +661,7 @@ exports[`Indexes & IndexesAnchor > render 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
@@ -785,8 +779,7 @@ exports[`Indexes & IndexesAnchor > render 1`] = `
         <div
           class="t-indexes-anchor__slot"
         >
-          
-          
+          <!---->
         </div>
         <div
           class="t-indexes-anchor__header"
diff --git a/src/indexes/index.ts b/src/indexes/index.ts
index 76523e03e..bd5c0ea45 100644
--- a/src/indexes/index.ts
+++ b/src/indexes/index.ts
@@ -1,6 +1,6 @@
 import { withInstall, WithInstallType } from '../shared';
-import LocalIndexes from './indexes.vue';
-import LocalIndexesAnchor from './indexes-anchor.vue';
+import LocalIndexes from './indexes';
+import LocalIndexesAnchor from './indexes-anchor';
 
 import './style';
 
diff --git a/src/indexes/indexes-anchor.tsx b/src/indexes/indexes-anchor.tsx
new file mode 100644
index 000000000..824aa3358
--- /dev/null
+++ b/src/indexes/indexes-anchor.tsx
@@ -0,0 +1,30 @@
+import { ComponentInternalInstance, defineComponent, getCurrentInstance, inject } from 'vue';
+import config from '../config';
+import indexesAnchorProps from './indexes-anchor-props';
+import { usePrefixClass } from '../hooks/useClass';
+import { useTNodeJSX } from '../hooks/tnode';
+
+const { prefix } = config;
+const name = `${prefix}-indexes-anchor`;
+
+export default defineComponent({
+  name,
+  props: indexesAnchorProps,
+  setup(props) {
+    const readerTNodeJSX = useTNodeJSX();
+    const indexesAnchorClass = usePrefixClass('indexes-anchor');
+    const instance = getCurrentInstance();
+    const indexesProvide: any = inject('indexesProvide', undefined);
+    const { proxy } = instance as ComponentInternalInstance;
+    indexesProvide.relation(proxy);
+
+    return () => (
+      <div class={indexesAnchorClass.value} data-index={props.index}>
+        <div class={`${indexesAnchorClass.value}__wrapper`}>
+          <div class={`${indexesAnchorClass.value}__slot`}>{readerTNodeJSX('default')}</div>
+          <div class={`${indexesAnchorClass.value}__header`}>{props.index}</div>
+        </div>
+      </div>
+    );
+  },
+});
diff --git a/src/indexes/indexes-anchor.vue b/src/indexes/indexes-anchor.vue
deleted file mode 100644
index 8c0c1f2dc..000000000
--- a/src/indexes/indexes-anchor.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div :class="`${name}`" :data-index="index">
-    <div :class="`${name}__wrapper`">
-      <div :class="`${name}__slot`">
-        <slot />
-      </div>
-      <div :class="`${name}__header`">{{ index }}</div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { ComponentInternalInstance, defineComponent, getCurrentInstance, inject } from 'vue';
-import config from '../config';
-import indexesAnchorProps from './indexes-anchor-props';
-
-const name = `${config.prefix}-indexes-anchor`;
-
-export default defineComponent({
-  name,
-  props: indexesAnchorProps,
-  setup() {
-    const instance = getCurrentInstance();
-    const indexesProvide: any = inject('indexesProvide', undefined);
-    const { proxy } = instance as ComponentInternalInstance;
-    indexesProvide.relation(proxy);
-    return {
-      name,
-    };
-  },
-});
-</script>
diff --git a/src/indexes/indexes.en-US.md b/src/indexes/indexes.en-US.md
index 4eec154b2..f81edd617 100644
--- a/src/indexes/indexes.en-US.md
+++ b/src/indexes/indexes.en-US.md
@@ -19,14 +19,15 @@ name | params | description
 change | `(index: string \| number)` | \-
 select | `(index: string \| number)` | \-
 
+
 ### IndexesAnchor Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 index | String / Number | - | \- | N
 
+### CSS 变量
 
-### CSS Variables
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -48,4 +49,4 @@ Name | Default Value | Description
 --td-indexes-anchor-bg-color | @bg-color-secondarycontainer | - 
 --td-indexes-anchor-color | @font-gray-1 | - 
 --td-indexes-anchor-font-size | 14px | - 
---td-indexes-anchor-line-height | 22px | - 
+--td-indexes-anchor-line-height | 22px | -
\ No newline at end of file
diff --git a/src/indexes/indexes.md b/src/indexes/indexes.md
index 7a1387811..b6ddab3f8 100644
--- a/src/indexes/indexes.md
+++ b/src/indexes/indexes.md
@@ -1,9 +1,10 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Indexes Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 indexList | Array | - | 索引字符列表。不传默认 `A-Z`。TS 类型：`string [] \| number[]` | N
 sticky | Boolean | true | 索引是否吸顶，默认为true。TS 类型：`Boolean` | N
@@ -18,14 +19,15 @@ onSelect | Function |  | TS 类型：`(index: string \| number) => void`<br/>点
 change | `(index: string \| number)` | 索引发生变更时触发事件
 select | `(index: string \| number)` | 点击侧边栏时触发事件
 
+
 ### IndexesAnchor Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 index | String / Number | - | 索引字符 | N
 
-
 ### CSS 变量
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -47,4 +49,4 @@ index | String / Number | - | 索引字符 | N
 --td-indexes-anchor-bg-color | @bg-color-secondarycontainer | - 
 --td-indexes-anchor-color | @font-gray-1 | - 
 --td-indexes-anchor-font-size | 14px | - 
---td-indexes-anchor-line-height | 22px | - 
+--td-indexes-anchor-line-height | 22px | -
\ No newline at end of file
diff --git a/src/indexes/indexes.vue b/src/indexes/indexes.tsx
similarity index 81%
rename from src/indexes/indexes.vue
rename to src/indexes/indexes.tsx
index 46bbb3695..f2a9281a1 100644
--- a/src/indexes/indexes.vue
+++ b/src/indexes/indexes.tsx
@@ -1,35 +1,9 @@
-<template>
-  <div ref="indexesRoot" :class="componentName" @scroll="handleRootScroll">
-    <div :class="`${componentName}__sidebar`">
-      <div
-        v-for="item in indexList"
-        :key="item"
-        :class="[
-          `${componentName}__sidebar-item`,
-          activeSidebar === item ? `${componentName}__sidebar-item--active` : '',
-        ]"
-        :data-index="item"
-        @click.prevent="handleSidebarItemClick(item)"
-        @touchmove="handleSidebarTouchmove"
-      >
-        {{ item }}
-        <div v-if="showSidebarTip && activeSidebar === item" :class="`${componentName}__sidebar-tips`">
-          {{ activeSidebar }}
-        </div>
-      </div>
-    </div>
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
 import {
   ref,
   reactive,
   defineComponent,
   onMounted,
   watchEffect,
-  toRefs,
   onBeforeUnmount,
   provide,
   computed,
@@ -40,8 +14,8 @@ import throttle from 'lodash/throttle';
 import { preventDefault } from '../shared/dom';
 import config from '../config';
 import IndexesProps from './props';
-
-const { prefix } = config;
+import { usePrefixClass } from '../hooks/useClass';
+import { useTNodeJSX } from '../hooks/tnode';
 
 interface Child extends ComponentInternalInstance {
   [key: string]: any;
@@ -60,13 +34,16 @@ interface GroupTop {
   totalHeight: number;
 }
 
-const componentName = `${prefix}-indexes`;
+const { prefix } = config;
+const name = `${prefix}-indexes`;
 
 export default defineComponent({
-  name: componentName,
+  name,
   props: IndexesProps,
   emits: ['select', 'change'],
   setup(props) {
+    const readerTNodeJSX = useTNodeJSX();
+    const indexesClass = usePrefixClass('indexes');
     let timeOut: number;
     const indexesRoot = ref<HTMLElement>();
     const parentRect = ref();
@@ -106,8 +83,8 @@ export default defineComponent({
         const betwixt = offset < curGroup.height && offset > 0 && scrollTop > stickyTop;
         state.children.forEach((child, index) => {
           const { $el } = child;
-          const wrapperClass = `${componentName}-anchor__wrapper`;
-          const headerClass = `${componentName}-anchor__header`;
+          const wrapperClass = `${indexesClass.value}-anchor__wrapper`;
+          const headerClass = `${indexesClass.value}-anchor__header`;
           const wrapper = $el.querySelector(`.${wrapperClass}`);
           const header = $el.querySelector(`.${headerClass}`);
           if (index === curIndex) {
@@ -189,7 +166,7 @@ export default defineComponent({
       const { touches } = event;
       const { clientX, clientY } = touches[0];
       const target = document.elementFromPoint(clientX, clientY);
-      if (target && target.className === `${componentName}__sidebar-item` && target instanceof HTMLElement) {
+      if (target && target.className === `${indexesClass.value}__sidebar-item` && target instanceof HTMLElement) {
         const { index } = target.dataset;
         const curIndex = /^\d+$/.test(index ?? '') ? Number(index) : index;
         if (curIndex !== undefined && state.activeSidebar !== curIndex) {
@@ -237,15 +214,31 @@ export default defineComponent({
       relation,
     });
 
-    return {
-      ...toRefs(state),
-      componentName,
-      indexList,
-      indexesRoot,
-      handleSidebarItemClick,
-      handleRootScroll,
-      handleSidebarTouchmove,
-    };
+    return () => (
+      <div ref={indexesRoot} class={indexesClass.value} onScroll={handleRootScroll}>
+        <div class={`${indexesClass.value}__sidebar`}>
+          {indexList.value.map((item) => (
+            <div
+              class={[
+                `${indexesClass.value}__sidebar-item`,
+                state.activeSidebar === item ? `${indexesClass.value}__sidebar-item--active` : '',
+              ]}
+              data-index={item}
+              onClick={(e: MouseEvent) => {
+                e.preventDefault();
+                handleSidebarItemClick(item);
+              }}
+              onTouchmove={handleSidebarTouchmove}
+            >
+              {item}
+              {state.showSidebarTip && state.activeSidebar === item && (
+                <div class={`${indexesClass.value}__sidebar-tips`}>{state.activeSidebar}</div>
+              )}
+            </div>
+          ))}
+        </div>
+        {readerTNodeJSX('default')}
+      </div>
+    );
   },
 });
-</script>