From ebc4aac58e06724d9286aa55510728670947b183 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Tue, 4 Aug 2015 15:16:10 +0800 Subject: [PATCH] fix notification --- components/notification/demo/top.md | 8 +-- components/notification/demo/with-icon.md | 52 +++++-------------- components/notification/index.jsx | 63 +++++++++++++++-------- components/notification/index.md | 33 ++++++++++-- style/components/notification.less | 4 +- 5 files changed, 88 insertions(+), 72 deletions(-) diff --git a/components/notification/demo/top.md b/components/notification/demo/top.md index 612b0e8926..e86c50e41c 100644 --- 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( , document.getElementById('components-notification-demo-top')); -```` \ No newline at end of file +```` diff --git a/components/notification/demo/with-icon.md b/components/notification/demo/with-icon.md index 227bd4ef76..5bf4c94c7e 100644 --- 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(
- - - - + + + +
, document.getElementById('components-notification-demo-with-icon')); -```` \ No newline at end of file +```` diff --git a/components/notification/index.jsx b/components/notification/index.jsx index a98dcbb2ad..6b045fca04 100644 --- 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:
+

{args.message}

+

{args.description}

, duration: null, @@ -53,6 +57,7 @@ function notice(args) { getNotificationInstance().notice({ content:

{args.message}

+

{args.description}

, duration: null, @@ -64,6 +69,7 @@ function notice(args) { getNotificationInstance().notice({ content:

{args.message}

+

{args.description}

{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; diff --git a/components/notification/index.md b/components/notification/index.md index 2c18608f37..227a2b4c97 100644 --- 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 | diff --git a/style/components/notification.less b/style/components/notification.less index 1d5f4baf2b..92a4dd7464 100644 --- 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; } -} \ No newline at end of file +}