From ce8d04fc406fc7cbf598febcd15c472b4609d263 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 19 Oct 2019 16:45:34 +0800
Subject: [PATCH] feat(Toast): add type classNames (#4785)

---
 src/toast/Toast.js                            | 28 +++++++++----------
 src/toast/index.less                          |  3 +-
 .../test/__snapshots__/index.spec.js.snap     |  6 ++--
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/toast/Toast.js b/src/toast/Toast.js
index fbd31541b..e26e7ed59 100644
--- a/src/toast/Toast.js
+++ b/src/toast/Toast.js
@@ -81,15 +81,12 @@ export default createComponent({
 
     onAfterLeave() {
       this.$emit('closed');
-    }
-  },
+    },
 
-  render() {
-    const { type, icon, message, iconPrefix, loadingType } = this;
+    genIcon() {
+      const { icon, type, iconPrefix, loadingType } = this;
+      const hasIcon = icon || (type === 'success' || type === 'fail');
 
-    const hasIcon = icon || (type === 'success' || type === 'fail');
-
-    function ToastIcon() {
       if (hasIcon) {
         return <Icon class={bem('icon')} classPrefix={iconPrefix} name={icon || type} />;
       }
@@ -97,9 +94,11 @@ export default createComponent({
       if (type === 'loading') {
         return <Loading class={bem('loading')} type={loadingType} />;
       }
-    }
+    },
+
+    genMessage() {
+      const { type, message } = this;
 
-    function Message() {
       if (!isDef(message) || message === '') {
         return;
       }
@@ -110,7 +109,9 @@ export default createComponent({
 
       return <div class={bem('text')}>{message}</div>;
     }
+  },
 
+  render() {
     return (
       <transition
         name={this.transition}
@@ -119,14 +120,11 @@ export default createComponent({
       >
         <div
           vShow={this.value}
-          class={[
-            bem([this.position, { text: !hasIcon && type !== 'loading' }]),
-            this.className
-          ]}
+          class={[bem([this.position, { [this.type]: !this.icon }]), this.className]}
           onClick={this.onClick}
         >
-          {ToastIcon()}
-          {Message()}
+          {this.genIcon()}
+          {this.genMessage()}
         </div>
       </transition>
     );
diff --git a/src/toast/index.less b/src/toast/index.less
index 5ee9b898a..27d713ead 100644
--- a/src/toast/index.less
+++ b/src/toast/index.less
@@ -35,7 +35,8 @@
     }
   }
 
-  &--text {
+  &--text,
+  &--html {
     width: fit-content;
     min-width: @toast-text-min-width;
     min-height: unset;
diff --git a/src/toast/test/__snapshots__/index.spec.js.snap b/src/toast/test/__snapshots__/index.spec.js.snap
index 56be7321c..e497f9e0e 100644
--- a/src/toast/test/__snapshots__/index.spec.js.snap
+++ b/src/toast/test/__snapshots__/index.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`create a forbidClick toast 1`] = `
-<div class="van-toast van-toast--middle" style="z-index: 2001;" name="van-fade"><i class="van-icon van-icon-success van-toast__icon">
+<div class="van-toast van-toast--middle van-toast--success" style="z-index: 2001;" name="van-fade"><i class="van-icon van-icon-success van-toast__icon">
     <!----></i></div>
 `;
 
@@ -20,7 +20,7 @@ exports[`icon-prefix prop 1`] = `
 `;
 
 exports[`show html toast 1`] = `
-<div class="van-toast van-toast--middle van-toast--text" style="z-index: 2004;" name="van-fade">
+<div class="van-toast van-toast--middle van-toast--html" style="z-index: 2004;" name="van-fade">
   <div class="van-toast__text">
     <div>Message</div>
   </div>
@@ -28,7 +28,7 @@ exports[`show html toast 1`] = `
 `;
 
 exports[`show loading toast 1`] = `
-<div class="van-toast van-toast--middle" style="z-index: 2003;" name="van-fade">
+<div class="van-toast van-toast--middle van-toast--loading" style="z-index: 2003;" name="van-fade">
   <div class="van-loading van-loading--circular van-toast__loading"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
   <div class="van-toast__text">Message</div>
 </div>