From ad0625f4778fbb7527f24fe93dbc2ddf524fdb40 Mon Sep 17 00:00:00 2001 From: Daniel Winkler Date: Tue, 29 Oct 2019 08:39:12 +0100 Subject: [PATCH 1/5] remove unwanted border in CircleSnail --- CircleSnail.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/CircleSnail.js b/CircleSnail.js index 3eeffb8..84c98b3 100644 --- a/CircleSnail.js +++ b/CircleSnail.js @@ -131,11 +131,7 @@ export default class CircleSnail extends Component { return null; } - const radius = size / 2 - thickness; - const offset = { - top: thickness, - left: thickness, - }; + const radius = size / 2; const directionFactor = direction === 'counter-clockwise' ? -1 : 1; @@ -167,7 +163,6 @@ export default class CircleSnail extends Component { } radius={radius} stroke={Array.isArray(color) ? color[this.state.colorIndex] : color} - offset={offset} startAngle={this.state.startAngle} endAngle={this.state.endAngle} strokeCap={strokeCap} From caaf1225ae05e0391d1479f11119c617727db2fd Mon Sep 17 00:00:00 2001 From: Daniel Winkler Date: Thu, 5 Dec 2019 10:18:39 +0100 Subject: [PATCH 2/5] change to ART import recommendation --- Circle.js | 6 +++--- CircleSnail.js | 6 +++--- Pie.js | 6 +++--- Shapes/Arc.js | 6 +++--- Shapes/Circle.js | 6 +++--- Shapes/Sector.js | 6 +++--- 6 files changed, 18 insertions(+), 18 deletions(-) diff --git a/Circle.js b/Circle.js index e199311..fdb793f 100644 --- a/Circle.js +++ b/Circle.js @@ -1,14 +1,14 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Animated, StyleSheet, Text, View } from 'react-native'; -import * as ART from '@react-native-community/art'; +import { Surface as ARTSurface } from '@react-native-community/art'; import Arc from './Shapes/Arc'; import withAnimation from './withAnimation'; const CIRCLE = Math.PI * 2; -const AnimatedSurface = Animated.createAnimatedComponent(ART.Surface); +const AnimatedSurface = Animated.createAnimatedComponent(ARTSurface); const AnimatedArc = Animated.createAnimatedComponent(Arc); const styles = StyleSheet.create({ @@ -110,7 +110,7 @@ export class ProgressCircle extends Component { const textOffset = border + thickness; const textSize = size - textOffset * 2; - const Surface = rotation ? AnimatedSurface : ART.Surface; + const Surface = rotation ? AnimatedSurface : ARTSurface; const Shape = animated ? AnimatedArc : Arc; const progressValue = animated ? this.progressValue : progress; const angle = animated diff --git a/CircleSnail.js b/CircleSnail.js index 3eeffb8..627fd82 100644 --- a/CircleSnail.js +++ b/CircleSnail.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Animated, Easing } from 'react-native'; -import * as ART from '@react-native-community/art'; +import { Surface as ARTSurface } from '@react-native-community/art'; import Arc from './Shapes/Arc'; @@ -158,7 +158,7 @@ export default class CircleSnail extends Component { }, ]} > - + - + {children} ); diff --git a/Pie.js b/Pie.js index f914028..cc6fd00 100644 --- a/Pie.js +++ b/Pie.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Animated, StyleSheet, View } from 'react-native'; -import * as ART from '@react-native-community/art'; +import { Surface as ARTSurface } from '@react-native-community/art'; import Circle from './Shapes/Circle'; import Sector from './Shapes/Sector'; @@ -9,7 +9,7 @@ import withAnimation from './withAnimation'; const CIRCLE = Math.PI * 2; -const AnimatedSurface = Animated.createAnimatedComponent(ART.Surface); +const AnimatedSurface = Animated.createAnimatedComponent(ARTSurface); const AnimatedSector = Animated.createAnimatedComponent(Sector); const styles = StyleSheet.create({ @@ -58,7 +58,7 @@ export class ProgressPie extends Component { ...restProps } = this.props; - const Surface = rotation ? AnimatedSurface : ART.Surface; + const Surface = rotation ? AnimatedSurface : ARTSurface; const Shape = animated ? AnimatedSector : Sector; const angle = animated diff --git a/Shapes/Arc.js b/Shapes/Arc.js index 6ad0010..3d37155 100644 --- a/Shapes/Arc.js +++ b/Shapes/Arc.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import * as ART from '@react-native-community/art'; +import { Shape as ARTShape, Path as ARTPath } from '@react-native-community/art'; const CIRCLE = Math.PI * 2; @@ -19,7 +19,7 @@ function makeArcPath(x, y, startAngleArg, endAngleArg, radius, direction) { : endAngle - startAngle; if (angle >= CIRCLE) { - return ART.Path() + return ARTPath() .moveTo(x + radius, y) .arc(0, radius * 2, radius, radius) .arc(0, radius * -2, radius, radius) @@ -86,7 +86,7 @@ export default class Arc extends Component { ); return ( - = CIRCLE) { - return ART.Path() + return ARTPath() .moveTo(x, y) .move(radius, 0) .arc(0, radius * 2, radius, radius) @@ -50,6 +50,6 @@ export default class Sector extends Component { angle, radius ); - return ; + return ; } } From 7efee6378373e8c400a0c85907aa16fbf5a4d299 Mon Sep 17 00:00:00 2001 From: Daniel Winkler Date: Thu, 5 Dec 2019 10:44:23 +0100 Subject: [PATCH 3/5] explicit parens around new Path() --- Shapes/Arc.js | 2 +- Shapes/Circle.js | 2 +- Shapes/Sector.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Shapes/Arc.js b/Shapes/Arc.js index 3d37155..617b614 100644 --- a/Shapes/Arc.js +++ b/Shapes/Arc.js @@ -19,7 +19,7 @@ function makeArcPath(x, y, startAngleArg, endAngleArg, radius, direction) { : endAngle - startAngle; if (angle >= CIRCLE) { - return ARTPath() + return (new ARTPath()) .moveTo(x + radius, y) .arc(0, radius * 2, radius, radius) .arc(0, radius * -2, radius, radius) diff --git a/Shapes/Circle.js b/Shapes/Circle.js index afb7bca..c001656 100644 --- a/Shapes/Circle.js +++ b/Shapes/Circle.js @@ -5,7 +5,7 @@ import { Shape as ARTShape, Path as ARTPath } from '@react-native-community/art' function makeCirclePath(x, y, radius, direction) { const arcMethod = direction === 'counter-clockwise' ? 'counterArc' : 'arc'; - return ARTPath() + return (new ARTPath()) .moveTo(x, y) .move(radius, 0) [arcMethod](0, radius * 2, radius, radius) diff --git a/Shapes/Sector.js b/Shapes/Sector.js index ffb816b..5fc7471 100644 --- a/Shapes/Sector.js +++ b/Shapes/Sector.js @@ -6,7 +6,7 @@ const CIRCLE = Math.PI * 2; function makeSectorPath(x, y, angle, radius) { if (angle >= CIRCLE) { - return ARTPath() + return (new ARTPath()) .moveTo(x, y) .move(radius, 0) .arc(0, radius * 2, radius, radius) From a4cae8913749959f1eeb18cc37d34e89b1724e1a Mon Sep 17 00:00:00 2001 From: Daniel Winkler Date: Thu, 5 Dec 2019 15:06:58 +0100 Subject: [PATCH 4/5] change dependency to fork --- package.json | 4 ++-- yarn.lock | 22 +++++++++++++++++++++- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 772a537..dd89941 100644 --- a/package.json +++ b/package.json @@ -50,8 +50,8 @@ "prettier": "^1.16.4" }, "dependencies": { - "prop-types": "^15.7.2", - "@react-native-community/art": "^1.0.3" + "@react-native-community/art": "https://github.com/danielwinkler/react-native-community-art#790437fc5b97bc343360a981d2f0bb3936adc409", + "prop-types": "^15.7.2" }, "typings": "index.d.ts" } diff --git a/yarn.lock b/yarn.lock index ae24dfc..9c1986a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -90,6 +90,14 @@ lodash "^4.17.11" to-fast-properties "^2.0.0" +"@react-native-community/art@https://github.com/danielwinkler/react-native-community-art#790437fc5b97bc343360a981d2f0bb3936adc409": + version "1.0.3" + resolved "https://github.com/danielwinkler/react-native-community-art#790437fc5b97bc343360a981d2f0bb3936adc409" + dependencies: + art "^0.10.3" + invariant "^2.2.4" + prop-types "^15.7.2" + acorn-jsx@^5.0.0: version "5.0.1" resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.0.1.tgz#32a064fd925429216a09b141102bfdd185fae40e" @@ -165,6 +173,11 @@ array-includes@^3.0.3: define-properties "^1.1.2" es-abstract "^1.7.0" +art@^0.10.3: + version "0.10.3" + resolved "https://registry.yarnpkg.com/art/-/art-0.10.3.tgz#b01d84a968ccce6208df55a733838c96caeeaea2" + integrity sha512-HXwbdofRTiJT6qZX/FnchtldzJjS3vkLJxQilc3Xj+ma2MXjY4UAyQ0ls1XZYVnDvVIBiFZbC6QsvtW86TD6tQ== + ast-types-flow@0.0.7, ast-types-flow@^0.0.7: version "0.0.7" resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad" @@ -780,6 +793,13 @@ inquirer@^5.2.0: strip-ansi "^4.0.0" through "^2.3.6" +invariant@^2.2.4: + version "2.2.4" + resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" + integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== + dependencies: + loose-envify "^1.0.0" + is-arrayish@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" @@ -905,7 +925,7 @@ lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d" integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg== -loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== From 8041ac4fb2a6d8a0ba22ef7fc3af7ec13406000b Mon Sep 17 00:00:00 2001 From: Daniel Winkler Date: Fri, 6 Dec 2019 15:35:33 +0100 Subject: [PATCH 5/5] update art dependency --- package.json | 2 +- yarn.lock | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index dd89941..8685267 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "prettier": "^1.16.4" }, "dependencies": { - "@react-native-community/art": "https://github.com/danielwinkler/react-native-community-art#790437fc5b97bc343360a981d2f0bb3936adc409", + "@react-native-community/art": "https://github.com/danielwinkler/react-native-community-art", "prop-types": "^15.7.2" }, "typings": "index.d.ts" diff --git a/yarn.lock b/yarn.lock index 9c1986a..5cca4ab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -90,9 +90,9 @@ lodash "^4.17.11" to-fast-properties "^2.0.0" -"@react-native-community/art@https://github.com/danielwinkler/react-native-community-art#790437fc5b97bc343360a981d2f0bb3936adc409": +"@react-native-community/art@https://github.com/danielwinkler/react-native-community-art": version "1.0.3" - resolved "https://github.com/danielwinkler/react-native-community-art#790437fc5b97bc343360a981d2f0bb3936adc409" + resolved "https://github.com/danielwinkler/react-native-community-art#4d31a67f538807e89111bb35ec0e30587b57a61f" dependencies: art "^0.10.3" invariant "^2.2.4"