2016-07-07 20:25:03 +08:00
|
|
|
import * as React from 'react';
|
2016-06-23 23:12:18 +08:00
|
|
|
import Animate from 'rc-animate';
|
|
|
|
import Icon from '../icon';
|
|
|
|
import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
|
|
|
import classNames from 'classnames';
|
2016-09-10 17:17:55 +08:00
|
|
|
import omit from 'omit.js';
|
2016-06-23 23:12:18 +08:00
|
|
|
|
2016-08-18 11:28:00 +08:00
|
|
|
function getScroll(target, top) {
|
|
|
|
if (typeof window === 'undefined') {
|
|
|
|
return 0;
|
2016-06-23 23:12:18 +08:00
|
|
|
}
|
2016-08-18 11:28:00 +08:00
|
|
|
|
|
|
|
const prop = top ? 'pageYOffset' : 'pageXOffset';
|
|
|
|
const method = top ? 'scrollTop' : 'scrollLeft';
|
|
|
|
const isWindow = target === window;
|
|
|
|
|
|
|
|
let ret = isWindow ? target[prop] : target[method];
|
|
|
|
// ie6,7,8 standard mode
|
|
|
|
if (isWindow && typeof ret !== 'number') {
|
|
|
|
ret = window.document.documentElement[method];
|
2016-06-23 23:12:18 +08:00
|
|
|
}
|
2016-08-18 11:28:00 +08:00
|
|
|
|
2016-06-23 23:12:18 +08:00
|
|
|
return ret;
|
|
|
|
}
|
|
|
|
|
2016-07-14 13:29:50 +08:00
|
|
|
interface BackTopProps {
|
|
|
|
visibilityHeight?: number;
|
|
|
|
onClick?: (event) => void;
|
2016-08-22 17:18:26 +08:00
|
|
|
target?: () => HTMLElement | Window;
|
2016-07-14 13:29:50 +08:00
|
|
|
prefixCls?: string;
|
|
|
|
className?: string;
|
|
|
|
}
|
2016-06-23 23:12:18 +08:00
|
|
|
|
2016-07-14 13:29:50 +08:00
|
|
|
export default class BackTop extends React.Component<BackTopProps, any> {
|
2016-06-23 23:12:18 +08:00
|
|
|
static defaultProps = {
|
|
|
|
onClick() {},
|
|
|
|
visibilityHeight: 400,
|
2016-08-18 11:28:00 +08:00
|
|
|
target() {
|
|
|
|
return window;
|
|
|
|
},
|
2016-06-23 23:12:18 +08:00
|
|
|
prefixCls: 'ant-back-top',
|
2016-07-14 13:29:50 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
scrollEvent: any;
|
2016-06-23 23:12:18 +08:00
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2016-08-18 11:28:00 +08:00
|
|
|
const scrollTop = getScroll(props.target(), true);
|
2016-06-23 23:12:18 +08:00
|
|
|
this.state = {
|
2016-08-18 11:28:00 +08:00
|
|
|
visible: scrollTop > props.visibilityHeight,
|
2016-06-23 23:12:18 +08:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
scrollToTop = (e) => {
|
2016-07-14 13:29:50 +08:00
|
|
|
if (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
}
|
2016-06-23 23:12:18 +08:00
|
|
|
this.setScrollTop(0);
|
|
|
|
this.props.onClick(e);
|
|
|
|
}
|
|
|
|
|
|
|
|
setScrollTop(value) {
|
2016-08-18 11:28:00 +08:00
|
|
|
const targetNode = this.props.target();
|
|
|
|
if (targetNode === window) {
|
|
|
|
document.body.scrollTop = value;
|
|
|
|
document.documentElement.scrollTop = value;
|
|
|
|
} else {
|
2016-08-22 17:18:26 +08:00
|
|
|
(targetNode as HTMLElement).scrollTop = value;
|
2016-08-18 11:28:00 +08:00
|
|
|
}
|
2016-06-23 23:12:18 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
handleScroll = () => {
|
2016-08-18 11:28:00 +08:00
|
|
|
const { visibilityHeight, target } = this.props;
|
|
|
|
const scrollTop = getScroll(target(), true);
|
2016-06-23 23:12:18 +08:00
|
|
|
this.setState({
|
2016-08-18 11:28:00 +08:00
|
|
|
visible: scrollTop > visibilityHeight,
|
2016-06-23 23:12:18 +08:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
2016-08-18 11:28:00 +08:00
|
|
|
this.scrollEvent = addEventListener(this.props.target(), 'scroll', this.handleScroll);
|
2016-06-23 23:12:18 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
if (this.scrollEvent) {
|
|
|
|
this.scrollEvent.remove();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2016-07-14 13:29:50 +08:00
|
|
|
const { prefixCls, className, children } = this.props;
|
2016-06-23 23:12:18 +08:00
|
|
|
const classString = classNames({
|
|
|
|
[prefixCls]: true,
|
|
|
|
[className]: !!className,
|
|
|
|
});
|
|
|
|
|
|
|
|
const defaultElement = (
|
|
|
|
<div className={`${prefixCls}-content`}>
|
|
|
|
<Icon className={`${prefixCls}-icon`} type="to-top" />
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
|
2016-07-08 10:23:20 +08:00
|
|
|
// fix https://fb.me/react-unknown-prop
|
2016-07-14 13:29:50 +08:00
|
|
|
const divProps = omit(this.props, [
|
|
|
|
'prefixCls',
|
|
|
|
'className',
|
|
|
|
'children',
|
2016-07-08 10:23:20 +08:00
|
|
|
'visibilityHeight',
|
|
|
|
]);
|
|
|
|
|
2016-06-23 23:12:18 +08:00
|
|
|
return (
|
2016-07-01 17:54:01 +08:00
|
|
|
<Animate component="" transitionName="fade">
|
|
|
|
{
|
|
|
|
this.state.visible ?
|
2016-08-06 13:16:38 +08:00
|
|
|
<div {...divProps} className={classString} onClick={this.scrollToTop}>
|
|
|
|
{children || defaultElement}
|
2016-07-01 17:54:01 +08:00
|
|
|
</div>
|
|
|
|
: null
|
|
|
|
}
|
2016-06-23 23:12:18 +08:00
|
|
|
</Animate>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|