From ac4358024cba1a18fb36b7918ac11db3cb83d822 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 10 Apr 2016 13:08:56 +0800
Subject: [PATCH] refactor notification code style

---
 components/notification/index.jsx  | 98 +++++++++++-------------------
 style/components/notification.less | 82 ++++++++++++-------------
 2 files changed, 75 insertions(+), 105 deletions(-)

diff --git a/components/notification/index.jsx b/components/notification/index.jsx
index 04089269c0..6e0aa4a807 100644
--- a/components/notification/index.jsx
+++ b/components/notification/index.jsx
@@ -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 = {
diff --git a/style/components/notification.less b/style/components/notification.less
index 220d4192a3..046cc959ad 100644
--- a/style/components/notification.less
+++ b/style/components/notification.less
@@ -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;
     }