Merge branch 'hxy/0603/progress' into f-rn

xiaoyatong · Jul 23, 2024 · 2145715 · 2145715
2 parents fd1c75b + 202093c
commit 2145715
Show file tree

Hide file tree

Showing 19 changed files with 228 additions and 156 deletions.
diff --git a/src/packages/progress/demo.taro.tsx b/src/packages/progress/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'
@@ -52,31 +51,30 @@ const ProgressDemo = () => {
       <Header />
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated.basic}</View>
-        <Cell>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <View className="h2">{translated.customStyle}</View>
-        <Cell>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <View className="h2">{translated.noShowPercentage}</View>
-        <Cell>
-          <Demo3 />
-        </Cell>
-        <View className="h2">{translated.customContent}</View>
-        <Cell>
-          <Demo4 />
-        </Cell>
+        <Demo3 />
+        {!['HARMONY', 'RN'].includes(Taro.getEnv()) && (
+          <>
+            <View className="h2">{translated.customContent}</View>
+            <Demo4 />
+          </>
+        )}
         <View className="h2">{translated.customSize}</View>
         <Demo5 />
         <View className="h2">{translated.statusDisplay}</View>
         <Demo6 />
+
         <View className="h2">{translated.dynamicChange}</View>
         <Demo7 />
-        <View className="h2">{translated.lazy}</View>
-        <Cell>
-          <Demo8 />
-        </Cell>
+        {!['HARMONY', 'RN'].includes(Taro.getEnv()) && (
+          <>
+            <View className="h2">{translated.lazy}</View>
+            <Demo8 />
+          </>
+        )}
       </ScrollView>
     </>
   )

diff --git a/src/packages/progress/demo.tsx b/src/packages/progress/demo.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { useTranslate } from '../../sites/assets/locale'
-import { Cell } from '@/packages/cell/cell'
 import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'
@@ -48,31 +47,21 @@ const ProgressDemo = () => {
     <>
       <div className="demo">
         <h2>{translated.basic}</h2>
-        <Cell>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <h2>{translated.customStyle}</h2>
-        <Cell>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <h2>{translated.noShowPercentage}</h2>
-        <Cell>
-          <Demo3 />
-        </Cell>
+        <Demo3 />
         <h2>{translated.customContent}</h2>
-        <Cell>
-          <Demo4 />
-        </Cell>
+        <Demo4 />
         <h2>{translated.customSize}</h2>
         <Demo5 />
         <h2>{translated.statusDisplay}</h2>
         <Demo6 />
         <h2>{translated.dynamicChange}</h2>
         <Demo7 />
         <h2>{translated.lazy}</h2>
-        <Cell align="center">
-          <Demo8 />
-        </Cell>
+        <Demo8 />
       </div>
     </>
   )

diff --git a/src/packages/progress/demos/h5/demo1.tsx b/src/packages/progress/demos/h5/demo1.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react'
+import { Cell, Progress } from '@nutui/nutui-react'
 
 const Demo1 = () => {
-  return <Progress percent={30} />
+  return (
+    <Cell>
+      <Progress percent={30} />
+    </Cell>
+  )
 }
 export default Demo1
diff --git a/src/packages/progress/demos/h5/demo2.tsx b/src/packages/progress/demos/h5/demo2.tsx
@@ -1,14 +1,16 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react'
+import { Progress, Cell } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   return (
-    <Progress
-      percent={30}
-      color="var(--nutui-color-primary)"
-      background="var(--nutui-brand-1)"
-      strokeWidth="15"
-    />
+    <Cell>
+      <Progress
+        percent={30}
+        color="var(--nutui-color-primary)"
+        background="var(--nutui-brand-1)"
+        strokeWidth="15"
+      />
+    </Cell>
   )
 }
 export default Demo2
diff --git a/src/packages/progress/demos/h5/demo3.tsx b/src/packages/progress/demos/h5/demo3.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react'
+import { Cell, Progress } from '@nutui/nutui-react'
 
 const Demo3 = () => {
-  return <Progress percent={50} showText />
+  return (
+    <Cell>
+      <Progress percent={50} showText />
+    </Cell>
+  )
 }
 export default Demo3
diff --git a/src/packages/progress/demos/h5/demo4.tsx b/src/packages/progress/demos/h5/demo4.tsx
@@ -1,15 +1,17 @@
 import React from 'react'
-import { Progress, Image } from '@nutui/nutui-react'
+import { Progress, Image, Cell } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (
-    <Progress percent={60} showText>
-      <Image
-        width="30px"
-        height="30px"
-        src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-      />
-    </Progress>
+    <Cell>
+      <Progress percent={60} showText>
+        <Image
+          width="30px"
+          height="30px"
+          src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+        />
+      </Progress>
+    </Cell>
   )
 }
 export default Demo4
diff --git a/src/packages/progress/demos/h5/demo6.tsx b/src/packages/progress/demos/h5/demo6.tsx
@@ -6,22 +6,14 @@ const Demo6 = () => {
   return (
     <>
       <Cell>
-        <Progress
-          percent={30}
-          color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
-          animated
-        />
+        <Progress percent={30} color="blue" animated />
       </Cell>
       <Cell align="center">
         <Progress percent={100} />
         <Checked color="green" style={{ margin: '0 5px' }} />
       </Cell>
       <Cell align="center">
-        <Progress
-          percent={100}
-          color="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
-          strokeWidth="15"
-        />
+        <Progress percent={100} color="#AAFF00" strokeWidth="15" />
         <Tips color="red" style={{ margin: '0 5px' }} />
       </Cell>
     </>

diff --git a/src/packages/progress/demos/h5/demo8.tsx b/src/packages/progress/demos/h5/demo8.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react'
+import { Cell, Progress } from '@nutui/nutui-react'
 
 const Demo8 = () => {
-  return <Progress percent={30} lazy delay={500} />
+  return (
+    <Cell align="center">
+      <Progress percent={30} lazy delay={500} />
+    </Cell>
+  )
 }
 export default Demo8
diff --git a/src/packages/progress/demos/taro/demo1.tsx b/src/packages/progress/demos/taro/demo1.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react-taro'
+import { Cell, Progress } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
-  return <Progress percent={30} />
+  return (
+    <Cell>
+      <Progress percent={30} />
+    </Cell>
+  )
 }
 export default Demo1
diff --git a/src/packages/progress/demos/taro/demo2.tsx b/src/packages/progress/demos/taro/demo2.tsx
@@ -1,14 +1,25 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react-taro'
+import { Cell, Progress } from '@nutui/nutui-react-taro'
+import Taro from '@tarojs/taro'
 
 const Demo2 = () => {
   return (
-    <Progress
-      percent={30}
-      color="var(--nutui-color-primary)"
-      background="var(--nutui-brand-1)"
-      strokeWidth="15"
-    />
+    <Cell>
+      <Progress
+        percent={30}
+        color={
+          ['HARMONY', 'RN'].includes(Taro.getEnv())
+            ? '#FF0F23'
+            : 'var(--nutui-color-primary)'
+        }
+        background={
+          ['HARMONY', 'RN'].includes(Taro.getEnv())
+            ? '#FFEAE8'
+            : 'var(--nutui-brand-1)'
+        }
+        strokeWidth="15"
+      />
+    </Cell>
   )
 }
 export default Demo2
diff --git a/src/packages/progress/demos/taro/demo3.tsx b/src/packages/progress/demos/taro/demo3.tsx
@@ -1,7 +1,11 @@
 import React from 'react'
-import { Progress } from '@nutui/nutui-react-taro'
+import { Cell, Progress } from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
-  return <Progress percent={50} showText />
+  return (
+    <Cell>
+      <Progress percent={50} showText />
+    </Cell>
+  )
 }
 export default Demo3
diff --git a/src/packages/progress/demos/taro/demo4.tsx b/src/packages/progress/demos/taro/demo4.tsx
@@ -1,15 +1,17 @@
 import React from 'react'
-import { Progress, Image } from '@nutui/nutui-react-taro'
+import { Progress, Image, Cell } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
   return (
-    <Progress percent={60} showText>
-      <Image
-        width="30px"
-        height="30px"
-        src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
-      />
-    </Progress>
+    <Cell>
+      <Progress percent={60} showText>
+        <Image
+          width="30px"
+          height="30px"
+          src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+        />
+      </Progress>
+    </Cell>
   )
 }
 export default Demo4
diff --git a/src/packages/progress/demos/taro/demo6.tsx b/src/packages/progress/demos/taro/demo6.tsx
@@ -1,28 +1,25 @@
 import React from 'react'
 import { Progress, Cell } from '@nutui/nutui-react-taro'
+import Taro from '@tarojs/taro'
 import { Checked, Tips } from '@nutui/icons-react-taro'
 
 const Demo6 = () => {
   return (
     <>
       <Cell>
-        <Progress
-          percent={30}
-          color="linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)"
-          animated
-        />
+        <Progress percent={30} color="blue" animated />
       </Cell>
       <Cell align="center">
         <Progress percent={100} />
-        <Checked color="green" style={{ margin: '0 5px' }} />
+        {!['HARMONY', 'RN'].includes(Taro.getEnv()) && (
+          <Checked color="green" style={{ margin: '0 5px' }} />
+        )}
       </Cell>
       <Cell align="center">
-        <Progress
-          percent={100}
-          color="linear-gradient(90deg, rgba(180,236,81,1) 0%,rgba(66,147,33,1) 100%)"
-          strokeWidth="15"
-        />
-        <Tips color="red" style={{ margin: '0 5px' }} />
+        <Progress percent={100} color="#AAFF00" strokeWidth="15" />
+        {!['HARMONY', 'RN'].includes(Taro.getEnv()) && (
+          <Tips color="red" style={{ margin: '0 5px' }} />
+        )}
       </Cell>
     </>
   )

diff --git a/src/packages/progress/demos/taro/demo7.tsx b/src/packages/progress/demos/taro/demo7.tsx
@@ -1,28 +1,35 @@
 import React, { useState } from 'react'
-import { Progress, Cell, Button, Toast } from '@nutui/nutui-react-taro'
+import { Cell, Button, Toast, Progress } from '@nutui/nutui-react-taro'
+import { View, Text } from '@tarojs/components'
+import Taro, { pxTransform } from '@tarojs/taro'
 
 const Demo7 = () => {
   const [value, setValue] = useState(0)
   const [show, setShow] = useState(false)
   const [toastMsg, setToastMsg] = useState('')
   return (
     <Cell.Group>
-      <Toast
-        type="text"
-        visible={show}
-        content={toastMsg}
-        onClose={() => {
-          setShow(false)
-        }}
-      />
+      {!['HARMONY', 'RN'].includes(Taro.getEnv()) && (
+        <Toast
+          type="text"
+          visible={show}
+          content={toastMsg}
+          onClose={() => {
+            setShow(false)
+          }}
+        />
+      )}
+
       <Cell align="center">
-        <Progress percent={value} />
-        <span style={{ margin: '0 5px' }}>{value}%</span>
+        <View style={{ width: '90%', marginRight: pxTransform(5) }}>
+          <Progress percent={value} />
+        </View>
+        <Text>{value}%</Text>
       </Cell>
       <Cell align="center">
         <Button
           type="default"
-          style={{ margin: 8 }}
+          style={{ marginRight: pxTransform(16) }}
           onClick={() => {
             if (value <= 0) {
               setToastMsg('进度已为0')
@@ -35,7 +42,6 @@ const Demo7 = () => {
         </Button>
         <Button
           type="primary"
-          style={{ margin: 8 }}
           onClick={() => {
             if (value >= 100) {
               setToastMsg('进度已为100%')