Skip to content

Commit 1e77259

Browse files
ChenlingasMxChenlingasMx
authored
Merge pull request #601 from hy916/dev
fix(Progress) 添加Progress进度圈组件，优化Progress组件,升级依赖
2 parents e09d62e + 593f2ba commit 1e77259

File tree

10 files changed

+326
-235
lines changed

10 files changed

+326
-235
lines changed

‎example/base/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@
1414
"react-native": "0.69.7",
1515
"@uiw/react-native": "3.2.3",
1616
"@uiw/react-native-image-picker": "3.2.3",
17-
"react-native-svg": "12.1.1",
17+
"react-native-svg": "13.0.0",
1818
"react-native-gesture-handler": "2.8.0",
1919
"react-native-root-siblings": "4.1.1",
20-
"react-native-image-picker":"^5.3.1",
21-
"react-native-image-viewing":"~0.2.2",
22-
"@react-native-camera-roll/camera-roll":"5.3.1"
20+
"react-native-image-picker": "^5.3.1",
21+
"react-native-image-viewing": "~0.2.2",
22+
"@react-native-camera-roll/camera-roll": "5.3.1"
2323
},
2424
"devDependencies": {
2525
"@babel/core": "~7.20.7",

‎example/examples/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@
1919
"react-native-gesture-handler": "~2.5.0",
2020
"react-native-safe-area-context": "~4.3.1",
2121
"react-native-screens": "~3.15.0",
22-
"react-native-svg": "12.1.1",
23-
"react-native-image-picker":"^5.3.1",
24-
"react-native-image-viewing":"~0.2.2",
22+
"react-native-svg": "13.0.0",
23+
"react-native-image-picker": "^5.3.1",
24+
"react-native-image-viewing": "~0.2.2",
2525
"@uiw/react-native-image-picker": "3.2.3",
26-
"@react-native-camera-roll/camera-roll":"5.3.1"
26+
"@react-native-camera-roll/camera-roll": "5.3.1"
2727
},
2828
"devDependencies": {
2929
"@babel/core": "~7.20.7",

‎example/examples/src/routes/Progress/index.tsx

Lines changed: 82 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,100 @@
1-
import React, {useState, useEffect} from 'react';
2-
import {View, Text} from 'react-native';
3-
import {Progress, Button, Spacing} from '@uiw/react-native';
4-
import Layout, {Container} from '../../Layout';
5-
import {motorcycle} from './svg';
1+
import React, { useState, useEffect } from 'react';
2+
import { View, Text } from 'react-native';
3+
import { Progress, Spacing, Button, Toast } from '@uiw/react-native';
4+
import Layout, { Container } from '../../Layout';
65

7-
const {Header, Body, Card} = Layout;
6+
const { Header, Body, Card } = Layout;
87

98
const ProgressDemo = (props: any) => {
10-
const {route} = props;
9+
const { route } = props;
1110
const description = route.params.description;
1211
const title = route.params.title;
1312

14-
const [val, setValue] = useState<number>(0);
15-
const [automaticVal, setAutomaticVal] = useState<number>(0);
13+
const [val, setValue] = useState<number>(15);
14+
console.log('val', val);
1615

1716
const onPress = () => {
18-
let count = val + 5;
19-
if (count > 100) {
20-
count = 0;
17+
if (val < 100) {
18+
setValue(val + 5);
19+
} else {
20+
Toast.info('宝，别点了，要溢出了')
2121
}
22-
setValue(count);
2322
};
2423

2524
return (
2625
<Container>
2726
<Header title={title} description={description} />
28-
<Body style={{paddingLeft: 16, paddingRight: 16}}>
29-
<Header description={'基本使用'} />
30-
<Progress
31-
// progressColor="#5847FF"
32-
progress={40}
33-
progressShow={false}
34-
/>
35-
<Header description={'展示进度图标'} />
36-
<Progress
37-
// progressColor="#5847FF"
38-
progressShow={false}
39-
iconShow={true}
40-
progress={30}
41-
/>
42-
<Header description={'改变进度图标'} />
43-
<Progress
44-
// progressColor="#5847FF"
45-
iconShow={true}
46-
progressShow={false}
47-
progress={60}
48-
xml={motorcycle}
49-
/>
50-
<Header description={'点击变化'} />
51-
<View
52-
style={{
53-
flexDirection: 'column',
54-
marginBottom: 10,
55-
}}>
56-
<Progress
57-
progress={val}
58-
// progressColor="#9185FF"
59-
iconShow={true}
60-
xml={motorcycle}
61-
/>
62-
<Button color={'#3578e5'} onPress={onPress}>
63-
(+-)10
64-
</Button>
65-
</View>
27+
<Body style={{ paddingLeft: 16, paddingRight: 16 }}>
28+
<Card title="基础实例">
29+
<Progress type='circle' value={60} />
30+
<Spacing />
31+
<Progress type='line' value={60} />
32+
</Card>
33+
<Card title="自定义值">
34+
<Progress type='circle' value={val} />
35+
<Spacing />
36+
<Progress type='line' value={val} />
37+
<Spacing />
38+
<Button onPress={() => onPress()} >你点我呀！</Button>
39+
</Card>
40+
<Card title="自定义渐变色">
41+
<Progress type='circle' color={['#FFD080', 'red']} value={80} />
42+
<Spacing />
43+
<Progress type='line' color={['red', '#FFD080',]} value={80} />
44+
</Card>
45+
<Card title="设置大小">
46+
<Progress type='circle' width={60} left='6.5%' value={10} />
47+
<Spacing />
48+
<Progress type='circle' width={80} left='8.5%' value={20} />
49+
<Spacing />
50+
<Progress type='line' width={60} value={40} />
51+
<Spacing />
52+
<Progress type='line' width={80} value={60} />
53+
</Card>
54+
<Card title="是否显示单位">
55+
<Progress type='circle' showUnit={false} left='13%' value={20} />
56+
<Spacing />
57+
<Progress type='line' showUnit={false} value={40} />
58+
</Card>
59+
<Card title="自定义单色">
60+
<Progress type='circle' color='#FFD080' value={50} />
61+
<Spacing />
62+
<Progress type='line' color='#FFD080' value={60} />
63+
</Card>
64+
<Card title="自定义背景色">
65+
<Progress type='circle' bgColor="#FFD080" value={5} />
66+
<Spacing />
67+
<Progress type='line' bgColor='#FFD080' value={70} />
68+
</Card>
69+
<Card title="设置外环宽度">
70+
<Progress type='circle' value={5} strokeWidth={25} />
71+
<Spacing />
72+
<Progress type='line' value={70} strokeWidth={15} />
73+
</Card>
74+
75+
<Card title="是否显示文本">
76+
<Progress type='circle' value={68} showLabel={false} />
77+
<Spacing />
78+
<Progress type='line' value={70} showLabel={false} />
79+
</Card>
80+
<Card title="自定义标签">
81+
<Progress type='circle' value={53} label={<Text>饕餮</Text>} />
82+
<Spacing />
83+
<Progress type='line' value={30} label={<Text>饕餮</Text>} />
84+
</Card>
85+
<Card title="设置外环宽度">
86+
<Progress type='circle' value={5} strokeWidth={25} />
87+
<Spacing />
88+
<Progress type='line' value={70} strokeWidth={15} />
89+
</Card>
90+
<Card title="自定义文本位置">
91+
<Progress type='circle' value={5} top="50%" left='50%' />
92+
<Spacing />
93+
<Progress type='line' value={70} top="-20%" left='50%' />
94+
</Card>
95+
<Spacing />
6696
</Body>
67-
</Container>
97+
</Container >
6898
);
6999
};
70100

‎packages/core/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,14 @@
5858
"@uiw/icons": "2.5.3",
5959
"@validator.tool/hook": "2.2.4",
6060
"ahooks": "3.7.6",
61-
"dayjs":"~1.11.7",
61+
"dayjs": "~1.11.7",
6262
"color": "4.2.3",
6363
"lodash": "4.17.21",
6464
"prop-types": "15.7.2",
6565
"react-native-gesture-handler": "2.8.0",
6666
"react-native-root-siblings": "4.1.1",
67-
"react-native-svg": "12.1.1",
68-
"@shopify/restyle":"~2.4.2"
67+
"react-native-svg": "13.0.0",
68+
"@shopify/restyle": "~2.4.2"
6969
},
7070
"peerDependencies": {
7171
"react": ">=16.9.0",

‎packages/core/src/Progress/README.md

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,85 @@
11
Progress 进度条
22
---
33

4+
> **Progress 进度条组件在未来的版本参数已变更，请注意使用**
5+
46
表明某个任务的当前进度。
57

8+
**------------------------------------------------------------------------------新文档------------------------------------------------------------------------------**
9+
10+
### 基础示例
11+
12+
<!--DemoStart-->
13+
```jsx mdx:preview&background=#bebebe29
14+
import React from 'react';
15+
import { SafeAreaView } from 'react-native';
16+
import { Progress } from '@uiw/react-native';
17+
import { motorcycle } from './svg';
18+
19+
function Demo() {
20+
return (
21+
<SafeAreaView style={{ flex: 1 }}>
22+
<Progress type='circle' />
23+
</SafeAreaView>
24+
)
25+
}
26+
export default Demo
27+
```
28+
29+
### 自定义颜色
30+
31+
<!--DemoStart-->
32+
```jsx mdx:preview&background=#bebebe29
33+
import React from 'react';
34+
import { SafeAreaView } from 'react-native';
35+
import { Progress } from '@uiw/react-native';
36+
37+
function Demo() {
38+
return (
39+
<SafeAreaView style={{ flex: 1 }}>
40+
<Progress type='circle' color={['#FFD080', 'red']} />
41+
</SafeAreaView>
42+
)
43+
}
44+
export default Demo
45+
```
46+
### 自定义百分比,展示进度
47+
48+
<!--DemoStart-->
49+
```jsx mdx:preview&background=#bebebe29
50+
import React from 'react';
51+
import { SafeAreaView } from 'react-native';
52+
import { Progress } from '@uiw/react-native';
53+
54+
function Demo() {
55+
return (
56+
<SafeAreaView style={{ flex: 1 }}>
57+
<Progress type='circle' value={88} />
58+
<Progress type='circle' value={55} />
59+
</SafeAreaView>
60+
)
61+
}
62+
export default Demo
63+
```
64+
65+
### Props
66+
67+
| 参数 | 说明 | 类型 | 默认值 |
68+
|------|------|-----|------|
69+
| `type` | 设置进度圈还是进度条,`'line' or 'circle'` | string | 'circle' |
70+
| `width` |设置进度圈大小，进度条长度 | number | 100 |
71+
| `color` | 设置进度圈,进度条颜色 `string or [string, string]`| String | `['#3578e5', '#00c6ff']` |
72+
| `bgColor` | 设置背景颜色 | String | `'#e5e5e5'` |
73+
| `strokeWidth` | 设置进度圈外环宽度，进度条的高 | number | 10 |
74+
| `value` | 设置百分比的值 | number| 0 |
75+
| `showLabel` | 是否显示值文本 | boolean| true |
76+
| `label` | 自定义标签 | number | 10 |
77+
| `showUnit` | 是否显示单位 | boolean | true |
78+
| `top` | 自定义文本位置 | String | `'50%'` |
79+
| `left` | 自定义文本位置 | String | `'11%'` |
80+
81+
82+
**------------------------------------------------------------------------------老文档------------------------------------------------------------------------------**
683

784
### 基础示例
885

0 commit comments

Comments
 (0)