ant-design/components/alert/index.jsx

99 lines
2.4 KiB
React
Raw Normal View History

2015-07-27 20:53:08 +08:00
import React from 'react';
2015-10-21 17:59:57 +08:00
import ReactDOM from 'react-dom';
2015-08-20 13:06:47 +08:00
import Animate from 'rc-animate';
2015-11-20 11:05:34 +08:00
import Icon from '../icon';
import classNames from 'classnames';
2015-07-27 20:53:08 +08:00
export default React.createClass({
getDefaultProps() {
2015-07-29 18:44:56 +08:00
return {
prefixCls: 'ant-alert',
showIcon: false,
2016-03-16 22:06:02 +08:00
onClose() {},
type: 'info',
2015-07-29 18:44:56 +08:00
};
2015-07-27 20:53:08 +08:00
},
2015-07-29 18:44:56 +08:00
getInitialState() {
return {
2015-08-20 13:06:47 +08:00
closing: true,
closed: false
2015-07-29 18:44:56 +08:00
};
2015-07-27 20:53:08 +08:00
},
2015-07-29 18:44:56 +08:00
handleClose(e) {
e.preventDefault();
2015-10-21 17:59:57 +08:00
let dom = ReactDOM.findDOMNode(this);
dom.style.height = `${dom.offsetHeight}px`;
2015-08-20 13:06:47 +08:00
// Magic code
2015-08-20 13:17:17 +08:00
// 重复一次后才能正确设置 height
dom.style.height = `${dom.offsetHeight}px`;
2015-08-20 13:06:47 +08:00
this.setState({
closing: false
});
this.props.onClose.call(this, e);
2015-08-20 13:06:47 +08:00
},
2015-08-20 13:17:17 +08:00
animationEnd() {
2015-07-27 20:53:08 +08:00
this.setState({
2015-08-20 13:06:47 +08:00
closed: true,
closing: true
2015-07-27 20:53:08 +08:00
});
},
2015-08-20 13:06:47 +08:00
render() {
let {
closable, description, type, prefixCls, message, closeText, showIcon
} = this.props;
2015-10-02 14:21:02 +08:00
let iconType = '';
switch (type) {
2016-01-21 22:45:21 +08:00
case 'success':
iconType = 'check-circle';
break;
case 'info':
iconType = 'info-circle';
break;
case 'error':
2016-03-28 16:09:13 +08:00
iconType = 'cross-circle';
2016-01-21 22:45:21 +08:00
break;
case 'warn':
iconType = 'exclamation-circle';
break;
default:
iconType = 'default';
2015-07-27 20:53:08 +08:00
}
// use outline icon in alert with description
if (!!description) {
iconType += '-o';
}
let alertCls = classNames({
[prefixCls]: true,
[`${prefixCls}-${type}`]: true,
[`${prefixCls}-close`]: !this.state.closing,
[`${prefixCls}-with-description`]: !!description,
[`${prefixCls}-no-icon`]: !showIcon,
});
// closeable when closeText is assigned
if (closeText) {
closable = true;
2015-07-27 20:53:08 +08:00
}
return this.state.closed ? null : (
<Animate component=""
2016-01-05 14:42:06 +08:00
showProp="data-show"
transitionName="slide-up"
onEnd={this.animationEnd}>
<div data-show={this.state.closing} className={alertCls}>
{showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
<span className={`${prefixCls}-message`}>{message}</span>
<span className={`${prefixCls}-description`}>{description}</span>
{closable ? <a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>
{closeText || <Icon type="cross" />}
</a> : null}
</div>
</Animate>
);
2015-07-27 20:53:08 +08:00
}
});