fix lint

CHANGELOG.en-US.md

@@ -9,6 +9,12 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
 
 ---
 
+## 2.4.3
+
+`2016-11-17`
+
+* Fix errors in `Anchor` about querySelector, and make some experience Optimization .[#3832](https://github.com/ant-design/ant-design/issues/3832) [#3844](https://github.com/ant-design/ant-design/issues/3844)
+
 ## 2.4.2
 
 `2016-11-13`

CHANGELOG.zh-CN.md

@@ -9,6 +9,12 @@ timeline: true
 
 ---
 
+## 2.4.3
+
+`2016-11-17`
+
+* 修复 `Anchor` 内部 querySelector 报错，并做了一些体验优化 。[#3832](https://github.com/ant-design/ant-design/issues/3832) [#3844](https://github.com/ant-design/ant-design/issues/3844)
+
 ## 2.4.2
 
 `2016-11-13`

components/anchor/AnchorLink.tsx

@@ -4,7 +4,7 @@ import AnchorHelper, { scrollTo } from './anchorHelper';
 
 export interface AnchorLinkProps {
   href: string;
-  onClick: (href: string) => void;
+  onClick: (href: string, component: Element) => void;
   active?: boolean;
   prefixCls?: string;
   children?: any;
@@ -32,6 +32,8 @@ export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
     anchorHelper: AnchorHelper;
   };
 
+  private _component: Element;
+
   constructor(props, context) {
     super(props, context);
   }
@@ -42,24 +44,46 @@ export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
     };
   }
 
+  setActiveAnchor() {
+    const { bounds, href, affix } = this.props;
+    const { anchorHelper } = this.context;
+    const active = affix && anchorHelper && anchorHelper.getCurrentAnchor(bounds) === href;
+    if (active && anchorHelper) {
+      anchorHelper.setActiveAnchor(this._component);
+    }
+  }
+
+  componentDidMount() {
+    this.setActiveAnchor();
+  }
+
+  componentDidUpdate() {
+    this.setActiveAnchor();
+  }
+
   renderAnchorLink = (child) => {
     const { href } = child.props;
     if (href) {
       this.context.anchorHelper.addLink(href);
       return React.cloneElement(child, {
-        onClick: this.context.anchorHelper.scrollTo,
+        onClick: this.props.onClick,
         prefixCls: this.props.prefixCls,
+        affix: this.props.affix,
       });
     }
     return child;
   }
 
+  refsTo = (component) => {
+    this._component = component;
+  }
+
   scrollTo = (e) => {
     const { onClick, href } = this.props;
     const { anchorHelper } = this.context;
     e.preventDefault();
     if (onClick) {
-      onClick(href);
+      onClick(href, this._component);
     } else {
       e.stopPreventDefault();
       const scrollToFn = anchorHelper ? anchorHelper.scrollTo : scrollTo;
@@ -78,7 +102,7 @@ export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
     return (
       <div className={cls}>
         <a
-          ref={(component) => component && active && anchorHelper ? anchorHelper.setActiveAnchor(component) : null}
+          ref={this.refsTo}
           className={`${prefixCls}-link-title`}
           onClick={this.scrollTo}
           href={href}

components/anchor/anchorHelper.tsx

@@ -37,9 +37,9 @@ export function getOffsetTop(element): number {
   return rect.top;
 }
 
-export function scrollTo(href, target = getDefaultTarget) {
+export function scrollTo(href, target = getDefaultTarget, callback = () => {}) {
   const scrollTop = getScroll(target(), true);
-  const targetElement = document.querySelector(href);
+  const targetElement = document.getElementById(href.substring(1));
   if (!targetElement) {
     return;
   }
@@ -52,10 +52,12 @@ export function scrollTo(href, target = getDefaultTarget) {
     window.scrollTo(window.pageXOffset, easeInOutCubic(time, scrollTop, targetScrollTop, 450));
     if (time < 450) {
       reqAnimFrame(frameFunc);
+    } else {
+      callback();
     }
   };
   reqAnimFrame(frameFunc);
-  history.pushState(null, undefined, href);
+  history.pushState(null, '', href);
 }
 
 class AnchorHelper {
@@ -86,7 +88,7 @@ class AnchorHelper {
   getCurrentAnchor(bounds = 5) {
     let activeAnchor = '';
     this.links.forEach(section => {
-      const target = document.querySelector(section);
+      const target = document.getElementById(section.substring(1));
       if (target) {
         const top = getOffsetTop(target);
         const bottom = top + target.clientHeight;
@@ -99,8 +101,8 @@ class AnchorHelper {
     return this._activeAnchor;
   }
 
-  scrollTo(href, target = getDefaultTarget) {
-    scrollTo(href, target);
+  scrollTo(href, target = getDefaultTarget, callback = () => {}) {
+    scrollTo(href, target, callback);
   }
 }
 

components/anchor/index.tsx

@@ -34,11 +34,13 @@ export default class Anchor extends React.Component<AnchorProps, any> {
 
   private scrollEvent: any;
   private anchorHelper: AnchorHelper;
+  private _avoidInk: boolean;
 
   constructor(props) {
     super(props);
     this.state = {
       activeAnchor: null,
+      animated: true,
     };
     this.anchorHelper = new AnchorHelper();
   }
@@ -68,7 +70,9 @@ export default class Anchor extends React.Component<AnchorProps, any> {
   }
 
   componentDidUpdate() {
-    this.updateInk();
+    if (!this._avoidInk) {
+      this.updateInk();
+    }
   }
 
   updateInk = () => {
@@ -78,12 +82,22 @@ export default class Anchor extends React.Component<AnchorProps, any> {
     }
   }
 
+  clickAnchorLink = (href, component) => {
+    this.refs.ink.style.transition = 'top 0.01s ease-in-out';
+    this._avoidInk = true;
+    this.refs.ink.style.top = `${component.offsetTop + component.clientHeight / 2 - 4.5}px`;
+    this.anchorHelper.scrollTo(href, getDefaultTarget, () => {
+      this.refs.ink.style.transition = 'top 0.3s ease-in-out';
+      this._avoidInk = false;
+    });
+  }
+
   renderAnchorLink = (child) => {
     const { href } = child.props;
     if (href) {
       this.anchorHelper.addLink(href);
       return React.cloneElement(child, {
-        onClick: this.anchorHelper.scrollTo,
+        onClick: this.clickAnchorLink,
         prefixCls: this.props.prefixCls,
         bounds: this.props.bounds,
         affix: this.props.affix,
@@ -94,9 +108,10 @@ export default class Anchor extends React.Component<AnchorProps, any> {
 
   render() {
     const { prefixCls, offsetTop, style, className = '', affix } = this.props;
-    const { activeAnchor } = this.state;
+    const { activeAnchor, animated } = this.state;
     const inkClass = classNames({
       [`${prefixCls}-ink-ball`]: true,
+      animated,
       visible: !!activeAnchor,
     });
 

components/anchor/style/index.less

@@ -31,8 +31,8 @@
         border-radius: 9px;
         border: 3px solid @primary-color;
         background-color: white;
-        transition: top .3s ease-in-out;
         left: 50%;
+        transition: top .3s ease-in-out;
         transform: translateX(-50%);
         &.visible {
           display: inline-block;

components/tree/demo/search.md

@@ -112,11 +112,11 @@ class SearchTree extends React.Component {
       const beforeStr = item.key.substr(0, index);
       const afterStr = item.key.substr(index + searchValue.length);
       const title = index > -1 ?
-            <span>
+            (<span>
               {beforeStr}
               <span className="ant-tree-searchable-filter">{searchValue}</span>
               {afterStr}
-            </span>
+            </span>)
             : <span>{item.key}</span>;
       if (item.children) {
         return (

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "title": "Ant Design",
   "description": "An enterprise-class UI design language and React-based implementation",
   "homepage": "http://ant.design/",

site/theme/template/Content/MainContent.jsx

@@ -84,12 +84,12 @@ export default class MainContent extends React.Component {
     const disabled = item.disabled;
     const url = item.filename.replace(/(\/index)?((\.zh-CN)|(\.en-US))?\.md$/i, '').toLowerCase();
     const child = !item.link ?
-      <Link to={{ query: this.props.location.query, pathname: /^components/.test(url) ? `${url}/` : url }} disabled={disabled}>
+      (<Link to={{ query: this.props.location.query, pathname: /^components/.test(url) ? `${url}/` : url }} disabled={disabled}>
         {text}
-      </Link> :
-      <a href={item.link} target="_blank" rel="noopener noreferrer" disabled={disabled}>
+      </Link>) :
+      (<a href={item.link} target="_blank" rel="noopener noreferrer" disabled={disabled}>
         {text}
-      </a>;
+      </a>);
 
     return (
       <Menu.Item key={key.toLowerCase()} disabled={disabled}>