From d017cc58f3dd33042661d0eacd2efb2946677b01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=AA=97=E4=BD=A0=E6=98=AF=E5=B0=8F=E7=8C=AB=E5=92=AA?= Date: Fri, 6 Sep 2019 19:54:13 +0800 Subject: [PATCH] feat(Anchor): add onChange prop (#18715) * feat(Anchor): add onChange prop * test(Anchor): add onChange prop * update snapshots --- components/anchor/Anchor.tsx | 25 +++++-- components/anchor/__tests__/Anchor.test.js | 14 ++++ .../__tests__/__snapshots__/demo.test.js.snap | 74 +++++++++++++++++++ components/anchor/demo/onChange.md | 36 +++++++++ components/anchor/demo/targetOffset.md | 2 +- components/anchor/index.en-US.md | 1 + components/anchor/index.zh-CN.md | 1 + 7 files changed, 145 insertions(+), 8 deletions(-) create mode 100644 components/anchor/demo/onChange.md diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index df77875265da..f9ff481f7280 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -62,6 +62,8 @@ export interface AnchorProps { ) => void; /** Scroll to target offset value, if none, it's offsetTop prop value or 0. */ targetOffset?: number; + /** Listening event when scrolling change active link */ + onChange?: (currentActiveLink: string) => void; } export interface AnchorState { @@ -205,7 +207,7 @@ export default class Anchor extends React.Component { handleScrollTo = (link: string) => { const { offsetTop, getContainer, targetOffset } = this.props as AnchorDefaultProps; - this.setState({ activeLink: link }); + this.setCurrentActiveLink(link); const container = getContainer(); const scrollTop = getScroll(container, true); const sharpLinkMatch = sharpMatcherRegx.exec(link); @@ -234,21 +236,30 @@ export default class Anchor extends React.Component { this.inkNode = node; }; + setCurrentActiveLink = (link: string) => { + const { activeLink } = this.state; + const { onChange } = this.props; + + if (activeLink !== link) { + this.setState({ + activeLink: link, + }); + if (onChange) { + onChange(link); + } + } + }; + handleScroll = () => { if (this.animating) { return; } - const { activeLink } = this.state; const { offsetTop, bounds, targetOffset } = this.props; const currentActiveLink = this.getCurrentAnchor( targetOffset !== undefined ? targetOffset : offsetTop || 0, bounds, ); - if (activeLink !== currentActiveLink) { - this.setState({ - activeLink: currentActiveLink, - }); - } + this.setCurrentActiveLink(currentActiveLink); }; updateInk = () => { diff --git a/components/anchor/__tests__/Anchor.test.js b/components/anchor/__tests__/Anchor.test.js index 3cf43c755c53..8fb26833c38a 100644 --- a/components/anchor/__tests__/Anchor.test.js +++ b/components/anchor/__tests__/Anchor.test.js @@ -322,4 +322,18 @@ describe('Anchor Render', () => { dateNowMock.mockRestore(); jest.useRealTimers(); }); + + it('Anchor onChange prop', async () => { + const onChange = jest.fn(); + const wrapper = mount( + + + + , + ); + expect(onChange).toHaveBeenCalledTimes(1); + wrapper.instance().handleScrollTo('#API2'); + expect(onChange).toHaveBeenCalledTimes(2); + expect(onChange).toHaveBeenCalledWith('#API2'); + }); }); diff --git a/components/anchor/__tests__/__snapshots__/demo.test.js.snap b/components/anchor/__tests__/__snapshots__/demo.test.js.snap index d1cce5bd52e1..3121585b775d 100644 --- a/components/anchor/__tests__/__snapshots__/demo.test.js.snap +++ b/components/anchor/__tests__/__snapshots__/demo.test.js.snap @@ -166,6 +166,80 @@ exports[`renders ./components/anchor/demo/customizeHighlight.md correctly 1`] = `; +exports[`renders ./components/anchor/demo/onChange.md correctly 1`] = ` +
+
+
+ +
+
+ + Basic demo + +
+
+ + Static demo + +
+
+ + API + +
+ + Anchor Props + +
+
+ + Link Props + +
+
+
+
+`; + exports[`renders ./components/anchor/demo/onClick.md correctly 1`] = `
{ + console.log('Anchor:OnChange', link); +}; + +ReactDOM.render( + + + + + + + + , + mountNode, +); +``` diff --git a/components/anchor/demo/targetOffset.md b/components/anchor/demo/targetOffset.md index 5740803ee490..bcd1aa7d92c2 100644 --- a/components/anchor/demo/targetOffset.md +++ b/components/anchor/demo/targetOffset.md @@ -1,5 +1,5 @@ --- -order: 4 +order: 5 title: zh-CN: 设置锚点滚动偏移量 en-US: Set Anchor scroll offset diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md index 92ff201f7e37..62309d01ab80 100644 --- a/components/anchor/index.en-US.md +++ b/components/anchor/index.en-US.md @@ -26,6 +26,7 @@ For displaying anchor hyperlinks on page and jumping between them. | onClick | set the handler to handle `click` event | Function(e: Event, link: Object) | - | 3.9.0 | | getCurrentAnchor | Customize the anchor highlight | () => string | - | 3.22.0 | | targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | `offsetTop` | 3.22.0 | +| onChange | Listening for anchor link change | (currentActiveLink: string) => void | | 3.24.0 | ### Link Props diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index 2b1b385cc993..02e592ff5891 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -27,6 +27,7 @@ title: Anchor | onClick | `click` 事件的 handler | Function(e: Event, link: Object) | - | 3.9.0 | | getCurrentAnchor | 自定义高亮的锚点 | () => string | - | 3.22.0 | | targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | `offsetTop` | 3.22.0 | +| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | | 3.24.0 | ### Link Props