fix: 已适配组件, demo不在环境判断+demo优化 (#2388)

* fix(price): demo优化 * fix(countdown): demo中已适配组件不在环境判断 * fix: demo增加header * fix(divider): demo优化 * fix(switch): demo 优化
jdf2e · Jun 27, 2024 · f57b0b3 · f57b0b3
1 parent d2fd8d4
commit f57b0b3
Show file tree

Hide file tree

Showing 48 changed files with 226 additions and 302 deletions.
diff --git a/src/packages/countdown/demo.scss b/src/packages/countdown/demo.scss
diff --git a/src/packages/countdown/demo.taro.tsx b/src/packages/countdown/demo.taro.tsx
@@ -3,7 +3,6 @@ import Taro from '@tarojs/taro'
 import { View, ScrollView } from '@tarojs/components'
 import Header from '@/sites/components/header'
 import { useTranslate } from '@/sites/assets/locale/taro'
-import './demo.scss'
 import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'

diff --git a/src/packages/countdown/demo.tsx b/src/packages/countdown/demo.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { useTranslate } from '../../sites/assets/locale'
-import './demo.scss'
 import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'

diff --git a/src/packages/countdown/demos/h5/demo9.tsx b/src/packages/countdown/demos/h5/demo9.tsx
@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import { Cell, CountDown, Grid, GridItem, Button } from '@nutui/nutui-react'
+import { Cell, CountDown, Grid, Button } from '@nutui/nutui-react'
 
 interface countdownRefState {
   start: () => void
@@ -31,22 +31,22 @@ const Demo9 = () => {
           ref={countDownRef}
         />
       </Cell>
-      <Grid columns="3" style={{ marginBottom: '5px' }}>
-        <GridItem>
+      <Grid columns={3} style={{ marginBottom: '5px' }}>
+        <Grid.Item>
           <Button type="primary" onClick={start}>
             开始
           </Button>
-        </GridItem>
-        <GridItem>
+        </Grid.Item>
+        <Grid.Item>
           <Button type="primary" onClick={pause}>
             暂停
           </Button>
-        </GridItem>
-        <GridItem>
+        </Grid.Item>
+        <Grid.Item>
           <Button type="primary" onClick={reset}>
             重置
           </Button>
-        </GridItem>
+        </Grid.Item>
       </Grid>
     </>
   )

diff --git a/src/packages/countdown/demos/taro/demo8.tsx b/src/packages/countdown/demos/taro/demo8.tsx
@@ -1,7 +1,6 @@
 import React, { useRef, useState } from 'react'
 import { Cell, CountDown } from '@nutui/nutui-react-taro'
 import { View } from '@tarojs/components'
-import '../../demo.scss'
 import pxTransform from '@/utils/px-transform'
 
 const partItemStyle = {

diff --git a/src/packages/countdown/demos/taro/demo9.tsx b/src/packages/countdown/demos/taro/demo9.tsx
@@ -1,13 +1,6 @@
 import React, { useRef } from 'react'
-import {
-  Cell,
-  CountDown,
-  Button,
-  Grid,
-  GridItem,
-} from '@nutui/nutui-react-taro'
-import Taro from '@tarojs/taro'
-import { View } from '@tarojs/components'
+import { Cell, CountDown, Button, Grid } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 interface countdownRefState {
   start: () => void
@@ -39,48 +32,24 @@ const Demo9 = () => {
           ref={countDownRef}
         />
       </Cell>
-      {/* TODO：gird未适配，适配后替换 */}
-      {Taro.getEnv() === Taro.ENV_TYPE.RN ? (
-        <View
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-around',
-            paddingTop: 16,
-            paddingBottom: 16,
-            marginBottom: 20,
-            backgroundColor: '#fff',
-          }}
-        >
+
+      <Grid columns={3} style={{ marginBottom: pxTransform(5) }}>
+        <Grid.Item>
           <Button type="primary" onClick={start}>
             开始
           </Button>
+        </Grid.Item>
+        <Grid.Item>
           <Button type="primary" onClick={pause}>
             暂停
           </Button>
+        </Grid.Item>
+        <Grid.Item>
           <Button type="primary" onClick={reset}>
             重置
           </Button>
-        </View>
-      ) : (
-        <Grid columns="3" style={{ marginBottom: '5px' }}>
-          <GridItem>
-            <Button type="primary" onClick={start}>
-              开始
-            </Button>
-          </GridItem>
-          <GridItem>
-            <Button type="primary" onClick={pause}>
-              暂停
-            </Button>
-          </GridItem>
-          <GridItem>
-            <Button type="primary" onClick={reset}>
-              重置
-            </Button>
-          </GridItem>
-        </Grid>
-      )}
+        </Grid.Item>
+      </Grid>
     </>
   )
 }

diff --git a/src/packages/divider/demo.taro.tsx b/src/packages/divider/demo.taro.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
 import { ScrollView, View } from '@tarojs/components'
-import { Cell } from '@nutui/nutui-react-taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
@@ -35,32 +34,22 @@ const DividerDemo = () => {
       <Header />
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated.basic}</View>
-        <Cell>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <View className="h2">{translated.withText}</View>
-        <Cell>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <View className="h2">{translated.contentPosition}</View>
         <Demo3 />
         {/* RN unsupported dashed / dotted border style */}
         {Taro.getEnv() !== 'RN' ? (
           <>
             <View className="h2">{translated.dashed}</View>
-            <Cell>
-              <Demo4 />
-            </Cell>
+            <Demo4 />
           </>
         ) : null}
         <View className="h2">{translated.customStyle}</View>
-        <Cell>
-          <Demo5 />
-        </Cell>
+        <Demo5 />
         <View className="h2">{translated.verticalDivider}</View>
-        <Cell align="center">
-          <Demo6 />
-        </Cell>
+        <Demo6 />
       </ScrollView>
     </>
   )

diff --git a/src/packages/divider/demo.tsx b/src/packages/divider/demo.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { useTranslate } from '../../sites/assets/locale'
-import Cell from '@/packages/cell'
 import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'
@@ -31,27 +30,17 @@ const DividerDemo = () => {
     <>
       <div className="demo">
         <h2>{translated.basic}</h2>
-        <Cell>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <h2>{translated.withText}</h2>
-        <Cell>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <h2>{translated.contentPosition}</h2>
         <Demo3 />
         <h2>{translated.dashed}</h2>
-        <Cell>
-          <Demo4 />
-        </Cell>
+        <Demo4 />
         <h2>{translated.customStyle}</h2>
-        <Cell>
-          <Demo5 />
-        </Cell>
+        <Demo5 />
         <h2>{translated.verticalDivider}</h2>
-        <Cell align="center">
-          <Demo6 />
-        </Cell>
+        <Demo6 />
       </div>
     </>
   )

diff --git a/src/packages/divider/demos/h5/demo1.tsx b/src/packages/divider/demos/h5/demo1.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react'
+import { Cell, Divider } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   return (
-    <>
+    <Cell>
       <Divider />
-    </>
+    </Cell>
   )
 }
 export default Demo1
diff --git a/src/packages/divider/demos/h5/demo2.tsx b/src/packages/divider/demos/h5/demo2.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react'
+import { Cell, Divider } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   return (
-    <>
+    <Cell>
       <Divider>文本</Divider>
-    </>
+    </Cell>
   )
 }
 export default Demo2
diff --git a/src/packages/divider/demos/h5/demo4.tsx b/src/packages/divider/demos/h5/demo4.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react'
+import { Cell, Divider } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (
-    <>
+    <Cell>
       <Divider style={{ borderStyle: 'dashed' }}>文本</Divider>
-    </>
+    </Cell>
   )
 }
 export default Demo4
diff --git a/src/packages/divider/demos/h5/demo5.tsx b/src/packages/divider/demos/h5/demo5.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react'
+import { Cell, Divider } from '@nutui/nutui-react'
 
 const Demo5 = () => {
   return (
-    <>
+    <Cell>
       <Divider
         style={{
           color: '#1989fa',
@@ -14,7 +14,7 @@ const Demo5 = () => {
       >
         文本
       </Divider>
-    </>
+    </Cell>
   )
 }
 export default Demo5
diff --git a/src/packages/divider/demos/h5/demo6.tsx b/src/packages/divider/demos/h5/demo6.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react'
+import { Cell, Divider } from '@nutui/nutui-react'
 
 const Demo6 = () => {
   return (
-    <>
+    <Cell align="center">
       文本
       <Divider direction="vertical" />
       <a href="#" style={{ color: '#1989fa' }}>
@@ -13,7 +13,7 @@ const Demo6 = () => {
       <a href="#" style={{ color: '#1989fa' }}>
         链接
       </a>
-    </>
+    </Cell>
   )
 }
 export default Demo6
diff --git a/src/packages/divider/demos/taro/demo1.tsx b/src/packages/divider/demos/taro/demo1.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react-taro'
+import { Cell, Divider } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
   return (
-    <>
+    <Cell>
       <Divider />
-    </>
+    </Cell>
   )
 }
 export default Demo1
diff --git a/src/packages/divider/demos/taro/demo2.tsx b/src/packages/divider/demos/taro/demo2.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react-taro'
+import { Cell, Divider } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
   return (
-    <>
+    <Cell>
       <Divider>文本</Divider>
-    </>
+    </Cell>
   )
 }
 export default Demo2
diff --git a/src/packages/divider/demos/taro/demo4.tsx b/src/packages/divider/demos/taro/demo4.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react-taro'
+import { Cell, Divider } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
-  return <Divider style={{ borderStyle: 'dashed' }}>文本</Divider>
+  return (
+    <Cell>
+      <Divider style={{ borderStyle: 'dashed' }}>文本</Divider>
+    </Cell>
+  )
 }
 export default Demo4
diff --git a/src/packages/divider/demos/taro/demo5.tsx b/src/packages/divider/demos/taro/demo5.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react-taro'
+import { Cell, Divider } from '@nutui/nutui-react-taro'
 import { rn } from '@/utils/platform-taro'
 import pxTransform from '@/utils/px-transform'
 
 const Demo5 = () => {
   return (
-    <>
+    <Cell>
       <Divider
         style={{
           color: '#1989fa',
@@ -17,7 +17,7 @@ const Demo5 = () => {
       >
         文本
       </Divider>
-    </>
+    </Cell>
   )
 }
 export default Demo5
diff --git a/src/packages/divider/demos/taro/demo6.tsx b/src/packages/divider/demos/taro/demo6.tsx
@@ -1,16 +1,16 @@
 import React from 'react'
-import { Divider } from '@nutui/nutui-react-taro'
+import { Cell, Divider } from '@nutui/nutui-react-taro'
 import { Text } from '@tarojs/components'
 
 const Demo6 = () => {
   return (
-    <>
+    <Cell align="center">
       <Text>文本</Text>
       <Divider direction="vertical" />
       <Text style={{ color: '#1989fa' }}>链接</Text>
       <Divider direction="vertical" />
       <Text style={{ color: '#1989fa' }}>链接</Text>
-    </>
+    </Cell>
   )
 }
 export default Demo6