update anchor docs

components/anchor/AnchorLink.tsx

@@ -40,6 +40,7 @@ export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
       anchorHelper: this.context.anchorHelper,
     };
   }
+
   renderAnchorLink = (child) => {
     const { href } = child.props;
     if (href) {
@@ -51,6 +52,7 @@ export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
     }
     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<AnchorLinkProps, any> {
       [`${prefixCls}-link-active`]: active,
     });
     const scrollToFn = anchorHelper ? anchorHelper.scrollTo : scrollTo;
-    return <div className={cls}>
+    return (
-      <span
+      <div className={cls}>
-        ref={(component) => component && active && anchorHelper ? anchorHelper.setActiveAnchor(component) : null}
+        <span
-        className={`${prefixCls}-link-title`}
+          ref={(component) => component && active && anchorHelper ? anchorHelper.setActiveAnchor(component) : null}
-        onClick={() => onClick ? onClick(href) : scrollToFn(href)}
+          className={`${prefixCls}-link-title`}
-      >{title}</span>
+          onClick={() => onClick ? onClick(href) : scrollToFn(href)}
-      {React.Children.map(children, this.renderAnchorLink)}
+        >
-    </div>;
+        {title}
+        </span>
+        {React.Children.map(children, this.renderAnchorLink)}
+      </div>
+    );
   }
 }

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;
+  const cc = c - b;
-    t /= d / 2;
+  t /= d / 2;
-    if (t < 1) {
+  if (t < 1) {
-        return cc / 2 * t * t * t + b;
+    return cc / 2 * t * t * t + b;
-    }
+  }
-    return cc / 2 * ((t -= 2) * t * t + 2) + 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 scrollTop = getScroll(target(), true);
-    const offsetTop = getOffsetTop(document.querySelector(href));
+  const offsetTop = getOffsetTop(document.querySelector(href));
-    const targetScrollTop = scrollTop + offsetTop;
+  const targetScrollTop = scrollTop + offsetTop;
-    const startTime = Date.now();
+  const startTime = Date.now();
-    const frameFunc = () => {
+  const frameFunc = () => {
-      const timestamp = Date.now();
+    const timestamp = Date.now();
-      const time = timestamp - startTime;
+    const time = timestamp - startTime;
-      document.body.scrollTop = easeInOutCubic(time, scrollTop, targetScrollTop, 450);
+    document.body.scrollTop = easeInOutCubic(time, scrollTop, targetScrollTop, 450);
-      if (time < 450) {
+    if (time < 450) {
-        reqAnimFrame(frameFunc);
+      reqAnimFrame(frameFunc);
-      }
+    }
-    };
+  };
-    reqAnimFrame(frameFunc);
+  reqAnimFrame(frameFunc);
-    history.pushState(null, undefined, href);
+  history.pushState(null, undefined, href);
-  }
+}
 
 class AnchorHelper {
   private links: Array<string>;

components/anchor/demo/basic.md

@@ -19,8 +19,11 @@ const { Link } = Anchor;
 
 ReactDOM.render(
   <Anchor>
-    <Link href="#components-anchor-demo-basic" title="Basic" />
+    <Link href="#components-anchor-demo-basic" title="Basic demo" />
-    <Link href="#components-anchor-demo-independ" title="Independent AnchorLink" />
+    <Link href="#components-anchor-demo-independ" title="Independ demo" />
+    <Link href="#API" title="API" />
+    <Link href="#Anchor-Props" title="Anchor Props" />
+    <Link href="#Link-Props" title="Link Props" />
   </Anchor>
 , mountNode);
-```
+```

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(
+  <Anchor affix={false}>
+    <Link href="#components-anchor-demo-basic" title="Basic demo" />
+    <Link href="#components-anchor-demo-independ" title="Independ demo" />
+    <Link href="#API" title="API" />
+    <Link href="#Anchor-Props" title="Anchor Props" />
+    <Link href="#Link-Props" title="Link Props" />
+  </Anchor>
+, mountNode);
+```

components/anchor/demo/independ.md

@@ -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(
-    <Link href="#components-anchor-demo-basic" title="Basic" />
-, mountNode);
-```

components/anchor/demo/mix.md

@@ -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(
-  <Anchor offsetTop={100}>
-    <Link href="#components-anchor-demo-basic" title="Bacis">
-      <Link href="#components-anchor-demo-mix" title="Mixed AnchorLink" />
-    </Link>
-    <Link href="#components-anchor-demo-independ" title="Independent AnchorLink" />
-  </Anchor>
-, mountNode);
-```

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 |         |
-

components/anchor/index.tsx

@@ -38,6 +38,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
     };
     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<AnchorProps, any> {
       anchorHelper: this.anchorHelper,
     };
   }
+
   componentDidMount() {
     this.handleScroll();
     this.updateInk();
@@ -93,15 +95,17 @@ export default class Anchor extends React.Component<AnchorProps, any> {
       visible: !!activeAnchor,
     });
 
-    return <Affix offsetTop={offsetTop}>
+    return (
-      <div className={`${prefixCls}-wrapper`}>
+      <Affix offsetTop={offsetTop}>
-        <div className={prefixCls}>
+        <div className={`${prefixCls}-wrapper`}>
-          <div className={`${prefixCls}-ink`} >
+          <div className={prefixCls}>
-            <span className={inkClass} ref="ink"/>
+            <div className={`${prefixCls}-ink`} >
+              <span className={inkClass} ref="ink" />
+            </div>
+            {React.Children.map(this.props.children, this.renderAnchorLink)}
           </div>
-          {React.Children.map(this.props.children, this.renderAnchorLink)}
         </div>
-      </div>
+      </Affix>
-    </Affix>;
+    );
   }
 }

components/anchor/index.zh-CN.md

@@ -6,7 +6,7 @@ type: Other
 title: Anchor
 ---
 
-用于跳转到页面指定位置
+用于跳转到页面指定位置。
 
 ## 何时使用
 
@@ -28,4 +28,3 @@ title: Anchor
 |-------------|----------------|--------------------|--------------|
 | href    | 锚点链接   | String |         |
 | title | 文字内容   | String |         |
-