From 2df6476572724b1bccbee9a9c1724f7972d56f69 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Nov 2016 14:22:38 +0800 Subject: [PATCH] update anchor docs --- components/anchor/AnchorLink.tsx | 22 ++++++++++------ components/anchor/anchorHelper.tsx | 42 +++++++++++++++--------------- components/anchor/demo/basic.md | 9 ++++--- components/anchor/demo/fixed.md | 29 +++++++++++++++++++++ components/anchor/demo/independ.md | 23 ---------------- components/anchor/demo/mix.md | 28 -------------------- components/anchor/index.en-US.md | 3 +-- components/anchor/index.tsx | 20 ++++++++------ components/anchor/index.zh-CN.md | 3 +-- 9 files changed, 84 insertions(+), 95 deletions(-) create mode 100644 components/anchor/demo/fixed.md delete mode 100644 components/anchor/demo/independ.md delete mode 100644 components/anchor/demo/mix.md diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index 575de0b5d9..df18d9b16d 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -40,6 +40,7 @@ export default class AnchorLink extends React.Component { anchorHelper: this.context.anchorHelper, }; } + renderAnchorLink = (child) => { const { href } = child.props; if (href) { @@ -51,6 +52,7 @@ export default class AnchorLink extends React.Component { } return child; } + render() { const { prefixCls, href, children, onClick, title, bounds } = this.props; const { anchorHelper } = this.context; @@ -60,13 +62,17 @@ export default class AnchorLink extends React.Component { [`${prefixCls}-link-active`]: active, }); const scrollToFn = anchorHelper ? anchorHelper.scrollTo : scrollTo; - return
- component && active && anchorHelper ? anchorHelper.setActiveAnchor(component) : null} - className={`${prefixCls}-link-title`} - onClick={() => onClick ? onClick(href) : scrollToFn(href)} - >{title} - {React.Children.map(children, this.renderAnchorLink)} -
; + return ( +
+ component && active && anchorHelper ? anchorHelper.setActiveAnchor(component) : null} + className={`${prefixCls}-link-title`} + onClick={() => onClick ? onClick(href) : scrollToFn(href)} + > + {title} + + {React.Children.map(children, this.renderAnchorLink)} +
+ ); } } diff --git a/components/anchor/anchorHelper.tsx b/components/anchor/anchorHelper.tsx index 7d922c5d72..1fee9de42f 100644 --- a/components/anchor/anchorHelper.tsx +++ b/components/anchor/anchorHelper.tsx @@ -4,12 +4,12 @@ import getRequestAnimationFrame from '../_util/getRequestAnimationFrame'; export const reqAnimFrame = getRequestAnimationFrame(); export const easeInOutCubic = (t, b, c, d) => { - const cc = c - b; - t /= d / 2; - if (t < 1) { - return cc / 2 * t * t * t + b; - } - return cc / 2 * ((t -= 2) * t * t + 2) + b; + const cc = c - b; + t /= d / 2; + if (t < 1) { + return cc / 2 * t * t * t + b; + } + return cc / 2 * ((t -= 2) * t * t + 2) + b; }; export function getDefaultTarget() { @@ -38,21 +38,21 @@ export function getOffsetTop(element): number { } export function scrollTo(href, target = getDefaultTarget) { - const scrollTop = getScroll(target(), true); - const offsetTop = getOffsetTop(document.querySelector(href)); - const targetScrollTop = scrollTop + offsetTop; - const startTime = Date.now(); - const frameFunc = () => { - const timestamp = Date.now(); - const time = timestamp - startTime; - document.body.scrollTop = easeInOutCubic(time, scrollTop, targetScrollTop, 450); - if (time < 450) { - reqAnimFrame(frameFunc); - } - }; - reqAnimFrame(frameFunc); - history.pushState(null, undefined, href); - } + const scrollTop = getScroll(target(), true); + const offsetTop = getOffsetTop(document.querySelector(href)); + const targetScrollTop = scrollTop + offsetTop; + const startTime = Date.now(); + const frameFunc = () => { + const timestamp = Date.now(); + const time = timestamp - startTime; + document.body.scrollTop = easeInOutCubic(time, scrollTop, targetScrollTop, 450); + if (time < 450) { + reqAnimFrame(frameFunc); + } + }; + reqAnimFrame(frameFunc); + history.pushState(null, undefined, href); +} class AnchorHelper { private links: Array; diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md index fb1795dbc9..55dfd38114 100644 --- a/components/anchor/demo/basic.md +++ b/components/anchor/demo/basic.md @@ -19,8 +19,11 @@ const { Link } = Anchor; ReactDOM.render( - - + + + + + , mountNode); -``` \ No newline at end of file +``` diff --git a/components/anchor/demo/fixed.md b/components/anchor/demo/fixed.md new file mode 100644 index 0000000000..af59b14e4e --- /dev/null +++ b/components/anchor/demo/fixed.md @@ -0,0 +1,29 @@ +--- +order: 2 +title: + zh-CN: 固定 + en-US: Fixed Anchor +--- + +## zh-CN + +不会随页面滚动变化。 + +## en-US + +Do not change state when page is scrolling. + +```jsx +import { Anchor } from 'antd'; +const { Link } = Anchor; + +ReactDOM.render( + + + + + + + +, mountNode); +``` diff --git a/components/anchor/demo/independ.md b/components/anchor/demo/independ.md deleted file mode 100644 index ae0000daf5..0000000000 --- a/components/anchor/demo/independ.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -order: 2 -title: - zh-CN: 独立使用 AnchorLink - en-US: Independent AnchorLink ---- - -## zh-CN - -独立使用 AnchorLink - -## en-US - -Independent AnchorLink - -```jsx -import { Anchor } from 'antd'; -const { Link } = Anchor; - -ReactDOM.render( - -, mountNode); -``` \ No newline at end of file diff --git a/components/anchor/demo/mix.md b/components/anchor/demo/mix.md deleted file mode 100644 index 89cfd014f4..0000000000 --- a/components/anchor/demo/mix.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -order: 1 -title: - zh-CN: 嵌套的 AnchorLink - en-US: Mixed AnchorLink ---- - -## zh-CN - -最简单的用法。 - -## en-US - -The simplest usage. - -```jsx -import { Anchor } from 'antd'; -const { Link } = Anchor; - -ReactDOM.render( - - - - - - -, mountNode); -``` \ No newline at end of file diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md index e5ef176a41..123bbc7050 100644 --- a/components/anchor/index.en-US.md +++ b/components/anchor/index.en-US.md @@ -9,7 +9,7 @@ A hyperlink to a location on same page. ## When To Use -For displaying anchor hyperlink on page, and jump between then. +For displaying anchor hyperlink on page, and jump between them. ## API @@ -27,4 +27,3 @@ For displaying anchor hyperlink on page, and jump between then. |-------------|----------------|--------------------|--------------| | href | target of hyperlink | String | | | title | content of hyperlink | String | | - diff --git a/components/anchor/index.tsx b/components/anchor/index.tsx index 9149590015..a206a84ade 100644 --- a/components/anchor/index.tsx +++ b/components/anchor/index.tsx @@ -38,6 +38,7 @@ export default class Anchor extends React.Component { }; this.anchorHelper = new AnchorHelper(); } + handleScroll = () => { this.setState({ activeAnchor: this.anchorHelper.getCurrentAnchor(this.props.bounds), @@ -49,6 +50,7 @@ export default class Anchor extends React.Component { anchorHelper: this.anchorHelper, }; } + componentDidMount() { this.handleScroll(); this.updateInk(); @@ -93,15 +95,17 @@ export default class Anchor extends React.Component { visible: !!activeAnchor, }); - return -
-
-
- + return ( + +
+
+
+ +
+ {React.Children.map(this.props.children, this.renderAnchorLink)}
- {React.Children.map(this.props.children, this.renderAnchorLink)}
-
- ; + + ); } } diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index 5d8d221390..edde5696ba 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -6,7 +6,7 @@ type: Other title: Anchor --- -用于跳转到页面指定位置 +用于跳转到页面指定位置。 ## 何时使用 @@ -28,4 +28,3 @@ title: Anchor |-------------|----------------|--------------------|--------------| | href | 锚点链接 | String | | | title | 文字内容 | String | | -