feat(Message): configable message icon type

alibaba-fusion · Apr 10, 2019 · 7a80c13 · 7a80c13
1 parent 57e21fa
commit 7a80c13
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 21 deletions.
diff --git a/src/message/main.scss b/src/message/main.scss
@@ -33,7 +33,8 @@
                 $message-success-color-bg-inline,
                 $message-success-color-border-inline,
                 $message-border-radius,
-                none
+                none,
+                $message-success-icon-content
             );
         }
         &.#{$css-prefix}addon {
@@ -45,7 +46,8 @@
                 transparent,
                 transparent,
                 $message-border-radius,
-                none
+                none,
+                $message-success-icon-content
             );
         }
         &.#{$css-prefix}toast {
@@ -57,7 +59,8 @@
                 $message-success-color-bg-toast,
                 $message-success-color-border-toast,
                 $message-border-radius-toast,
-                $message-shadow-toast
+                $message-shadow-toast,
+                $message-success-icon-content
             );
         }
     }
@@ -72,7 +75,8 @@
                 $message-warning-color-bg-inline,
                 $message-warning-color-border-inline,
                 $message-border-radius,
-                none
+                none,
+                $message-warning-icon-content
             );
         }
         &.#{$css-prefix}addon {
@@ -84,7 +88,8 @@
                 transparent,
                 transparent,
                 $message-border-radius,
-                none
+                none,
+                $message-warning-icon-content
             );
         }
         &.#{$css-prefix}toast {
@@ -96,7 +101,8 @@
                 $message-warning-color-bg-toast,
                 $message-warning-color-border-toast,
                 $message-border-radius-toast,
-                $message-shadow-toast
+                $message-shadow-toast,
+                $message-warning-icon-content
             );
         }
     }
@@ -111,7 +117,8 @@
                 $message-error-color-bg-inline,
                 $message-error-color-border-inline,
                 $message-border-radius,
-                none
+                none,
+                $message-error-icon-content
             );
         }
         &.#{$css-prefix}addon {
@@ -123,7 +130,8 @@
                 transparent,
                 transparent,
                 $message-border-radius,
-                none
+                none,
+                $message-error-icon-content
             );
         }
         &.#{$css-prefix}toast {
@@ -135,7 +143,8 @@
                 $message-error-color-bg-toast,
                 $message-error-color-border-toast,
                 $message-border-radius-toast,
-                $message-shadow-toast
+                $message-shadow-toast,
+                $message-error-icon-content
             );
         }
     }
@@ -150,7 +159,8 @@
                 $message-notice-color-bg-inline,
                 $message-notice-color-border-inline,
                 $message-border-radius,
-                none
+                none,
+                $message-notice-icon-content
             );
         }
         &.#{$css-prefix}addon {
@@ -162,7 +172,8 @@
                 transparent,
                 transparent,
                 $message-border-radius,
-                none
+                none,
+                $message-notice-icon-content
             );
         }
         &.#{$css-prefix}toast {
@@ -174,7 +185,8 @@
                 $message-notice-color-bg-toast,
                 $message-notice-color-border-toast,
                 $message-border-radius-toast,
-                $message-shadow-toast
+                $message-shadow-toast,
+                $message-notice-icon-content
             );
         }
     }
@@ -189,7 +201,8 @@
                 $message-help-color-bg-inline,
                 $message-help-color-border-inline,
                 $message-border-radius,
-                none
+                none,
+                $message-help-icon-content
             );
         }
         &.#{$css-prefix}addon {
@@ -201,7 +214,8 @@
                 transparent,
                 transparent,
                 $message-border-radius,
-                none
+                none,
+                $message-help-icon-content
             );
         }
         &.#{$css-prefix}toast {
@@ -213,7 +227,8 @@
                 $message-help-color-bg-toast,
                 $message-help-color-border-toast,
                 $message-border-radius-toast,
-                $message-shadow-toast
+                $message-shadow-toast,
+                $message-help-icon-content
             );
         }
     }
@@ -228,7 +243,8 @@
                 $message-loading-color-bg-inline,
                 $message-loading-color-border-inline,
                 $message-border-radius,
-                none
+                none,
+                $message-loading-icon-content
             );
         }
         &.#{$css-prefix}addon {
@@ -240,7 +256,8 @@
                 transparent,
                 transparent,
                 $message-border-radius,
-                none
+                none,
+                $message-loading-icon-content
             );
         }
         &.#{$css-prefix}toast {
@@ -252,7 +269,8 @@
                 $message-loading-color-bg-toast,
                 $message-loading-color-border-toast,
                 $message-border-radius-toast,
-                $message-shadow-toast
+                $message-shadow-toast,
+                $message-loading-icon-content
             );
         }
     }

diff --git a/src/message/message.jsx b/src/message/message.jsx
@@ -148,7 +148,7 @@ class Message extends Component {
         /* eslint-enable */
         const { visible } = this.state;
         const messagePrefix = `${prefix}message`;
-        const iconType = icon || TYPE_MAPS[type];
+
         const classes = classNames({
             [messagePrefix]: true,
             [`${prefix}message-${type}`]: type,
@@ -177,7 +177,11 @@ class Message extends Component {
                         <Icon type="close" />
                     </a>
                 ) : null}
-                <Icon className={`${messagePrefix}-symbol`} type={iconType} />
+                <Icon
+                    className={`${messagePrefix}-symbol ${!icon &&
+                        `${messagePrefix}-symbol-icon`}`}
+                    type={icon}
+                />
                 {title ? (
                     <div className={`${messagePrefix}-title`}>{title}</div>
                 ) : null}

diff --git a/src/message/scss/mixin.scss b/src/message/scss/mixin.scss
@@ -53,7 +53,8 @@
     $bgColor,
     $borderColor,
     $corner,
-    $shadow
+    $shadow,
+    $icon
 ) {
     background-color: $bgColor;
     border-color: $borderColor;
@@ -69,6 +70,12 @@
     .#{$css-prefix}message-symbol {
         color: $iconColor;
     }
+    .#{$css-prefix}message-symbol-icon::before {
+        content: $icon;
+        @if ($icon == $message-loading-icon-content) {
+            animation: loadingCircle 1s infinite linear;
+        }
+    }
 
     @if ($shape == 'inline') {
         border-style: $message-border-style;

diff --git a/src/message/scss/variable.scss b/src/message/scss/variable.scss
@@ -390,3 +390,27 @@ $message-close-icon-color: $color-text1-2 !default;
 /// icon
 /// @namespace statement/hover/close
 $message-hover-close-icon-color: $color-text1-3 !default;
+/// success icon
+/// @namespace statement/normal
+/// @type icon
+$message-success-icon-content: $icon-content-success !default;
+/// warning icon
+/// @namespace statement/normal
+/// @type icon
+$message-warning-icon-content: $icon-content-warning !default;
+/// error icon
+/// @namespace statement/normal
+/// @type icon
+$message-error-icon-content: $icon-content-error !default;
+/// notice icon
+/// @namespace statement/normal
+/// @type icon
+$message-notice-icon-content: $icon-content-prompt !default;
+/// help icon
+/// @namespace statement/normal
+/// @type icon
+$message-help-icon-content: $icon-content-help !default;
+/// help icon
+/// @namespace statement/normal
+/// @type icon
+$message-loading-icon-content: $icon-content-loading !default;