fix: space harmony (#2817)

* fix: space harmony * fix: 改用 space 标签
jdf2e · Dec 4, 2024 · bf0e1ce · bf0e1ce
1 parent b635275
commit bf0e1ce
Show file tree

Hide file tree

Showing 15 changed files with 185 additions and 202 deletions.
diff --git a/packages/nutui-taro-demo/src/pages/index/index.tsx b/packages/nutui-taro-demo/src/pages/index/index.tsx
@@ -1,5 +1,16 @@
 import Taro from '@tarojs/taro'
-import { View, Image, Swiper, SwiperItem, Text, ScrollView, Button, Input, Video } from '@tarojs/components'
+import {
+  View,
+  Image,
+  Swiper,
+  SwiperItem,
+  Text,
+  ScrollView,
+  Button,
+  Input,
+  Video,
+  Textarea,
+} from '@tarojs/components'
 import pkg from '@/packages/../config.json'
 import packageJson from '@/packages/../../package.json'
 import './index.scss'
@@ -8,9 +19,8 @@ import './index.scss'
 const navs = pkg.nav
 // console.log(navs)
 
-
 // hack taro load button xml
-console.log(Button, Input, Video,Image, Swiper, SwiperItem,  )
+console.log(Button, Input, Video, Image, Swiper, SwiperItem, Textarea)
 
 // try {
 //     console.log('xxx', Schema)
@@ -39,37 +49,39 @@ const Index = () => {
   }
 
   return (
-    <ScrollView className='index'>
-      <View className='index-header'>
+    <ScrollView className="index">
+      <View className="index-header">
         <Image
-          className='index-header-img'
-          src='https://img14.360buyimg.com/imagetools/jfs/t1/117879/25/28831/6279/6329723bE66715a2f/5f099b8feca9e8cc.png'
+          className="index-header-img"
+          src="https://img14.360buyimg.com/imagetools/jfs/t1/117879/25/28831/6279/6329723bE66715a2f/5f099b8feca9e8cc.png"
         />
-        <View className='index-header-info'>
-          <View className='index-header-info-h1'>NutUI React</View>
-          <View className='index-header-info-p'>
+        <View className="index-header-info">
+          <View className="index-header-info-h1">NutUI React</View>
+          <View className="index-header-info-p">
             京东风格的轻量级小程序组件库 React 版
           </View>
-          <View className='index-header-info-p'>
-            <Text className='index-header-info-text'>v{packageJson?.version}</Text>
+          <View className="index-header-info-p">
+            <Text className="index-header-info-text">
+              v{packageJson?.version}
+            </Text>
           </View>
         </View>
       </View>
-      <View className='index-components'>
+      <View className="index-components">
         {navs.map((nav) => (
-          <View key={nav.enName} className='index-components-item'>
+          <View key={nav.enName} className="index-components-item">
             {nav.enName === 'dataentry' ? null : (
-              <View className='index-components-item-title'>{nav.name}</View>
+              <View className="index-components-item-title">{nav.name}</View>
             )}
-            <View className='index-components-sublist'>
+            <View className="index-components-sublist">
               {nav.packages.map((com) =>
                 com.show && com.taro && com.version === '3.0.0' ? (
                   <View
                     key={com.name}
-                    className='index-components-sublist-item'
+                    className="index-components-sublist-item"
                   >
                     <View
-                      className='index-components-sublist-item-content'
+                      className="index-components-sublist-item-content"
                       key={com.name}
                       onClick={() => gotoNext(com.name, nav.enName)}
                     >

diff --git a/src/packages/space/demo.taro.tsx b/src/packages/space/demo.taro.tsx
@@ -1,13 +1,12 @@
 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'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
-// import Demo4 from './demos/taro/demo4'
+import Demo4 from './demos/taro/demo4'
 import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
 
@@ -44,30 +43,17 @@ const SpaceDemo = () => {
       <Header />
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated.basic}</View>
-        <Cell>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <View className="h2">{translated.wrap}</View>
-        <Cell>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <View className="h2">{translated.direction}</View>
-        <Cell>
-          <Demo3 />
-        </Cell>
+        <Demo3 />
         <View className="h2">{translated.spaceGap}</View>
-        {/* @TODO ConfigProvider 暂不支持 */}
-        {/* <Cell>
-          <Demo4 />
-        </Cell> */}
+        <Demo4 />
         <View className="h2">{translated.mainAxisAlign}</View>
-        <Cell style={{ display: 'block' }}>
-          <Demo5 />
-        </Cell>
+        <Demo5 />
         <View className="h2">{translated.crossAxisAlign}</View>
-        <Cell>
-          <Demo6 />
-        </Cell>
+        <Demo6 />
       </ScrollView>
     </>
   )

diff --git a/src/packages/space/demo.tsx b/src/packages/space/demo.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import Cell from '@/packages/cell'
 import { useTranslate } from '@/sites/assets/locale'
 import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
@@ -40,29 +39,17 @@ const SpaceDemo = () => {
     <>
       <div className="demo">
         <h2>{translated.basic}</h2>
-        <Cell>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <h2>{translated.wrap}</h2>
-        <Cell>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <h2>{translated.direction}</h2>
-        <Cell>
-          <Demo3 />
-        </Cell>
+        <Demo3 />
         <h2>{translated.spaceGap}</h2>
-        <Cell>
-          <Demo4 />
-        </Cell>
+        <Demo4 />
         <h2>{translated.mainAxisAlign}</h2>
-        <Cell style={{ display: 'block' }}>
-          <Demo5 />
-        </Cell>
+        <Demo5 />
         <h2>{translated.crossAxisAlign}</h2>
-        <Cell>
-          <Demo6 />
-        </Cell>
+        <Demo6 />
       </div>
     </>
   )

diff --git a/src/packages/space/demos/h5/demo1.tsx b/src/packages/space/demos/h5/demo1.tsx
@@ -1,13 +1,15 @@
 import React from 'react'
-import { Space, Button } from '@nutui/nutui-react'
+import { Space, Button, Cell } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   return (
-    <Space>
-      <Button>按钮1</Button>
-      <Button>按钮2</Button>
-      <Button>按钮3</Button>
-    </Space>
+    <Cell>
+      <Space>
+        <Button>按钮1</Button>
+        <Button>按钮2</Button>
+        <Button>按钮3</Button>
+      </Space>
+    </Cell>
   )
 }
 export default Demo1
diff --git a/src/packages/space/demos/h5/demo2.tsx b/src/packages/space/demos/h5/demo2.tsx
@@ -1,16 +1,18 @@
 import React from 'react'
-import { Space, Button } from '@nutui/nutui-react'
+import { Space, Button, Cell } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   return (
-    <Space wrap>
-      <Button>按钮1</Button>
-      <Button>按钮2</Button>
-      <Button>按钮3</Button>
-      <Button>按钮4</Button>
-      <Button>按钮5</Button>
-      <Button>按钮6</Button>
-    </Space>
+    <Cell>
+      <Space wrap>
+        <Button>按钮1</Button>
+        <Button>按钮2</Button>
+        <Button>按钮3</Button>
+        <Button>按钮4</Button>
+        <Button>按钮5</Button>
+        <Button>按钮6</Button>
+      </Space>
+    </Cell>
   )
 }
 export default Demo2
diff --git a/src/packages/space/demos/h5/demo3.tsx b/src/packages/space/demos/h5/demo3.tsx
@@ -1,13 +1,15 @@
 import React from 'react'
-import { Space, Button } from '@nutui/nutui-react'
+import { Space, Button, Cell } from '@nutui/nutui-react'
 
 const Demo3 = () => {
   return (
-    <Space direction="vertical">
-      <Button>按钮1</Button>
-      <Button>按钮2</Button>
-      <Button>按钮3</Button>
-    </Space>
+    <Cell>
+      <Space direction="vertical">
+        <Button>按钮1</Button>
+        <Button>按钮2</Button>
+        <Button>按钮3</Button>
+      </Space>
+    </Cell>
   )
 }
 export default Demo3
diff --git a/src/packages/space/demos/h5/demo4.tsx b/src/packages/space/demos/h5/demo4.tsx
@@ -1,19 +1,21 @@
 import React from 'react'
-import { Space, Button, ConfigProvider } from '@nutui/nutui-react'
+import { Space, Button, ConfigProvider, Cell } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (
-    <ConfigProvider
-      theme={{
-        nutuiSpaceGap: '20px',
-      }}
-    >
-      <Space direction="vertical">
-        <Button>按钮1</Button>
-        <Button>按钮2</Button>
-        <Button>按钮3</Button>
-      </Space>
-    </ConfigProvider>
+    <Cell>
+      <ConfigProvider
+        theme={{
+          nutuiSpaceGap: '20px',
+        }}
+      >
+        <Space direction="vertical">
+          <Button>按钮1</Button>
+          <Button>按钮2</Button>
+          <Button>按钮3</Button>
+        </Space>
+      </ConfigProvider>
+    </Cell>
   )
 }
 export default Demo4
diff --git a/src/packages/space/demos/h5/demo5.tsx b/src/packages/space/demos/h5/demo5.tsx
@@ -1,26 +1,22 @@
 import React from 'react'
-import { Space, Button } from '@nutui/nutui-react'
+import { Space, Button, Cell } from '@nutui/nutui-react'
 
 const Demo5 = () => {
   return (
-    <Space justify="start" wrap>
-      <Button>按钮1</Button>
-      <div>
-        <Button block style={{ marginBottom: 5 }}>
-          按钮2
-        </Button>
-        <Button block>按钮2</Button>
-      </div>
-      <div>
-        <Button block style={{ marginBottom: 5 }}>
-          按钮3
-        </Button>
-        <Button block style={{ marginBottom: 5 }}>
-          按钮3
-        </Button>
-        <Button block>按钮3</Button>
-      </div>
-    </Space>
+    <Cell>
+      <Space justify="start" wrap>
+        <Button>按钮1</Button>
+        <Space direction="vertical">
+          <Button>按钮2</Button>
+          <Button>按钮2</Button>
+        </Space>
+        <Space direction="vertical">
+          <Button>按钮3</Button>
+          <Button>按钮3</Button>
+          <Button>按钮3</Button>
+        </Space>
+      </Space>
+    </Cell>
   )
 }
 export default Demo5
diff --git a/src/packages/space/demos/h5/demo6.tsx b/src/packages/space/demos/h5/demo6.tsx
@@ -1,26 +1,22 @@
 import React from 'react'
-import { Space, Button } from '@nutui/nutui-react'
+import { Space, Button, Cell } from '@nutui/nutui-react'
 
 const Demo6 = () => {
   return (
-    <Space align="end" wrap>
-      <Button>按钮1</Button>
-      <div>
-        <Button block style={{ marginBottom: 5 }}>
-          按钮2
-        </Button>
-        <Button block>按钮2</Button>
-      </div>
-      <div>
-        <Button block style={{ marginBottom: 5 }}>
-          按钮3
-        </Button>
-        <Button block style={{ marginBottom: 5 }}>
-          按钮3
-        </Button>
-        <Button block>按钮3</Button>
-      </div>
-    </Space>
+    <Cell>
+      <Space align="end" wrap>
+        <Button>按钮1</Button>
+        <Space direction="vertical">
+          <Button>按钮2</Button>
+          <Button>按钮2</Button>
+        </Space>
+        <Space direction="vertical">
+          <Button>按钮3</Button>
+          <Button>按钮3</Button>
+          <Button>按钮3</Button>
+        </Space>
+      </Space>
+    </Cell>
   )
 }
 export default Demo6
diff --git a/src/packages/space/demos/taro/demo1.tsx b/src/packages/space/demos/taro/demo1.tsx
@@ -1,13 +1,15 @@
 import React from 'react'
-import { Space, Button } from '@nutui/nutui-react-taro'
+import { Cell, Space, Button } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
   return (
-    <Space>
-      <Button>按钮1</Button>
-      <Button>按钮2</Button>
-      <Button>按钮3</Button>
-    </Space>
+    <Cell>
+      <Space>
+        <Button>按钮1</Button>
+        <Button>按钮2</Button>
+        <Button>按钮3</Button>
+      </Space>
+    </Cell>
   )
 }
 export default Demo1