/**
 * @file SpanLoading component
 * @author wendy(wendy.wei@derbysoft.com)
 */

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

class SpanLoading extends Component {

    constructor(props, ...restArgs) {

        super(props, ...restArgs);

        this.state = {
            spanning: props.spanning
        };

    }

    componentWillReceiveProps(nextProps) {

        const spanning = nextProps.spanning;
        const {delay} = this.props;

        if (spanning && delay && !isNaN(Number(delay))) {
            this.delayTimeout = setTimeout(() => this.setState({spanning}), delay);
        } else {
            this.setState({spanning});
        }

    }

    componentWillUnmount() {
        this.delayTimeout && clearTimeout(this.delayTimeout);
    }

    render() {

        const {className, style, description, size, children} = this.props,
            {spanning} = this.state;

        return (
            <div className={classNames('span-loading', {
                [`span-loading-${size}`]: size,
                [className]: className
            })}
                 style={style}>

                {
                    spanning ?
                        <span className={`span-loading-dot ${size ? size : ''}`}>
                            <i/><i/><i/><i/>
                        </span>
                        :
                        null

                }

                {children}

                {
                    description ?
                        <div className="span-loading-text">
                            {description}
                        </div>
                        :
                        null
                }

            </div>
        );
    }
}

SpanLoading.propTypes = {

    children: PropTypes.any,

    /**
     * The CSS class name of the root element.
     */
    className: PropTypes.string,

    /**
     * Override the styles of the root element.
     */
    style: PropTypes.object,

    /**
     * If true,will show a span loading animation.
     */
    spanning: PropTypes.bool,

    /**
     * Set the tip text,there will be a description under the loading.
     */
    tip: PropTypes.string,

    /**
     * Set the size of loading,can use small or large.
     */
    size: PropTypes.string,

    /**
     * Set the delay time of loading animation.
     */
    delay: PropTypes.number,

    description: PropTypes.any

};

SpanLoading.defaultProps = {
    spanning: true,
    tip: '',
    type: ''
};

export default SpanLoading;

@@ -150,16 +150,28 @@
 -types';
+%0A%0A// Vendors
 %0Aimport 
@@ -204,95 +204,163 @@
 s';%0A
-%0Aclass SpanLoading extends Component %7B%0A%0A    constructor(props, ...restArgs
+import ComponentUtil from '../_vendors/ComponentUtil';%0A%0Aclass SpanLoading extends Component %7B%0A%0A    static getDerivedStateFromProps(props, state
 ) %7B%0A
-%0A
         
 supe
@@ -359,202 +359,122 @@
     
-super(props, ...restArgs);%0A%0A        this.state = %7B%0A            spanning: props.spanning%0A        %7D;%0A%0A    %7D%0A%0A    componentWillReceiveProps(nextProps) %7B%0A%0A        const spanning = nextProps.
+return %7B%0A            prevProps: props,%0A            spanning: ComponentUtil.getDerivedState(props, state, '
 spanning
 ;%0A  
@@ -469,17 +469,18 @@
 spanning
-;
+')
 %0A       
@@ -484,105 +484,65 @@
     
-const %7Bdelay%7D = this.props;%0A
+%7D;
 %0A    
+%7D%0A%0A
     
-if (spanning && delay && !isNaN(Number(delay))
+constructor(props, ...restArgs
 ) %7B%0A
-  
+%0A
         
   th
@@ -541,103 +541,36 @@
     
-  this.delayTimeout = setTimeout(() =%3E this.setState(%7Bspanning%7D), delay);%0A        %7D else %7B%0A    
+super(props, ...restArgs);%0A%0A
     
@@ -583,28 +583,16 @@
 is.s
-etS
 tate
-(%7Bspanning%7D);
+ = %7B
 %0A   
@@ -600,108 +600,48 @@
     
-%7D%0A%0A
     
-%7D%0A%0A    componentWillUnmount() %7B%0A        this.delayTimeout && clearTimeout(this.delayTimeout);
+spanning: props.spanning%0A        %7D;%0A
 %0A   
@@ -2158,102 +2158,8 @@
 g,%0A%0A
-    /**%0A     * Set the delay time of loading animation.%0A     */%0A    delay: PropTypes.number,%0A%0A
     

update SpanLoading