convert span frames into Span components

elements/Span.js

@@ -28,7 +28,8 @@ class Span extends Shape {
 
     render() {
         let props = this.props;
-        return <RNSVGLine
+        return null;
+        return <RNSVGSpan
             ref={ele => {this.root = ele;}}
             {...this.extractProps(props)}
             x1={props.x1.toString()}

elements/TSpan.js

@@ -19,10 +19,6 @@ class TSpan extends Component {
         font: PropTypes.object
     };
 
-    setNativeProps = (...args) => {
-
-    };
-
     render() {
         return null;
     }

elements/Text.js

@@ -22,7 +22,7 @@ class Text extends Shape {
 
     render() {
         let props = this.props;
-        console.log(extractText(props));
+
         return <RNSVGText
             ref={ele => {this.root = ele;}}
             {...this.extractProps({

lib/extract/extractText.js

@@ -1,7 +1,8 @@
 import SerializablePath from '../SerializablePath';
 import _ from 'lodash';
-import {Children} from 'react';
+import React, {Children} from 'react';
 import {fontAndRenderPropsKeys} from '../props';
+import Span from '../../elements/Span';
 
 const fontRegExp = /^\s*((?:(?:normal|bold|italic)\s+)*)(?:(\d+(?:\.\d+)?)[ptexm%]*(?:\s*\/.*?)?\s+)?\s*"?([^"]*)/i;
 const fontFamilyPrefix = /^[\s"']*/;
@@ -162,11 +163,11 @@ function parseDelta(delta) {
 }
 
 export default function(props) {
-    let frame = parseText(props);
+    let frames = parseText(props);
     let alignment;
 
-    if (frame[0]) {
+    if (frames[0]) {
-        let firstSpan = frame[0];
+        let firstSpan = frames[0];
 
         if (firstSpan.positionX === null && props.hasOwnProperty('x')) {
             firstSpan.positionX = props.x;
@@ -187,14 +188,32 @@ export default function(props) {
         }
     }
 
-    return {
+    let font = {
-        alignment,
-        frame,
-        children : null,
         fontFamily: 'Helvetica Neue',
         fontSize: 12,
         fontStyle: 'normal',
         fontWeight: 'normal',
         ...extractFont(props)
     }
+
+
+    let children = frames.map(frame => {
+        let spanProps = {
+            content: frame.content,
+            dx: frame.deltaX,
+            dy: frame.deltaY,
+            px: frame.positionX,
+            py: frame.positionY,
+            font: {
+                ...font,
+                ...extractFont(frame.props)
+            }
+        };
+        return <Span {...spanProps} />
+    })
+    // TODO: format children
+    return {
+        alignment,
+        children
+    }
 }