From a71ea4dcb8c781df7e9c3d3119d0561c38eb1bf0 Mon Sep 17 00:00:00 2001
From: sy <somarl@live.com>
Date: Mon, 17 Sep 2018 11:18:18 +0800
Subject: [PATCH 1/2] fix compatibilities for IE/MSEdge

---
 src/circle.tsx | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/circle.tsx b/src/circle.tsx
index e03a6ff..5fecfb2 100644
--- a/src/circle.tsx
+++ b/src/circle.tsx
@@ -43,10 +43,38 @@ export class Circle extends Component<CircleProps, CircleState> {
     textStyle: { font: 'bold 4rem Helvetica, Arial, sans-serif' }
   }
 
+  /**
+   * @desc Some browers (like IE/Edge) don't support dominant-baseLine.
+   *       It detects whether in Chrome/Firefox/Safari which has been tested to support it,
+   *       and takes all other circumstances as not supported and use the workaround instead.
+   * @ref https://github.com/arasatasaygin/is.js/blob/master/is.js
+   */
+  get dominantBaselineSupported () {
+    const W = window as any;
+    if (W.dominantBaselineSupported === void 0) {
+      const ua = navigator.userAgent.toLowerCase()
+      const supportedPatterns = [
+        /(?:chrome|crios)\/(\d+)/,
+        /(?:firefox|fxios)\/(\d+)/,
+        /version\/(\d+).+?safari/
+      ];
+
+      W.dominantBaselineSupported = supportedPatterns.some(p => !!ua.match(p));
+    }
+
+    return W.dominantBaselineSupported;
+  }
+
   get text() {
     const { progress, showPercentage, textColor, textStyle, percentSpacing, showPercentageSymbol } = this.props;
     if (!showPercentage) return;
 
+    if (!this.dominantBaselineSupported) return (
+      <text style={textStyle} fill={textColor} x={radius} y={radius} dy="0.33em" textAnchor="middle">
+        {progress}{showPercentageSymbol && <tspan dx={percentSpacing}>%</tspan>}
+      </text>
+    );
+
     return (
       <text style={textStyle} fill={textColor} x={radius} y={radius} textAnchor="middle" dominantBaseline="central">
         {progress}{showPercentageSymbol && <tspan dx={percentSpacing}>%</tspan>}

From 5387c4bf7982ba79eb31adc9ac212859b198623d Mon Sep 17 00:00:00 2001
From: sy <somarl@live.com>
Date: Mon, 17 Sep 2018 14:03:35 +0800
Subject: [PATCH 2/2] remove the ua pattern tests and add verticleSpacing

---
 README.md      |  9 +++++----
 src/circle.tsx | 34 ++++------------------------------
 2 files changed, 9 insertions(+), 34 deletions(-)

diff --git a/README.md b/README.md
index b32fc24..ebd2307 100644
--- a/README.md
+++ b/README.md
@@ -41,9 +41,9 @@ import Circle from 'react-circle';
 // All avaliable props for customization(illustrated by default values):
 // Details are ordered as: `<Type>: <Description>`
 <Circle
-  animate={true} // Boolean: Animated/Static progress
-  animationDuration="1s" // String: Length of animation
-  responsive={false} // Boolean: Make SVG adapt to parent size
+  animate={true} // Boolean: Animated/Static progress.
+  animationDuration="1s" // String: Length of animation.
+  responsive={false} // Boolean: Make SVG adapt to parent size.
   size="100" // String: Defines the size of the circle.
   lineWidth="25" // String: Defines the thickness of the circle's stroke.
   progress="0" // String: Update to change the progress and percentage.
@@ -54,7 +54,8 @@ import Circle from 'react-circle';
     font: 'bold 4rem Helvetica, Arial, sans-serif' // CSSProperties: Custom styling for percentage.
   }}
   percentSpacing={10} // Number: Adjust spacing of "%" symbol and number.
-  roundedStroke={false} // Boolean: Rounded/Flat line ends
+  verticleSpacing="0.34em" // Number/String: Adjust verticle spacing of the text.
+  roundedStroke={false} // Boolean: Rounded/Flat line ends.
   showPercentage={true} // Boolean: Show/hide percentage.
   showPercentageSymbol={true} // Boolean: Show/hide only the "%" symbol.
 />
diff --git a/src/circle.tsx b/src/circle.tsx
index 5fecfb2..e6f3a94 100644
--- a/src/circle.tsx
+++ b/src/circle.tsx
@@ -13,6 +13,7 @@ export interface CircleProps {
   size?: string;
   lineWidth?: string;
   percentSpacing?: number;
+  verticleSpacing?: number | string;
   textStyle?: CSSProperties;
   roundedStroke?: boolean;
   responsive?: boolean;
@@ -40,43 +41,16 @@ export class Circle extends Component<CircleProps, CircleState> {
     size: '100',
     lineWidth: '25',
     percentSpacing: 10,
+    verticleSpacing: "0.34em",
     textStyle: { font: 'bold 4rem Helvetica, Arial, sans-serif' }
   }
 
-  /**
-   * @desc Some browers (like IE/Edge) don't support dominant-baseLine.
-   *       It detects whether in Chrome/Firefox/Safari which has been tested to support it,
-   *       and takes all other circumstances as not supported and use the workaround instead.
-   * @ref https://github.com/arasatasaygin/is.js/blob/master/is.js
-   */
-  get dominantBaselineSupported () {
-    const W = window as any;
-    if (W.dominantBaselineSupported === void 0) {
-      const ua = navigator.userAgent.toLowerCase()
-      const supportedPatterns = [
-        /(?:chrome|crios)\/(\d+)/,
-        /(?:firefox|fxios)\/(\d+)/,
-        /version\/(\d+).+?safari/
-      ];
-
-      W.dominantBaselineSupported = supportedPatterns.some(p => !!ua.match(p));
-    }
-
-    return W.dominantBaselineSupported;
-  }
-
   get text() {
-    const { progress, showPercentage, textColor, textStyle, percentSpacing, showPercentageSymbol } = this.props;
+    const { progress, showPercentage, textColor, textStyle, percentSpacing, verticleSpacing, showPercentageSymbol } = this.props;
     if (!showPercentage) return;
 
-    if (!this.dominantBaselineSupported) return (
-      <text style={textStyle} fill={textColor} x={radius} y={radius} dy="0.33em" textAnchor="middle">
-        {progress}{showPercentageSymbol && <tspan dx={percentSpacing}>%</tspan>}
-      </text>
-    );
-
     return (
-      <text style={textStyle} fill={textColor} x={radius} y={radius} textAnchor="middle" dominantBaseline="central">
+      <text style={textStyle} fill={textColor} x={radius} y={radius} dy={verticleSpacing} textAnchor="middle">
         {progress}{showPercentageSymbol && <tspan dx={percentSpacing}>%</tspan>}
       </text>
     );