Implement strokeDasharray correctly.

Support units and percentages with whitespace separated and/or (possibly white-space surrounded) comma separated length lists.

lib/extract/extractLengthList.js

@@ -0,0 +1,14 @@
+const spaceReg = /\s+/;
+const commaReg = /,/g;
+
+export default function (lengthList) {
+    if (typeof lengthList === 'string') {
+        return lengthList.trim().replace(commaReg, ' ').split(spaceReg);
+    } else if (typeof lengthList === 'number') {
+        return [`${lengthList}`];
+    } else if (lengthList && typeof lengthList.map === 'function') {
+        return lengthList.map(d => `${d}`);
+    } else {
+        return [];
+    }
+}

lib/extract/extractStroke.js

@@ -1,8 +1,7 @@
 import extractBrush from './extractBrush';
 import extractOpacity from './extractOpacity';
 import {strokeProps} from '../props';
-
-const separator = /\s*,\s*/;
+import extractLengthList from "./extractLengthList";
 
 const caps = {
     butt: 0,
@@ -26,21 +25,22 @@ export default function(props, styleProperties) {
     });
 
     const {stroke} = props;
-    let strokeWidth = props.strokeWidth;
-    let strokeDasharray = props.strokeDasharray;
+    let {
+        strokeWidth,
+        strokeDasharray
+    } = props;
 
     if (!strokeDasharray || strokeDasharray === 'none') {
         strokeDasharray = null;
-    } else if (typeof strokeDasharray === 'string') {
-        strokeDasharray = strokeDasharray.split(separator).map(dash => +dash);
-    }
-
-    // <dasharray> It's a list of comma and/or white space separated <length>s
-    // and <percentage>s that specify the lengths of alternating dashes and gaps.
-    // If an odd number of values is provided, then the list of values is repeated
-    // to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2.
-    if (strokeDasharray && (strokeDasharray.length % 2) === 1) {
-        strokeDasharray.concat(strokeDasharray);
+    } else {
+        // <dasharray> It's a list of comma and/or white space separated <length>s
+        // and <percentage>s that specify the lengths of alternating dashes and gaps.
+        // If an odd number of values is provided, then the list of values is repeated
+        // to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2.
+        strokeDasharray = extractLengthList(strokeDasharray);
+        if (strokeDasharray && (strokeDasharray.length % 2) === 1) {
+            strokeDasharray.concat(strokeDasharray);
+        }
     }
 
     if (!strokeWidth || typeof strokeWidth !== 'string') {

lib/extract/extractText.js

@@ -2,12 +2,12 @@ import _ from 'lodash';
 //noinspection JSUnresolvedVariable
 import React, {Children} from 'react';
 import TSpan from '../../elements/TSpan';
+import extractLengthList from './extractLengthList';
 
 const fontRegExp = /^\s*((?:(?:normal|bold|italic)\s+)*)(?:(\d+(?:\.\d+)?[ptexm%])*(?:\s*\/.*?)?\s+)?\s*"?([^"]*)/i;
 const fontFamilyPrefix = /^[\s"']*/;
 const fontFamilySuffix = /[\s"']*$/;
-const spaceReg = /\s+/;
-const commaReg = /,/g;
+const commaReg = /\s*,\s*/g;
 
 const cachedFontObjectsFromString = {};
 
@@ -85,18 +85,6 @@ export function extractFont(props) {
     return _.defaults(ownedFont, font);
 }
 
-function parseSVGLengthList(delta) {
-    if (typeof delta === 'string') {
-        return delta.trim().replace(commaReg, ' ').split(spaceReg);
-    } else if (typeof delta === 'number') {
-        return [delta.toString()];
-    } else if (delta && typeof delta.map === 'function') {
-        return delta.map(d => `${d}`);
-    } else {
-        return [];
-    }
-}
-
 export default function(props, container) {
     const {
         x,
@@ -110,11 +98,11 @@ export default function(props, container) {
         children
     } = props;
 
-    const positionX = parseSVGLengthList(x);
-    const positionY = parseSVGLengthList(y);
-    const deltaX = parseSVGLengthList(dx);
-    const deltaY = parseSVGLengthList(dy);
-    rotate = parseSVGLengthList(rotate);
+    const positionX = extractLengthList(x);
+    const positionY = extractLengthList(y);
+    const deltaX = extractLengthList(dx);
+    const deltaY = extractLengthList(dy);
+    rotate = extractLengthList(rotate);
 
     let content = null;
     if (typeof children === 'string' || typeof children === 'number') {

lib/props.js

@@ -41,7 +41,7 @@ const strokeProps = {
     stroke: PropTypes.string,
     strokeWidth: numberProp,
     strokeOpacity: numberProp,
-    strokeDasharray: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.string]),
+    strokeDasharray: PropTypes.oneOfType([PropTypes.arrayOf(numberProp), PropTypes.string]),
     strokeDashoffset: numberProp,
     strokeLinecap: PropTypes.oneOf(['butt', 'square', 'round']),
     strokeLinejoin: PropTypes.oneOf(['miter', 'bevel', 'round']),