2016-07-07 20:25:03 +08:00
|
|
|
import * as React from 'react';
|
2016-07-14 13:29:50 +08:00
|
|
|
import * as 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';
|
2015-11-29 16:55:43 +08:00
|
|
|
import classNames from 'classnames';
|
2015-07-27 20:53:08 +08:00
|
|
|
|
2016-07-14 13:29:50 +08:00
|
|
|
interface AlertProps {
|
|
|
|
/**
|
|
|
|
* Type of Alert styles, options:`success`, `info`, `warning`, `error`
|
|
|
|
*/
|
2016-08-03 14:54:10 +08:00
|
|
|
type?: 'success' | 'info' | 'warning' | 'error';
|
2016-07-14 13:29:50 +08:00
|
|
|
/** Whether Alert can be closed */
|
|
|
|
closable?: boolean;
|
|
|
|
/** Close text to show */
|
|
|
|
closeText?: React.ReactNode;
|
|
|
|
/** Content of Alert */
|
|
|
|
message: React.ReactNode;
|
|
|
|
/** Additional content of Alert */
|
|
|
|
description?: React.ReactNode;
|
|
|
|
/** Callback when close Alert */
|
|
|
|
onClose?: (event) => void;
|
|
|
|
/** Whether to show icon */
|
|
|
|
showIcon?: boolean;
|
|
|
|
style?: React.CSSProperties;
|
|
|
|
prefixCls?: string;
|
2016-08-03 14:54:10 +08:00
|
|
|
banner?: boolean;
|
2016-07-14 13:29:50 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export default class Alert extends React.Component<AlertProps, any> {
|
2016-03-28 23:21:47 +08:00
|
|
|
static defaultProps = {
|
|
|
|
prefixCls: 'ant-alert',
|
|
|
|
showIcon: false,
|
|
|
|
onClose() {},
|
|
|
|
type: 'info',
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-28 23:21:47 +08:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
2015-08-20 13:06:47 +08:00
|
|
|
closing: true,
|
2016-05-11 09:32:33 +08:00
|
|
|
closed: false,
|
2015-07-29 18:44:56 +08:00
|
|
|
};
|
2016-03-28 23:21:47 +08:00
|
|
|
}
|
|
|
|
handleClose = (e) => {
|
2015-11-25 17:35:49 +08:00
|
|
|
e.preventDefault();
|
2016-07-14 13:29:50 +08:00
|
|
|
let dom = ReactDOM.findDOMNode(this) as HTMLElement;
|
2016-02-17 18:04:42 +08:00
|
|
|
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
|
2016-02-17 18:04:42 +08:00
|
|
|
dom.style.height = `${dom.offsetHeight}px`;
|
2015-08-20 13:06:47 +08:00
|
|
|
|
|
|
|
this.setState({
|
2016-05-11 09:32:33 +08:00
|
|
|
closing: false,
|
2015-08-20 13:06:47 +08:00
|
|
|
});
|
2016-06-28 16:16:27 +08:00
|
|
|
this.props.onClose(e);
|
2016-03-28 23:21:47 +08:00
|
|
|
}
|
|
|
|
animationEnd = () => {
|
2015-07-27 20:53:08 +08:00
|
|
|
this.setState({
|
2015-08-20 13:06:47 +08:00
|
|
|
closed: true,
|
2016-05-11 09:32:33 +08:00
|
|
|
closing: true,
|
2015-07-27 20:53:08 +08:00
|
|
|
});
|
2016-03-28 23:21:47 +08:00
|
|
|
}
|
2015-08-20 13:06:47 +08:00
|
|
|
render() {
|
2015-11-29 16:55:43 +08:00
|
|
|
let {
|
2016-08-03 14:54:10 +08:00
|
|
|
closable, description, type, prefixCls, message, closeText, showIcon, banner,
|
2015-11-29 16:55:43 +08:00
|
|
|
} = this.props;
|
|
|
|
|
2016-08-03 14:54:10 +08:00
|
|
|
// banner模式默认有 Icon
|
|
|
|
showIcon = showIcon || banner;
|
|
|
|
// banner模式默认为警告
|
|
|
|
type = banner ? 'warning' : type;
|
|
|
|
|
2015-10-02 14:21:02 +08:00
|
|
|
let iconType = '';
|
2015-11-29 16:55:43 +08:00
|
|
|
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;
|
2016-03-28 14:38:25 +08:00
|
|
|
case 'warning':
|
2016-01-21 22:45:21 +08:00
|
|
|
iconType = 'exclamation-circle';
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
iconType = 'default';
|
2015-07-27 20:53:08 +08:00
|
|
|
}
|
2015-11-29 16:55:43 +08:00
|
|
|
|
2015-11-30 15:07:29 +08:00
|
|
|
// use outline icon in alert with description
|
|
|
|
if (!!description) {
|
|
|
|
iconType += '-o';
|
|
|
|
}
|
|
|
|
|
2015-11-29 16:55:43 +08:00
|
|
|
let alertCls = classNames({
|
|
|
|
[prefixCls]: true,
|
2016-02-17 18:04:42 +08:00
|
|
|
[`${prefixCls}-${type}`]: true,
|
|
|
|
[`${prefixCls}-close`]: !this.state.closing,
|
|
|
|
[`${prefixCls}-with-description`]: !!description,
|
|
|
|
[`${prefixCls}-no-icon`]: !showIcon,
|
2016-08-03 14:54:10 +08:00
|
|
|
[`${prefixCls}-banner`]: !!banner,
|
2015-11-29 16:55:43 +08:00
|
|
|
});
|
|
|
|
|
2015-11-30 15:07:29 +08:00
|
|
|
// closeable when closeText is assigned
|
2015-11-29 16:55:43 +08:00
|
|
|
if (closeText) {
|
|
|
|
closable = true;
|
2015-07-27 20:53:08 +08:00
|
|
|
}
|
2015-11-29 16:55:43 +08:00
|
|
|
|
|
|
|
return this.state.closed ? null : (
|
|
|
|
<Animate component=""
|
2016-01-05 14:42:06 +08:00
|
|
|
showProp="data-show"
|
2016-06-28 22:13:11 +08:00
|
|
|
transitionName={`${prefixCls}-slide-up`}
|
2016-06-06 13:54:10 +08:00
|
|
|
onEnd={this.animationEnd}
|
|
|
|
>
|
2015-11-29 16:55:43 +08:00
|
|
|
<div data-show={this.state.closing} className={alertCls}>
|
2015-11-29 18:42:57 +08:00
|
|
|
{showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
|
2016-02-17 18:04:42 +08:00
|
|
|
<span className={`${prefixCls}-message`}>{message}</span>
|
|
|
|
<span className={`${prefixCls}-description`}>{description}</span>
|
|
|
|
{closable ? <a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>
|
2015-11-29 18:42:57 +08:00
|
|
|
{closeText || <Icon type="cross" />}
|
2015-11-29 16:55:43 +08:00
|
|
|
</a> : null}
|
|
|
|
</div>
|
|
|
|
</Animate>
|
|
|
|
);
|
2015-07-27 20:53:08 +08:00
|
|
|
}
|
2016-03-28 23:21:47 +08:00
|
|
|
}
|