feat(Progress): 增加进度提示字展示 及 Update README.md (#308)

Amber-Nan · 杨楠 · web-flow · commit a454fe6187db · 2021-10-27T15:00:32.000+08:00
* fix:发布 iOS 应用商店:一. 创建AppID * fix:发布 iOS 应用商店优化排版 * fix:ios应用商店文档更新及排版优化 * fix:修改环境安装文档语法错误及部分内容优化 * fix:更新ios应用发布流程 * fix:ios应用商店发布更新 * fix:更新ios及安卓应用商店发布 * fix:安卓上架更新 * fix:增加button自定义文本实例 * fix:增加checkBox复选框size调整及文档描述效果展示 * doc:更新文档导入图片 * doc(website): Update Readme.md * fix:修复SpeedDial Android 点击事件失效及拖拽失效问题 #286 * fix:解决SelectCascader 在安卓端不能选择问题 #289 * fix:修复Modal 弹出动画底层延迟收起问题 * feat:NoticeBar 通告栏增加文字样式修改及页面demo展示 * doc(website): Update NoticeBar Readme.md * fix:解决 MenuDropdown 安卓下拉菜单被遮挡问题 * feat:Progress 新增进度图标 * doc(website): Update Progress Readme.md * style:删除多余代码 * feat:Progress 增加进度提示字展示 及 doc(website): Update Progress Readme.md Co-authored-by: 杨楠 <yangnan@nihaosi.com>
diff --git a/example/examples/src/routes/Progress/index.tsx b/example/examples/src/routes/Progress/index.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useState, useEffect} from 'react';
 import {View, Text} from 'react-native';
 import {Progress, Button, Spacing} from '@uiw/react-native';
 import Layout, {Container} from '../../Layout';
@@ -12,9 +12,10 @@ const ProgressDemo = (props: any) => {
   const title = route.params.title;
 
   const [val, setValue] = useState<number>(0);
+  const [automaticVal, setAutomaticVal] = useState<number>(0);
 
   const onPress = () => {
-    let count = val + 10;
+    let count = val + 5;
     if (count > 100) {
       count = 0;
     }
@@ -26,35 +27,34 @@ const ProgressDemo = (props: any) => {
       <Header title={title} description={description} />
       <Body>
         <Header description={'基本使用'} />
-        <Progress progressColor="#5847FF" progress={40} />
+        <Progress progressColor="#5847FF" progress={40} progressShow={false} />
         <Header description={'展示进度图标'} />
-        <Progress progressColor="#5847FF" iconShow={true} progress={30} />
+        <Progress
+          progressColor="#5847FF"
+          progressShow={false}
+          iconShow={true}
+          progress={30}
+        />
         <Header description={'改变进度图标'} />
         <Progress
           progressColor="#5847FF"
           iconShow={true}
+          progressShow={false}
           progress={60}
           xml={motorcycle}
         />
         <Header description={'点击变化'} />
         <View
           style={{
             flexDirection: 'column',
-            marginHorizontal: 15,
+            marginBottom: 10,
           }}>
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-            }}>
-            <Progress
-              progress={val}
-              progressColor="#5847FF"
-              iconShow={true}
-              xml={motorcycle}
-            />
-            <Text style={{fontSize: 12, marginHorizontal: 10}}>{val}%</Text>
-          </View>
+          <Progress
+            progress={val}
+            progressColor="#9185FF"
+            iconShow={true}
+            xml={motorcycle}
+          />
           <Button color={'#5847FF'} onPress={onPress}>
             (+-)10
           </Button>
diff --git a/packages/core/src/Progress/README.md b/packages/core/src/Progress/README.md
@@ -33,3 +33,4 @@ function Demo() {
 | `iconShow` | 是否展示图标 | boolean | false |
 | `xml` | 图标源 | String | 默认图标 |
 | `size` | 图标尺寸 | number| 25 |
+| `progressShow` | 是否展示进度提示字 | boolean| true |
diff --git a/packages/core/src/Progress/index.tsx b/packages/core/src/Progress/index.tsx
@@ -1,6 +1,6 @@
 import { has } from 'lodash';
 import React, { useRef, useState, useEffect } from 'react';
-import { Animated, View, StyleSheet, ViewProps, LayoutChangeEvent } from 'react-native';
+import { Animated, View, StyleSheet, ViewProps, LayoutChangeEvent, Text } from 'react-native';
 import { Flex } from 'src';
 import { run } from './svg';
 import Icon from '../Icon';
@@ -20,14 +20,17 @@ export interface ProgressProps extends ViewProps {
   /** 图标源 */
   xml?: string;
   /** 是否展示图标 */
-  iconShow?: boolean | false;
+  iconShow?: boolean;
   /** 图标尺寸 */
   size?: number;
+  /** 是否展示进度提示字 */
+  progressShow?: boolean;
 }
 
 export default (props: ProgressProps) => {
   const {
-    iconShow,
+    iconShow = false,
+    progressShow = true,
     size = 25,
     xml = run,
     style,
@@ -36,6 +39,7 @@ export default (props: ProgressProps) => {
     position,
     animation = { duration: 500 },
   } = props;
+
   const progWidth = useRef<any>(new Animated.Value(0)).current;
   const [wrapWidth, setWrapWidth] = useState<number>(0);
 
@@ -74,14 +78,20 @@ export default (props: ProgressProps) => {
         style={[
           styles.pre,
           position === 'fixed' ? { position: 'absolute', top: 0 } : {},
-          { borderColor: progressColor },
+          { borderColor: progressColor, height: progressShow === true ? 20 : 4 },
         ]}
       >
+        {progressShow && progressShow === true && (
+          <View style={{ position: 'absolute', left: '45%', zIndex: 1000 }}>
+            <Text style={{ fontSize: 12 }}>{progress}%</Text>
+          </View>
+        )}
         <Animated.View
           style={[
             styles.preOisn,
             {
               width: progWidth,
+              height: progressShow === true ? 20 : 4,
               backgroundColor: progressColor,
             },
           ]}
@@ -91,7 +101,7 @@ export default (props: ProgressProps) => {
         <View onLayout={onLayout} style={[styles.preIcon, { height: size }]}>
           <Animated.View
             style={{
-              marginLeft: progress === 0 ? -50 : -35,
+              marginLeft: progress === 0 ? -50 : progress === 100 ? -20 : -35,
               width: progWidth,
             }}
           ></Animated.View>
@@ -109,7 +119,6 @@ const styles = StyleSheet.create({
   },
   pre: {
     borderWidth: 1,
-    height: 4,
     width: '100%',
     borderRadius: 20,
     marginBottom: 0,
@@ -124,7 +133,6 @@ const styles = StyleSheet.create({
   },
   preOisn: {
     position: 'absolute',
-    height: 4,
     left: 0,
     top: 0,
   },
