From 6998f66eb5595d83e36131704c921dad35420301 Mon Sep 17 00:00:00 2001
From: Hughen <446370503@163.com>
Date: Fri, 9 Mar 2018 15:02:13 +0800
Subject: [PATCH] feat: add afterClose to Alert (#9448)

- add afterClose to Alert, in in order to achieve smoothly unmount.
---
 .../__tests__/__snapshots__/demo.test.js.snap | 28 +++++++++++
 components/alert/demo/smooth-closed.md        | 48 +++++++++++++++++++
 components/alert/index.tsx                    |  3 ++
 3 files changed, 79 insertions(+)
 create mode 100644 components/alert/demo/smooth-closed.md

diff --git a/components/alert/__tests__/__snapshots__/demo.test.js.snap b/components/alert/__tests__/__snapshots__/demo.test.js.snap
index d10aa94677..f75929f603 100644
--- a/components/alert/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/alert/__tests__/__snapshots__/demo.test.js.snap
@@ -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
diff --git a/components/alert/demo/smooth-closed.md b/components/alert/demo/smooth-closed.md
new file mode 100644
index 0000000000..af5720b9c9
--- /dev/null
+++ b/components/alert/demo/smooth-closed.md
@@ -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);
+````
diff --git a/components/alert/index.tsx b/components/alert/index.tsx
index 6893618f5d..bd93a2aca0 100755
--- a/components/alert/index.tsx
+++ b/components/alert/index.tsx
@@ -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 {