Browse Source

Add loading message

pull/246/head
afc163 9 years ago
parent
commit
1e5271491e
  1. 20
      components/message/demo/loading.md
  2. 34
      components/message/index.jsx
  3. 1
      components/message/index.md
  4. 1
      style/components/dialog/Dialog.less
  5. 2
      style/components/message.less

20
components/message/demo/loading.md

@ -0,0 +1,20 @@
# 加载中
- order: 4
进行全局 loading,异步自行移除。
---
````jsx
var message = antd.message;
var success = function() {
var hide = message.loading('正在执行中...', 0);
// 异步手动移除
setTimeout(hide, 2500);
};
React.render(<button className="ant-btn" onClick={success}>显示加载中...</button>
, document.getElementById('components-message-demo-loading'));
````

34
components/message/index.jsx

@ -4,6 +4,7 @@ import Notification from 'rc-notification';
let defaultDuration = 1.5;
let top;
let messageInstance;
let key = 1;
function getMessageInstance() {
messageInstance = messageInstance || Notification.newInstance({
@ -16,31 +17,44 @@ function getMessageInstance() {
return messageInstance;
}
function notice(content, duration = defaultDuration, type) {
function notice(content, duration = defaultDuration, type, onClose) {
let iconClass = ({
'info': 'anticon-info-circle ant-message-info',
'success': 'anticon-check-circle ant-message-success',
'error': 'anticon-exclamation-circle ant-message-error'
'error': 'anticon-exclamation-circle ant-message-error',
'loading': 'anticon-loading ant-message-loading'
})[type];
getMessageInstance().notice({
let instance = getMessageInstance();
instance.notice({
key: key,
duration: duration,
style: {},
content: <div className="ant-message-custom-content">
<i className={'anticon ' + iconClass}></i>
<span>{content}</span>
</div>
</div>,
onClose: onClose
});
return (function() {
let target = key++;
return function() {
instance.removeNotice(target);
};
})();
}
export default {
info(content, duration) {
notice(content, duration, 'info');
info(content, duration, onClose) {
return notice(content, duration, 'info', onClose);
},
success(content, duration) {
notice(content, duration, 'success');
success(content, duration, onClose) {
return notice(content, duration, 'success', onClose);
},
error(content, duration) {
notice(content, duration, 'error');
error(content, duration, onClose) {
return notice(content, duration, 'error', onClose);
},
loading(content, duration, onClose) {
return notice(content, duration, 'loading', onClose);
},
config(options) {
if (options.top) {

1
components/message/index.md

@ -18,6 +18,7 @@
- `message.success(content, duration)`
- `message.error(content, duration)`
- `message.info(content, duration)`
- `message.loading(content, duration)`
组件提供了三个静态方法,参数如下:

1
style/components/dialog/Dialog.less

@ -4,6 +4,7 @@
left: -9999px;
top: -9999px;
z-index: 1000;
min-height: 240px;
&-wrap * {
box-sizing: border-box;

2
style/components/message.less

@ -36,7 +36,7 @@
color: @error-color;
}
&-info {
&-info, &-loading {
color: @primary-color;
}

Loading…
Cancel
Save