notification half

components/notification/demo/basic.md

+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+var Notification = require('antd/lib/notification');
+
+if(!Notification.notification){
+  Notification.notification = Notification.newInstance({
+    prefixCls: 'ant-notification',
+    style: {
+      top: 0,
+      right: 0
+    }
+  });
+}
+
+function openNotification() {
+  var args = {
+    title: '这是标题',
+    message: '这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案这是提示框的文案'
+  }; 
+  Notification.show(args);
+}
+
+React.render(
+  <div>
+    <button className='ant-btn ant-btn-primary' onClick={openNotification}>基本</button>
+  </div>, document.getElementById('components-notification-demo-basic'));
+````
\ No newline at end of file

components/notification/demo/with-btn.md

+# 关闭触发回调函数
+
+- order: 2
+
+点击关闭按钮触发回调函数。
+
+---
+
+````jsx
+var Notification = require('antd/lib/notification');
+
+if(!Notification.notification){
+  Notification.notification = Notification.newInstance({
+    prefixCls: 'ant-notification',
+    style: {
+      top: 0,
+      right: 0
+    }
+  });
+}
+
+function callback() {
+  alert('我要关闭了！');
+}
+
+function openNotification() {
+  var args = {
+    title: '这是标题',
+    message: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
+    btn: true,
+    callback: callback
+  }; 
+  Notification.show(args);
+}
+
+React.render(
+  <div>
+    <button className='ant-btn ant-btn-primary' onClick={openNotification}>关闭按钮触发回调函数</button>
+  </div>, document.getElementById('components-notification-demo-with-btn'));
+````
\ No newline at end of file

components/notification/demo/with-icon.md

+# 带有Icon的通知提醒框
+
+- order: 1
+
+通知提醒框左侧有Icon图标。
+
+---
+
+````jsx
+var Notification = require('antd/lib/notification');
+
+if(!Notification.notification){
+  Notification.notification = Notification.newInstance({
+    prefixCls: 'ant-notification',
+    style: {
+      top: 0,
+      right: 0
+    }
+  });
+}
+
+function openNotification() {
+  var args = {
+    title: '这是标题',
+    message: '这是提示框的文案这是提示框示框的文案这是提示是提示框的文案这是提示框的文案',
+    icon: true
+  }; 
+  Notification.show(args);
+}
+
+React.render(
+  <div>
+    <button className='ant-btn ant-btn-primary' onClick={openNotification}>带有Icon的通知提醒框</button>
+  </div>, document.getElementById('components-notification-demo-with-icon'));
+````
\ No newline at end of file

components/notification/index.jsx

+import Notification from 'rc-notification';
+
+function close(key, callback) {
+  Notification.notification.removeNotice(key);
+  if (callback) {
+    callback();
+  }
+}
+
+Notification.show = function (args) {
+  if (args.icon) {
+    let prefixCls = 'ant-notification-notice-content-icon-';
+    Notification.notification.notice({
+      content: <div>
+        <i className={'anticon anticon-question-circle-o ' + prefixCls + 'icon'}></i>
+        <p className={prefixCls + 'title'}>{args.title}</p>
+        <p className={prefixCls + 'message'}>{args.message}</p>
+      </div>,
+      duration: null,
+      closable: true,
+      onClose: args.callback,
+      style: {}
+    });
+  } else {
+    if (!args.btn) {
+      let prefixCls = 'ant-notification-notice-content-';
+      Notification.notification.notice({
+        content: <div>
+          <p className={prefixCls + 'title'}>{args.title}</p>
+          <p className={prefixCls + 'message'}>{args.message}</p>
+        </div>,
+        duration: null,
+        closable: true,
+        onClose: args.callback,
+        style: {}
+      });
+    } else {
+      let prefixCls = 'ant-notification-notice-content-';
+      let key = 'manual' + new Date().getTime();
+      Notification.notification.notice({
+        content: <div>
+          <p className={prefixCls + 'title'}>{args.title}</p>
+          <p className={prefixCls + 'message'}>{args.message}</p>
+          <button onClick={close.bind(null, key, args.callback)} className={'ant-btn ant-btn-primary ant-btn-sm ' + prefixCls + 'btn'}>立即操作
+          </button>
+        </div>,
+        duration: null,
+        closable: true,
+        onClose: args.callback,
+        key: key,
+        style: {}
+      });
+    }
+  }
+};
+
+export default Notification;

components/notification/index.md

 # Notification
 
 - category: Components
-- chinese: 系统通知框
+- chinese: 通知提醒框
 
 ---
+
+全局展示通知提醒信息。
+
+## 何时使用
+
+- 当系统需要在窗口右上角显示通知提醒信息时。
+
+## API
+
+| 参数        | 说明                                            | 类型         | 默认值 |
+|----------- |---------------------------------------------    | ----------- |--------|
+| title      | 通知提醒内容，必选                                 | String      | 无     |
+| message    | 通知提醒内容，必选                                 | String      | 无     |
+| callback   | 关闭时触发的回调函数                               | Function     | 无    |
+| icon       | 框的左侧有Icon                                   | Boolean      | false |
+| btn        | 自定义关闭按钮                                    | Boolean      | false |

index.js

@@ -23,7 +23,8 @@ var antd = {
   message: require('./components/message'),
   Slider: require('./components/slider'),
   Radio: require('./components/radio'),
-  RadioGroup: require('./components/radio/group')
+  RadioGroup: require('./components/radio/group'),
+  Notification: require('./components/notification')
 };
 
 module.exports = antd;

package.json

@@ -42,7 +42,7 @@
     "rc-dropdown": "~1.1.1",
     "rc-input-number": "~2.0.1",
     "rc-menu": "~3.4.2",
-    "rc-notification": "~1.0.1",
+    "rc-notification": "~1.1.0",
     "rc-pagination": "~1.1.0",
     "rc-progress": "~1.0.0",
     "rc-radio": "~2.0.0",

style/components/index.less

@@ -24,3 +24,4 @@
 @import "divider";
 @import "slider";
 @import "radio";
+@import "notification";

style/components/notification.less

+@import "../mixins/index";
+
+@notificationPrefixCls: ~"@{css-prefix}notification";
+
+@notificationPosition: 24px;
+@noticeWidth: 335px;
+@noticePadding: 16px;
+@noticeMarginTop: 10px;
+
+.@{notificationPrefixCls} {
+  position: fixed;
+  z-index: 1000;
+  width: @noticeWidth;
+  margin: (@notificationPosition - @noticeMarginTop) @notificationPosition 0 0;
+
+  &-notice {
+    padding: @noticePadding;
+    border-radius: @border-radius-base;
+    box-shadow: 0 0 4px @legend-border-color;
+    background: @body-background;
+    line-height: 1.5;
+    position: relative;
+    margin-top: @noticeMarginTop;
+    overflow: hidden;
+
+    &-content{
+      &-title{
+        font-size: 14px;
+        color: @text-color;
+        margin-bottom: 4px;
+      }
+      &-message{
+        font-size: @font-size-base;
+        color: @legend-color;
+      }
+    }
+
+    &-content-icon{
+      position: relative;
+      &-title{
+        font-size: 14px;
+        color: @text-color;
+        margin-left: 51px;
+        margin-bottom: 4px;
+      }
+      &-message{
+        margin-left: 51px;
+        font-size: @font-size-base;
+        color: @legend-color;
+      }
+      &-icon{
+        position: absolute;
+        left: 16px;
+        top: 50%;
+        margin-top: -26px;
+        font-size: 35px;
+        color: @primary-color;
+      }
+    }
+
+    &-close-x:after{
+      content: "\e61e";
+      font-family: "anticon";
+      cursor: pointer;
+      .iconfont-size-under-12px(10px);
+    }
+
+    &-close {
+      position: absolute;
+      right: 16px;
+      top: 10px;
+      color: #999;
+      outline: none;
+    }
+
+
+    &-content-btn{
+      float: right;
+      margin-top: 16px;
+    }
+  }
+
+  &-fade-enter {
+    left: @noticeWidth;
+    opacity: 0;
+    transition: all .3s ease-in-out;
+  }
+
+  &-fade-enter&-fade-enter-active {
+    opacity: 1;
+    left: 0;
+  }
+
+  &-fade-leave {
+    opacity: 1;
+    margin-top: @noticeMarginTop;
+    padding-top: @noticePadding;
+    padding-bottom: @noticePadding;
+    max-height: 100px;
+    transition: all .3s ease-in-out;
+  }
+
+  &-fade-leave&-fade-leave-active {
+    opacity: 0;
+    max-height: 0;
+    margin-top: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
\ No newline at end of file