From 4be3f4e314b82e91a9b0d52b66903c5f14e184c5 Mon Sep 17 00:00:00 2001
From: Jacob Lauritzen <jacsebl@hotmail.com>
Date: Fri, 29 Dec 2017 10:05:48 +0100
Subject: [PATCH] Improve readability

---
 src/AnimatedCircularProgress.js |  8 +++++-
 src/CircularProgress.js         | 46 +++++++++++++++++++++------------
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/AnimatedCircularProgress.js b/src/AnimatedCircularProgress.js
index 00c1948..5f67ab2 100644
--- a/src/AnimatedCircularProgress.js
+++ b/src/AnimatedCircularProgress.js
@@ -1,6 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Animated, AppState, Easing, View, ViewPropTypes } from 'react-native';
+import {
+  Animated,
+  AppState,
+  Easing,
+  View,
+  ViewPropTypes
+} from 'react-native';
 import CircularProgress from './CircularProgress';
 const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress);
 
diff --git a/src/CircularProgress.js b/src/CircularProgress.js
index 8568f84..9a4ecbd 100644
--- a/src/CircularProgress.js
+++ b/src/CircularProgress.js
@@ -8,7 +8,6 @@ import MetricsPath from 'art/metrics/path';
 export default class CircularProgress extends React.Component {
 
   circlePath(cx, cy, r, startDegree, endDegree) {
-
     let p = Path();
     p.path.push(0, cx + r, cy);
     p.path.push(4, cx, cy, r, startDegree * Math.PI / 180, endDegree * Math.PI / 180, 1);
@@ -20,12 +19,34 @@ export default class CircularProgress extends React.Component {
   }
 
   render() {
-    const { size, width, backgroundWidth, tintColor, backgroundColor, style, rotation, linecap, children } = this.props;
-    const backgroundPath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, 360 * .9999);
+    const {
+      size,
+      width,
+      backgroundWidth,
+      tintColor,
+      backgroundColor,
+      style,
+      rotation,
+      linecap,
+      children
+    } = this.props;
 
     const fill = this.extractFill(this.props.fill);
+    const backgroundPath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, 360 * .9999);
     const circlePath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, (360 * .9999) * fill / 100);
     const offset = size - (width * 2);
+
+    const childContainerStyle = {
+      position: 'absolute',
+      left: width,
+      top: width,
+      width: offset,
+      height: offset,
+      borderRadius: offset / 2,
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+
     return (
       <View style={style}>
         <Surface
@@ -41,20 +62,11 @@ export default class CircularProgress extends React.Component {
                    strokeCap={linecap}/>
           </Group>
         </Surface>
-        {children && <View
-          style={{
-            position: 'absolute',
-            left: width,
-            top: width,
-            width: offset,
-            height: offset,
-            borderRadius: offset / 2,
-            alignItems: 'center',
-            justifyContent: 'center'
-          }}
-        >
-          {children(fill)}
-        </View>}
+        {children && (
+          <View style={childContainerStyle}>
+            {children(fill)}
+          </View>
+        )}
       </View>
     )
   }