feat: Toast 鸿蒙适配 (#2299)

* feat: toast rn * feat: toast rn * feat: toast 适配 RN & 鸿蒙 * fix: adapted * fix: toast 样式调整,鸿蒙下样式修改 * fix: demo for break all * fix: 简化逻辑 * fix: 调整样式 * feat: tag icon * fix: 删除rn目录 * fix: 不处理其他组件哈 * fix: 简化代码,修改单测 * fix: 修订背景色样式 * fix: 放出icon * fix: 区分web和taro --------- Co-authored-by: xiaoyatong <hanyuxingint@sina.cn>
jdf2e · Nov 7, 2024 · 9160682 · 9160682
1 parent a291f58
commit 9160682
Show file tree

Hide file tree

Showing 17 changed files with 261 additions and 264 deletions.
diff --git a/package.json b/package.json
@@ -104,7 +104,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@nutui/icons-react": "^1.0.5",
-    "@nutui/icons-react-taro": "^1.0.5",
+    "@nutui/icons-react-taro": "2.0.0-beta.0",
     "@nutui/jdesign-icons-react-taro": "1.0.6-beta.2",
     "@nutui/touch-emulator": "^1.0.0",
     "@react-spring/web": "~9.6.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/config.json b/src/config.json
@@ -873,7 +873,7 @@
           "author": "Ymm0008"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Toast",
           "type": "component",
           "tarodoc": true,

diff --git a/src/packages/overlay/overlay.harmony.css b/src/packages/overlay/overlay.harmony.css
@@ -1,5 +1,10 @@
 .nut-overlay {
+  /* #ifdef rn */
   position: absolute;
+  /* #endif */
+  /* #ifndef rn */
+  position: fixed;
+  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
@@ -19,9 +24,6 @@
 .nut-overflow-hidden {
   overflow: hidden !important;
 }
-.nut-overflow-hidden .taro_page {
-  overflow: hidden !important;
-}
 
 @keyframes nut-fade-in {
   0% {

diff --git a/src/packages/toast/Notification.tsx b/src/packages/toast/Notification.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import classNames from 'classnames'
-import { Check, Loading, Failure, Tips } from '@nutui/icons-react'
+import { Success, Loading, Failure, Tips } from '@nutui/icons-react'
 import { render, unmount } from '@/utils/render'
 import Overlay from '@/packages/overlay/index'
 import { BasicComponent } from '@/utils/typings'
@@ -83,23 +83,12 @@ export default class Notification extends React.PureComponent<
   renderIcon() {
     const { icon } = this.props
     if (typeof icon === 'string') {
-      let iconNode = null
-      switch (icon) {
-        case 'success':
-          iconNode = <Check />
-          break
-        case 'loading':
-          iconNode = <Loading className="nut-icon-loading" />
-          break
-        case 'fail':
-          iconNode = <Failure />
-          break
-        case 'warn':
-          iconNode = <Tips />
-          break
-        default:
-          break
-      }
+      const iconNode = {
+        success: <Success />,
+        fail: <Failure />,
+        warn: <Tips />,
+        loading: <Loading className="nut-icon-loading" />,
+      }[icon]
       return <p className={`${classPrefix}-icon-wrapper`}>{iconNode}</p>
     }
     return icon
@@ -134,7 +123,6 @@ export default class Notification extends React.PureComponent<
 
     const classes = classNames({
       'nut-toast-has-icon': icon,
-      [`nut-toast-${size}`]: true,
     })
     return (
       <>
@@ -150,14 +138,20 @@ export default class Notification extends React.PureComponent<
         >
           <div className={`${classPrefix} ${classes}`} id={`toast-${id}`}>
             <div
-              className={`${classPrefix}-inner ${classPrefix}-${position} ${contentClassName} ${wordBreak}`}
-              style={contentStyle}
+              className={`${classPrefix}-inner ${classPrefix}-${position} ${contentClassName} ${classPrefix}-inner-${size} ${classPrefix}-inner-${wordBreak}`}
+              style={{
+                ...contentStyle,
+              }}
             >
               {this.renderIcon()}
               {title ? (
                 <div className={`${classPrefix}-title`}>{title}</div>
               ) : null}
-              <span className={`${classPrefix}-text`}>{content}</span>
+              <span
+                className={`${classPrefix}-text ${content ? '' : `${classPrefix}-text-empty`}`}
+              >
+                {content}
+              </span>
             </div>
           </div>
         </Overlay>

diff --git a/src/packages/toast/__test__/toast.spec.tsx b/src/packages/toast/__test__/toast.spec.tsx
@@ -62,7 +62,9 @@ test('test toast props', async () => {
     fireEvent.click(getByTestId('emit-click'))
     expect(onClickToast).toBeCalled()
     expect(document.querySelector('.nut-toast-text')?.innerHTML).toBe('文案')
-    expect(document.querySelector('.nut-toast')).toHaveClass('nut-toast-small')
+    expect(document.querySelector('.nut-toast-inner')).toHaveClass(
+      'nut-toast-inner-small'
+    )
     expect(document.querySelector('.nut-toast')).toHaveClass(
       'nut-toast-has-icon'
     )
@@ -83,7 +85,9 @@ test('event show-success-toast', async () => {
   await waitFor(() => {
     fireEvent.click(getByTestId('emit-click'))
     expect(onClickToast).toBeCalled()
-    expect(document.querySelector('.nut-icon')).toHaveClass('nut-icon-Check')
+    expect(document.querySelector('.nut-icon')).toHaveClass(
+      'nut-icon nut-icon-Success'
+    )
     expect(document.querySelector('.nut-toast-text')?.innerHTML).toBe('success')
   })
 })

diff --git a/src/packages/toast/demo.taro.tsx b/src/packages/toast/demo.taro.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import { Toast } from '@nutui/nutui-react-taro'
 import { ScrollView, View } from '@tarojs/components'
+import { Toast } from '@nutui/nutui-react-taro'
 import Header from '@/sites/components/header'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Demo1 from './demos/taro/demo1'
@@ -32,20 +32,10 @@ const ToastDemo = () => {
     },
   })
 
-  function demoClass() {
-    if (web()) {
-      return 'web'
-    }
-    if (!harmonyAndRn()) {
-      return 'full'
-    }
-    return ''
-  }
-
   return (
     <>
       <Header />
-      <ScrollView className={`demo ${demoClass()}`}>
+      <ScrollView className={`demo ${web() ? 'web' : ''}`}>
         <View className="h2">{translated.basic}</View>
         <Demo1 />
         <View className="h2">{translated.toastFunction}</View>
@@ -55,8 +45,13 @@ const ToastDemo = () => {
         <Demo3 />
         <View className="h2">{translated.toastCustomIcon}</View>
         <Demo4 />
-        <View className="h2">{translated.toastWordBreak}</View>
-        <Demo5 />
+        {/* rn和 鸿蒙不支持 break-all */}
+        {harmonyAndRn() ? null : (
+          <>
+            <View className="h2">{translated.toastWordBreak}</View>
+            <Demo5 />
+          </>
+        )}
       </ScrollView>
     </>
   )

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/demo1.tsx b/src/packages/toast/demos/taro/demo1.tsx
@@ -41,14 +41,14 @@ const Demo1 = () => {
         }}
       />
       <Cell
-        title="Text文字提示"
+        title="文字提示"
         onClick={() => {
           openToast('text', '网络失败，请稍后再试~')
           setShowToast(true)
         }}
       />
       <Cell
-        title="Toast 标题提示"
+        title="标题提示"
         onClick={() => {
           openToast(
             'text',
@@ -61,30 +61,30 @@ const Demo1 = () => {
         }}
       />
       <Cell
-        title="Success 成功提示"
+        title="成功提示"
         onClick={() => {
-          openToast('success', '成功提示')
+          openToast('success', '成功提示成功提示成功提示')
           setShowToast(true)
         }}
       />
       <Cell
-        title="Error 失败提示"
+        title="失败提示"
         onClick={() => {
           openToast('fail', '失败提示')
           setShowToast(true)
         }}
       />
       <Cell
-        title=" Warning 警告提示"
+        title="警告提示"
         onClick={() => {
           openToast('warn', '警告提示')
           setShowToast(true)
         }}
       />
       <Cell
-        title=" Loading 加载提示"
+        title="加载提示"
         onClick={() => {
-          openToast('loading', '加载中')
+          openToast('loading', '加载提示')
           setShowToast(true)
         }}
       />

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
@@ -1,9 +1,10 @@
 import React, { useState } from 'react'
 import { Cell, Toast, ToastWordBreak } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo5 = () => {
   const [state, setState] = useState<{
-    content: string
+    content?: string
     wordBreak: ToastWordBreak
   }>({
     content: `Let's try ABCDEFGHIJKLMN here.`,
@@ -19,10 +20,20 @@ const Demo5 = () => {
         onClose={() => {
           setShow(false)
         }}
+        contentStyle={{ width: pxTransform(200) }}
         wordBreak={state.wordBreak}
       />
       <Cell.Group>
-        <Cell title="换行时截断单词" onClick={() => setShow(true)} />
+        <Cell
+          title="换行时截断单词"
+          onClick={() => {
+            setState({
+              content: `Let's try ABCDEFGHIJKLMN here.`,
+              wordBreak: 'break-all',
+            })
+            setShow(true)
+          }}
+        />
         <Cell
           title="换行时不截断单词"
           onClick={() => {