waiting for sketch

components/anchor/AnchorLink.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-
+import classnames from 'classnames';
 
 export interface AnchorLinkProps {
   href: string;
@@ -7,15 +7,14 @@ export interface AnchorLinkProps {
   active: boolean;
 }
 
-export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
-  onClick = () => {
-    if (this.props.href) {
-      this.props.onClick(this.props.href);
-    }
-  }
-  render() {
-    return <div onClick={this.onClick}>
-      {this.props.active ? 'active':null } {this.props.children}
+export default function AnchorLink(props) {
+  const { prefixCls, active, href, children, onClick } = props;
+  const cls = classnames({
+    [`${prefixCls}-link`]: true,
+    [`${prefixCls}-link-active`]: active,
+  });
+
+  return <div className={cls} onClick={() => onClick(props.href)} >
+      {children}
     </div>;
-  }
 }

components/anchor/demo/basic.md

@@ -21,7 +21,8 @@ const { AnchorLink }  = Anchor;
 
 ReactDOM.render(
   <Anchor>
-    <AnchorLink href="#components-anchor-demo-basic">锚点1</AnchorLink>
+    <AnchorLink href="#components-anchor-demo-basic">基本</AnchorLink>
+    <AnchorLink href="#components-anchor-demo-independ">独立使用</AnchorLink>
   </Anchor>
 , mountNode);
 ```

components/anchor/index.en-US.md

@@ -1,6 +1,7 @@
 ---
 category: Components
 type: Other
+cols: 1
 title: Anchor
 ---
 

components/anchor/index.tsx

@@ -34,7 +34,7 @@ function getOffsetTop(element): number {
   if ( rect.width || rect.height ) {
     const doc = element.ownerDocument;
     const docElem = doc.documentElement;
-    return  rect.top + window.pageYOffset - docElem.clientTop;
+    return  rect.top - docElem.clientTop;
   }
 
   return rect.top;
@@ -43,11 +43,15 @@ function getOffsetTop(element): number {
 export interface AnchorProps {
   target: () => HTMLElement | Window;
   children: React.ReactNode;
+  prefixCls?: string;
 } 
 
 
 export default class Anchor extends React.Component<AnchorProps, any> {
   static AnchorLink = AnchorLink;
+  static defaultProps = {
+    prefixCls: 'ant-anchor'
+  };
 
   private scrollEvent: any;
   private sections: Array<string> = [];
@@ -66,19 +70,17 @@ export default class Anchor extends React.Component<AnchorProps, any> {
     this.sections.forEach(section => {
       const target = document.querySelector(section);
       if (target) {
-        const top = target.offsetTop;
+        const top = getOffsetTop(target);
         const bottom = top + target.clientHeight;
-        if ((scrollTop >= top) && (scrollTop <= bottom)) {
+        if ((top <= 5) && (bottom >= -5)) {
           activeAnchor = section;
         }
       }
     });
 
-    if (activeAnchor) {
-      this.setState({
-        activeAnchor,
-      });
-    }
+    this.setState({
+      activeAnchor,
+    });
   }
 
   componentDidMount() {
@@ -114,14 +116,19 @@ export default class Anchor extends React.Component<AnchorProps, any> {
       if (this.sections.indexOf(href) === -1) {
         this.sections.push(href);
       }
-      return React.cloneElement(child, { onClick: this.scrollTo, active: this.state.activeAnchor === href });
+      return React.cloneElement(child, {
+        onClick: this.scrollTo,
+        active: this.state.activeAnchor === href,
+        prefixCls: this.props.prefixCls,
+      });
     }
     return child;
   }
 
   render() {
+    const { prefixCls } = this.props;
     return <Affix>
-      <div>{React.Children.map(this.props.children, this.renderAnchorLink)}</div>
+      <div className={prefixCls}>{React.Children.map(this.props.children, this.renderAnchorLink)}</div>
     </Affix>;
   }
 }

components/anchor/index.zh-CN.md

@@ -1,6 +1,7 @@
 ---
 category: Components
 subtitle: 锚点
+cols: 1
 type: Other
 title: Anchor
 ---

components/anchor/style/index.less

@@ -1,5 +1,14 @@
 @import "../../style/themes/default";
 
-.@{ant-prefix}-anchor {
-  color: red;
+.@{ant-prefix}{
+  &-anchor {
+    background-color: white;
+    padding: 6px;
+    &-link {
+      &:hover, &-active {
+        color: @primary-color;
+      }
+    }
+  }
 }
+