ant-design/components/alert/index.tsx

127 lines
3.3 KiB
TypeScript
Raw Normal View History

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';
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> {
static defaultProps = {
prefixCls: 'ant-alert',
showIcon: false,
onClose() {},
type: 'info',
2016-07-13 11:14:24 +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
};
}
handleClose = (e) => {
e.preventDefault();
2016-07-14 13:29:50 +08:00
let dom = ReactDOM.findDOMNode(this) as HTMLElement;
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({
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);
}
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
});
}
2015-08-20 13:06:47 +08:00
render() {
let {
2016-08-03 14:54:10 +08:00
closable, description, type, prefixCls, message, closeText, showIcon, banner,
} = 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 = '';
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
}
// 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,
2016-08-03 14:54:10 +08:00
[`${prefixCls}-banner`]: !!banner,
});
// 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={`${prefixCls}-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
}
}