fix notification

9 years ago · ebc4aac58e
5 changed files with 88 additions and 72 deletions
--- a/components/notification/demo/top.md
+++ b/components/notification/demo/top.md
@ -8,19 +8,19 @@

 ````jsx
 var notification = require('antd/lib/notification');
+notification.config({
+  top: 100
+});

 var openNotification = function() {
  var args = {
    message: "这是标题",
    description: "这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案",
  };
-  notification.config({
-    top:100
-  });
  notification.open(args);
 };

 React.render(
  <button className='ant-btn ant-btn-primary' onClick={openNotification}>距离顶部100px</button>
 , document.getElementById('components-notification-demo-top'));
-````
+````
--- a/components/notification/demo/with-icon.md
+++ b/components/notification/demo/with-icon.md
@ -9,47 +9,21 @@
 ````jsx
 var notification = require('antd/lib/notification');

-var openNotificationSuccess = function() {
-  var args = {
-    message: "这是标题",
-    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
-    icon: "success"
-  }; 
-  notification.open(args);
-};
-
-var openNotificationInfo = function() {
-  var args = {
-    message: "这是标题",
-    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
-    icon: "info"
-  }; 
-  notification.open(args);
-};
-
-var openNotificationWarn = function() {
-  var args = {
-    message: "这是标题",
-    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
-    icon: "warn"
-  }; 
-  notification.open(args);
-};
-
-var openNotificationError = function() {
-  var args = {
-    message: "这是标题",
-    description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案",
-    icon: "error"
-  }; 
-  notification.open(args);
+var openNotificationWithIcon = function(type) {
+  return function(){
+    var args = {
+      message: "这是标题",
+      description: "这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案"
+    };
+    notification[type](args);
+  };
 };

 React.render(<div>
-  <button className="ant-btn ant-btn-primary" onClick={openNotificationSuccess}>Success</button>
-  <button className="ant-btn ant-btn-primary" onClick={openNotificationInfo}>Info</button>
-  <button className="ant-btn ant-btn-primary" onClick={openNotificationWarn}>Warn</button>
-  <button className="ant-btn ant-btn-primary" onClick={openNotificationError}>Error</button>
+  <button className="ant-btn ant-btn-primary" onClick={openNotificationWithIcon('success')}>Success</button>
+  <button className="ant-btn ant-btn-primary" onClick={openNotificationWithIcon('info')}>Info</button>
+  <button className="ant-btn ant-btn-primary" onClick={openNotificationWithIcon('warn')}>Warn</button>
+  <button className="ant-btn ant-btn-primary" onClick={openNotificationWithIcon('error')}>Error</button>
  </div>
 , document.getElementById('components-notification-demo-with-icon'));
-````
+````
--- a/components/notification/index.jsx
+++ b/components/notification/index.jsx
@ -1,4 +1,6 @@
 import Notification from 'rc-notification';
+import assign from 'object-assign';
+import React from 'react';

 let top = 24;

@ -6,12 +8,12 @@ var notificationInstance;

 function getNotificationInstance() {
  notificationInstance = notificationInstance || Notification.newInstance({
-    prefixCls: 'ant-notification',
-    style: {
-      top: top,
-      right: 0
-    }
-  });
+      prefixCls: 'ant-notification',
+      style: {
+        top: top,
+        right: 0
+      }
+    });
  return notificationInstance;
 }

@ -20,26 +22,28 @@ function notice(args) {
    let prefixCls = ' ant-notification-notice-content-icon-';
    let iconClass = 'anticon anticon-';
    switch (args.icon) {
-      case 'success':
-        iconClass += 'check-circle-o';
-        break;
-      case 'info':
-        iconClass += 'info-circle-o';
-        break;
-      case 'error':
-        iconClass += 'exclamation-circle-o';
-        break;
-      case 'warn':
-        iconClass += 'question-circle-o';
-        break;
-      default:
-        iconClass += 'info-circle';
+    case 'success':
+      iconClass += 'check-circle-o';
+      break;
+    case 'info':
+      iconClass += 'info-circle-o';
+      break;
+    case 'error':
+      iconClass += 'exclamation-circle-o';
+      break;
+    case 'warn':
+      iconClass += 'question-circle-o';
+      break;
+    default:
+      iconClass += 'info-circle';
    }

    getNotificationInstance().notice({
      content: <div>
        <i className={iconClass + prefixCls + 'icon-' + args.icon + prefixCls + 'icon'}></i>
+
        <p className={prefixCls + 'message'}>{args.message}</p>
+
        <p className={prefixCls + 'description'}>{args.description}</p>
      </div>,
      duration: null,
@ -53,6 +57,7 @@ function notice(args) {
      getNotificationInstance().notice({
        content: <div>
          <p className={prefixCls + 'message'}>{args.message}</p>
+
          <p className={prefixCls + 'description'}>{args.description}</p>
        </div>,
        duration: null,
@ -64,6 +69,7 @@ function notice(args) {
      getNotificationInstance().notice({
        content: <div>
          <p className={prefixCls + 'message'}>{args.message}</p>
+
          <p className={prefixCls + 'description'}>{args.description}</p>
          <span className={prefixCls + 'btn'}>
            {args.btn}
@ -79,14 +85,27 @@ function notice(args) {
  }
 }

-export default {
+var api = {
  open(args){
    notice(args);
  },
  close(key){
-    notificationInstance.removeNotice(key);
+    if (notificationInstance) {
+      notificationInstance.removeNotice(key);
+    }
  },
  config(options) {
    top = isNaN(options.top) ? 24 : options.top;
  }
 };
+
+['success', 'info', 'warn', 'error'].forEach((type)=> {
+  api[type] = (args) => {
+    var newArgs = assign({}, args, {
+      icon: type
+    });
+    return api.open(newArgs);
+  };
+});
+
+export default api;
--- a/components/notification/index.md
+++ b/components/notification/index.md
@ -13,11 +13,34 @@

 ## API

+- `notification.success(config)`
+- `notification.error(config)`
+- `notification.info(config)`
+- `notification.warn(config)`
+- `notification.open(config)`
+- `notification.close(key: String)`
+
+config 参数如下：
+
 | 参数        | 说明                                            | 类型         | 默认值 |
 |----------- |---------------------------------------------    | ----------- |--------|
-| message    | 通知提醒标题，必选                                 | String      | 无     |
-| description | 通知提醒内容，必选                                | String      | 无     |
-| icon       | 通知提醒框的左侧Icon，默认没有，有四种选择`success`、`info`、`warn`、`error` | String | 无     |
-| btn        | 自定义关闭按钮                                    | String      | 无     |
-| top        | 通知提醒框距离顶部的距离，只在初始化时设置有效，默认`24`           | Number      | 24     |
+| message    | 通知提醒标题，必选                                 | React.Element|String      | 无     |
+| description | 通知提醒内容，必选                                | React.Element|String      | 无     |
+| btn        | 自定义关闭按钮                                    | React.Element      | 无     |
+| key        | 当前通知唯一标志                               | String      | 无     |
 | onClose    | 点击默认关闭按钮时触发的回调函数                     | Function    | 无     |
+
+
+还提供了一个全局配置方法：
+
+- `notification.config(options)`
+
+```js
+message.config({
+  top: 100
+});
+```
+
+| 参数       | 说明               | 类型                       | 默认值       |
+|------------|--------------------|----------------------------|--------------|
+| top        | 消息距离顶部的位置 | Number                     | 24px         |
--- a/style/components/notification.less
+++ b/style/components/notification.less
@ -83,7 +83,7 @@
      color: #999;
      outline: none;
    }
-    
+
    &-content-btn {
      float: right;
      margin-top: 16px;
@ -117,4 +117,4 @@
    padding-top: 0;
    padding-bottom: 0;
  }
-}
+}