feat: add afterClose to Alert (#9448)

- add afterClose to Alert, in in order to achieve smoothly unmount.
This commit is contained in:
Hughen 2018-03-09 15:02:13 +08:00 committed by 偏右
parent e142bce0a0
commit 6998f66eb5
3 changed files with 79 additions and 0 deletions

View File

@ -366,6 +366,34 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
</div>
`;
exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
<div>
<div
class="ant-alert ant-alert-success ant-alert-no-icon"
data-show="true"
>
<span
class="ant-alert-message"
>
Alert Message Text
</span>
<span
class="ant-alert-description"
/>
<a
class="ant-alert-close-icon"
>
<i
class="anticon anticon-cross"
/>
</a>
</div>
<p>
placeholder text here
</p>
</div>
`;
exports[`renders ./components/alert/demo/style.md correctly 1`] = `
<div>
<div

View File

@ -0,0 +1,48 @@
---
order: 7
title:
zh-CN: 平滑地卸载
en-US: Smoothly Unmount
---
## zh-CN
平滑、自然的卸载提示
## en-US
Smoothly and unaffectedly unmount Alert.
````jsx
import { Alert } from 'antd';
class App extends React.Component {
state = {
visiable: true,
}
handleClose = () => {
this.setState({ visiable: false });
}
render() {
return (
<div>
{
this.state.visiable ? (
<Alert
message="Alert Message Text"
type="success"
closable
afterClose={this.handleClose}
/>
) : null
}
<p>placeholder text here</p>
</div>
);
}
}
ReactDOM.render(
<App />
, mountNode);
````

View File

@ -21,6 +21,8 @@ export interface AlertProps {
description?: React.ReactNode;
/** Callback when close Alert */
onClose?: React.MouseEventHandler<HTMLAnchorElement>;
/** Trigger when animation ending of Alert */
afterClose?: Function;
/** Whether to show icon */
showIcon?: boolean;
iconType?: string;
@ -56,6 +58,7 @@ export default class Alert extends React.Component<AlertProps, any> {
closed: true,
closing: true,
});
(this.props.afterClose || noop)();
}
render() {
let {