ant-design/components/anchor/index.tsx

146 lines
3.6 KiB
TypeScript
Raw Normal View History

2016-10-28 14:02:55 +08:00
import React from 'react';
import classNames from 'classnames';
2016-10-28 14:02:55 +08:00
import addEventListener from 'rc-util/lib/Dom/addEventListener';
import AnchorLink from './AnchorLink';
import Affix from '../affix';
2016-11-03 16:45:13 +08:00
import AnchorHelper, { getDefaultTarget } from './anchorHelper';
2016-10-28 14:02:55 +08:00
export interface AnchorProps {
target: () => HTMLElement | Window;
children: React.ReactNode;
2016-10-28 16:53:59 +08:00
prefixCls?: string;
2016-11-03 16:45:13 +08:00
offsetTop?: number;
bounds?: number;
2016-11-09 14:40:31 +08:00
className?: string;
style?: React.CSSProperties;
affix?: boolean;
showInkInFixed?: boolean;
2016-11-03 16:45:13 +08:00
}
2016-10-28 14:02:55 +08:00
export default class Anchor extends React.Component<AnchorProps, any> {
2016-11-07 11:04:36 +08:00
static Link = AnchorLink;
2016-11-03 16:45:13 +08:00
2016-10-28 16:53:59 +08:00
static defaultProps = {
2016-11-03 16:45:13 +08:00
prefixCls: 'ant-anchor',
affix: true,
showInkInFixed: false,
2016-11-03 16:45:13 +08:00
};
static childContextTypes = {
anchorHelper: React.PropTypes.any,
};
refs: {
ink?: any;
2016-10-28 16:53:59 +08:00
};
2016-10-28 14:02:55 +08:00
private scrollEvent: any;
2016-11-03 16:45:13 +08:00
private anchorHelper: AnchorHelper;
private _avoidInk: boolean;
2016-10-28 14:02:55 +08:00
constructor(props) {
super(props);
this.state = {
activeAnchor: null,
animated: true,
2016-10-28 14:02:55 +08:00
};
2016-11-03 16:45:13 +08:00
this.anchorHelper = new AnchorHelper();
2016-10-28 14:02:55 +08:00
}
2016-11-09 14:22:38 +08:00
2016-10-28 14:02:55 +08:00
handleScroll = () => {
2016-10-28 16:53:59 +08:00
this.setState({
activeAnchor: this.anchorHelper.getCurrentAnchor(this.props.offsetTop, this.props.bounds),
2016-10-28 16:53:59 +08:00
});
2016-10-28 14:02:55 +08:00
}
2016-11-03 16:45:13 +08:00
getChildContext() {
return {
anchorHelper: this.anchorHelper,
};
}
2016-11-09 14:22:38 +08:00
2016-10-28 14:02:55 +08:00
componentDidMount() {
this.handleScroll();
2016-11-03 16:45:13 +08:00
this.updateInk();
2016-10-28 14:02:55 +08:00
this.scrollEvent = addEventListener((this.props.target || getDefaultTarget)(), 'scroll', this.handleScroll);
}
componentWillUnmount() {
if (this.scrollEvent) {
this.scrollEvent.remove();
}
}
2016-11-03 16:45:13 +08:00
componentDidUpdate() {
if (!this._avoidInk) {
this.updateInk();
}
2016-11-03 16:45:13 +08:00
}
updateInk = () => {
const activeAnchor = this.anchorHelper.getCurrentActiveAnchor();
if (activeAnchor) {
this.refs.ink.style.top = `${activeAnchor.offsetTop + activeAnchor.clientHeight / 2 - 4.5}px`;
}
2016-10-28 14:02:55 +08:00
}
clickAnchorLink = (href, component) => {
this._avoidInk = true;
this.refs.ink.style.top = `${component.offsetTop + component.clientHeight / 2 - 4.5}px`;
this.anchorHelper.scrollTo(href, this.props.offsetTop, getDefaultTarget, () => {
this._avoidInk = false;
});
}
2016-11-15 15:33:13 +08:00
2016-10-28 14:02:55 +08:00
renderAnchorLink = (child) => {
2016-10-28 14:02:55 +08:00
const { href } = child.props;
if (child.type.__ANT_ANCHOR_LINK && href) {
2016-11-03 16:45:13 +08:00
this.anchorHelper.addLink(href);
2016-10-28 16:53:59 +08:00
return React.cloneElement(child, {
onClick: this.clickAnchorLink,
2016-10-28 16:53:59 +08:00
prefixCls: this.props.prefixCls,
2016-11-03 16:45:13 +08:00
bounds: this.props.bounds,
affix: this.props.affix || this.props.showInkInFixed,
offsetTop: this.props.offsetTop,
2016-10-28 16:53:59 +08:00
});
2016-10-28 14:02:55 +08:00
}
return child;
}
render() {
const { prefixCls, offsetTop, style, className = '', affix, showInkInFixed } = this.props;
const { activeAnchor, animated } = this.state;
const inkClass = classNames({
2016-11-03 16:45:13 +08:00
[`${prefixCls}-ink-ball`]: true,
animated,
2016-11-03 16:45:13 +08:00
visible: !!activeAnchor,
});
const wrapperClass = classNames({
[`${prefixCls}-wrapper`]: true,
}, className);
const anchorClass = classNames(prefixCls, {
'fixed': !affix && !showInkInFixed,
});
2016-11-09 21:06:43 +08:00
const anchorContent = (
<div className={wrapperClass} style={style}>
<div className={anchorClass}>
<div className={`${prefixCls}-ink`} >
<span className={inkClass} ref="ink" />
</div>
{React.Children.toArray(this.props.children).map(this.renderAnchorLink)}
2016-11-03 16:45:13 +08:00
</div>
</div>
2016-11-09 21:06:43 +08:00
);
2016-11-18 17:25:30 +08:00
return !affix ? anchorContent : (
2016-11-09 21:06:43 +08:00
<Affix offsetTop={offsetTop}>
{anchorContent}
</Affix>
);
2016-10-28 14:02:55 +08:00
}
}