fix: 修订标签

src/packages/actionsheet/actionsheet.taro.tsx

@@ -1,4 +1,5 @@
 import React, { FunctionComponent, ReactNode } from 'react'
+import { View } from '@tarojs/components'
 import Popup, { PopupProps } from '@/packages/popup/index.taro'
 import { ComponentDefaults } from '@/utils/typings'
 
@@ -70,39 +71,39 @@ export const ActionSheet: FunctionComponent<
         onCancel && onCancel()
       }}
     >
-      <div className={`${className}`} style={style}>
+      <View className={`${className}`} style={style}>
         {options.length ? (
-          <div className={`${classPrefix}-list`}>
+          <View className={`${classPrefix}-list`}>
             {options.map((item, index) => {
               return (
-                <div
+                <View
                   className={`${classPrefix}-item ${
                     item.disabled ? 'disabled' : ''
                   } ${item.danger ? 'danger' : ''}`}
                   key={index}
                   onClick={() => chooseItem(item, index)}
                 >
                   {item[optionKey.name]}
-                  <div className={`${classPrefix}-item-description`}>
+                  <View className={`${classPrefix}-item-description`}>
                     {item[optionKey.description]}
-                  </div>
-                </div>
+                  </View>
+                </View>
               )
             })}
-          </div>
+          </View>
         ) : (
           children
         )}
         {cancelText && (
-          <div
+          <View
             className={`${classPrefix}-cancel`}
             onClick={() => cancelActionSheet()}
           >
             {cancelText}
-          </div>
+          </View>
         )}
-      </div>
-      <div className={`${classPrefix}-safe-area`} />
+      </View>
+      <View className={`${classPrefix}-safe-area`} />
     </Popup>
   )
 }

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { ActionSheet, Cell } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 
 const Demo1 = () => {
   const [val, setVal] = useState('')
@@ -25,7 +26,7 @@ const Demo1 = () => {
     <>
       <Cell onClick={() => setIsVisible(!isVisible)}>
         <span>基础用法</span>
-        <div style={{ marginInlineStart: '10px', color: '#999' }}>{val}</div>
+        <View style={{ marginInlineStart: '10px', color: '#999' }}>{val}</View>
       </Cell>
       <ActionSheet
         title="标题"

src/packages/actionsheet/demos/taro/demo2.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { ActionSheet, Cell } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 
 const Demo2 = () => {
   const [isVisible, setIsVisible] = useState(false)
@@ -23,7 +24,7 @@ const Demo2 = () => {
     <>
       <Cell onClick={() => setIsVisible(!isVisible)}>
         <span>展示取消按钮</span>
-        <div style={{ marginInlineStart: '10px', color: '#999' }}>{val}</div>
+        <View style={{ marginInlineStart: '10px', color: '#999' }}>{val}</View>
       </Cell>
       <ActionSheet
         visible={isVisible}

src/packages/actionsheet/demos/taro/demo3.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { ActionSheet, Cell } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 
 const Demo3 = () => {
   const [isVisible, setIsVisible] = useState(false)
@@ -24,7 +25,7 @@ const Demo3 = () => {
     <>
       <Cell onClick={() => setIsVisible(!isVisible)}>
         <span>展示描述信息</span>
-        <div style={{ marginInlineStart: '10px', color: '#999' }}>{val}</div>
+        <View style={{ marginInlineStart: '10px', color: '#999' }}>{val}</View>
       </Cell>
       <ActionSheet
         visible={isVisible}

src/packages/actionsheet/demos/taro/demo5.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { ActionSheet, Cell } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 
 const Demo5 = () => {
   const [isVisible, setIsVisible] = useState(false)
@@ -16,8 +17,12 @@ const Demo5 = () => {
         }}
         onCancel={() => setIsVisible(false)}
       >
-        <div style={{ textAlign: 'left', padding: '10px 20px' }}>新建表格</div>
-        <div style={{ textAlign: 'left', padding: '10px 20px' }}>新建文档</div>
+        <View style={{ textAlign: 'left', padding: '10px 20px' }}>
+          新建表格
+        </View>
+        <View style={{ textAlign: 'left', padding: '10px 20px' }}>
+          新建文档
+        </View>
       </ActionSheet>
     </>
   )

src/packages/audio/audio.taro.tsx

@@ -7,6 +7,7 @@ import React, {
 
 import { createInnerAudioContext, InnerAudioContext } from '@tarojs/taro'
 import { Service } from '@nutui/icons-react-taro'
+import { View } from '@tarojs/components'
 import Range from '@/packages/range/index.taro'
 import Button from '@/packages/button/index.taro'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
@@ -169,8 +170,8 @@ export const Audio: FunctionComponent<
   const renderIcon = () => {
     return (
       <>
-        <div className={`${classPrefix}-icon`}>
-          <div
+        <View className={`${classPrefix}-icon`}>
+          <View
             className={`${classPrefix}-icon-box} ${
               playing
                 ? `${classPrefix}-icon-play}`
@@ -179,18 +180,18 @@ export const Audio: FunctionComponent<
             onClick={handleStatusChange}
           >
             <Service className={playing ? 'nut-icon-loading' : ''} />
-          </div>
-        </div>
+          </View>
+        </View>
       </>
     )
   }
 
   const renderProgerss = () => {
     return (
       <>
-        <div className={`${classPrefix}-progress`}>
-          <div className="time">{currentDuration}</div>
-          <div className={`${classPrefix}-progress-bar-wrapper`}>
+        <View className={`${classPrefix}-progress`}>
+          <View className="time">{currentDuration}</View>
+          <View className={`${classPrefix}-progress-bar-wrapper`}>
             <Range
               value={percent}
               onChange={(val: any) => setPercent(val)}
@@ -200,12 +201,12 @@ export const Audio: FunctionComponent<
               inactive-color="#cccccc"
               active-color="#FF0F23"
             />
-          </div>
-          <div className="time">
+          </View>
+          <View className="time">
             {formatSeconds(`${totalSeconds}`) || '00:00:00'}
-          </div>
-        </div>
-        <div
+          </View>
+        </View>
+        <View
           className={
             isCanPlay ? 'custom-button-group' : 'custom-button-group-disable'
           }
@@ -231,19 +232,19 @@ export const Audio: FunctionComponent<
           <Button type="primary" size="small" onClick={handleForward}>
             {locale.audio.forward || '快进'}
           </Button>
-        </div>
+        </View>
       </>
     )
   }
 
   const renderNone = () => {
     return (
-      <div
+      <View
         className={`${classPrefix}-none-container`}
         onClick={handleStatusChange}
       >
         {children}
-      </div>
+      </View>
     )
   }
 
@@ -261,9 +262,9 @@ export const Audio: FunctionComponent<
   }
 
   return (
-    <div className={`${classPrefix} ${className}`} style={style} {...rest}>
+    <View className={`${classPrefix} ${className}`} style={style} {...rest}>
       {renderAudio()}
-    </div>
+    </View>
   )
 }
 

src/packages/avatarcropper/avatarcropper.taro.tsx

@@ -7,7 +7,7 @@ import React, {
 } from 'react'
 import Taro, { useReady, createSelectorQuery } from '@tarojs/taro'
 import classNames from 'classnames'
-import { Canvas } from '@tarojs/components'
+import { Canvas, View } from '@tarojs/components'
 import { Button } from '@/packages/button/button.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { useTouch } from '@/utils/use-touch'
@@ -662,17 +662,17 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
     const actions = [cancel, reset, rotate, confirm]
     return (
       <>
-        <div className={`${classPrefix}-popup-toolbar-flex`}>
+        <View className={`${classPrefix}-popup-toolbar-flex`}>
           {actions.map((action, index) => (
-            <div
+            <View
               key={index}
               className={`${classPrefix}-popup-toolbar-item`}
               onClick={(_e) => action()}
             >
               {toolbar[index]}
-            </div>
+            </View>
           ))}
-        </div>
+        </View>
       </>
     )
   }
@@ -681,7 +681,7 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
     const { canvasId } = canvasAll
     return (
       <>
-        <div
+        <View
           className={`${classPrefix}-popup`}
           style={{ display: visible ? 'block' : 'none' }}
         >
@@ -698,24 +698,24 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
             onTouchMove={onTouchMove}
             onTouchEnd={onTouchEnd}
           >
-            <div className="highlight" style={highlightStyle} />
+            <View className="highlight" style={highlightStyle} />
           </div>
-          <div className={toolbarPositionCls}>
+          <View className={toolbarPositionCls}>
             <ToolBar />
-          </div>
-        </div>
+          </View>
+        </View>
       </>
     )
   }
 
   return (
     <>
-      <div className={cls} {...rest} style={style}>
+      <View className={cls} {...rest} style={style}>
         {children}
-        <div className="nut-avatar-cropper-edit-text" onClick={chooseImage}>
+        <View className="nut-avatar-cropper-edit-text" onClick={chooseImage}>
           {editText}
-        </div>
-      </div>
+        </View>
+      </View>
       {CropperPopup()}
     </>
   )

src/packages/avatarcropper/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'
@@ -27,16 +28,16 @@ const AvatarCropperDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''} full`}>
-        <h2>{translated.basic}</h2>
+      <ScrollView
+        className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''} full`}
+      >
+        <View className="h2">{translated.basic}</View>
         <Demo1 />
-
-        <h2>{translated.toolbar}</h2>
+        <View className="h2">{translated.toolbar}</View>
         <Demo2 />
-
-        <h2>{translated.round}</h2>
+        <View className="h2">{translated.round}</View>
         <Demo3 />
-      </div>
+      </ScrollView>
     </>
   )
 }

src/packages/calendar/demo.taro.tsx

@@ -1,9 +1,9 @@
 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 './demo.scss'
-
 import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
@@ -92,37 +92,23 @@ const CalendarDemo = () => {
   return (
     <>
       <Header />
-      <div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
-        <h2>{translated.ce5c5446}</h2>
-
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
+        <View className="h2">{translated.ce5c5446}</View>
         <Demo1 />
-
         <Demo2 />
-
         <Demo3 />
-
         <Demo4 />
-
         <Demo5 />
-
         <Demo6 />
-
-        <h2>{translated.cfbdc781}</h2>
-
+        <View className="h2">{translated.cfbdc781}</View>
         <Demo7 />
-
         <Demo8 />
-
-        <h2>{translated.d04fcbda}</h2>
-
+        <View className="h2">{translated.d04fcbda}</View>
         <Demo9 />
-
         <Demo10 />
-
-        <h2>{translated.e51e4582}</h2>
-
+        <View className="h2">{translated.e51e4582}</View>
         <Demo11 />
-      </div>
+      </ScrollView>
     </>
   )
 }