fix: toast 样式调整,鸿蒙下样式修改

xiaoyatong · Jun 11, 2024 · 9d71e38 · 9d71e38
1 parent 7b99844
commit 9d71e38
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 68 deletions.
diff --git a/src/packages/toast/Notification.tsx b/src/packages/toast/Notification.tsx
@@ -134,7 +134,6 @@ export default class Notification extends React.PureComponent<
 
     const classes = classNames({
       'nut-toast-has-icon': icon,
-      [`nut-toast-${size}`]: true,
     })
     return (
       <>
@@ -150,10 +149,8 @@ export default class Notification extends React.PureComponent<
         >
           <div className={`${classPrefix} ${classes}`} id={`toast-${id}`}>
             <div
-              className={`${classPrefix}-inner ${classPrefix}-${position} ${contentClassName} ${wordBreak}`}
+              className={`${classPrefix}-inner ${classPrefix}-${position} ${contentClassName} ${classPrefix}-inner-${size} ${classPrefix}-inner-${wordBreak}`}
               style={{
-                left: '50%',
-                transform: 'translate(-50%, -50%)',
                 ...contentStyle,
               }}
             >

diff --git a/src/packages/toast/demo.taro.tsx b/src/packages/toast/demo.taro.tsx
@@ -32,20 +32,10 @@ const ToastDemo = () => {
     },
   })
 
-  function demoClass() {
-    if (Taro.getEnv() === 'WEB') {
-      return 'web'
-    }
-    if (Taro.getEnv() === 'HARMONY') {
-      return 'full'
-    }
-    return ''
-  }
-
   return (
     <>
       <Header />
-      <ScrollView className={`demo ${demoClass()}`}>
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated.basic}</View>
         <Demo1 />
         <View className="h2">{translated.toastFunction}</View>

diff --git a/src/packages/toast/demos/h5/demo1.tsx b/src/packages/toast/demos/h5/demo1.tsx
@@ -13,7 +13,8 @@ const Demo1 = () => {
         title="成功提示"
         onClick={() =>
           Toast.show({
-            content: '成功提示',
+            title: '成功提示',
+            content: '成功提示成功提示成功提示',
             icon: 'success',
           })
         }

diff --git a/src/packages/toast/demos/h5/demo5.tsx b/src/packages/toast/demos/h5/demo5.tsx
@@ -6,6 +6,7 @@ const Demo5 = () => {
     Toast.show({
       content: `Let's try ABCDEFGHIJKLMN here.`,
       wordBreak: mode,
+      contentStyle: { width: '200px' },
     })
   }
   return (

diff --git a/src/packages/toast/demos/taro/demo2.tsx b/src/packages/toast/demos/taro/demo2.tsx
@@ -9,8 +9,8 @@ const Demo5 = () => {
         title="函数调用"
         onClick={() => {
           Toast.show('test', {
-            title: '函数调用',
-            content: '函数调用',
+            title: '函数调用函数调用',
+            content: '函数调用函数调用函数调用函数调用函数',
             type: 'fail',
             duration: 2,
             position: 'center',

diff --git a/src/packages/toast/demos/taro/demo5.tsx b/src/packages/toast/demos/taro/demo5.tsx
@@ -19,6 +19,7 @@ const Demo5 = () => {
         onClose={() => {
           setShow(false)
         }}
+        contentStyle={{ width: '200px' }}
         wordBreak={state.wordBreak}
       />
       <Cell.Group>

diff --git a/src/packages/toast/toast.harmony.css b/src/packages/toast/toast.harmony.css
@@ -6,13 +6,13 @@
     -webkit-transform: rotate(360deg);
   }
 }
-.nut-overlay.nut-toast-overlay-default {
-  background: rgba(0, 0, 0, 0);
-  z-index: 1300;
-}
-
 .nut-toast {
+  /* #ifdef rn */
+  position: absolute;
+  /* #endif */
+  /* #ifndef rn */
   position: fixed;
+  /* #endif */
   left: 0;
   top: 0;
   display: flex;
@@ -21,20 +21,19 @@
   align-items: center;
   width: 100%;
   height: 100%;
-  text-align: center;
   pointer-events: none;
   z-index: 1300;
 }
-.nut-toast-small .nut-toast-inner {
-  font-size: 12px;
-}
-.nut-toast-large .nut-toast-inner {
-  font-size: 16px;
+.nut-toast-overlay-default {
+  background: rgba(0, 0, 0, 0);
+  z-index: 1300;
 }
 .nut-toast-inner {
+  position: absolute;
   display: flex;
   flex-direction: column;
-  position: absolute;
+  justify-content: center;
+  align-items: center;
   min-width: 30%;
   max-width: 95.7%;
   font-size: 14px;
@@ -45,16 +44,27 @@
   border-radius: 16px;
   color: #ffffff;
 }
-.nut-toast-inner.normal {
+.nut-toast-inner-normal {
   word-break: normal;
   word-wrap: normal;
 }
-.nut-toast-inner.break-word {
+.nut-toast-inner-break-word {
   word-break: normal;
   word-wrap: break-word;
 }
+.nut-toast-inner-small {
+  font-size: 12px;
+}
+.nut-toast-inner-large {
+  font-size: 16px;
+}
 .nut-toast-center {
+  /* #ifdef rn */
+  top: 38%;
+  /* #endif */
+  /* #ifndef rn */
   top: 48%;
+  /* #endif */
 }
 .nut-toast-bottom {
   top: 80%;
@@ -64,6 +74,7 @@
 }
 .nut-toast-text {
   color: #ffffff;
+  text-align: center;
 }
 .nut-toast-text-empty {
   margin-bottom: -8px;
@@ -72,15 +83,16 @@
   color: #ffffff;
   font-size: 16px;
   font-weight: 500;
+  text-align: center;
 }
-.nut-toast-has-icon .nut-toast-icon-wrapper {
+.nut-toast-icon-wrapper {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 8px;
 }
-.nut-toast-has-icon .nut-toast-icon-wrapper .nut-icon {
+.nut-toast-icon-wrapper .nut-icon {
   width: 24px;
   height: 24px;
 }

diff --git a/src/packages/toast/toast.scss b/src/packages/toast/toast.scss
@@ -8,13 +8,13 @@
   }
 }
 
-.nut-overlay.nut-toast-overlay-default {
-  background: rgba(0, 0, 0, 0);
-  z-index: 1300;
-}
-
 .nut-toast {
+  /* #ifdef rn */
+  position: absolute;
+  /* #endif */
+  /* #ifndef rn */
   position: fixed;
+  /* #endif */
   left: 0;
   top: 0;
   display: flex;
@@ -23,26 +23,20 @@
   align-items: center;
   width: 100%;
   height: 100%;
-  text-align: center;
   pointer-events: none;
   z-index: 1300;
 
-  &-small {
-    .nut-toast-inner {
-      font-size: $font-size-small;
-    }
-  }
-
-  &-large {
-    .nut-toast-inner {
-      font-size: $font-size-large;
-    }
+  &-overlay-default {
+    background: rgba(0, 0, 0, 0);
+    z-index: 1300;
   }
 
   &-inner {
+    position: absolute;
     display: flex;
     flex-direction: column;
-    position: absolute;
+    justify-content: center;
+    align-items: center;
     min-width: 30%;
     max-width: 95.7%;
     font-size: $toast-text-font-size;
@@ -53,19 +47,32 @@
     border-radius: $toast-inner-border-radius;
     color: $toast-font-color;
 
-    &.normal {
+    &-normal {
       word-break: normal;
       word-wrap: normal;
     }
 
-    &.break-word {
+    &-break-word {
       word-break: normal;
       word-wrap: break-word;
     }
+
+    &-small {
+      font-size: $font-size-small;
+    }
+
+    &-large {
+      font-size: $font-size-large;
+    }
   }
 
   &-center {
+    /* #ifdef rn */
+    top: var(--nutui-toast-inner-top, 38%);
+    /* #endif */
+    /* #ifndef rn */
     top: var(--nutui-toast-inner-top, 48%);
+    /* #endif */
   }
 
   &-bottom {
@@ -78,6 +85,7 @@
 
   &-text {
     color: #ffffff;
+    text-align: $toast-inner-text-align;
     &-empty {
       margin-bottom: -8px;
     }
@@ -87,20 +95,19 @@
     color: #ffffff;
     font-size: $toast-title-font-size;
     font-weight: 500;
+    text-align: $toast-inner-text-align;
   }
 
-  &-has-icon {
-    .nut-toast-icon-wrapper {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: 8px;
+  &-icon-wrapper {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 8px;
 
-      .nut-icon {
-        width: 24px;
-        height: 24px;
-      }
+    .nut-icon {
+      width: 24px;
+      height: 24px;
     }
   }
 

diff --git a/src/packages/toast/toast.taro.tsx b/src/packages/toast/toast.taro.tsx
@@ -183,13 +183,14 @@ export const Toast: FunctionComponent<
 
   const classes = classNames({
     'nut-toast-has-icon': icon,
-    [`nut-toast-${size}`]: true,
     'nut-toast-rtl': rtl,
   })
+
   const styles =
-    Taro.getEnv() !== 'RN'
+    Taro.getEnv() === 'HARMONY'
       ? { left: '50%', transform: 'translate(-50%, -50%)' }
       : null
+
   return (
     <>
       {innerVisible ? (
@@ -205,7 +206,7 @@ export const Toast: FunctionComponent<
         >
           <View className={`${classPrefix} ${classes}`} id={id}>
             <View
-              className={`${classPrefix}-inner ${classPrefix}-${position} ${contentClassName} ${wordBreak}`}
+              className={`${classPrefix}-inner ${classPrefix}-${position} ${contentClassName} ${classPrefix}-inner-${size} ${classPrefix}-inner-${wordBreak}`}
               style={{ ...styles, ...contentStyle }}
             >
               {hasIcon() ? (
@@ -214,7 +215,7 @@ export const Toast: FunctionComponent<
                 </View>
               ) : null}
               {title ? (
-                <View className={`${classPrefix}-title`}>{title}</View>
+                <Text className={`${classPrefix}-title`}>{title}</Text>
               ) : null}
               <Text
                 className={`${classPrefix}-text  ${content ? '' : `${classPrefix}-text-empty`}`}