Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added custom text property for Circle component. #223

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update Pie.js
muratoner authored Jan 17, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit d4a828420464ed27eb2e576691395f3150e38407
172 changes: 138 additions & 34 deletions Pie.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
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 { Animated, StyleSheet, Text, View } from 'react-native';
import Arc from './Shapes/Arc';
import withAnimation from './withAnimation';
import { Surface as ARTSurface } from '@react-native-community/art';

const CIRCLE = Math.PI * 2;

const AnimatedSurface = Animated.createAnimatedComponent(ARTSurface);
const AnimatedSector = Animated.createAnimatedComponent(Sector);
const AnimatedArc = Animated.createAnimatedComponent(Arc);

const styles = StyleSheet.create({
container: {
@@ -19,97 +17,203 @@ const styles = StyleSheet.create({
},
});

export class ProgressPie extends Component {
export class ProgressCircle extends Component {
static propTypes = {
animated: PropTypes.bool,
borderColor: PropTypes.string,
borderWidth: PropTypes.number,
color: PropTypes.string,
children: PropTypes.node,
direction: PropTypes.oneOf(['clockwise', 'counter-clockwise']),
fill: PropTypes.string,
formatText: PropTypes.func,
indeterminate: PropTypes.bool,
progress: PropTypes.oneOfType([
PropTypes.number,
PropTypes.instanceOf(Animated.Value),
]),
rotation: PropTypes.instanceOf(Animated.Value),
showsText: PropTypes.bool,
size: PropTypes.number,
style: PropTypes.any,
strokeCap: PropTypes.oneOf(['butt', 'square', 'round']),
textStyle: PropTypes.any,
thickness: PropTypes.number,
unfilledColor: PropTypes.string,
endAngle: PropTypes.number,
allowFontScaling: PropTypes.bool,
text: PropTypes.string,
};

static defaultProps = {
borderWidth: 1,
color: 'rgba(0, 122, 255, 1)',
direction: 'clockwise',
formatText: progress => `${Math.round(progress * 100)}%`,
progress: 0,
showsText: false,
size: 40,
thickness: 3,
endAngle: 0.9,
allowFontScaling: true,
};

constructor(props, context) {
super(props, context);

this.progressValue = 0;
}

componentDidMount() {
if (this.props.animated) {
this.props.progress.addListener(event => {
this.progressValue = event.value;
if (this.props.showsText || this.progressValue === 1) {
this.forceUpdate();
}
});
}
}

render() {
const {
animated,
borderColor,
borderWidth,
children,
color,
children,
direction,
fill,
formatText,
indeterminate,
progress,
rotation,
showsText,
size,
style,
strokeCap,
textStyle,
thickness,
unfilledColor,
endAngle,
allowFontScaling,
text,
...restProps
} = this.props;

const Surface = rotation ? AnimatedSurface : ARTSurface;
const Shape = animated ? AnimatedSector : Sector;
const border = borderWidth || (indeterminate ? 1 : 0);

const radius = size / 2 - border;
const offset = {
top: border,
left: border,
};
const textOffset = border + thickness;
const textSize = size - textOffset * 2;

const Surface = rotation ? AnimatedSurface : ARTSurface;
const Shape = animated ? AnimatedArc : Arc;
const progressValue = animated ? this.progressValue : progress;
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({
style={{
transform: [
{
rotate:
indeterminate && rotation
? rotation.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg'],
}),
},
],
}
: undefined
}
})
: '0deg',
},
],
}}
>
{unfilledColor ? (
<Circle radius={radius} offset={offset} fill={unfilledColor} />
{unfilledColor && progressValue !== 1 ? (
<Shape
fill={fill}
radius={radius}
offset={offset}
startAngle={angle}
endAngle={CIRCLE}
direction={direction}
stroke={unfilledColor}
strokeWidth={thickness}
/>
) : (
false
)}
{!indeterminate ? (
<Shape
fill={fill}
radius={radius}
offset={offset}
startAngle={0}
endAngle={angle}
direction={direction}
stroke={color}
strokeCap={strokeCap}
strokeWidth={thickness}
/>
) : (
false
)}
<Shape radius={radius} angle={angle} offset={offset} fill={color} />
{borderWidth ? (
<Circle
{border ? (
<Arc
radius={size / 2}
startAngle={0}
endAngle={(indeterminate ? endAngle * 2 : 2) * Math.PI}
stroke={borderColor || color}
strokeWidth={borderWidth}
strokeCap={strokeCap}
strokeWidth={border}
/>
) : (
false
)}
</Surface>
{!indeterminate && showsText ? (
<View
style={{
position: 'absolute',
left: textOffset,
top: textOffset,
width: textSize,
height: textSize,
borderRadius: textSize / 2,
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text
style={[
{
color,
fontSize: textSize / 2,
fontWeight: '300',
},
textStyle,
]}
allowFontScaling={allowFontScaling}
numberOfLines={1}
>
{!text ? formatText(progressValue) : text}
</Text>
</View>
) : (
false
)}
{children}
</View>
);
}
}

export default withAnimation(ProgressPie, 0.2);
export default withAnimation(ProgressCircle);