test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 03:29:39 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

fix notification

Browse Source
This commit is contained in:
yiminghe 2015-08-04 15:16:10 +08:00
parent 5c9fdbaeb6
commit ebc4aac58e
5 changed files with 88 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/notification/demo/top.md
View File

@ -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'));
````
````

52
components/notification/demo/with-icon.md
View File

@ -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'));
````
````

63
components/notification/index.jsx
View File

@ -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;

33
components/notification/index.md
View File

@ -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 |

4
style/components/notification.less
View File

@ -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;
}
}
}