Revert "feat(anchor): support --level vars and custom highlighted anchor points (#3430)" (#3494)

This reverts commit 67edf99.

Author: PengYYYYY

src/anchor/_example/base.vue

@@ -7,7 +7,6 @@
       <t-anchor-item href="#指定容器锚点" title="指定容器锚点" />
       <t-anchor-item href="#特定交互锚点" title="特定交互锚点" />
       <t-anchor-item href="#不同尺寸的锚点" title="不同尺寸的锚点" />
-      <t-anchor-item href="#自定义锚点高亮" title="自定义锚点高亮" />
     </t-anchor>
   </div>
 </template>

src/anchor/_example/customize-highlight.vue

@@ -2,6 +2,7 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * updated at 2021-12-12 19:17:30
  * */
 
 import { TdAnchorItemProps } from '../anchor/type';
@@ -19,13 +20,12 @@ export default {
     type: String as PropType<TdAnchorItemProps['target']>,
     default: '_self' as TdAnchorItemProps['target'],
     validator(val: TdAnchorItemProps['target']): boolean {
-      if (!val) return true;
       return ['_self', '_blank', '_parent', '_top'].includes(val);
     },
   },
   /** 锚点文本 */
   title: {
     type: [String, Function] as PropType<TdAnchorItemProps['title']>,
-    default: '' as TdAnchorItemProps['title'],
+    default: '',
   },
 };

src/anchor/anchor-item-props.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, VNodeChild, onMounted, onUnmounted, inject, watch, cloneVNode, ref, nextTick } 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';
@@ -15,18 +15,16 @@ const localProps = {
       return ANCHOR_SHARP_REGEXP.test(v);
     },
   },
-  _level: {
-    type: Number,
-    default: 1,
-  },
 };
 
 export default defineComponent({
   name: 'TAnchorItem',
+  inject: {
+    tAnchor: { default: undefined },
+  },
   props: localProps,
   setup(props, { slots }) {
-    const elRef = ref<HTMLElement>(null);
-    const anchor = inject(AnchorInjectionKey);
+    const anchor = inject(AnchorInjectionKey, undefined);
     const CLASSNAME_PREFIX = usePrefixClass('anchor__item');
     const { STATUS } = useCommonClassName();
     const register = () => {
@@ -39,6 +37,7 @@ export default defineComponent({
     };
     const handleClick = (e: MouseEvent) => {
       const { href, title } = props;
+      anchor.handleScrollTo(href);
       anchor.handleLinkClick({ href, title: isString(title) ? title : undefined, e });
     };
     const renderTitle = () => {
@@ -62,10 +61,8 @@ export default defineComponent({
       },
       { immediate: true },
     );
-    onMounted(async () => {
+    onMounted(() => {
       register();
-      await nextTick();
-      elRef.value.style.setProperty('--level', `${props._level}`);
     });
     onUnmounted(() => {
       unregister();
@@ -84,19 +81,12 @@ export default defineComponent({
         [`${CLASSNAME_PREFIX.value}-link`]: true,
       };
       return (
-        <>
-          <div class={wrapperClass} ref={elRef}>
-            <a href={href} title={titleAttr} class={titleClass} target={target} onClick={handleClick}>
-              {titleSlot ? titleSlot(null) : title}
-            </a>
-          </div>
-          {children &&
-            children(null).map((child) =>
-              cloneVNode(child, {
-                _level: props._level + 1,
-              }),
-            )}
-        </>
+        <div class={wrapperClass}>
+          <a href={href} title={titleAttr} class={titleClass} target={target} onClick={handleClick}>
+            {titleSlot ? titleSlot(null) : title}
+          </a>
+          {children && children(null)}
+        </div>
       );
     };
   },

src/anchor/anchor-item.tsx

@@ -2,6 +2,7 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * updated at 2021-12-12 19:17:30
  * */
 
 export default {

src/anchor/anchor-target-props.ts

@@ -1,16 +1,16 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Anchor Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 affixProps | Object | - | Typescript：`AffixProps`，[Affix API Documents](./affix?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/anchor/type.ts) | N
 bounds | Number | 5 | \- | N
-container | String / Function | () => (() => window) | Typescript：`ScrollContainer`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+container | String / Function | () => (() => window) | Typescript：`ScrollContainer` | N
 cursor | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-getCurrentAnchor | Function | - | Custom Highlighted Anchor Points。Typescript：`(activeLink: string) => string` | N
-size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 targetOffset | Number | 0 | \- | N
 onChange | Function |  | Typescript：`(currentLink: string, prevLink: string) => void`<br/> | N
 onClick | Function |  | Typescript：`(link: { href: string; title: string; e: MouseEvent }) => void`<br/> | N
@@ -27,7 +27,7 @@ click | `(link: { href: string; title: string; e: MouseEvent })` | \-
 name | type | default | description | required
 -- | -- | -- | -- | --
 href | String | - | required | Y
-target | String | _self | options: _self/_blank/_parent/_top | N
+target | String | _self | options：_self/_blank/_parent/_top | N
 title | String / Slot / Function | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 
 ### AnchorTarget Props

src/anchor/anchor.en-US.md

@@ -7,9 +7,8 @@
 -- | -- | -- | -- | --
 affixProps | Object | - | 透传 Affix 组件属性，即让 Anchor 组件支持所有 Affix 组件特性。TS 类型：`AffixProps`，[Affix API Documents](./affix?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/anchor/type.ts) | N
 bounds | Number | 5 | 锚点区域边界 | N
-container | String / Function | () => (() => window) | 指定滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`ScrollContainer`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+container | String / Function | () => (() => window) | 指定滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`ScrollContainer` | N
 cursor | Slot / Function | - | 用于自定义选中项左侧游标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-getCurrentAnchor | Function | - | 自定义高亮的锚点	。TS 类型：`(activeLink: string) => string` | N
 size | String | medium | 组件尺寸，small(120px)，medium(200px)，large(320px)。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 targetOffset | Number | 0 | 锚点滚动偏移量 | N
 onChange | Function |  | TS 类型：`(currentLink: string, prevLink: string) => void`<br/>锚点改变时触发 | N

src/anchor/anchor.md

@@ -6,8 +6,8 @@ import {
   reactive,
   onMounted,
   onUnmounted,
+  watchEffect,
   provide,
-  watch,
 } from 'vue';
 import { ANCHOR_SHARP_REGEXP, ANCHOR_CONTAINER, getOffsetTop } from './utils';
 import { isServer, on, off, getScroll, scrollTo, getScrollContainer as utilsGetScrollContainer } from '../utils/dom';
@@ -18,7 +18,6 @@ import Affix from '../affix';
 import { TdAnchorProps } from './type';
 import { usePrefixClass, useCommonClassName } from '../hooks/useConfig';
 import { AnchorInjectionKey } from './constants';
-import { isFunction } from 'lodash';
 
 export interface Anchor extends ComponentPublicInstance {
   scrollContainer: ANCHOR_CONTAINER;
@@ -34,7 +33,7 @@ export default defineComponent({
     const anchorRef = ref<HTMLElement | null>(null);
     const links = ref<string[]>([]);
     const active = ref('');
-    const scrollContainer = ref<ANCHOR_CONTAINER>(window);
+    const scrollContainer = ref<ANCHOR_CONTAINER>(null);
     const handleScrollLock = ref<boolean>(false);
     const activeLineStyle = reactive({});
     const COMPONENT_NAME = usePrefixClass('anchor');
@@ -63,7 +62,7 @@ export default defineComponent({
       if (handleScrollLock.value) return;
       const { bounds, targetOffset } = props;
       const filters: { top: number; link: string }[] = [];
-      let newActive = '';
+      let active = '';
       // 找出所有当前top小于预设值
       links.value.forEach((link) => {
         const anchor = getAnchorTarget(link);
@@ -81,14 +80,9 @@ export default defineComponent({
       // 找出小于预设值集合中top最大的
       if (filters.length) {
         const latest = filters.reduce((prev, cur) => (prev.top > cur.top ? prev : cur));
-        newActive = latest.link;
-      }
-
-      if (active.value !== newActive) {
-        const newHref = isFunction(props?.getCurrentAnchor) ? props?.getCurrentAnchor(newActive) : newActive;
-        props?.onChange?.(newHref, active.value);
-        active.value = newHref;
+        active = latest.link;
       }
+      setCurrentActiveLink(active);
     };
     /**
      * 获取锚点对应的target元素
@@ -125,7 +119,20 @@ export default defineComponent({
     const unregisterLink = (link: string) => {
       links.value = links.value.filter((each) => each !== link);
     };
-
+    /**
+     * 设置当前激活状态锚点
+     *
+     * @param {string} link
+     */
+    const setCurrentActiveLink = async (link: string): Promise<void> => {
+      if (active.value === link) {
+        return;
+      }
+      active.value = link;
+      props.onChange?.(link, active.value);
+      await nextTick();
+      updateActiveLine();
+    };
     /**
      * 计算active-line所在的位置
      * 当前active-item的top + height, 以及ANCHOR_ITEM_PADDING修正
@@ -148,19 +155,16 @@ export default defineComponent({
      * @param {{ href: string; title: string }} link
      */
     const handleLinkClick = (link: { href: string; title: string; e: MouseEvent }) => {
-      props?.onClick?.(link);
-      const newHref = isFunction(props?.getCurrentAnchor) ? props?.getCurrentAnchor(link.href) : link.href;
-      handleScrollTo(newHref);
+      props.onClick?.(link);
     };
     /**
      * 滚动到指定锚点
      *
-     * @param {string} href
+     * @param {string} link
      */
-    const handleScrollTo = async (href: string): Promise<void> => {
-      const anchor = getAnchorTarget(href);
-      props?.onChange?.(href, active.value);
-      active.value = href;
+    const handleScrollTo = async (link: string): Promise<void> => {
+      const anchor = getAnchorTarget(link);
+      setCurrentActiveLink(link);
       if (!anchor) return;
       handleScrollLock.value = true;
       const { targetOffset } = props;
@@ -176,62 +180,34 @@ export default defineComponent({
       const titleContent: SlotReturnValue = renderTNodeJSX('cursor');
       return titleContent || <div class={ANCHOR_LINE_CURSOR_CLASSNAME.value}></div>;
     };
-
-    const getNewHref = (newHref: string = active.value) => {
-      if (props.getCurrentAnchor) {
-        newHref = props.getCurrentAnchor(newHref);
-      } else {
-        newHref = decodeURIComponent(window?.location.hash);
-      }
-      return newHref;
-    };
-
     onMounted(async () => {
       getScrollContainer();
-      // 初始化
-      const newHref = getNewHref();
-      await nextTick();
-      handleScrollTo(newHref);
+      if (active.value) {
+        await nextTick();
+        handleScrollTo(active.value);
+      }
     });
-
     onUnmounted(() => {
       if (!scrollContainer.value) return;
       off(scrollContainer.value, 'scroll', handleScroll);
     });
-
-    watch(active, async () => {
-      await nextTick();
-      updateActiveLine();
+    watchEffect(() => {
+      // 清空上一个container的事件监听
+      if (scrollContainer.value) {
+        off(scrollContainer.value, 'scroll', handleScroll);
+      }
+      getScrollContainer();
     });
-
-    watch(
-      () => props.container,
-      () => {
-        if (scrollContainer.value) {
-          off(scrollContainer.value, 'scroll', handleScroll);
-        }
-        getScrollContainer();
-      },
-    );
-
-    watch(
-      () => props.getCurrentAnchor,
-      () => {
-        const newHref = getNewHref();
-        handleScrollTo(newHref);
-      },
-    );
-
     provide(
       AnchorInjectionKey,
       reactive({
         registerLink,
         unregisterLink,
+        handleScrollTo,
         handleLinkClick,
         active,
       }),
     );
-
     return () => {
       const { size, affixProps } = props;
       const className = [COMPONENT_NAME.value, SIZE.value[size]];

src/anchor/anchor.tsx

@@ -3,6 +3,7 @@ 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');

src/anchor/constants.ts

@@ -2,6 +2,7 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * updated at 2021-12-12 19:17:30
  * */
 
 import { TdAnchorProps } from './type';
@@ -20,22 +21,17 @@ export default {
   /** 指定滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body */
   container: {
     type: [String, Function] as PropType<TdAnchorProps['container']>,
-    default: () => (() => window) as TdAnchorProps['container'],
+    default: () => () => window,
   },
   /** 用于自定义选中项左侧游标 */
   cursor: {
     type: Function as PropType<TdAnchorProps['cursor']>,
   },
-  /** 自定义高亮的锚点	 */
-  getCurrentAnchor: {
-    type: Function as PropType<TdAnchorProps['getCurrentAnchor']>,
-  },
   /** 组件尺寸，small(120px)，medium(200px)，large(320px) */
   size: {
     type: String as PropType<TdAnchorProps['size']>,
     default: 'medium' as TdAnchorProps['size'],
     validator(val: TdAnchorProps['size']): boolean {
-      if (!val) return true;
       return ['small', 'medium', 'large'].includes(val);
     },
   },