test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

refactor notification code style

Browse Source
This commit is contained in:
afc163 2016-04-10 13:08:56 +08:00
parent 76935c9630
commit ac4358024c
2 changed files with 75 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
components/notification/index.jsx
View File

@ -5,7 +5,7 @@ import warning from 'warning';
let defaultTop = 24;
let notificationInstance;
let defaultDuration = 4.5;
let defaultDuration = 45;
function getNotificationInstance() {
if (notificationInstance) {
@ -22,76 +22,48 @@ function getNotificationInstance() {
}
function notice(args) {
const prefixCls = args.prefixCls || 'ant-notification-notice';
let duration;
if (args.duration === undefined) {
duration = defaultDuration;
} else {
duration = args.duration;
}
if (args.icon) {
let prefixCls = ' ant-notification-notice-content-icon-';
let iconType = '';
switch (args.icon) {
case 'success':
iconType = 'check-circle-o';
break;
case 'info':
iconType = 'info-circle-o';
break;
case 'error':
iconType = 'cross-circle-o';
break;
case 'warning':
iconType = 'exclamation-circle-o';
break;
default:
iconType = 'info-circle';
}
getNotificationInstance().notice({
content: <div>
<Icon className={`${prefixCls}icon-${args.icon}${prefixCls}icon`} type={iconType} />
<div className={`${prefixCls}message`}>{args.message}</div>
<div className={`${prefixCls}description`}>{args.description}</div>
</div>,
duration,
closable: true,
onClose: args.onClose,
key: args.key,
style: {}
});
} else {
let prefixCls = 'ant-notification-notice-content-';
if (!args.btn) {
getNotificationInstance().notice({
content: <div>
<div className={`${prefixCls}message`}>{args.message}</div>
<div className={`${prefixCls}description`}>{args.description}</div>
</div>,
duration,
closable: true,
onClose: args.onClose,
key: args.key,
style: {}
});
} else {
getNotificationInstance().notice({
content: <div>
<div className={`${prefixCls}message`}>{args.message}</div>
<div className={`${prefixCls}description`}>{args.description}</div>
<span className={`${prefixCls}btn`}>
{args.btn}
</span>
</div>,
duration,
closable: true,
onClose: args.onClose,
key: args.key,
style: {}
});
}
let iconType = '';
switch (args.icon) {
case 'success':
iconType = 'check-circle-o';
break;
case 'info':
iconType = 'info-circle-o';
break;
case 'error':
iconType = 'cross-circle-o';
break;
case 'warning':
iconType = 'exclamation-circle-o';
break;
default:
iconType = 'info-circle';
}
getNotificationInstance().notice({
content: (
<div className={`${prefixCls}-content ${args.icon ? `${prefixCls}-with-icon` : ''}`}>
{args.icon ? <Icon className={`${prefixCls}-icon ${prefixCls}-icon-${args.icon}`} type={iconType} /> : null}
<div className={`${prefixCls}-message`}>{args.message}</div>
<div className={`${prefixCls}-description`}>{args.description}</div>
{args.btn ? <span className={`${prefixCls}-btn`}>{args.btn}</span> : null}
</div>
),
duration,
closable: true,
onClose: args.onClose,
key: args.key,
style: {},
});
}
const api = {

82
style/components/notification.less
View File

@ -23,50 +23,48 @@
margin-bottom: @notice-margin-bottom;
overflow: hidden;
&-content {
&-message {
font-size: 14px;
color: @text-color;
margin-bottom: 4px;
}
&-description {
font-size: @font-size-base;
color: @legend-color;
}
&-message {
font-size: 14px;
color: @text-color;
margin-bottom: 4px;
}
&-content-icon {
position: relative;
&-message {
font-size: 14px;
color: @text-color;
margin-left: 51px;
margin-bottom: 4px;
}
&-description {
margin-left: 51px;
font-size: @font-size-base;
color: @legend-color;
}
&-icon {
position: absolute;
left: 16px;
top: 50%;
margin-top: -17px;
font-size: 34px;
&-description {
font-size: @font-size-base;
color: @legend-color;
}
&-success {
color: @success-color;
}
&-info {
color: @primary-color;
}
&-warning {
color: @warning-color;
}
&-error {
color: @error-color;
}
&-with-icon &-message {
font-size: 14px;
color: @text-color;
margin-left: 51px;
margin-bottom: 4px;
}
&-with-icon &-description {
margin-left: 51px;
font-size: @font-size-base;
color: @legend-color;
}
&-icon {
position: absolute;
left: 16px;
top: 50%;
margin-top: -17px;
font-size: 34px;
&-success {
color: @success-color;
}
&-info {
color: @primary-color;
}
&-warning {
color: @warning-color;
}
&-error {
color: @error-color;
}
}
@ -85,7 +83,7 @@
outline: none;
}
&-content-btn {
&-btn {
float: right;
margin-top: 16px;
}