Card.js
3.8 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
118
119
120
121
122
123
124
125
126
import React,{PropTypes} from 'react';
import cx from 'classnames';
import l from './card.les';
import { Card as MyCard,Button,Switch,Icon} from 'antd';
import Collapse from 'react-collapse';
class Card extends React.Component {
constructor(props) {
super(props);
this.renderTools=this.renderTools.bind(this);
this.collapseCard=this.collapseCard.bind(this);
this.state={
cardStatus:true,
closeChecked:true,
}
}
static propTypes = {
style: PropTypes.object,
extra: PropTypes.oneOfType([
PropTypes.element,
PropTypes.string
]),
title:PropTypes.oneOfType([
PropTypes.element,
PropTypes.string
]),
add:PropTypes.func,
son:PropTypes.func,
edit:PropTypes.func,
closeBnt:PropTypes.func,
turnIn:PropTypes.func,
turnOut:PropTypes.func,
showAdd:PropTypes.bool,
showEdit:PropTypes.bool,
showSon:PropTypes.bool,
showCloseBtn:PropTypes.bool,
showCollapse:PropTypes.bool,
showTurnOut:PropTypes.bool,
showTurnIn:PropTypes.bool,
}
static defaultProps ={
"style":{marginBottom:'16px'},
extra:<a href="#">More1</a>,
add:()=>{},
edit:()=>{},
closeBnt:()=>{},
son:()=>{},
turnIn:()=>{},
turnOut:()=>{},
showAdd:false,
showSon:false,
showEdit:false,
showCloseBtn:false,
showTurnIn:false,
showTurnOut:false,
showCollapse:true,
customize:null
}
collapseCard(){
const {cardStatus}=this.state;
if(typeof this.props.cardStatus === 'boolean' && this.props.cardStatus === false){
return ;
}
this.setState({
cardStatus:!cardStatus
});
}
componentWillReceiveProps(props){
if(typeof props.cardStatus === 'boolean'){
this.setState({cardStatus:props.cardStatus});
}
if(typeof props.closeChecked === 'boolean'){
this.setState({closeChecked:props.closeChecked});
}
}
componentDidMount(){
const {cardStatus = null,closeChecked = null} = this.props;
if(typeof cardStatus === 'boolean'){
this.setState({cardStatus});
}
if(typeof closeChecked === 'boolean'){
this.setState({closeChecked});
}
}
renderTools(){
const {add,edit,closeBnt,showAdd,showEdit,showCloseBtn,showCollapse,showSon,son,showTurnIn,showTurnOut,turnIn,turnOut,customize}=this.props;
const {cardStatus,closeChecked}=this.state;
// console.log('showTurnOut',showTurnOut);
return (
<div className={cx(l.tools_wrap)}>{/**/}
{customize}
{showAdd&&<Button onClick={add.bind(null,this.props.children)} className={cx(l.tool)} size="small" icon="plus">添加</Button>}
{showCloseBtn&&<Switch onChange={closeBnt} checked={closeChecked} defaultChecked className={cx(l.tool)} size="small" checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="cross" />}/>}
{showEdit&&<i onClick={edit} className={cx(l.tool,l.tool_icon_edit,"upvi-icon")}></i>}
{showSon&&<Button onClick={son} className={cx(l.tool)} size="small" icon="plus" style={{marginLeft:'10px'}}>子部门</Button>}
{showTurnIn&&<Button type="primary" onClick={turnIn} className={cx(l.tool,l.turn_btn)} size="small" icon="plus">调入</Button>}
{showTurnOut&&<Button onClick={turnOut} className={cx(l.tool)} size="small" icon="minus">调出</Button>}
{showCollapse&&<i onClick={this.collapseCard} className={cx(l.tool_icon_dropdown,"upvi-icon")}></i>}
</div>
)
}
render(){
const {style,extra,title}=this.props;
const {cardStatus}=this.state;
return (
<MyCard className={cx(l.my_card)} title={title}
bordered={false} extra={this.renderTools()} style={style}>
<Collapse isOpened={cardStatus}>
<div className={cx(l.center_wrap)}>
{this.props.children}
</div>
</Collapse>
</MyCard>
)
}
}
export default Card;