feat(alert): 添加alert文档

components/Alert/Alert.tsx

@@ -14,23 +14,23 @@ export interface IAlertProps extends IBaseComponent {
   /**
    * 是否显示关闭按钮
    */
-  closable: boolean;
+  closable?: boolean;
   /**
    * 是否显示图标
    */
-  showIcon: boolean;
+  showIcon?: boolean;
   /**
    * 自定义图标
    */
-  icon: ReactNode;
+  icon?: ReactNode;
   /**
    * 标题
    */
   title: ReactNode | string;
   /**
    * onClose
    */
-  onClose: () => void;
+  onClose?: () => void;
 }
 
 export interface IAlertState {
@@ -49,7 +49,6 @@ export class Alert extends Component<IAlertProps, IAlertState> {
   };
 
   static defaultProps = {
-    type: 'info',
     showIcon: false,
     closable: false,
   };
@@ -100,10 +99,7 @@ export class Alert extends Component<IAlertProps, IAlertState> {
         unmountOnExit
         onExited={() => {
           if (this.props.onClose) {
-            // 延迟100ms是为了避免阻塞transition unmount
-            setTimeout(() => {
-              this.props.onClose();
-            }, 100);
+            this.props.onClose();
           }
         }}
       >

docs/pages/Alert/api.tsx

@@ -0,0 +1,43 @@
+export default [
+  {
+    title: "API",
+    json: [
+      {
+        props: "type",
+        intro: "提示类型",
+        type: "'success' | 'info' | 'warning' | 'error'",
+        defaultValue: "-",
+      },
+      {
+        props: "closable",
+        intro: "是否支持关闭",
+        type: "boolean",
+        defaultValue: "false",
+      },
+      {
+        props: "showIcon",
+        intro: "是否显示图标",
+        type: "boolean",
+        defaultValue: "false",
+      },
+      {
+        props: "icon",
+        intro: "自定义图标",
+        type: "ReactNode",
+        defaultValue: "-",
+      },
+      {
+        props: "title",
+        intro: "标题",
+        type: "ReactNode | string",
+        defaultValue: "-",
+      },
+      {
+        props: "onClose",
+        intro: "关闭回调",
+        type: "() => void",
+        defaultValue: "-",
+      },
+    ]
+  }
+]

docs/pages/Alert/demo/alertCustom.md

@@ -0,0 +1,3 @@
+#### 带图标
+可以通过`icon`设置图标，并且可以自定义`onClose`回调。
+

docs/pages/Alert/demo/alertCustom.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Alert, Icon } from '../../../../components/';
+
+export default function () {
+  return (
+    <div>
+      <Alert
+        type="success"
+        showIcon
+        title="成功提示文案"
+        closable
+        onClose={() => alert('关闭了')}
+      >
+        <span>成功提示文案成功提示文案成功提示文案成功提示文案成功提示文案成功提示文案成功提示文案成功提示文案成功提示文案成功提示文案成功提示文案成功提示文案</span>
+      </Alert>
+      <Alert
+        type="info"
+        icon={<Icon type="paper-airplane"/>}
+        showIcon
+        closable
+        title="自定义文案"
+      />
+      <Alert type="info" showIcon title="消息提示文案"/>
+      <Alert type="warning" showIcon title="警告提示文案"/>
+      <Alert type="error" showIcon title="错误提示文案"/>
+    </div>
+  )
+}

docs/pages/Alert/demo/alertDemo.md

@@ -0,0 +1,2 @@
+#### 基本使用
+简单的基本使用，一共四种Ttype，`success`、 `info`、`warning`、`error`。

docs/pages/Alert/demo/alertDemo.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Alert } from '../../../../components/';
+
+export default function () {
+  return (
+    <div>
+      <Alert type="success" title="成功提示文案"/>
+      <Alert type="info" title="消息提示文案"/>
+      <Alert type="warning" title="警告提示文案"/>
+      <Alert type="error" title="错误提示文案"/>
+    </div>
+  )
+}

docs/pages/Alert/index.md

@@ -0,0 +1,4 @@
+## Alert 提示
+用于页面提示用户一些需要关注的信息。
+
+## 代码演示

docs/pages/Alert/index.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Component } from 'react';
+import * as md from './index.md';
+import Markdown from '../../components/Markdown/';
+import CodeBox from '../../components/CodeBox/';
+import ApiBox from '../../components/ApiBox/';
+import Api from './api';
+
+import AlertDemo from './demo/alertDemo';
+import * as alertDemoMd from './demo/alertDemo.md';
+const alertDemoCode = require('!raw-loader!./demo/alertDemo');
+
+import AlertCustom from './demo/alertCustom';
+import * as alertCustomMd from './demo/alertCustom.md';
+const alertCustomCode = require('!raw-loader!./demo/alertCustom');
+
+export default class AlertPage extends Component {
+  render() {
+    return (
+      <div>
+        <Markdown text={md}/>
+        <CodeBox text={alertDemoMd} demo={<AlertDemo/>} code={alertDemoCode}/>
+
+        <CodeBox text={alertCustomMd} demo={<AlertCustom/>} code={alertCustomCode}/>
+        <ApiBox api={Api}/>
+      </div>
+    )
+  }
+};
+

docs/pages/menu.tsx

@@ -111,6 +111,10 @@ export default [
     name: '反馈',
     keyId: 'feedback',
     children: [
+      {
+        name: 'Alert(提示)',
+        keyId: 'alert',
+      },
       {
         name: 'Loading(加载中)',
         keyId: 'loading',

docs/pages/routes.tsx

@@ -28,6 +28,7 @@ import Progress from './Progress';
 import BackTop from './BackTop';
 import Divider from './Divider';
 import Ripple from './Ripple';
+import Alert from './Alert';
 
 export default [
   {
@@ -151,4 +152,8 @@ export default [
     component: Ripple,
     path: '/components/ripple',
   },
+  {
+    component: Alert,
+    path: '/components/alert',
+  },
 ];