newICSS/src/common/components/Loading/index.jsx

/**
 * Created by ZN on 2018/5/03.
 * 可配置属性：
 * show:为true是才显示，false不显示
 * text:显示在图标下的文字
 * img:自定义图标
 */
import React, {Component} from 'react';
/*import PropTypes from 'prop-types';*/
import style from './index.less';
 import wnIcon from '@common/images/wn.png';
import icon from '@common/images/loading.gif';
import ReactDom from 'react-dom';

/*const propTypes = {
    text: PropTypes.string,
    show: PropTypes.bool,
    shadeIsShow: PropTypes.bool
};
const defaultProps = {
    text: '拼命加载中...',
    shadeIsShow: true
};*/

// function Loading(props) {
//     const {text, img, show} = props;
//     return (
//         <div className={style['loading']} style={{display: show ? 'block' : 'none'}}>
//             {props.shadeIsShow?<div className={style['cover']}/>:''}
//             <div className={style['info']}>
//                 <img src={img}/>
//                 <p>{text}</p>
//             </div>
//         </div>
//     )
// }

class Loading extends React.Component{
    render(){
        const {text,show,type} = this.props;
        const domNode = document.getElementById('root');
        return ReactDom.createPortal(<React.Fragment>
            <div className={style['loading']} style={{display: show ? 'block' : 'none'}}>
                {/*{this.props.shadeIsShow?<div className={style['cover']}/>:null}*/}
                <div className={style['cover']}/>
              {type==='warning'?<div className={style['t-info']}>
                <p><img src={wnIcon} alt=""/>{text}</p>
              </div>:<div className={style['info']}>
                    <img src={icon}/>
                    <p>{text}</p>
                </div>}
            </div>
        </React.Fragment>,domNode
        )
    }
}

export default Loading;