Merge pull request #17823 from shaodahong/feat-anchor-getCurrentAnchor

feat(Anchor): add getCurrentAnchor prop

components/anchor/Anchor.tsx

@@ -99,6 +99,8 @@ export interface AnchorProps {
   affix?: boolean;
   showInkInFixed?: boolean;
   getContainer?: () => AnchorContainer;
+  /** Return customize highlight anchor */
+  getCurrentAnchor?: () => string;
   onClick?: (
     e: React.MouseEvent<HTMLElement>,
     link: { title: React.ReactNode; href: string },
@@ -205,6 +207,12 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
   }
 
   getCurrentAnchor(offsetTop = 0, bounds = 5): string {
+    const { getCurrentAnchor } = this.props;
+
+    if (typeof getCurrentAnchor === 'function') {
+      return getCurrentAnchor();
+    }
+
     const activeLink = '';
     if (typeof document === 'undefined') {
       return activeLink;

components/anchor/__tests__/Anchor.test.js

@@ -244,4 +244,15 @@ describe('Anchor Render', () => {
     wrapper.setProps({ 'data-only-trigger-re-render': true });
     expect(removeListenerSpy).toHaveBeenCalled();
   });
+
+  it('Anchor getCurrentAnchor prop', () => {
+    const getCurrentAnchor = () => '#API2';
+    const wrapper = mount(
+      <Anchor getCurrentAnchor={getCurrentAnchor}>
+        <Link href="#API1" title="API1" />
+        <Link href="#API2" title="API2" />
+      </Anchor>,
+    );
+    expect(wrapper.instance().state.activeLink).toBe('#API2');
+  });
 });

components/anchor/__tests__/__snapshots__/demo.test.js.snap

@@ -80,6 +80,80 @@ exports[`renders ./components/anchor/demo/basic.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/anchor/demo/customizeHighlight.md correctly 1`] = `
+<div
+  class="ant-anchor-wrapper"
+  style="max-height:100vh"
+>
+  <div
+    class="ant-anchor fixed"
+  >
+    <div
+      class="ant-anchor-ink"
+    >
+      <span
+        class="ant-anchor-ink-ball"
+      />
+    </div>
+    <div
+      class="ant-anchor-link"
+    >
+      <a
+        class="ant-anchor-link-title"
+        href="#components-anchor-demo-basic"
+        title="Basic demo"
+      >
+        Basic demo
+      </a>
+    </div>
+    <div
+      class="ant-anchor-link"
+    >
+      <a
+        class="ant-anchor-link-title"
+        href="#components-anchor-demo-static"
+        title="Static demo"
+      >
+        Static demo
+      </a>
+    </div>
+    <div
+      class="ant-anchor-link"
+    >
+      <a
+        class="ant-anchor-link-title"
+        href="#API"
+        title="API"
+      >
+        API
+      </a>
+      <div
+        class="ant-anchor-link"
+      >
+        <a
+          class="ant-anchor-link-title"
+          href="#Anchor-Props"
+          title="Anchor Props"
+        >
+          Anchor Props
+        </a>
+      </div>
+      <div
+        class="ant-anchor-link"
+      >
+        <a
+          class="ant-anchor-link-title"
+          href="#Link-Props"
+          title="Link Props"
+        >
+          Link Props
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/anchor/demo/onClick.md correctly 1`] = `
 <div
   class="ant-anchor-wrapper"

components/anchor/demo/customizeHighlight.md

@@ -0,0 +1,36 @@
+---
+order: 4
+title:
+  zh-CN: 自定义锚点高亮
+  en-US: Customize the anchor highlight
+---
+
+## zh-CN
+
+自定义锚点高亮。
+
+## en-US
+
+Customize the anchor highlight.
+
+```jsx
+import { Anchor } from 'antd';
+
+const { Link } = Anchor;
+
+const getCurrentAnchor = () => {
+  return '#components-anchor-demo-static';
+};
+
+ReactDOM.render(
+  <Anchor affix={false} getCurrentAnchor={getCurrentAnchor}>
+    <Link href="#components-anchor-demo-basic" title="Basic demo" />
+    <Link href="#components-anchor-demo-static" title="Static demo" />
+    <Link href="#API" title="API">
+      <Link href="#Anchor-Props" title="Anchor Props" />
+      <Link href="#Link-Props" title="Link Props" />
+    </Link>
+  </Anchor>,
+  mountNode,
+);
+```

components/anchor/index.en-US.md

@@ -24,6 +24,7 @@ For displaying anchor hyperlinks on page and jumping between them.
 | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |  |
 | showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false |  |
 | onClick | set the handler to handle `click` event | Function(e: Event, link: Object) | - | 3.9.0 |
+| getCurrentAnchor | Customize the anchor highlight | () => string | - | 3.21.0 |
 
 ### Link Props
 

components/anchor/index.zh-CN.md

@@ -25,6 +25,7 @@ title: Anchor
 | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |  |
 | showInkInFixed | 固定模式是否显示小圆点 | boolean | false |  |
 | onClick | `click` 事件的 handler | Function(e: Event, link: Object) | - | 3.9.0 |
+| getCurrentAnchor | 自定义高亮的锚点 | () => string | - | 3.21.0 |
 
 ### Link Props