From fd1c75bcdfd33d2823e0760d63cf651a816b01d6 Mon Sep 17 00:00:00 2001
From: xiaoyatong <hanyuxingint@sina.cn>
Date: Tue, 23 Jul 2024 14:00:01 +0800
Subject: [PATCH] fix: change view

---
 src/packages/timedetail/timedetail.taro.tsx |  9 +++--
 src/packages/timeselect/demo.taro.tsx       | 13 +++---
 src/packages/timeselect/timeselect.taro.tsx | 17 ++++----
 src/packages/toast/demo.taro.tsx            | 16 ++++----
 src/packages/uploader/preview.taro.tsx      | 44 ++++++++++-----------
 5 files changed, 51 insertions(+), 48 deletions(-)

diff --git a/src/packages/timedetail/timedetail.taro.tsx b/src/packages/timedetail/timedetail.taro.tsx
index af8be2f105..afec88e42c 100644
--- a/src/packages/timedetail/timedetail.taro.tsx
+++ b/src/packages/timedetail/timedetail.taro.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent, useCallback, useMemo } from 'react'
 import classNames from 'classnames'
+import { View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import {
   TimeType,
@@ -60,9 +61,9 @@ export const TimeDetail: FunctionComponent<
     [activeTime, optionKey, activeDate]
   )
   return (
-    <div className={classNames(classPrefix, className)}>
+    <View className={classNames(classPrefix, className)}>
       {timeList[optionKey.childrenKey].map((item: TimeType) => (
-        <span
+        <View
           className={classNames(`${classPrefix}-item`, {
             active: isActive(item[optionKey.valueKey]),
           })}
@@ -70,9 +71,9 @@ export const TimeDetail: FunctionComponent<
           onClick={() => onSelect(item)}
         >
           {item[optionKey.textKey]}
-        </span>
+        </View>
       ))}
-    </div>
+    </View>
   )
 }
 
diff --git a/src/packages/timeselect/demo.taro.tsx b/src/packages/timeselect/demo.taro.tsx
index c82b4bb155..309e5bcaee 100644
--- a/src/packages/timeselect/demo.taro.tsx
+++ b/src/packages/timeselect/demo.taro.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
+import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
@@ -32,16 +33,16 @@ const TimeSelectDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>{translated.basic}</h2>
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+        <View className="h2">{translated.basic}</View>
         <Demo1 />
-        <h2>{translated.optionKey}</h2>
+        <View className="h2">{translated.optionKey}</View>
         <Demo2 />
-        <h2>{translated.multiple}</h2>
+        <View className="h2">{translated.multiple}</View>
         <Demo3 />
-        <h2>{translated.custom}</h2>
+        <View className="h2">{translated.custom}</View>
         <Demo4 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/timeselect/timeselect.taro.tsx b/src/packages/timeselect/timeselect.taro.tsx
index f3bfe88d37..25724c3964 100644
--- a/src/packages/timeselect/timeselect.taro.tsx
+++ b/src/packages/timeselect/timeselect.taro.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent, ReactNode, useState } from 'react'
 import classNames from 'classnames'
+import { View } from '@tarojs/components'
 import Popup from '@/packages/popup/index.taro'
 import TimeDetail from '@/packages/timedetail/index.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
@@ -152,11 +153,11 @@ export const TimeSelect: FunctionComponent<Partial<TimeSelectProps>> = (
       onClose={closeFun}
       {...rest}
     >
-      <div className={classNames(classPrefix, className)}>
-        <div className={`${classPrefix}-content`}>
-          <div className={`${classPrefix}-content-left`}>
+      <View className={classNames(classPrefix, className)}>
+        <View className={`${classPrefix}-content`}>
+          <View className={`${classPrefix}-content-left`}>
             {options.map((item: DateType) => (
-              <div
+              <View
                 key={item[optionKey.valueKey]}
                 className={classNames('nut-timepannel', {
                   active: item[optionKey.valueKey] === activeDate,
@@ -164,9 +165,9 @@ export const TimeSelect: FunctionComponent<Partial<TimeSelectProps>> = (
                 onClick={() => handleChange(item)}
               >
                 {item[optionKey.textKey]}
-              </div>
+              </View>
             ))}
-          </div>
+          </View>
           <TimeDetail
             options={options}
             optionKey={optionKey}
@@ -174,8 +175,8 @@ export const TimeSelect: FunctionComponent<Partial<TimeSelectProps>> = (
             activeTime={activeTime}
             onSelect={handleSelectTime}
           />
-        </div>
-      </div>
+        </View>
+      </View>
     </Popup>
   )
 }
diff --git a/src/packages/toast/demo.taro.tsx b/src/packages/toast/demo.taro.tsx
index 2536a579cb..d037fe8650 100644
--- a/src/packages/toast/demo.taro.tsx
+++ b/src/packages/toast/demo.taro.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Toast } from '@nutui/nutui-react-taro'
+import { ScrollView, View } from '@tarojs/components'
 import Header from '@/sites/components/header'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Demo1 from './demos/taro/demo1'
@@ -44,20 +45,19 @@ const ToastDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${demoClass()}`}>
-        <h2>{translated.basic}</h2>
+      <ScrollView className={`demo ${demoClass()}`}>
+        <View className="h2">{translated.basic}</View>
         <Demo1 />
-        <h2>{translated.toastFunction}</h2>
+        <View className="h2">{translated.toastFunction}</View>
         <Toast id="test" />
         <Demo2 />
-
-        <h2>{translated.toastDuration}</h2>
+        <View className="h2">{translated.toastDuration}</View>
         <Demo3 />
-        <h2>{translated.toastCustomIcon}</h2>
+        <View className="h2">{translated.toastCustomIcon}</View>
         <Demo4 />
-        <h2>{translated.toastWordBreak}</h2>
+        <View className="h2">{translated.toastWordBreak}</View>
         <Demo5 />
-      </div>
+      </ScrollView>
     </>
   )
 }
diff --git a/src/packages/uploader/preview.taro.tsx b/src/packages/uploader/preview.taro.tsx
index 1e79b66be9..6f9a39f7f5 100644
--- a/src/packages/uploader/preview.taro.tsx
+++ b/src/packages/uploader/preview.taro.tsx
@@ -5,7 +5,7 @@ import {
   Link as LinkIcon,
   Loading,
 } from '@nutui/icons-react-taro'
-import { Image } from '@tarojs/components'
+import { Image, View } from '@tarojs/components'
 import Progress from '@/packages/progress/index.taro'
 import { FileItem } from '@/packages/uploader/file-item.taro'
 import { ERROR } from '@/packages/uploader/utils'
@@ -32,7 +32,7 @@ export const Preview: React.FunctionComponent<any> = ({
       {fileList.length !== 0 &&
         fileList.map((item: any, index: number) => {
           return (
-            <div
+            <View
               className={`nut-uploader-preview ${previewType}`}
               key={item.uid}
             >
@@ -44,21 +44,21 @@ export const Preview: React.FunctionComponent<any> = ({
                 />
               )}
               {previewType === 'picture' && !children && (
-                <div className="nut-uploader-preview-img">
+                <View className="nut-uploader-preview-img">
                   {item.status === 'ready' ? (
-                    <div className="nut-uploader-preview-progress">
-                      <div className="nut-uploader-preview-progress-msg">
+                    <View className="nut-uploader-preview-progress">
+                      <View className="nut-uploader-preview-progress-msg">
                         {item.message}
-                      </div>
-                    </div>
+                      </View>
+                    </View>
                   ) : (
                     item.status !== 'success' && (
-                      <div className="nut-uploader-preview-progress">
+                      <View className="nut-uploader-preview-progress">
                         {renderIcon(item)}
-                        <div className="nut-uploader-preview-progress-msg">
+                        <View className="nut-uploader-preview-progress-msg">
                           {item.message}
-                        </div>
-                      </div>
+                        </View>
+                      </View>
                     )
                   )}
                   {item.type?.includes('image') ? (
@@ -83,33 +83,33 @@ export const Preview: React.FunctionComponent<any> = ({
                           onClick={() => handleItemClick(item, index)}
                         />
                       ) : (
-                        <div className="nut-uploader-preview-img-file">
-                          <div
+                        <View className="nut-uploader-preview-img-file">
+                          <View
                             onClick={() => handleItemClick(item, index)}
                             className="nut-uploader-preview-img-file-name"
                           >
                             <LinkIcon color="#808080" />
                             <span>&nbsp;{item.name}</span>
-                          </div>
-                        </div>
+                          </View>
+                        </View>
                       )}
                     </>
                   )}
                   {item.status === 'success' ? (
-                    <div className="tips">{item.name}</div>
+                    <View className="tips">{item.name}</View>
                   ) : null}
-                </div>
+                </View>
               )}
 
               {previewType === 'list' && (
-                <div className="nut-uploader-preview-list">
-                  <div
+                <View className="nut-uploader-preview-list">
+                  <View
                     className={`nut-uploader-preview-img-file-name ${item.status}`}
                     onClick={() => handleItemClick(item, index)}
                   >
                     <LinkIcon />
                     <span>&nbsp;{item.name}</span>
-                  </div>
+                  </View>
                   {deletable && (
                     <Del
                       color="#808080"
@@ -124,9 +124,9 @@ export const Preview: React.FunctionComponent<any> = ({
                       showText={false}
                     />
                   )}
-                </div>
+                </View>
               )}
-            </div>
+            </View>
           )
         })}
     </>