From 119a97a6f077a51dc22d0749254bfe3785e94517 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Murat=20=C3=96NER?= Date: Sun, 17 Jan 2021 18:47:46 +0300 Subject: [PATCH 01/10] Update Circle.js --- Circle.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Circle.js b/Circle.js index fdb793f..5dad63d 100644 --- a/Circle.js +++ b/Circle.js @@ -43,6 +43,7 @@ export class ProgressCircle extends Component { unfilledColor: PropTypes.string, endAngle: PropTypes.number, allowFontScaling: PropTypes.bool, + text: PropTypes.string }; static defaultProps = { @@ -97,6 +98,7 @@ export class ProgressCircle extends Component { unfilledColor, endAngle, allowFontScaling, + text, ...restProps } = this.props; @@ -202,7 +204,7 @@ export class ProgressCircle extends Component { ]} allowFontScaling={allowFontScaling} > - {formatText(progressValue)} + !text ? {formatText(progressValue)} : text ) : ( From b3e43888380be09c2d8b776b313e44657f6c8397 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Murat=20=C3=96NER?= Date: Sun, 17 Jan 2021 18:55:12 +0300 Subject: [PATCH 02/10] Update index.d.ts --- index.d.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/index.d.ts b/index.d.ts index 30c8ae0..45e7b74 100644 --- a/index.d.ts +++ b/index.d.ts @@ -189,6 +189,14 @@ declare module 'react-native-progress' { * @default false */ showsText?: boolean; + + /** + * You can show custom text instead of progress value. + * + * @type {boolean} + * @memberof CirclePropTypes + */ + text?: string; /** * A function returning a string to be displayed for the textual representation. From a6170ff749e7c8e162596f8342eb884ef225bc6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Murat=20=C3=96NER?= Date: Sun, 17 Jan 2021 18:55:58 +0300 Subject: [PATCH 03/10] Update index.d.ts --- index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.d.ts b/index.d.ts index 45e7b74..b4919ad 100644 --- a/index.d.ts +++ b/index.d.ts @@ -196,7 +196,7 @@ declare module 'react-native-progress' { * @type {boolean} * @memberof CirclePropTypes */ - text?: string; + text?: string | number; /** * A function returning a string to be displayed for the textual representation. From 2c841f571208cb2fe81f0accad4ace7c2752a87b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Murat=20=C3=96NER?= Date: Sun, 17 Jan 2021 18:57:10 +0300 Subject: [PATCH 04/10] Update Circle.js --- Circle.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/Circle.js b/Circle.js index 5dad63d..7e65c09 100644 --- a/Circle.js +++ b/Circle.js @@ -1,8 +1,7 @@ -import React, { Component } from 'react'; +import { Surface as ARTSurface } from '@react-native-community/art'; import PropTypes from 'prop-types'; +import React, { Component } from 'react'; import { Animated, StyleSheet, Text, View } from 'react-native'; -import { Surface as ARTSurface } from '@react-native-community/art'; - import Arc from './Shapes/Arc'; import withAnimation from './withAnimation'; @@ -43,7 +42,7 @@ export class ProgressCircle extends Component { unfilledColor: PropTypes.string, endAngle: PropTypes.number, allowFontScaling: PropTypes.bool, - text: PropTypes.string + text: PropTypes.string, }; static defaultProps = { @@ -204,7 +203,7 @@ export class ProgressCircle extends Component { ]} allowFontScaling={allowFontScaling} > - !text ? {formatText(progressValue)} : text + {!text ? formatText(progressValue) : text} ) : ( From d214901d2e59de182faa90932a8dcd30f47483fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Murat=20=C3=96NER?= Date: Sun, 17 Jan 2021 18:58:22 +0300 Subject: [PATCH 05/10] Update Circle.js --- Circle.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Circle.js b/Circle.js index 7e65c09..a7b14a7 100644 --- a/Circle.js +++ b/Circle.js @@ -196,12 +196,13 @@ export class ProgressCircle extends Component { style={[ { color, - fontSize: textSize / 4.5, + fontSize: textSize / 2, fontWeight: '300', }, textStyle, ]} allowFontScaling={allowFontScaling} + numberOfLines={1} > {!text ? formatText(progressValue) : text} From d4a828420464ed27eb2e576691395f3150e38407 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Murat=20=C3=96NER?= Date: Sun, 17 Jan 2021 18:59:52 +0300 Subject: [PATCH 06/10] Update Pie.js --- Pie.js | 172 +++++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 138 insertions(+), 34 deletions(-) diff --git a/Pie.js b/Pie.js index cc6fd00..e618e09 100644 --- a/Pie.js +++ b/Pie.js @@ -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 ( - {unfilledColor ? ( - + {unfilledColor && progressValue !== 1 ? ( + + ) : ( + false + )} + {!indeterminate ? ( + ) : ( false )} - - {borderWidth ? ( - ) : ( false )} + {!indeterminate && showsText ? ( + + + {!text ? formatText(progressValue) : text} + + + ) : ( + false + )} {children} ); } } -export default withAnimation(ProgressPie, 0.2); +export default withAnimation(ProgressCircle); From 590244f87c3f2bca42d4fc1b503027051b1df73b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Murat=20=C3=96NER?= Date: Sun, 17 Jan 2021 19:00:07 +0300 Subject: [PATCH 07/10] Update Pie.js --- Pie.js | 172 ++++++++++++--------------------------------------------- 1 file changed, 34 insertions(+), 138 deletions(-) diff --git a/Pie.js b/Pie.js index e618e09..cc6fd00 100644 --- a/Pie.js +++ b/Pie.js @@ -1,14 +1,16 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { Animated, StyleSheet, Text, View } from 'react-native'; -import Arc from './Shapes/Arc'; -import withAnimation from './withAnimation'; +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 AnimatedArc = Animated.createAnimatedComponent(Arc); +const AnimatedSector = Animated.createAnimatedComponent(Sector); const styles = StyleSheet.create({ container: { @@ -17,203 +19,97 @@ const styles = StyleSheet.create({ }, }); -export class ProgressCircle extends Component { +export class ProgressPie 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, - color, children, - direction, - fill, - formatText, - indeterminate, + color, progress, rotation, - showsText, size, style, - strokeCap, - textStyle, - thickness, unfilledColor, - endAngle, - allowFontScaling, - text, ...restProps } = this.props; - 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 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 ( - {unfilledColor && progressValue !== 1 ? ( - - ) : ( - false - )} - {!indeterminate ? ( - + {unfilledColor ? ( + ) : ( false )} - {border ? ( - + {borderWidth ? ( + ) : ( false )} - {!indeterminate && showsText ? ( - - - {!text ? formatText(progressValue) : text} - - - ) : ( - false - )} {children} ); } } -export default withAnimation(ProgressCircle); +export default withAnimation(ProgressPie, 0.2); From 57dae1e2376b54df7db553e3ffbaf8eccc753427 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Murat=20=C3=96NER?= Date: Sun, 17 Jan 2021 19:00:39 +0300 Subject: [PATCH 08/10] Update Circle.js --- Circle.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Circle.js b/Circle.js index a7b14a7..e618e09 100644 --- a/Circle.js +++ b/Circle.js @@ -1,9 +1,9 @@ -import { Surface as ARTSurface } from '@react-native-community/art'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; +import PropTypes from 'prop-types'; 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; From eb7a4725e2a82f2892690f6f5d914ac675096f55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Murat=20=C3=96NER?= Date: Sun, 17 Jan 2021 19:01:09 +0300 Subject: [PATCH 09/10] Update Circle.js --- Circle.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Circle.js b/Circle.js index e618e09..e9ca9fa 100644 --- a/Circle.js +++ b/Circle.js @@ -1,9 +1,10 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Animated, StyleSheet, Text, View } from 'react-native'; +import { Surface as ARTSurface } from '@react-native-community/art'; + import Arc from './Shapes/Arc'; import withAnimation from './withAnimation'; -import { Surface as ARTSurface } from '@react-native-community/art'; const CIRCLE = Math.PI * 2; From 7debcc48705c48f7b52eea35a4b7a45a2ef126bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Murat=20=C3=96NER?= Date: Sun, 17 Jan 2021 20:07:05 +0300 Subject: [PATCH 10/10] Update Circle.js --- Circle.js | 1 - 1 file changed, 1 deletion(-) diff --git a/Circle.js b/Circle.js index e9ca9fa..84b2ddd 100644 --- a/Circle.js +++ b/Circle.js @@ -203,7 +203,6 @@ export class ProgressCircle extends Component { textStyle, ]} allowFontScaling={allowFontScaling} - numberOfLines={1} > {!text ? formatText(progressValue) : text}