SlideBox.js
3.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
/**
* Created by nap on 2017/2/28.
*/
import React from 'react';
import l from './SlideBox.les';
import cx from 'classnames';
import {Spin} from 'antd';
import {connect} from 'react-redux';
class SlideBox extends React.Component{
constructor(props){
super(props);
this.state = {
show:false,
remove:false
};
this.handleClose = this.handleClose.bind(this);
}
handleClose(){
this.handleRemove();
this.props.onClose && this.props.onClose();
}
handleRemove(){
this.setState({show:false});
setTimeout(()=>{
this.setState({remove:true});
},300);
}
handleShow(){
this.setState({remove:false});
setTimeout(()=>{
this.setState({
show:true
});
},10);
}
componentWillReceiveProps(props){
if(props.show){
this.handleShow();
}else{
this.handleRemove();
}
}
componentDidMount(){
const {show} = this.props;
if(show){
this.setState({
remove:!show
});
this.handleShow();
}else{
this.setState({
remove:!show
});
this.handleRemove();
}
}
render(){
const {show,remove} = this.state;
const {loading = false,status = 0} = this.props;
if (remove){
return null;
}
return (
<div className={cx(l.slideBox,{[l.show]:show})}>
<div className={cx(l.slide)} style={{width:this.props.width || 684}}>
<div className={cx(l.title)}>
<div className={cx(l.btn_close)} onClick={this.handleClose}>
<span className="upvi-icon"></span>
</div>
{this.props.title || null}
</div>
<div className={cx(l.context)}>
{
loading ? (
status == 'loading' ?
<div className={cx(l.loading)}>
<div className={cx(l.icon)}>
<Spin size="large"/>
</div>
</div>
: status == 'error' ? (
<div className={cx(l.loading)}>
<div className={cx(l.icon)}>
<p>加载失败</p>
</div>
</div>
) : null
) : (this.props.children || null)
}
</div>
</div>
</div>
);
}
}
export default connect(state=>{
const {environment:{showSlideLoading,slideLoadingStatus}} = state;
return {loading:showSlideLoading,status:slideLoadingStatus};
})(SlideBox);