From 41244d83def6283051cd547b5846627f095532bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=B0=E6=96=87?= Date: Sat, 11 Jul 2015 16:40:59 +0800 Subject: [PATCH 1/3] feat: add message component Conflicts: index.js style/components/index.less --- components/message/demo/error.md | 20 +++++++ components/message/demo/info.md | 20 +++++++ components/message/demo/success.md | 22 +++++++ components/message/index.jsx | 68 +++++++++++++++++++++ components/message/index.md | 1 + index.js | 3 +- package.json | 3 +- style/components/index.less | 1 + style/components/message.less | 96 ++++++++++++++++++++++++++++++ 9 files changed, 232 insertions(+), 2 deletions(-) create mode 100644 components/message/demo/error.md create mode 100644 components/message/demo/info.md create mode 100644 components/message/demo/success.md create mode 100644 style/components/message.less diff --git a/components/message/demo/error.md b/components/message/demo/error.md new file mode 100644 index 0000000000..26dd948dc1 --- /dev/null +++ b/components/message/demo/error.md @@ -0,0 +1,20 @@ +# 基本 + +- order: 1 + +全局提示 - 操作警告 + +--- + +````jsx + +var message = antd.message; +var error = function(){ + message.error('这是一条失败的提示这是一条失败的提示这是一条失败的提示'); +} + +React.render( + , document.getElementById('components-message-demo-error') +); + +```` \ No newline at end of file diff --git a/components/message/demo/info.md b/components/message/demo/info.md new file mode 100644 index 0000000000..6223fba2af --- /dev/null +++ b/components/message/demo/info.md @@ -0,0 +1,20 @@ +# 基本 + +- order: 2 + +全局提示 - 需求帮助 + +--- + +````jsx + +var message = antd.message; +var info = function(){ + message.info('这是一条普通的提示'); +} + +React.render( + , document.getElementById('components-message-demo-info') +); + +```` \ No newline at end of file diff --git a/components/message/demo/success.md b/components/message/demo/success.md new file mode 100644 index 0000000000..17b626cec9 --- /dev/null +++ b/components/message/demo/success.md @@ -0,0 +1,22 @@ + +# 基本 + +- order: 0 + +全局提示 - 操作成功提示 + +--- + +````jsx + +var message = antd.message; +var success = function(){ + message.success('这是一条成功的提示'); +} + +React.render( + , document.getElementById('components-message-demo-success') +); + +```` + diff --git a/components/message/index.jsx b/components/message/index.jsx index e69de29bb2..5695b31f99 100644 --- a/components/message/index.jsx +++ b/components/message/index.jsx @@ -0,0 +1,68 @@ +'use strict'; + +//import React from 'react'; +import Notification from 'rc-notification'; + +var message; + +var getMessageInstance = function(){ + message = Notification.newInstance({ + prefixCls: 'ant-message', + transitionName: 'move-up', + style: { + top: '16px' + } + }); + return message; +}; + + +module.exports = { + + info: function(m) { + if (!message) { + message = getMessageInstance(); + } + + message.notice({ + key: 'simpleMessage', + duration: 2.5, + style: { + left: '50%' + }, + content:
{m}
+ }); + }, + success: function(m) { + + if (!message) { + message = getMessageInstance(); + } + + message.notice({ + key: 'simpleMessage1', + transitionName: 'move-up', + duration: 2.5, + style: { + left: '50%' + }, + content:
{m}
+ }); + }, + error: function(m) { + + if (!message) { + message = getMessageInstance(); + } + + message.notice({ + key: 'simpleMessage2', + transitionName: 'move-up', + duration: 2.5, + style: { + left: '50%' + }, + content:
{m}
+ }); + } +}; diff --git a/components/message/index.md b/components/message/index.md index d97fc43b0c..144722a09b 100644 --- a/components/message/index.md +++ b/components/message/index.md @@ -2,6 +2,7 @@ - category: Components - chinese: 全局提示 +- order: 3 --- diff --git a/index.js b/index.js index e896593490..0ba737cd24 100644 --- a/index.js +++ b/index.js @@ -16,7 +16,8 @@ var antd = { Steps: require('./components/steps'), InputNumber: require('./components/input-number'), Switch: require('./components/switch'), - Collapse: require('./components/Collapse') + Collapse: require('./components/Collapse'), + message: require('./components/message') }; module.exports = antd; diff --git a/package.json b/package.json index e6a859a3a2..5b7feece11 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,8 @@ "rc-steps": "~1.1.3", "rc-switch": "~1.2.0", "rc-tabs": "~5.2.0", - "rc-tooltip": "~2.4.0" + "rc-tooltip": "~2.4.0", + "rc-notification": "~1.0.1" }, "devDependencies": { "css-animation": "~1.0.3", diff --git a/style/components/index.less b/style/components/index.less index 71cb926142..c4782f3612 100644 --- a/style/components/index.less +++ b/style/components/index.less @@ -17,3 +17,4 @@ @import "inputNumber"; @import "typography"; @import "collapse"; +@import "message"; diff --git a/style/components/message.less b/style/components/message.less new file mode 100644 index 0000000000..5006920dbd --- /dev/null +++ b/style/components/message.less @@ -0,0 +1,96 @@ +@prefixMessageClass: ant-message; + +.@{prefixMessageClass} { + font-size: 12px; + position: fixed; + z-index: 1000; + width: 100%; + + &-notice { + + width: auto; + vertical-align: middle; + position: absolute; + } + + &-notice-content{ + position: relative; + right: 50%; + padding: 8px 16px; + border-radius: 6px; + border: 1px solid #e9e9e9;; + box-shadow: 0 0 4px #d9d9d9; + background: #fff; + display: block; + } + + &-custom-content{ + height: 12px; + position: relative; + top: -8px; + } + + &-success { + color: #87d068; + } + + &-error { + color: #ff6600; + } + + &-info { + color: #2db7f5; + } + + .anticon{ + width: 16px; + height: 16px; + font-size: 16px; + margin-right: 8px; + } + + .fade-effect() { + animation-duration: 0.3s; + animation-fill-mode: both; + animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); + } + + &-fade-enter { + opacity: 0; + .fade-effect(); + animation-play-state: paused; + } + + &-fade-leave { + .fade-effect(); + animation-play-state: paused; + } + + &-fade-enter&-fade-enter-active { + animation-name: rcNotificationFadeIn; + animation-play-state: running; + } + + &-fade-leave&-fade-leave-active { + animation-name: rcDialogFadeOut; + animation-play-state: running; + } + + @keyframes rcNotificationFadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } + } + + @keyframes rcDialogFadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } + } +} From 69c2a4c2771be94b42dfde9a216c7339c818c768 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=84=E5=AF=82?= Date: Sat, 11 Jul 2015 11:27:10 +0800 Subject: [PATCH 2/3] chore: adjust coding style, delete useless less, modify md files. --- components/message/demo/costomTime.md | 22 ++++++++++++++ components/message/demo/error.md | 2 +- components/message/demo/info.md | 6 ++-- components/message/index.jsx | 33 ++++++++++++-------- components/message/index.md | 2 +- style/components/message.less | 44 --------------------------- 6 files changed, 48 insertions(+), 61 deletions(-) create mode 100644 components/message/demo/costomTime.md diff --git a/components/message/demo/costomTime.md b/components/message/demo/costomTime.md new file mode 100644 index 0000000000..78aea1af84 --- /dev/null +++ b/components/message/demo/costomTime.md @@ -0,0 +1,22 @@ + +# 基本 + +- order: 4 + +全局提示 - 操作成功提示,并自定义时长10s，默认时长2.5s + +--- + +````jsx + +var message = antd.message; +var success = function(){ + message.success('这是一条成功的提示,并将于10秒后消失',10); +} + +React.render( + , document.getElementById('components-message-demo-costomtime') +); + +```` + diff --git a/components/message/demo/error.md b/components/message/demo/error.md index 26dd948dc1..3a8f1348c7 100644 --- a/components/message/demo/error.md +++ b/components/message/demo/error.md @@ -2,7 +2,7 @@ - order: 1 -全局提示 - 操作警告 +全局提示 - 操作失败 --- diff --git a/components/message/demo/info.md b/components/message/demo/info.md index 6223fba2af..429e467efd 100644 --- a/components/message/demo/info.md +++ b/components/message/demo/info.md @@ -2,7 +2,7 @@ - order: 2 -全局提示 - 需求帮助 +全局提示 - 提醒 --- @@ -10,11 +10,11 @@ var message = antd.message; var info = function(){ - message.info('这是一条普通的提示'); + message.info('这是一条普通的提醒'); } React.render( - , document.getElementById('components-message-demo-info') + , document.getElementById('components-message-demo-info') ); ```` \ No newline at end of file diff --git a/components/message/index.jsx b/components/message/index.jsx index 5695b31f99..39182d8ff7 100644 --- a/components/message/index.jsx +++ b/components/message/index.jsx @@ -19,50 +19,59 @@ var getMessageInstance = function(){ module.exports = { - info: function(m) { + info: function(m, t) { if (!message) { message = getMessageInstance(); } - + t = t || 2.5; message.notice({ key: 'simpleMessage', - duration: 2.5, + duration: t, style: { left: '50%' }, - content:
{m}
+ content:
+ + {m} +
}); }, - success: function(m) { + success: function(m, t) { if (!message) { message = getMessageInstance(); } - + t = t || 2.5; message.notice({ key: 'simpleMessage1', transitionName: 'move-up', - duration: 2.5, + duration: t, style: { left: '50%' }, - content:
{m}
+ content:
+ + {m} +
}); }, - error: function(m) { + error: function(m, t) { if (!message) { message = getMessageInstance(); } - + t = t || 2.5; message.notice({ key: 'simpleMessage2', transitionName: 'move-up', - duration: 2.5, + duration: t, style: { left: '50%' }, - content:
{m}
+ content:
+ + {m} +
}); } }; diff --git a/components/message/index.md b/components/message/index.md index 144722a09b..139834420c 100644 --- a/components/message/index.md +++ b/components/message/index.md @@ -2,7 +2,7 @@ - category: Components - chinese: 全局提示 -- order: 3 +- order: 4 --- diff --git a/style/components/message.less b/style/components/message.less index 5006920dbd..3419b56dba 100644 --- a/style/components/message.less +++ b/style/components/message.less @@ -49,48 +49,4 @@ margin-right: 8px; } - .fade-effect() { - animation-duration: 0.3s; - animation-fill-mode: both; - animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); - } - - &-fade-enter { - opacity: 0; - .fade-effect(); - animation-play-state: paused; - } - - &-fade-leave { - .fade-effect(); - animation-play-state: paused; - } - - &-fade-enter&-fade-enter-active { - animation-name: rcNotificationFadeIn; - animation-play-state: running; - } - - &-fade-leave&-fade-leave-active { - animation-name: rcDialogFadeOut; - animation-play-state: running; - } - - @keyframes rcNotificationFadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } - } - - @keyframes rcDialogFadeOut { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } - } } From 4095e3eccbd4244e7e50a8730ee4105236857095 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=84=E5=AF=82?= Date: Fri, 10 Jul 2015 22:59:50 +0800 Subject: [PATCH 3/3] feat: add message component --- components/message/demo/costomTime.md | 1 - components/message/demo/success.md | 1 - components/message/index.md | 1 + style/components/message.less | 1 - 4 files changed, 1 insertion(+), 3 deletions(-) diff --git a/components/message/demo/costomTime.md b/components/message/demo/costomTime.md index 78aea1af84..3bb76d9e08 100644 --- a/components/message/demo/costomTime.md +++ b/components/message/demo/costomTime.md @@ -1,4 +1,3 @@ - # 基本 - order: 4 diff --git a/components/message/demo/success.md b/components/message/demo/success.md index 17b626cec9..27423ec013 100644 --- a/components/message/demo/success.md +++ b/components/message/demo/success.md @@ -1,4 +1,3 @@ - # 基本 - order: 0 diff --git a/components/message/index.md b/components/message/index.md index 139834420c..503dc1b175 100644 --- a/components/message/index.md +++ b/components/message/index.md @@ -2,6 +2,7 @@ - category: Components - chinese: 全局提示 + - order: 4 --- diff --git a/style/components/message.less b/style/components/message.less index 3419b56dba..395c6f49bb 100644 --- a/style/components/message.less +++ b/style/components/message.less @@ -48,5 +48,4 @@ font-size: 16px; margin-right: 8px; } - }