feat: Add Progress component. (#182)

* feat:添加进度条 * doc:添加文档 * fix:添加动画
uiwjs · Aug 17, 2021 · 37f55f0 · 37f55f0
1 parent 3edeb93
commit 37f55f0
Show file tree

Hide file tree

Showing 10 changed files with 415 additions and 205 deletions.
diff --git a/example/examples/ios/Podfile.lock b/example/examples/ios/Podfile.lock
diff --git a/example/examples/src/routes.tsx b/example/examples/src/routes.tsx
@@ -354,4 +354,12 @@ export const stackPageData: Routes[] = [
       description: '轮播图',
     },
   },
+  {
+    name: 'Progress',
+    component: require('./routes/Progress').default,
+    params: {
+      title: 'Progress 进度条',
+      description: 'Progress 表明某个任务的当前进度',
+    },
+  },
 ];
diff --git a/example/examples/src/routes/Progress/index.tsx b/example/examples/src/routes/Progress/index.tsx
@@ -0,0 +1,47 @@
+import React, {useState} from 'react';
+import {View, Text} from 'react-native';
+import {Progress, Button, Spacing} from '@uiw/react-native';
+import Layout, {Container} from '../../Layout';
+
+const {Header, Body, Card} = Layout;
+
+const ProgressDemo = (props: any) => {
+  const {route} = props;
+  const description = route.params.description;
+  const title = route.params.title;
+
+  const [val, setValue] = useState<number>(0);
+
+  const onPress = () => {
+    let count = val + 10;
+    if (count > 100) {
+      count = 0;
+    }
+    setValue(count)
+  }
+
+  return (
+    <Container>
+      <Progress progress={30}/>
+      <Header title={title} description={description} />
+      <Body>
+        <Card title="基础实例" style={{margin:10}}>
+          <Progress progressColor="red" progress={40}/>
+          <Spacing />
+          <Button onPress={onPress}>(+-)10</Button>
+          <Spacing />
+          <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
+            <Progress progress={val} progressColor='purple'/>
+            <Text style={{fontSize: 12, width: 40, textAlign: 'right'}}>{val}%</Text>
+          </View>
+          <Spacing />
+          <Progress progressColor="orange" progress={60}/>
+          <Spacing />
+          <Progress progressColor="yellow" progress={80}/>
+        </Card>
+      </Body>
+    </Container>
+  );
+};
+
+export default ProgressDemo;
diff --git a/packages/core/src/Progress/README.md b/packages/core/src/Progress/README.md
@@ -0,0 +1,30 @@
+Progress 进度条
+---
+
+表明某个任务的当前进度。
+
+### 基础示例
+
+<!--DemoStart--> 
+```jsx
+import {  SafeAreaView } from 'react-native';
+import { Progress } from '@uiw/react-native';
+
+function Demo() {
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <Progress progress={30} position="fixed"/>
+    </SafeAreaView>
+  )
+}
+```
+<!--End-->
+
+
+## Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|-----|------|
+| `progress` | 进度百分比（可选） | Number | 0 |
+| `progressColor` | 颜色（可选） | String | none |
+| `position` | 位置，fixed 将浮出固定在最顶层（可选） | String | none |
diff --git a/packages/core/src/Progress/index.tsx b/packages/core/src/Progress/index.tsx
@@ -0,0 +1,100 @@
+import React, {useRef, useState, useEffect} from 'react';
+import {
+  Animated,
+  View,
+  StyleSheet,
+  ViewProps,
+  LayoutChangeEvent
+} from 'react-native'
+
+type PositionType = 'fixed' | 'relative'
+
+// 组件的属性定义
+export interface ProgressProps  extends ViewProps {
+  /** 当前进度百分比， 0 - 100, 默认0 */
+  progress?: number;
+  /** 颜色 */
+  progressColor? : string
+  /** 位置 */
+  position?: PositionType;
+  /** 动画持续的时间 */
+  animation?: { duration?: number; } | boolean;
+}
+
+export default (props: ProgressProps) => {
+  const {
+    style,
+    progress = 0,
+    progressColor = '#108ee9',
+    position,
+    animation = { duration: 500 },
+  } = props;
+
+  const progWidth = useRef<any>(new Animated.Value(0)).current;
+  const [wrapWidth, setWrapWidth] = useState<number>(0);
+
+  useEffect(() => {
+    startAnimation();
+  }, [wrapWidth, progress])
+
+  const startAnimation = () => {
+    Animated.timing(progWidth, {
+      toValue: getWidth(),
+      duration: typeof animation !== 'boolean' ? animation.duration : 1000,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    setWrapWidth(e.nativeEvent.layout.width);
+  }
+
+  const getWidth = (percent: number = progress) => {
+    return wrapWidth * (normalPercent(percent) / 100)
+  }
+
+  const normalPercent = (percent?: number) => {
+    let widthPercent: any = 0
+    if (percent !== undefined && percent > 0) {
+      widthPercent = percent > 100 ? 100 : percent
+    }
+    return widthPercent
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      <View onLayout={onLayout} style={[
+        styles.pre, 
+        position === 'fixed' ? { position: 'absolute', top: 0 } : {},
+        { borderColor: progressColor }]}>
+        <Animated.View 
+          style={[styles.preOisn, {
+            width: progWidth,
+            backgroundColor: progressColor
+          }]}></Animated.View>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    flex: 1,
+  },
+  pre: {
+    borderWidth: 1,
+    height: 4,
+    width: '100%',
+    borderRadius: 20,
+    marginBottom: 0,
+    marginTop: 0,
+    overflow: 'hidden',
+  },
+  preOisn: {
+    position: 'absolute',
+    height: 4,
+    left: 0,
+    top: 0,
+  },
+});
diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
@@ -81,6 +81,8 @@ export * from './Stepper';
 
 export { default as SpeedDial } from './SpeedDial'
 export * from './SpeedDial'
+export { default as Progress } from './Progress'
+export * from './Progress'
 export { default as Swiper } from './Swiper';
 export * from './Swiper';
 /**

diff --git a/website/src/pages/components/progress/index.tsx b/website/src/pages/components/progress/index.tsx
@@ -0,0 +1,11 @@
+import Markdown, { importAll } from '../../../component/Markdown';
+
+export default class Page extends Markdown {
+  path="/packages/core/src/Progress/README.md"
+  getMarkdown = async () => {
+    const md = await import('@uiw/react-native/lib/Progress/README.md');
+    // 支持 markdown 中，相对于当前 index.tsx 相对路径引入图片资源
+    importAll((require as any).context('./', true, /\.(png|gif|jpg|svg)$/), this.imageFiles);
+    return md.default || md;
+  }
+}
diff --git a/website/src/routes/menus.ts b/website/src/routes/menus.ts
@@ -49,6 +49,7 @@ export const componentMenus: MenuData[] = [
   { path: "/components/stepper", name: "Stepper 步进器" },
 
   { path: "/components/speeddial", name: "SpeedDial 悬浮标记" },
+  { path: "/components/progress", name: "Progress 进度条" },
   { divider: true, name: "其它" },
   { href: "https://github.com/uiwjs/react-native-alipay", name: "Alipay 支付宝", target: '__blank' },
   { href: "https://github.com/uiwjs/react-native-amap-geolocation", name: "AMapGeolocation 高德地图定位", target: '__blank' },

diff --git a/website/src/routes/router.tsx b/website/src/routes/router.tsx
@@ -183,6 +183,9 @@ export const getRouterData = {
   '/components/speeddial': {
     component: dynamicWrapper([], () => import('../pages/components/speeddial')),
   },
+  '/components/progress': {
+    component: dynamicWrapper([], () => import('../pages/components/progress')),
+  },
   '/components/card': {
     component: dynamicWrapper([], () => import('../pages/components/card')),
   },

diff --git a/yarn.lock b/yarn.lock
@@ -15797,6 +15797,14 @@ react-native-screens@3.5.0:
   dependencies:
     warn-once "^0.1.0"
 
+react-native-svg@12.1.0:
+  version "12.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-12.1.0.tgz#acfe48c35cd5fca3d5fd767abae0560c36cfc03d"
+  integrity sha512-1g9qBRci7man8QsHoXn6tP3DhCDiypGgc6+AOWq+Sy+PmP6yiyf8VmvKuoqrPam/tf5x+ZaBT2KI0gl7bptZ7w==
+  dependencies:
+    css-select "^2.1.0"
+    css-tree "^1.0.0-alpha.39"
+
 react-native-svg@12.1.1:
   version "12.1.1"
   resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-12.1.1.tgz#5f292410b8bcc07bbc52b2da7ceb22caf5bcaaee"