ant-design/components/spin/index.tsx

145 lines
3.7 KiB
TypeScript
Raw Normal View History

import React from 'react';
import PropTypes from 'prop-types';
import { findDOMNode } from 'react-dom';
import classNames from 'classnames';
import Animate from 'rc-animate';
2016-06-01 12:08:08 +08:00
import isCssAnimationSupported from '../_util/isCssAnimationSupported';
import omit from 'omit.js';
2015-10-31 02:00:03 +08:00
2016-08-10 09:46:56 +08:00
export interface SpinProps {
prefixCls?: string;
className?: string;
spinning?: boolean;
size?: 'small' | 'default' | 'large';
tip?: string;
delay?: number;
2017-03-21 17:12:43 +08:00
wrapperClassName?: string;
2016-08-10 09:46:56 +08:00
}
export default class Spin extends React.Component<SpinProps, any> {
static defaultProps = {
prefixCls: 'ant-spin',
spinning: true,
2016-08-10 09:46:56 +08:00
size: 'default',
2017-03-21 17:12:43 +08:00
wrapperClassName: '',
2016-07-13 11:14:24 +08:00
};
2016-07-13 17:22:23 +08:00
static propTypes = {
2016-08-10 09:46:56 +08:00
prefixCls: PropTypes.string,
className: PropTypes.string,
spinning: PropTypes.bool,
size: PropTypes.oneOf(['small', 'default', 'large']),
2017-03-21 17:12:43 +08:00
wrapperClassName: PropTypes.string,
2016-07-13 17:22:23 +08:00
};
2016-08-10 09:46:56 +08:00
debounceTimeout: number;
delayTimeout: number;
2016-08-10 09:46:56 +08:00
constructor(props) {
super(props);
const spinning = props.spinning;
this.state = {
2016-05-09 13:10:43 +08:00
spinning,
};
}
2016-05-20 14:26:44 +08:00
isNestedPattern() {
2015-10-31 02:00:03 +08:00
return !!(this.props && this.props.children);
}
componentDidMount() {
2016-05-26 12:52:07 +08:00
if (!isCssAnimationSupported()) {
// Show text in IE8/9
findDOMNode(this).className += ` ${this.props.prefixCls}-show-text`;
}
}
2016-05-09 16:20:46 +08:00
componentWillUnmount() {
if (this.debounceTimeout) {
clearTimeout(this.debounceTimeout);
}
if (this.delayTimeout) {
clearTimeout(this.delayTimeout);
}
}
componentWillReceiveProps(nextProps) {
const currentSpinning = this.props.spinning;
const spinning = nextProps.spinning;
const { delay } = this.props;
if (this.debounceTimeout) {
clearTimeout(this.debounceTimeout);
}
if (currentSpinning && !spinning) {
2016-11-07 17:53:12 +08:00
this.debounceTimeout = setTimeout(() => this.setState({ spinning }), 300);
if (this.delayTimeout) {
clearTimeout(this.delayTimeout);
}
} else {
if (spinning && delay && !isNaN(Number(delay))) {
2017-06-06 20:38:23 +08:00
if (this.delayTimeout) {
clearTimeout(this.delayTimeout);
}
this.delayTimeout = setTimeout(() => this.setState({ spinning }), delay);
} else {
this.setState({ spinning });
}
}
}
render() {
2017-03-21 17:12:43 +08:00
const { className, size, prefixCls, tip, wrapperClassName, ...restProps } = this.props;
const { spinning } = this.state;
2015-10-27 10:34:05 +08:00
const spinClassName = classNames(prefixCls, {
2016-01-27 12:00:27 +08:00
[`${prefixCls}-sm`]: size === 'small',
[`${prefixCls}-lg`]: size === 'large',
[`${prefixCls}-spinning`]: spinning,
2016-12-19 15:19:15 +08:00
[`${prefixCls}-show-text`]: !!tip,
}, className);
2015-10-27 10:10:27 +08:00
2016-07-08 10:14:45 +08:00
// fix https://fb.me/react-unknown-prop
const divProps = omit(restProps, [
'spinning',
'delay',
2016-07-08 10:14:45 +08:00
]);
const spinElement = (
<div {...divProps} className={spinClassName} >
<span className={`${prefixCls}-dot`}>
<i />
<i />
<i />
<i />
</span>
{tip ? <div className={`${prefixCls}-text`}>{tip}</div> : null}
</div>
);
2015-10-31 02:00:03 +08:00
if (this.isNestedPattern()) {
2017-03-21 17:12:43 +08:00
let animateClassName = prefixCls + '-nested-loading';
if (wrapperClassName) {
animateClassName += ' ' + wrapperClassName;
}
const containerClassName = classNames({
[`${prefixCls}-container`]: true,
2016-11-07 17:53:12 +08:00
[`${prefixCls}-blur`]: spinning,
});
2015-10-31 02:00:03 +08:00
return (
<Animate
{...divProps}
component="div"
2017-03-21 17:12:43 +08:00
className={animateClassName}
2017-01-27 14:27:18 +08:00
style={null}
transitionName="fade"
>
{spinning && <div key="loading">{spinElement}</div>}
<div className={containerClassName} key="container">
2015-10-31 02:00:03 +08:00
{this.props.children}
</div>
</Animate>
2015-10-31 02:00:03 +08:00
);
}
return spinElement;
2015-10-27 10:10:27 +08:00
}
}