forked from oblador/react-native-progress
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Pie.js
115 lines (104 loc) · 2.82 KB
/
Pie.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Animated, StyleSheet, View } from 'react-native';
import { Surface as ARTSurface } from '@react-native-community/art';
import Circle from './Shapes/Circle';
import Sector from './Shapes/Sector';
import withAnimation from './withAnimation';
const CIRCLE = Math.PI * 2;
const AnimatedSurface = Animated.createAnimatedComponent(ARTSurface);
const AnimatedSector = Animated.createAnimatedComponent(Sector);
const styles = StyleSheet.create({
container: {
backgroundColor: 'transparent',
overflow: 'hidden',
},
});
export class ProgressPie extends Component {
static propTypes = {
animated: PropTypes.bool,
borderColor: PropTypes.string,
borderWidth: PropTypes.number,
color: PropTypes.string,
children: PropTypes.node,
progress: PropTypes.oneOfType([
PropTypes.number,
PropTypes.instanceOf(Animated.Value),
]),
rotation: PropTypes.instanceOf(Animated.Value),
size: PropTypes.number,
style: PropTypes.any,
unfilledColor: PropTypes.string,
};
static defaultProps = {
borderWidth: 1,
color: 'rgba(0, 122, 255, 1)',
progress: 0,
size: 40,
};
render() {
const {
animated,
borderColor,
borderWidth,
children,
color,
progress,
rotation,
size,
style,
unfilledColor,
...restProps
} = this.props;
const Surface = rotation ? AnimatedSurface : ARTSurface;
const Shape = animated ? AnimatedSector : Sector;
const angle = animated
? Animated.multiply(progress, CIRCLE)
: progress * CIRCLE;
const radius = size / 2 - borderWidth;
const offset = {
top: borderWidth,
left: borderWidth,
};
return (
<View style={[styles.container, style]} {...restProps}>
<Surface
width={size}
height={size}
style={
rotation
? {
transform: [
{
rotate: rotation.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg'],
}),
},
],
}
: undefined
}
>
{unfilledColor ? (
<Circle radius={radius} offset={offset} fill={unfilledColor} />
) : (
false
)}
<Shape radius={radius} angle={angle} offset={offset} fill={color} />
{borderWidth ? (
<Circle
radius={size / 2}
stroke={borderColor || color}
strokeWidth={borderWidth}
/>
) : (
false
)}
</Surface>
{children}
</View>
);
}
}
export default withAnimation(ProgressPie, 0.2);