feat(toast): v14

src/config.json

@@ -882,6 +882,7 @@
           "sort": 1,
           "show": true,
           "taro": true,
+          "v14": true,
           "author": "VickyYe"
         }
       ]

src/packages/toast/Notification.tsx

@@ -138,7 +138,16 @@
         >
           <div className={`${classPrefix} ${classes}`} id={`toast-${id}`}>
             <div
-              className={`${classPrefix}-inner ${classPrefix}-${position} ${contentClassName} ${classPrefix}-inner-${size} ${classPrefix}-inner-${wordBreak}`}
+              className={classNames(
+                `${classPrefix}-inner`,
+                `${classPrefix}-${position}`,
+                contentClassName,
+                `${classPrefix}-inner-${size}`,
+                `${classPrefix}-inner-${wordBreak}`,
+                {
+                  [`${classPrefix}-inner-descrption`]: content,
+                }
+              )}
               style={{
                 ...contentStyle,
               }}
@@ -147,11 +156,9 @@
               {title ? (
                 <div className={`${classPrefix}-title`}>{title}</div>
               ) : null}
-              <span
-                className={`${classPrefix}-text ${content ? '' : `${classPrefix}-text-empty`}`}
-              >
-                {content}
-              </span>
+              {content ? (
+                <span className={`${classPrefix}-text`}>{content}</span>
+              ) : null}
             </div>
           </div>
         </Overlay>

src/packages/toast/demos/h5/demo1.tsx

@@ -8,7 +8,14 @@ const Demo1 = () => {
         title="文字提示"
         onClick={() => Toast.show('网络失败，请稍后再试~')}
       />
-      <Cell title="标题提示" onClick={() => Toast.show('标题提示')} />
+      <Cell
+        title="标题提示"
+        onClick={() =>
+          Toast.show({
+            title: '成功提示',
+          })
+        }
+      />
       <Cell
         title="成功提示"
         onClick={() =>
@@ -23,7 +30,7 @@ const Demo1 = () => {
         title="失败提示"
         onClick={() =>
           Toast.show({
-            content: '失败提示',
+            title: '失败提示',
             icon: 'fail',
           })
         }
@@ -32,7 +39,7 @@ const Demo1 = () => {
         title="警告提示"
         onClick={() =>
           Toast.show({
-            content: '警告提示',
+            title: '警告提示',
             icon: 'warn',
           })
         }
@@ -41,7 +48,7 @@ const Demo1 = () => {
         title="加载提示"
         onClick={() =>
           Toast.show({
-            content: '加载提示',
+            title: '加载提示',
             icon: 'loading',
           })
         }

src/packages/toast/demos/taro/demo1.tsx

@@ -2,7 +2,13 @@ import React, { useState } from 'react'
 import { Cell, Toast } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
-  const [state, setState] = useState({
+  const [state, setState] = useState<{
+    content?: string
+    type: string
+    duration?: number
+    icon?: string
+    title?: string
+  }>({
     content: 'toast',
     type: 'text',
     duration: 2,
@@ -13,10 +19,10 @@ const Demo1 = () => {
 
   const openToast = (
     type: string,
-    content: string,
+    title?: string,
     duration?: number,
     icon?: string,
-    title?: string
+    content?: string
   ) => {
     const changeState = Object.assign(state, {
       type,
@@ -43,27 +49,24 @@ const Demo1 = () => {
       <Cell
         title="文字提示"
         onClick={() => {
-          openToast('text', '网络失败，请稍后再试~')
+          setState({
+            type: 'text',
+            content: '网络失败，请稍后再试~',
+          })
           setShowToast(true)
         }}
       />
       <Cell
         title="标题提示"
         onClick={() => {
-          openToast(
-            'text',
-            '网络失败，请稍后再试~',
-            undefined,
-            undefined,
-            '标题提示'
-          )
+          openToast('text', '标题提示')
           setShowToast(true)
         }}
       />
       <Cell
         title="成功提示"
         onClick={() => {
-          openToast('success', '成功提示成功提示成功提示')
+          openToast('success', '成功提示')
           setShowToast(true)
         }}
       />

src/packages/toast/doc.en-US.md

@@ -100,7 +100,7 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-toast-text-font-size | the content font-size of toast | `14px` |
 | \--nutui-toast-font-color | the text color of toast | `#fff` |
 | \--nutui-toast-inner-top | the custom height of content | `50%` |
-| \--nutui-toast-inner-padding | the padding value of toast content | `24px 30px` |
+| \--nutui-toast-inner-padding | the padding value of toast content | `13px 16px` |
 | \--nutui-toast-inner-bg-color | the background color of toast content | `$color-mask` |
-| \--nutui-toast-inner-border-radius | the border-radius value of toast content | `12px` |
+| \--nutui-toast-inner-border-radius | the border-radius value of toast content | `$radius-xl` |
 | \--nutui-toast-inner-text-align | the text alignment of toast | `center` |

src/packages/toast/doc.md

@@ -98,7 +98,7 @@ Toast.config({ className: 'demo', contentClassName: 'content-demo' })
 | \--nutui-toast-text-font-size | `toast`内容文字大小 | `14px` |
 | \--nutui-toast-font-color | `toast`文字颜色 | `#fff` |
 | \--nutui-toast-inner-top | `toast`内容区自定义高度 | `50%` |
-| \--nutui-toast-inner-padding | `toast`内容区padding值 | `24px 30px` |
+| \--nutui-toast-inner-padding | `toast`内容区padding值 | `13px 16px` |
 | \--nutui-toast-inner-bg-color | `toast`内容区背景色 | `$color-mask` |
-| \--nutui-toast-inner-border-radius | `toast`内容区圆角值 | `12px` |
+| \--nutui-toast-inner-border-radius | `toast`内容区圆角值 | `$radius-xl` |
 | \--nutui-toast-inner-text-align | `toast`内容区文本对齐方式 | `center` |

src/packages/toast/doc.taro.md

@@ -94,7 +94,7 @@ ToastOptions 是 ToastProps 的子集，包含如下属性：msg, title, type, d
 | \--nutui-toast-text-font-size | `toast`内容文字大小 | `14px` |
 | \--nutui-toast-font-color | `toast`文字颜色 | `#fff` |
 | \--nutui-toast-inner-top | `toast`内容区自定义高度 | `50%` |
-| \--nutui-toast-inner-padding | `toast`内容区padding值 | `24px 30px` |
+| \--nutui-toast-inner-padding | `toast`内容区padding值 | `13px 16px` |
 | \--nutui-toast-inner-bg-color | `toast`内容区背景色 | `$color-mask` |
-| \--nutui-toast-inner-border-radius | `toast`内容区圆角值 | `12px` |
+| \--nutui-toast-inner-border-radius | `toast`内容区圆角值 | `$radius-xl` |
 | \--nutui-toast-inner-text-align | `toast`内容区文本对齐方式 | `center` |

src/packages/toast/doc.zh-TW.md

@@ -1,7 +1,5 @@
 # Toast 吐司
 
-#
-
 用於輕提示。
 
 ### 引入
@@ -99,7 +97,7 @@ Toast.config({ className: 'demo', contentClassName: 'content-demo' })
 | \--nutui-toast-text-font-size | `toast`內容文字大小 | `14px` |
 | \--nutui-toast-font-color | `toast`文字顏色 | `#fff` |
 | \--nutui-toast-inner-top | `toast`內容區自定義高度 | `50%` |
-| \--nutui-toast-inner-padding | `toast`內容區padding值 | `24px 30px` |
+| \--nutui-toast-inner-padding | `toast`內容區padding值 | `13px 16px` |
 | \--nutui-toast-inner-bg-color | `toast`內容區背景色 | `$color-mask` |
-| \--nutui-toast-inner-border-radius | `toast`內容區圓角值 | `12px` |
+| \--nutui-toast-inner-border-radius | `toast`內容區圓角值 | `$radius-xl` |
 | \--nutui-toast-inner-text-align | `toast`內容區文本對齊方式 | `center` |

src/packages/toast/toast.scss

@@ -52,8 +52,9 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    min-width: 30%;
-    max-width: 95.7%;
+    min-width: 96px;
+    max-width: 60%;
+    // max-width: 224px;
     font-size: $toast-text-font-size;
     text-align: $toast-inner-text-align;
     padding: $toast-inner-padding;
@@ -62,6 +63,11 @@
     border-radius: $toast-inner-border-radius;
     color: $toast-font-color;
 
+    &-descrption {
+      max-width: 68.2%;
+      // max-width: 256px;
+    }
+
     &-normal {
       word-break: normal;
       word-wrap: normal;
@@ -101,19 +107,18 @@
   &-text {
     color: #ffffff;
     text-align: $toast-inner-text-align;
-    &-empty {
-      margin-bottom: -8px;
-    }
+    line-height: 20px;
   }
 
   &-title {
     color: #ffffff;
     font-size: $toast-title-font-size;
     font-weight: 500;
     text-align: $toast-inner-text-align;
+    line-height: 22px;
   }
 
-  &-icon {
+  .nut-icon {
     width: 24px;
     height: 24px;
     color: #ffffff;
@@ -124,7 +129,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 8px;
+    margin: 3px 0 5px;
     color: #ffffff;
 
     &-icon {

src/packages/toast/toast.taro.tsx

@@ -28,7 +28,6 @@ export interface ToastProps extends BasicComponent {
   lockScroll: boolean
   size: ToastSize
   icon: React.ReactNode
-  iconSize: string
   maskClassName?: string
   content: React.ReactNode
   contentClassName?: string
@@ -37,10 +36,6 @@ export interface ToastProps extends BasicComponent {
   visible: boolean
   wordBreak?: ToastWordBreak
   onClose: () => void
-  /**
-   * @deprecated Please use `content` prop instead.
-   */
-  msg: React.ReactNode
 }
 
 const defaultProps = {
@@ -51,9 +46,7 @@ const defaultProps = {
   title: '',
   size: 'base', // 设置字体大小，默认base,可选large\small\base
   icon: null,
-  iconSize: '20',
   content: '',
-  msg: '',
   type: 'text',
   closeOnOverlayClick: false,
   lockScroll: false,
@@ -78,9 +71,7 @@ export const Toast: FunctionComponent<
       position,
       contentStyle,
       icon,
-      iconSize,
       content,
-      msg,
       duration,
       type,
       title,
@@ -165,12 +156,10 @@ export const Toast: FunctionComponent<
     }
 
     return {
-      success: (
-        <Success className="nut-toast-icon" color="#ffffff" size={iconSize} />
-      ),
-      fail: <Failure color="#ffffff" size={iconSize} />,
-      warn: <Tips color="#ffffff" size={iconSize} />,
-      loading: <Loading color="#ffffff" size={iconSize} />,
+      success: <Success />,
+      fail: <Failure />,
+      warn: <Tips />,
+      loading: <Loading />,
     }[type]
   }
 
@@ -198,7 +187,16 @@ export const Toast: FunctionComponent<
         >
           <View className={`${classPrefix} ${classes}`} id={id}>
             <View
-              className={`${classPrefix}-inner ${classPrefix}-${position} ${contentClassName} ${classPrefix}-inner-${size} ${classPrefix}-inner-${wordBreak}`}
+              className={classNames(
+                `${classPrefix}-inner`,
+                `${classPrefix}-${position}`,
+                contentClassName,
+                `${classPrefix}-inner-${size}`,
+                `${classPrefix}-inner-${wordBreak}`,
+                {
+                  [`${classPrefix}-inner-descrption`]: content,
+                }
+              )}
               style={{ ...styles, ...contentStyle }}
             >
               {hasIcon() ? (
@@ -209,11 +207,9 @@ export const Toast: FunctionComponent<
               {title ? (
                 <Text className={`${classPrefix}-title`}>{title}</Text>
               ) : null}
-              <Text
-                className={`${classPrefix}-text  ${content ? '' : `${classPrefix}-text-empty`}`}
-              >
-                {content || msg}
-              </Text>
+              {content ? (
+                <Text className={`${classPrefix}-text`}>{content}</Text>
+              ) : null}
             </View>
           </View>
         </Overlay>

src/styles/variables.scss

@@ -901,11 +901,11 @@ $toast-inner-text-align: var(--nutui-toast-inner-text-align, center) !default;
 $toast-title-font-size: var(--nutui-toast-title-font-size, 16px) !default;
 $toast-text-font-size: var(--nutui-toast-text-font-size, 14px) !default;
 $toast-font-color: var(--nutui-toast-font-color, $white) !default;
-$toast-inner-padding: var(--nutui-toast-inner-padding, 16px 24px) !default;
+$toast-inner-padding: var(--nutui-toast-inner-padding, 13px 16px) !default;
 $toast-inner-bg-color: var(--nutui-toast-inner-bg-color, $color-mask) !default;
 $toast-inner-border-radius: var(
   --nutui-toast-inner-border-radius,
-  16px
+  $radius-xl
 ) !default;
 $toast-inner-top: var(--nutui-toast-inner-top, 50%) !default;