ant-design/components/alert/index.jsx

68 lines
2.3 KiB
React
Raw Normal View History

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>
);
}
}
}
});