Anchor ink in fixed (ant-design#4960)

* A config for displaying ink-balls of fixed Anchor + close ant-design#4930 + add `inkInFixed` props to show ink-balls in fixed mode. * rename
sudomopoy · Feb 21, 2017 · 36fd55c · 36fd55c
1 parent a80d6b7
commit 36fd55c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md
@@ -20,6 +20,8 @@ For displaying anchor hyperlinks on page and jumping between them.
 | offsetTop    | Pixels to offset from top when calculating position of scroll | number | 0 |
 | offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
 | bounds     | Bounding distance of anchor area | number | 5(px) |
+| affix | Fixed mode of Anchor | boolean | false |
+| showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false |
 
 ### Link Props
 

diff --git a/components/anchor/index.tsx b/components/anchor/index.tsx
@@ -14,6 +14,7 @@ export interface AnchorProps {
   className?: string;
   style?: React.CSSProperties;
   affix?: boolean;
+  showInkInFixed?: boolean;
 }
 
 export default class Anchor extends React.Component<AnchorProps, any> {
@@ -22,6 +23,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
   static defaultProps = {
     prefixCls: 'ant-anchor',
     affix: true,
+    showInkInFixed: false,
   };
 
   static childContextTypes = {
@@ -91,22 +93,23 @@ export default class Anchor extends React.Component<AnchorProps, any> {
   }
 
   renderAnchorLink = (child) => {
+
     const { href } = child.props;
     if (href) {
       this.anchorHelper.addLink(href);
       return React.cloneElement(child, {
         onClick: this.clickAnchorLink,
         prefixCls: this.props.prefixCls,
         bounds: this.props.bounds,
-        affix: this.props.affix,
+        affix: this.props.affix || this.props.showInkInFixed,
         offsetTop: this.props.offsetTop,
       });
     }
     return child;
   }
 
   render() {
-    const { prefixCls, offsetTop, style, className = '', affix } = this.props;
+    const { prefixCls, offsetTop, style, className = '', affix, showInkInFixed } = this.props;
     const { activeAnchor, animated } = this.state;
     const inkClass = classNames({
       [`${prefixCls}-ink-ball`]: true,
@@ -119,7 +122,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
     }, className);
 
     const anchorClass = classNames(prefixCls, {
-      'fixed': !affix,
+      'fixed': !affix && !showInkInFixed,
     });
 
     const anchorContent = (

diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md
@@ -21,6 +21,8 @@ title: Anchor
 | offsetTop    | 距离窗口顶部达到指定偏移量后触发   | number |         |
 | offsetBottom | 距离窗口底部达到指定偏移量后触发   | number |         |
 | bounds | 锚点区域边界 | number | 5(px) |
+| affix | 固定模式 | boolean | false |
+| showInkInFixed | 固定模式是否显示小圆点 | boolean | false |
 
 ### Link Props