feat(Toast): add type classNames (youzan#4785)

chenjiahan · web-flow · commit ce8d04fc406f · 2019-10-19T16:45:34.000+08:00
diff --git a/src/toast/Toast.js b/src/toast/Toast.js
@@ -81,25 +81,24 @@ export default createComponent({
 
     onAfterLeave() {
       this.$emit('closed');
-    }
-  },
-
-  render() {
-    const { type, icon, message, iconPrefix, loadingType } = this;
+    },
 
-    const hasIcon = icon || (type === 'success' || type === 'fail');
+    genIcon() {
+      const { icon, type, iconPrefix, loadingType } = this;
+      const hasIcon = icon || (type === 'success' || type === 'fail');
 
-    function ToastIcon() {
       if (hasIcon) {
         return <Icon class={bem('icon')} classPrefix={iconPrefix} name={icon || type} />;
       }
 
       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
@@ -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
@@ -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,15 +20,15 @@ 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>
 </div>
 `;
 
 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>

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,8 @@`
`35`	`35`	`}`
`36`	`36`	`}`
`37`	`37`
`38`		`- &--text {`
	`38`	`+ &--text,`
	`39`	`+ &--html {`
`39`	`40`	`width: fit-content;`
`40`	`41`	`min-width: @toast-text-min-width;`
`41`	`42`	`min-height: unset;`