2015-07-27 20:53:08 +08:00
|
|
|
import React from 'react';
|
|
|
|
|
|
|
|
export default React.createClass({
|
|
|
|
getDefaultProps() {
|
|
|
|
return {prefixCls: 'ant-alert'};
|
|
|
|
},
|
|
|
|
getInitialState () {
|
|
|
|
return {display: 'block'};
|
|
|
|
},
|
|
|
|
handleClose () {
|
2015-07-29 15:22:47 +08:00
|
|
|
if (this.props.onClose) {
|
|
|
|
this.props.onClose();
|
2015-07-27 20:53:08 +08:00
|
|
|
}
|
|
|
|
this.setState({
|
|
|
|
display: 'none'
|
|
|
|
});
|
|
|
|
},
|
|
|
|
render () {
|
2015-07-29 10:27:31 +08:00
|
|
|
var iconClass = this.props.message ? 'ant-alert-with-message-icon anticon-' : 'ant-alert-icon anticon-';
|
|
|
|
switch (this.props.type) {
|
2015-07-27 20:53:08 +08:00
|
|
|
case 'success':
|
|
|
|
iconClass += 'check-circle';
|
|
|
|
break;
|
|
|
|
case 'info':
|
|
|
|
iconClass += 'question-circle';
|
|
|
|
break;
|
|
|
|
case 'error':
|
|
|
|
case 'warn':
|
|
|
|
iconClass += 'info-circle';
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
iconClass += 'default';
|
|
|
|
}
|
2015-07-29 10:27:31 +08:00
|
|
|
if (this.props.message) {
|
2015-07-27 20:53:08 +08:00
|
|
|
return (
|
2015-07-29 10:27:31 +08:00
|
|
|
<div style={{display: this.state.display}} className={'ant-alert-with-message ant-alert-with-message-' + this.props.type}>
|
2015-07-27 20:53:08 +08:00
|
|
|
<i className={'anticon ' + iconClass}></i>
|
2015-07-29 10:27:31 +08:00
|
|
|
<p className={'ant-alert-with-message-message'}>{this.props.message}</p>
|
|
|
|
<span className={'ant-alert-with-message-description'}>{this.props.description}</span>
|
2015-07-29 15:22:47 +08:00
|
|
|
<a onClick={this.handleClose} className={'ant-alert-with-message-close-icon'}>
|
|
|
|
<span className='ant-alert-with-message-close-icon-x'></span>
|
|
|
|
</a>
|
2015-07-27 20:53:08 +08:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
} else {
|
2015-07-29 10:27:31 +08:00
|
|
|
if (this.props.closeText) {
|
2015-07-27 20:53:08 +08:00
|
|
|
return (
|
2015-07-29 10:27:31 +08:00
|
|
|
<div style={{display: this.state.display}} className={'ant-alert ant-alert-' + this.props.type}>
|
2015-07-27 20:53:08 +08:00
|
|
|
<i className={'anticon ' + iconClass}></i>
|
2015-07-29 10:27:31 +08:00
|
|
|
<span className={'ant-alert-description'}>{this.props.description}</span>
|
2015-07-29 15:22:47 +08:00
|
|
|
<span onClick={this.handleClose} className={'ant-alert-close-text'}>{this.props.closeText}</span>
|
2015-07-27 20:53:08 +08:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return (
|
2015-07-29 10:27:31 +08:00
|
|
|
<div style={{display: this.state.display}} className={'ant-alert ant-alert-' + this.props.type}>
|
2015-07-27 20:53:08 +08:00
|
|
|
<i className={'anticon ' + iconClass}></i>
|
2015-07-29 10:27:31 +08:00
|
|
|
<span className={'ant-alert-description'}>{this.props.description}</span>
|
2015-07-29 15:22:47 +08:00
|
|
|
<a onClick={this.handleClose} className={'ant-alert-close-icon'}>
|
|
|
|
<span className='ant-alert-close-icon-x'></span>
|
|
|
|
</a>
|
2015-07-27 20:53:08 +08:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|