refactor(refactor anchor): refactor anchor by compositionAPI

refactor anchor by compositionAPI
Tencent · Apr 25, 2022 · d4727ac · d4727ac
1 parent 8bd661c
commit d4727ac
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 36 deletions.
diff --git a/src/anchor/anchor-item.tsx b/src/anchor/anchor-item.tsx
@@ -1,7 +1,8 @@
-import { defineComponent, h, VNodeChild, ref, reactive, onMounted, onUnmounted, inject, watch } from 'vue';
+import { defineComponent, h, VNodeChild, onMounted, onUnmounted, inject, watch } from 'vue';
 import { ANCHOR_SHARP_REGEXP } from './utils';
 import props from './anchor-item-props';
 import { usePrefixClass, useCommonClassName } from '../hooks/useConfig';
+import { AnchorInjectionKey } from './constants';
 
 const localProps = {
   ...props,
@@ -34,27 +35,21 @@ export default defineComponent({
   },
   props: localProps,
   setup(props, { slots }) {
-    const localTAnchor = inject('tAnchor', localTAnchorOrigin);
+    const anchor = inject(AnchorInjectionKey, undefined);
     const CLASSNAME_PREFIX = usePrefixClass('anchor__item');
     const { STATUS } = useCommonClassName();
-    const register = (): void => {
-      localTAnchor.registerLink(props.href as string);
+    const register = () => {
+      anchor.registerLink(props.href as string);
     };
-    const unregister = (): void => {
+    const unregister = () => {
       const { href } = props;
       if (!href) return;
-      localTAnchor.unregisterLink(href);
+      anchor.unregisterLink(href);
     };
-    const handleClick = (e: MouseEvent): void => {
+    const handleClick = (e: MouseEvent) => {
       const { href, title } = props;
-      localTAnchor.handleScrollTo(href);
-      localTAnchor.handleLinkClick(
-        {
-          href,
-          title: typeof title === 'string' ? title : undefined,
-        },
-        e,
-      );
+      anchor.handleScrollTo(href);
+      anchor.handleLinkClick({ href, title: typeof title === 'string' ? title : undefined, e });
     };
     const renderTitle = () => {
       const { title } = props;
@@ -88,7 +83,7 @@ export default defineComponent({
       const { default: children, title: titleSlot } = slots;
       const title = renderTitle();
       const titleAttr = typeof title === 'string' ? title : null;
-      const active = localTAnchor.active === href;
+      const active = anchor.active === href;
       const wrapperClass = {
         [CLASSNAME_PREFIX.value]: true,
         [STATUS.value.active]: active,

diff --git a/src/anchor/anchor-target.tsx b/src/anchor/anchor-target.tsx
@@ -16,7 +16,7 @@ export default defineComponent({
      * 复制当前target的链接
      *
      */
-    const toCopyText = (): void => {
+    const toCopyText = () => {
       // 通过构造一个a标签, 自动拼接好传入的id为href
       const a = document.createElement('a');
       a.href = `#${props.id}`;

diff --git a/src/anchor/anchor.tsx b/src/anchor/anchor.tsx
@@ -16,17 +16,13 @@ import { useTNodeJSX } from '../hooks/tnode';
 import { SlotReturnValue } from '../common';
 import Affix from '../affix';
 import { usePrefixClass, useCommonClassName } from '../hooks/useConfig';
+import { AnchorInjectionKey } from './constants';
 
 export interface Anchor extends ComponentPublicInstance {
   scrollContainer: ANCHOR_CONTAINER;
   // 执行scrollTo设置的flag, 用来禁止执行handleScroll
   handleScrollLock: boolean;
 }
-interface ActiveLineStyle {
-  top: string;
-  height: string;
-  opacity: number;
-}
 
 export default defineComponent({
   name: 'TAnchor',
@@ -37,7 +33,7 @@ export default defineComponent({
     const active = ref('');
     const scrollContainer = ref<ANCHOR_CONTAINER>(null);
     const handleScrollLock = ref<boolean>(false);
-    const activeLineStyle = reactive<ActiveLineStyle>({ top: '', height: '', opacity: null });
+    const activeLineStyle = reactive({});
     const COMPONENT_NAME = usePrefixClass('anchor');
     const ANCHOR_LINE_CLASSNAME = usePrefixClass('anchor__line');
     const ANCHOR_LINE_CURSOR_CLASSNAME = usePrefixClass('anchor__line-cursor');
@@ -48,7 +44,7 @@ export default defineComponent({
      * 1. 如果是string则通过id获取
      * 2. 如果是method则获取方法返回值
      */
-    const getScrollContainer = (): void => {
+    const getScrollContainer = () => {
       const { container } = props;
       scrollContainer.value = utilsGetScrollContainer(container) as HTMLElement;
       on(scrollContainer.value, 'scroll', handleScroll);
@@ -57,7 +53,7 @@ export default defineComponent({
     /**
      * 监听滚动事件
      */
-    const handleScroll = (): void => {
+    const handleScroll = () => {
       if (handleScrollLock.value) return;
       const { bounds, targetOffset } = props;
       const filters: { top: number; link: string }[] = [];
@@ -104,7 +100,7 @@ export default defineComponent({
      *
      * @param {string} link
      */
-    const registerLink = (link: string): void => {
+    const registerLink = (link: string) => {
       if (!ANCHOR_SHARP_REGEXP.test(link) || links.value.indexOf(link) !== -1) {
         return;
       }
@@ -115,7 +111,7 @@ export default defineComponent({
      *
      * @param {string} link
      */
-    const unregisterLink = (link: string): void => {
+    const unregisterLink = (link: string) => {
       links.value = links.value.filter((each) => each !== link);
     };
     /**
@@ -136,7 +132,7 @@ export default defineComponent({
      * 计算active-line所在的位置
      * 当前active-item的top + height, 以及ANCHOR_ITEM_PADDING修正
      */
-    const updateActiveLine = (): void => {
+    const updateActiveLine = () => {
       const ele = anchorRef.value?.querySelector(`.${STATUS.value.active}>a`) as HTMLAnchorElement;
       if (!ele) {
         Object.assign(activeLineStyle, {});
@@ -153,7 +149,7 @@ export default defineComponent({
      * 监听AnchorLink点击事件
      * @param {{ href: string; title: string }} link
      */
-    const handleLinkClick = (link: { href: string; title: string; e: MouseEvent }): void => {
+    const handleLinkClick = (link: { href: string; title: string; e: MouseEvent }) => {
       props.onClick?.(link);
     };
     /**
@@ -198,7 +194,7 @@ export default defineComponent({
       getScrollContainer();
     });
     provide(
-      'tAnchor',
+      AnchorInjectionKey,
       reactive({
         registerLink,
         unregisterLink,

diff --git a/src/anchor/constants.ts b/src/anchor/constants.ts
@@ -0,0 +1,9 @@
+import { InjectionKey } from 'vue';
+
+export const AnchorInjectionKey: InjectionKey<{
+  registerLink: (link: string) => void;
+  unregisterLink: (link: string) => void;
+  handleScrollTo: (link: string) => void;
+  handleLinkClick: (link: { href: string; title: string; e: MouseEvent }) => void;
+  active: string;
+}> = Symbol('AnchorInjectionProvide');
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -337,7 +337,7 @@ exports[`ssr snapshot test renders ./examples/anchor/demos/base.vue correctly 1`
     <!--[-->
     <div class="t-anchor t-size-m">
       <div class="t-anchor__line">
-        <div class="t-anchor__line-cursor-wrapper" style="top:;height:;">
+        <div class="t-anchor__line-cursor-wrapper" style="">
           <div class="t-anchor__line-cursor"></div>
         </div>
       </div>
@@ -368,7 +368,7 @@ exports[`ssr snapshot test renders ./examples/anchor/demos/container.vue correct
 <div id="#container" class="anchor-demo anchor-container-demo">
   <div class="t-anchor t-size-m" id="#default">
     <div class="t-anchor__line">
-      <div class="t-anchor__line-cursor-wrapper" style="top:;height:;">
+      <div class="t-anchor__line-cursor-wrapper" style="">
         <div class="t-anchor__line-cursor"></div>
       </div>
     </div>
@@ -401,7 +401,7 @@ exports[`ssr snapshot test renders ./examples/anchor/demos/cursor.vue correctly
 <div class="anchor-demo">
   <div class="t-anchor t-size-m">
     <div class="t-anchor__line">
-      <div class="t-anchor__line-cursor-wrapper" style="top:;height:;">
+      <div class="t-anchor__line-cursor-wrapper" style="">
         <!--[-->
         <div class="test-cursor"></div>
         <!--]-->
@@ -438,7 +438,7 @@ exports[`ssr snapshot test renders ./examples/anchor/demos/large.vue correctly 1
 <div id="#large" class="anchor-demo">
   <div class="t-anchor t-size-l">
     <div class="t-anchor__line">
-      <div class="t-anchor__line-cursor-wrapper" style="top:;height:;">
+      <div class="t-anchor__line-cursor-wrapper" style="">
         <div class="t-anchor__line-cursor"></div>
       </div>
     </div>
@@ -473,7 +473,7 @@ exports[`ssr snapshot test renders ./examples/anchor/demos/multiple.vue correctl
 <div id="#multiple" class="anchor-demo">
   <div class="t-anchor t-size-m">
     <div class="t-anchor__line">
-      <div class="t-anchor__line-cursor-wrapper" style="top:;height:;">
+      <div class="t-anchor__line-cursor-wrapper" style="">
         <div class="t-anchor__line-cursor"></div>
       </div>
     </div>
@@ -509,7 +509,7 @@ exports[`ssr snapshot test renders ./examples/anchor/demos/small.vue correctly 1
 <div id="#small" class="anchor-demo">
   <div class="t-anchor t-size-s">
     <div class="t-anchor__line">
-      <div class="t-anchor__line-cursor-wrapper" style="top:;height:;">
+      <div class="t-anchor__line-cursor-wrapper" style="">
         <div class="t-anchor__line-cursor"></div>
       </div>
     </div>