ant-design/components/back-top/index.tsx

124 lines
2.8 KiB
TypeScript
Raw Normal View History

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';
import omit from 'omit.js';
2016-06-23 23:12:18 +08:00
function getScroll(target, top) {
if (typeof window === 'undefined') {
return 0;
2016-06-23 23:12:18 +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-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,
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);
const scrollTop = getScroll(props.target(), true);
2016-06-23 23:12:18 +08:00
this.state = {
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) {
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-06-23 23:12:18 +08:00
}
handleScroll = () => {
const { visibilityHeight, target } = this.props;
const scrollTop = getScroll(target(), true);
2016-06-23 23:12:18 +08:00
this.setState({
visible: scrollTop > visibilityHeight,
2016-06-23 23:12:18 +08:00
});
}
componentDidMount() {
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 (
<Animate component="" transitionName="fade">
{
this.state.visible ?
2016-08-06 13:16:38 +08:00
<div {...divProps} className={classString} onClick={this.scrollToTop}>
{children || defaultElement}
</div>
: null
}
2016-06-23 23:12:18 +08:00
</Animate>
);
}
}