From 0edd112d5b819348506692b887fe555e83fe5aad Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 31 Mar 2022 11:17:17 +0800 Subject: [PATCH] feat: Anchor supports `getCurrentAnchor(activeLink)` (#34799) close #34784 --- components/anchor/Anchor.tsx | 4 +- components/anchor/__tests__/Anchor.test.tsx | 80 +++++++++++++-------- components/anchor/index.en-US.md | 12 ++-- components/anchor/index.zh-CN.md | 12 ++-- 4 files changed, 64 insertions(+), 44 deletions(-) diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index 851a2b9653..7caea640c8 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -51,7 +51,7 @@ export interface AnchorProps { showInkInFixed?: boolean; getContainer?: () => AnchorContainer; /** Return customize highlight anchor */ - getCurrentAnchor?: () => string; + getCurrentAnchor?: (activeLink: string) => string; onClick?: ( e: React.MouseEvent, link: { title: React.ReactNode; href: string }, @@ -230,7 +230,7 @@ export default class Anchor extends React.Component { expect(removeListenerSpy).toHaveBeenCalled(); }); - it('Anchor getCurrentAnchor prop', () => { - const hash1 = getHashUrl(); - const hash2 = getHashUrl(); - const getCurrentAnchor = () => `#${hash2}`; - const wrapper = mount( - - - - , - ); - expect(wrapper.instance().state.activeLink).toBe(`#${hash2}`); - }); - it('Anchor targetOffset prop', async () => { const hash = getHashUrl(); let dateNowMock; @@ -404,23 +391,6 @@ describe('Anchor Render', () => { expect(onChange).toHaveBeenCalledWith(hash2); }); - // https://github.com/ant-design/ant-design/issues/30584 - it('should trigger onChange when have getCurrentAnchor', async () => { - const hash1 = getHashUrl(); - const hash2 = getHashUrl(); - const onChange = jest.fn(); - const wrapper = mount( - hash1}> - - - , - ); - expect(onChange).toHaveBeenCalledTimes(1); - wrapper.instance().handleScrollTo(hash2); - expect(onChange).toHaveBeenCalledTimes(2); - expect(onChange).toHaveBeenCalledWith(hash2); - }); - it('invalid hash', async () => { const wrapper = mount( @@ -531,4 +501,54 @@ describe('Anchor Render', () => { dateNowMock.mockRestore(); }); + + describe('getCurrentAnchor', () => { + it('Anchor getCurrentAnchor prop', () => { + const hash1 = getHashUrl(); + const hash2 = getHashUrl(); + const getCurrentAnchor = () => `#${hash2}`; + const wrapper = mount( + + + + , + ); + expect(wrapper.instance().state.activeLink).toBe(`#${hash2}`); + }); + + // https://github.com/ant-design/ant-design/issues/30584 + it('should trigger onChange when have getCurrentAnchor', async () => { + const hash1 = getHashUrl(); + const hash2 = getHashUrl(); + const onChange = jest.fn(); + const wrapper = mount( + hash1}> + + + , + ); + expect(onChange).toHaveBeenCalledTimes(1); + wrapper.instance().handleScrollTo(hash2); + expect(onChange).toHaveBeenCalledTimes(2); + expect(onChange).toHaveBeenCalledWith(hash2); + }); + + // https://github.com/ant-design/ant-design/issues/34784 + it('getCurrentAnchor have default link as argument', async () => { + const hash1 = getHashUrl(); + const hash2 = getHashUrl(); + const getCurrentAnchor = jest.fn(); + const wrapper = mount( + + + + , + ); + + wrapper.find(`a[href="#${hash1}"]`).simulate('click'); + expect(getCurrentAnchor).toHaveBeenCalledWith(`#${hash1}`); + wrapper.find(`a[href="#${hash2}"]`).simulate('click'); + expect(getCurrentAnchor).toHaveBeenCalledWith(`#${hash2}`); + }); + }); }); diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md index 88cd56c209..5a47de33f2 100644 --- a/components/anchor/index.en-US.md +++ b/components/anchor/index.en-US.md @@ -21,7 +21,7 @@ For displaying anchor hyperlinks on page and jumping between them. | affix | Fixed mode of Anchor | boolean | true | | | bounds | Bounding distance of anchor area | number | 5 | | | getContainer | Scrolling container | () => HTMLElement | () => window | | -| getCurrentAnchor | Customize the anchor highlight | () => string | - | | +| getCurrentAnchor | Customize the anchor highlight | (activeLink: string) => string | - | | | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | | | showInkInFixed | Whether show ink-balls when `affix={false}` | boolean | false | | | targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | - | | @@ -30,8 +30,8 @@ For displaying anchor hyperlinks on page and jumping between them. ### Link Props -| Property | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | -| href | The target of hyperlink | string | | | -| target | Specifies where to display the linked URL | string | | | -| title | The content of hyperlink | ReactNode | | | +| Property | Description | Type | Default | Version | +| -------- | ----------------------------------------- | --------- | ------- | ------- | +| href | The target of hyperlink | string | | | +| target | Specifies where to display the linked URL | string | | | +| title | The content of hyperlink | ReactNode | | | diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index e23d113489..fae28c613d 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -22,7 +22,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg | affix | 固定模式 | boolean | true | | | bounds | 锚点区域边界 | number | 5 | | | getContainer | 指定滚动的容器 | () => HTMLElement | () => window | | -| getCurrentAnchor | 自定义高亮的锚点 | () => string | - | | +| getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - | | | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | | | showInkInFixed | `affix={false}` 时是否显示小圆点 | boolean | false | | | targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | - | | @@ -31,8 +31,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg ### Link Props -| 成员 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| href | 锚点链接 | string | - | | -| target | 该属性指定在何处显示链接的资源。 | string | - | | -| title | 文字内容 | ReactNode | - | | +| 成员 | 说明 | 类型 | 默认值 | 版本 | +| ------ | -------------------------------- | --------- | ------ | ---- | +| href | 锚点链接 | string | - | | +| target | 该属性指定在何处显示链接的资源。 | string | - | | +| title | 文字内容 | ReactNode | - | |